Новы глобальные изменения компонентоы
This commit is contained in:
Web-serfer
parent
5d7bb04bf1
commit
a269d3459e
43 changed files with 1667 additions and 517 deletions
|
|
@ -39,7 +39,7 @@ const {
|
|||
modalTarget,
|
||||
bgImage = "",
|
||||
minHeight = "100vh",
|
||||
headerOffset = "80px",
|
||||
headerOffset = "10px",
|
||||
layout = "default",
|
||||
sideImage = "",
|
||||
sideImageAlt = "",
|
||||
|
|
@ -50,7 +50,6 @@ const {
|
|||
const showImage = layout === 'with-image' && sideImage;
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
|
@ -67,7 +66,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
class="hero-section"
|
||||
style={`min-height: ${minHeight}; padding-top: ${headerOffset}; ${bgImage ? `background-image: url("${bgImage}")` : ''}`}
|
||||
>
|
||||
<!-- КРИТИЧЕСКИ: img для LCP - позволяет Lighthouse засечь Largest Contentful Paint -->
|
||||
|
||||
{bgImage && (
|
||||
<img
|
||||
src={bgImage}
|
||||
|
|
@ -185,7 +184,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* LCP helper image - скрыт визуально, но видим для Lighthouse */
|
||||
|
||||
.hero-bg-lcp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -361,7 +360,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 3.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
|
|
@ -461,7 +460,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
.hero-grid {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1.5rem 1.5rem 2rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
|
|
@ -493,7 +492,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
|
||||
@media (max-width: 767px) {
|
||||
.hero-section {
|
||||
padding-top: 70px;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
|
|
@ -516,7 +515,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
|
||||
@media (max-width: 480px) {
|
||||
.hero-section {
|
||||
padding-top: 70px;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
|
|
|
|||
180
frontend/src/components/base/Toast.astro
Normal file
180
frontend/src/components/base/Toast.astro
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
---
|
||||
---
|
||||
|
||||
<div class="toast-container"></div>
|
||||
|
||||
<script>
|
||||
class ToastManager {
|
||||
static instance: ToastManager;
|
||||
container: HTMLElement | null = null;
|
||||
|
||||
static getInstance() {
|
||||
if (!ToastManager.instance) {
|
||||
ToastManager.instance = new ToastManager();
|
||||
}
|
||||
return ToastManager.instance;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this.container) {
|
||||
this.container = document.querySelector('.toast-container');
|
||||
if (!this.container) {
|
||||
this.container = document.createElement('div');
|
||||
this.container.className = 'toast-container';
|
||||
document.body.insertBefore(this.container, document.body.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
show(message: string, type: string = 'info', duration: number = 3000) {
|
||||
this.init();
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast-item toast-${type}`;
|
||||
toast.innerHTML = `
|
||||
<div class="toast-icon">
|
||||
${type === 'success' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>' : ''}
|
||||
${type === 'error' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' : ''}
|
||||
${type === 'warning' ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M240 176h32v176h-32zm0 208h32v32h-32z"/><path fill="currentColor" d="M274.014 16h-36.028L16 445.174V496h480v-50.826ZM464 464H48v-11.041L256 50.826l208 402.133Z"/></svg>' : ''}
|
||||
${type === 'info' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' : ''}
|
||||
</div>
|
||||
<span class="toast-message">${message}</span>
|
||||
<button class="toast-close" aria-label="Закрыть">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
const closeBtn = toast.querySelector('.toast-close');
|
||||
closeBtn?.addEventListener('click', () => this.remove(toast));
|
||||
|
||||
this.container?.appendChild(toast);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
toast.classList.add('show');
|
||||
});
|
||||
|
||||
if (duration > 0) {
|
||||
setTimeout(() => this.remove(toast), duration);
|
||||
}
|
||||
}
|
||||
|
||||
remove(toast: Element) {
|
||||
toast.classList.remove('show');
|
||||
toast.classList.add('hide');
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
(window as any).toast = ToastManager.getInstance();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
:global(.toast-item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
:global(.toast-item.show) {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:global(.toast-item.hide) {
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global(.toast-success) {
|
||||
border-left-color: #22c55e;
|
||||
}
|
||||
|
||||
:global(.toast-error) {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
:global(.toast-warning) {
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
:global(.toast-info) {
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
:global(.toast-item .toast-icon) {
|
||||
flex-shrink: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
:global(.toast-item .toast-icon svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.toast-success .toast-icon) { color: #22c55e; }
|
||||
:global(.toast-error .toast-icon) { color: #ef4444; }
|
||||
:global(.toast-warning .toast-icon) { color: #f59e0b; }
|
||||
:global(.toast-info .toast-icon) { color: #3b82f6; }
|
||||
|
||||
:global(.toast-item .toast-message) {
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
:global(.toast-item .toast-close) {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:global(.toast-item .toast-close:hover) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.toast-item .toast-close svg) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.toast-container {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,12 @@ const { initialLikes = 0, initialDislikes = 0, postId } = Astro.props;
|
|||
---
|
||||
|
||||
<div class="post-reactions" data-post-id={postId}>
|
||||
<button class="reaction-btn like-btn" data-action="like" aria-label="Нравится">
|
||||
<button
|
||||
class="reaction-btn like-btn"
|
||||
data-action="like"
|
||||
aria-label="Нравится"
|
||||
type="button"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="reaction-icon">
|
||||
<path d="M7 10v12"></path>
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>
|
||||
|
|
@ -17,7 +22,12 @@ const { initialLikes = 0, initialDislikes = 0, postId } = Astro.props;
|
|||
<span class="reaction-count" data-count="likes">{initialLikes}</span>
|
||||
</button>
|
||||
|
||||
<button class="reaction-btn dislike-btn" data-action="dislike" aria-label="Не нравится">
|
||||
<button
|
||||
class="reaction-btn dislike-btn"
|
||||
data-action="dislike"
|
||||
aria-label="Не нравится"
|
||||
type="button"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="reaction-icon">
|
||||
<path d="M17 14V2"></path>
|
||||
<path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path>
|
||||
|
|
@ -87,53 +97,160 @@ const { initialLikes = 0, initialDislikes = 0, postId } = Astro.props;
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.toast-link) {
|
||||
color: #60a5fa;
|
||||
text-decoration: underline;
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:global(.toast-link:hover) {
|
||||
color: #93c5fd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.post-reactions').forEach((container) => {
|
||||
const likeBtn = container.querySelector('.like-btn');
|
||||
const dislikeBtn = container.querySelector('.dislike-btn');
|
||||
import { pb } from '../../lib/pb';
|
||||
|
||||
console.log('PostReactionButtons loaded');
|
||||
|
||||
function showToast(message: string, type: string = 'info', duration: number = 3000, link?: { text: string; href: string }) {
|
||||
console.log('showToast called:', message, type);
|
||||
const container = document.querySelector('.toast-container');
|
||||
console.log('toast-container found:', container);
|
||||
if (!container) {
|
||||
console.error('Toast container not found!');
|
||||
return;
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast-item toast-${type}`;
|
||||
toast.innerHTML = `
|
||||
<div class="toast-icon">
|
||||
${type === 'success' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>' : ''}
|
||||
${type === 'error' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' : ''}
|
||||
${type === 'warning' ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M240 176h32v176h-32zm0 208h32v32h-32z"/><path fill="currentColor" d="M274.014 16h-36.028L16 445.174V496h480v-50.826ZM464 464H48v-11.041L256 50.826l208 402.133Z"/></svg>' : ''}
|
||||
${type === 'info' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' : ''}
|
||||
</div>
|
||||
<span class="toast-message">${message}</span>
|
||||
${link ? `<a href="${link.href}" class="toast-link">${link.text}</a>` : ''}
|
||||
<button class="toast-close" aria-label="Закрыть">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
const closeBtn = toast.querySelector('.toast-close');
|
||||
closeBtn?.addEventListener('click', () => {
|
||||
toast.classList.remove('show');
|
||||
toast.classList.add('hide');
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
});
|
||||
|
||||
container.appendChild(toast);
|
||||
requestAnimationFrame(() => toast.classList.add('show'));
|
||||
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
toast.classList.add('hide');
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVote(postId: string, voteType: 'like' | 'dislike') {
|
||||
const container = document.querySelector(`[data-post-id="${postId}"]`);
|
||||
if (!container) return;
|
||||
|
||||
const likeBtn = container.querySelector('.like-btn') as HTMLButtonElement;
|
||||
const dislikeBtn = container.querySelector('.dislike-btn') as HTMLButtonElement;
|
||||
const likesCount = container.querySelector('[data-count="likes"]');
|
||||
const dislikesCount = container.querySelector('[data-count="dislikes"]');
|
||||
|
||||
let likes = parseInt(likesCount?.textContent || '0');
|
||||
let dislikes = parseInt(dislikesCount?.textContent || '0');
|
||||
let userAction: 'like' | 'dislike' | null = null;
|
||||
if (!pb.authStore.isValid) {
|
||||
console.log('pb.authStore.isValid:', pb.authStore.isValid);
|
||||
console.log('pb.authStore.model:', pb.authStore.model);
|
||||
console.log('pb.authStore.token:', pb.authStore.token ? 'exists' : 'none');
|
||||
showToast('Войдите, чтобы голосовать', 'warning', 5000, { text: 'Войти', href: '/auth/sign-in' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('post_id', postId);
|
||||
formData.append('vote_type', voteType);
|
||||
|
||||
const response = await fetch('/api/votes', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ post_id: postId, vote_type: voteType }),
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
console.error('Vote error response:', error);
|
||||
throw new Error(error.message || error.details || 'Ошибка голосования');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (likesCount) likesCount.textContent = result.likes.toString();
|
||||
if (dislikesCount) dislikesCount.textContent = result.dislikes.toString();
|
||||
|
||||
if (result.userVote === 'like') {
|
||||
likeBtn?.classList.add('active');
|
||||
dislikeBtn?.classList.remove('active');
|
||||
} else if (result.userVote === 'dislike') {
|
||||
dislikeBtn?.classList.add('active');
|
||||
likeBtn?.classList.remove('active');
|
||||
} else {
|
||||
likeBtn?.classList.remove('active');
|
||||
dislikeBtn?.classList.remove('active');
|
||||
}
|
||||
|
||||
showToast('Ваш голос учтён', 'success', 2000);
|
||||
} catch (error) {
|
||||
console.error('Ошибка голосования:', error);
|
||||
showToast('Не удалось отправить голос. Попробуйте позже.', 'error', 3000);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.post-reactions').forEach((container) => {
|
||||
const postId = (container as HTMLElement).dataset.postId;
|
||||
const likeBtn = container.querySelector('.like-btn');
|
||||
const dislikeBtn = container.querySelector('.dislike-btn');
|
||||
|
||||
async function loadUserVote() {
|
||||
if (!pb.authStore.isValid) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/votes?post_id=${postId}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.userVote === 'like') {
|
||||
likeBtn?.classList.add('active');
|
||||
} else if (result.userVote === 'dislike') {
|
||||
dislikeBtn?.classList.add('active');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Ошибка загрузки голоса:', e);
|
||||
}
|
||||
}
|
||||
|
||||
loadUserVote();
|
||||
|
||||
likeBtn?.addEventListener('click', () => {
|
||||
if (userAction === 'like') {
|
||||
likes--;
|
||||
userAction = null;
|
||||
likeBtn.classList.remove('active');
|
||||
} else {
|
||||
if (userAction === 'dislike') {
|
||||
dislikes--;
|
||||
dislikeBtn?.classList.remove('active');
|
||||
}
|
||||
likes++;
|
||||
userAction = 'like';
|
||||
likeBtn.classList.add('active');
|
||||
}
|
||||
if (likesCount) likesCount.textContent = likes.toString();
|
||||
if (dislikesCount) dislikesCount.textContent = dislikes.toString();
|
||||
if (postId) handleVote(postId, 'like');
|
||||
});
|
||||
|
||||
dislikeBtn?.addEventListener('click', () => {
|
||||
if (userAction === 'dislike') {
|
||||
dislikes--;
|
||||
userAction = null;
|
||||
dislikeBtn.classList.remove('active');
|
||||
} else {
|
||||
if (userAction === 'like') {
|
||||
likes--;
|
||||
likeBtn?.classList.remove('active');
|
||||
}
|
||||
dislikes++;
|
||||
userAction = 'dislike';
|
||||
dislikeBtn.classList.add('active');
|
||||
}
|
||||
if (likesCount) likesCount.textContent = likes.toString();
|
||||
if (dislikesCount) dislikesCount.textContent = dislikes.toString();
|
||||
if (postId) handleVote(postId, 'dislike');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
---
|
||||
import telegramIcon from '../../icons/telegram.svg?raw';
|
||||
import vkIcon from '../../icons/vk.svg?raw';
|
||||
import whatsappIcon from '../../icons/whatsapp.svg?raw';
|
||||
import okIcon from '../../icons/ok.svg?raw';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
url: string;
|
||||
|
|
@ -22,9 +27,7 @@ const encodedUrl = encodeURIComponent(url);
|
|||
class="social-icon telegram"
|
||||
aria-label="Поделиться в Telegram"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
||||
</svg>
|
||||
<span class="icon-wrapper" set:html={telegramIcon} />
|
||||
</a>
|
||||
|
||||
<!-- VK -->
|
||||
|
|
@ -35,9 +38,7 @@ const encodedUrl = encodeURIComponent(url);
|
|||
class="social-icon vk"
|
||||
aria-label="Поделиться в VK"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.391 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1-1.49-1.135-1.744-1.135-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.677.847 2.49 2.27 4.675 2.862 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.204.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.27-1.422 2.18-3.61 2.18-3.61.119-.254.322-.491.763-.491h1.744c.525 0 .644.27.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.796.779 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z"/>
|
||||
</svg>
|
||||
<span class="icon-wrapper" set:html={vkIcon} />
|
||||
</a>
|
||||
|
||||
<!-- WhatsApp -->
|
||||
|
|
@ -48,9 +49,7 @@ const encodedUrl = encodeURIComponent(url);
|
|||
class="social-icon whatsapp"
|
||||
aria-label="Поделиться в WhatsApp"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
|
||||
</svg>
|
||||
<span class="icon-wrapper" set:html={whatsappIcon} />
|
||||
</a>
|
||||
|
||||
<!-- Одноклассники -->
|
||||
|
|
@ -61,9 +60,7 @@ const encodedUrl = encodeURIComponent(url);
|
|||
class="social-icon odnoklassniki"
|
||||
aria-label="Поделиться в Одноклассниках"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M14.505 17.043c.098.07.222.102.373.102.15 0 .274-.032.372-.102a.597.597 0 0 0 .214-.348.89.89 0 0 0 .064-.408 1.09 1.09 0 0 0-.136-.443c-.09-.153-.212-.277-.365-.373l-.01-.006c-.154-.097-.275-.222-.363-.373a.997.997 0 0 1-.136-.438.86.86 0 0 1 .063-.397.577.577 0 0 1 .204-.338.636.636 0 0 1 .372-.102c.15 0 .274.034.372.102a.577.577 0 0 1 .204.338.86.86 0 0 1 .063.397.997.997 0 0 1-.136.438c-.088.151-.209.276-.363.373l-.01.006c-.153.096-.275.22-.365.373a1.09 1.09 0 0 0-.136.443.89.89 0 0 0 .064.408.597.597 0 0 0 .214.348zM12 13.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm6.793-9.216A11.952 11.952 0 0 0 12 .5C5.373.5.008 5.865.008 12.5c0 2.768.929 5.372 2.534 7.458.065.085.136.165.208.244.016.018.034.034.05.051l.01.011c.135.147.277.288.425.421.043.039.087.077.131.114.129.111.263.216.4.315.076.056.154.109.233.161.116.077.235.149.357.217.095.054.191.105.29.151.115.054.234.102.355.145.097.034.195.065.295.091.12.032.241.058.365.079.097.016.195.03.293.039.131.012.264.017.398.017.135 0 .268-.005.4-.017.098-.009.196-.023.293-.039.124-.021.245-.047.365-.079.1-.026.198-.057.295-.091.121-.043.24-.091.355-.145.099-.046.195-.097.29-.151.122-.068.241-.14.357-.217.079-.052.157-.105.233-.161.137-.099.271-.204.4-.315.044-.037.088-.075.131-.114.148-.133.29-.274.425-.421l.01-.011c.016-.017.034-.033.05-.051.072-.079.143-.159.208-.244A11.953 11.953 0 0 0 23.992 12.5C23.992 5.865 18.627.5 12 .5z"/>
|
||||
</svg>
|
||||
<span class="icon-wrapper" set:html={okIcon} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +94,7 @@ const encodedUrl = encodeURIComponent(url);
|
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.social-icon svg {
|
||||
.social-icon :global(svg) {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,448 +0,0 @@
|
|||
---
|
||||
import Button from '@components/base/Button.astro';
|
||||
|
||||
const badgeText = "ЗАЩИТА ВОДИТЕЛЕЙ В СУРГУТЕ";
|
||||
const titleWhite = "Защитите свои права";
|
||||
const titleGold = "и водительское удостоверение";
|
||||
const description = "Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры.";
|
||||
const btnPrimary = "Бесплатная консультация";
|
||||
const btnSecondary = "Мои услуги";
|
||||
|
||||
const bgImageUrl = "/images/home/bg_hero.avif";
|
||||
const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
|
||||
---
|
||||
|
||||
<section class="hero-section">
|
||||
<img src={bgImageUrl} alt="" class="hero-bg-image" decoding="async" />
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="site-container hero-grid">
|
||||
<div class="hero-content">
|
||||
<div class="badge animate-load" data-delay="100">
|
||||
<span class="status-dot"></span>
|
||||
{badgeText}
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
<span class="text-white animate-load" data-delay="300">{titleWhite}</span>
|
||||
<br />
|
||||
<span class="text-gold animate-load" data-delay="500">{titleGold}</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-description animate-load" data-delay="700">{description}</p>
|
||||
|
||||
<div class="hero-actions animate-load" data-delay="900">
|
||||
<Button variant="gold" size="lg" id="consultation-btn" data-modal-target="consultation-modal">
|
||||
{btnPrimary}
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" href="/services" class="btn-services">
|
||||
{btnSecondary}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-image-wrapper animate-load" data-delay="400">
|
||||
<div class="image-composition">
|
||||
<img src={lawyerImageUrl} alt="Юрист" class="main-image" width="380" height="500" fetchpriority="high" decoding="async" />
|
||||
<div class="experience-badge animate-load" data-delay="1100">
|
||||
<span class="exp-number">20+</span>
|
||||
<span class="exp-text">ЛЕТ ОПЫТА В СУДАХ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Анимация при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const animatedElements = document.querySelectorAll('.animate-load');
|
||||
|
||||
animatedElements.forEach((el) => {
|
||||
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url("/images/home/bg_hero.avif");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
margin: 0 !important;
|
||||
padding-top: 80px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg-image {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1.2;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
|
||||
.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.animate-load.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Специальная анимация для изображения - сбоку */
|
||||
.hero-image-wrapper.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateX(50px) scale(0.95);
|
||||
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hero-image-wrapper.animate-load.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
/* Анимация для бейджа опыта - снизу с масштабом */
|
||||
.experience-badge.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.9);
|
||||
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.experience-badge.animate-load.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
/* Задержки для последовательного появления */
|
||||
.badge[data-delay="100"] { transition-delay: 0.1s; }
|
||||
.hero-image-wrapper[data-delay="400"] { transition-delay: 0.4s; }
|
||||
.text-white[data-delay="300"] { transition-delay: 0.3s; }
|
||||
.text-gold[data-delay="500"] { transition-delay: 0.5s; }
|
||||
.hero-description[data-delay="700"] { transition-delay: 0.7s; }
|
||||
.hero-actions[data-delay="900"] { transition-delay: 0.9s; }
|
||||
.experience-badge[data-delay="1100"] { transition-delay: 1.1s; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 0.6rem;
|
||||
background-color: rgba(234, 194, 110, 0.15);
|
||||
border: 1px solid rgba(234, 194, 110, 0.3);
|
||||
color: #eac26e; padding: 0.5rem 1rem; border-radius: 6px;
|
||||
font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
/* Мерцающая точка "На связи" */
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #22c55e;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2rem, 5vw, 3.8rem);
|
||||
line-height: 1.15;
|
||||
margin: 0 0 2rem 0;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-title .text-white,
|
||||
.hero-title .text-gold {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-white { color: #ffffff; }
|
||||
.text-gold { color: #eac26e; }
|
||||
|
||||
.hero-description {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero-actions > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Кастомные стили для кнопки "Мои услуги" */
|
||||
.btn-services {
|
||||
background: transparent !important;
|
||||
border: 2px solid #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.875rem 1.5rem !important;
|
||||
font-size: 1.125rem !important;
|
||||
line-height: 1.75rem !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
height: auto !important;
|
||||
min-height: 3.25rem !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-services::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn-services::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
|
||||
transition: width 0.4s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn-services:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
border-color: #eac26e !important;
|
||||
color: #eac26e !important;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(234, 194, 110, 0.3);
|
||||
}
|
||||
|
||||
.btn-services:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-services:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-services:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 15px rgba(234, 194, 110, 0.2);
|
||||
}
|
||||
|
||||
.hero-image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-composition {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.image-composition::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
right: -20px;
|
||||
bottom: 10px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
transform: rotate(3deg);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
animation: fadeInRotate 0.8s ease 0.6s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInRotate {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.main-image {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
border: 8px solid #ffffff;
|
||||
filter: grayscale(100%);
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.experience-badge {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: -30px;
|
||||
background: #ffffff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.exp-number {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
color: #1e3050;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exp-text {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
color: #535e6c;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* АДАПТИВНОСТЬ */
|
||||
@media (max-width: 992px) {
|
||||
.hero-section {
|
||||
padding-top: 70px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1.5rem 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image-wrapper {
|
||||
margin-top: 3rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.experience-badge {
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
/* На мобильных меняем направление анимации изображения */
|
||||
.hero-image-wrapper.animate-load {
|
||||
transform: translateY(40px) scale(0.95);
|
||||
}
|
||||
|
||||
.hero-image-wrapper.animate-load.is-visible {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero-section {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-actions > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-composition::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-load,
|
||||
.hero-image-wrapper.animate-load,
|
||||
.experience-badge.animate-load {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.image-composition::before {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -121,7 +121,7 @@ const {
|
|||
description: "Полное ведение дела в суде: от подготовки искового до исполнения решения.",
|
||||
price: "от 30 000 ₽",
|
||||
icon: "🏛️",
|
||||
href: "/services/court-defense",
|
||||
href: "/services/court-representation",
|
||||
features: ["Подготовка иска/жалобы", "Представительство на заседаниях", "Сбор доказательств", "Исполнение решения"]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue