redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

МÐНоÐСоздан компоент Steps

Browse source
This commit is contained in:
Web-serfer 2026-04-04 16:18:55 +05:00
parent d5286ab980
commit 00f9b24a60
9 changed files with 1420 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

120
frontend/src/components/layout/header/Header.astro
View file

@ -8,17 +8,17 @@ import { COMPANY } from '@constants';
<header class="header-wrapper" id="header">
<!-- 1. Контейнер шапки -->
<div class="site-container header-container">
<div class="header-column header-left">
<div class="header-column header-left animate-load" data-delay="0">
<Logo />
</div>
<!--Navbar -->
<div class="header-column header-center">
<Navbar class="desktop-nav" />
<div class="header-column header-center desktop-nav animate-load" data-delay="100">
<Navbar />
</div>
<!-- Phone -->
<div class="header-column header-right">
<div class="header-column header-right animate-load" data-delay="200">
<div class="header-actions">
<a href={`tel:${COMPANY.phone}`} class="header-phone">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="phone-icon">
@ -37,44 +37,13 @@ import { COMPANY } from '@constants';
</div>
<!-- 2. Линия прогресса (теперь под контейнером, с высоким z-index) -->
<div class="header-progress-container">
<div class="header-progress-container animate-load" data-delay="300">
<div class="header-progress-bar" id="progress-bar"></div>
</div>
</header>
<MobileMenu />
<script>
document.addEventListener('DOMContentLoaded', () => {
const burgerBtn = document.getElementById('burger-btn');
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
const progressBar = document.getElementById('progress-bar');
const header = document.getElementById('header');
function updateScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && docHeight > 0) {
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.style.width = `${Math.min(100, Math.max(0, scrollPercent))}%`;
}
if (scrollTop > 10) header?.classList.add('scrolled');
else header?.classList.remove('scrolled');
}
window.addEventListener('scroll', updateScroll, { passive: true });
burgerBtn?.addEventListener('click', () => {
mobileMenuOverlay?.classList.toggle('active');
burgerBtn?.classList.toggle('active');
document.body.style.overflow = mobileMenuOverlay?.classList.contains('active') ? 'hidden' : '';
});
updateScroll();
});
</script>
<style>
.header-wrapper {
position: fixed;
@ -184,7 +153,7 @@ import { COMPANY } from '@constants';
.header-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-gold) 0%, #f0d68a 50%, var(--color-gold) 100%);
background: linear-gradient(90deg, #eac26e 0%, #f0d68a 50%, #eac26e 100%);
box-shadow: 0 0 10px rgba(234, 194, 110, 0.5);
}
@ -201,7 +170,7 @@ import { COMPANY } from '@constants';
}
.burger-line {
width: 100%; height: 2.5px;
background-color: var(--color-primary);
background-color: #1e3050;
border-radius: 4px; transition: 0.3s;
}
@ -209,6 +178,35 @@ import { COMPANY } from '@constants';
.burger-btn.active .burger-line:nth-child(2) { opacity: 0; }
.burger-btn.active .burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
.animate-load {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Задержки для последовательного появления */
.header-left[data-delay="0"] { transition-delay: 0s; }
.header-center[data-delay="100"] { transition-delay: 0.1s; }
.header-right[data-delay="200"] { transition-delay: 0.2s; }
.header-progress-container[data-delay="300"] { transition-delay: 0.3s; }
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load {
opacity: 1;
transform: none;
transition: none;
}
}
@media (max-width: 992px) {
.header-container { display: flex; justify-content: space-between; height: 70px; }
.header-center { display: none; }
@ -228,4 +226,48 @@ import { COMPANY } from '@constants';
@media (max-width: 767px) {
.header-container { height: 64px; padding: 0 1rem; }
}
</style>
</style>
<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);
});
});
document.addEventListener('DOMContentLoaded', () => {
const burgerBtn = document.getElementById('burger-btn');
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
const progressBar = document.getElementById('progress-bar');
const header = document.getElementById('header');
function updateScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && docHeight > 0) {
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.style.width = `${Math.min(100, Math.max(0, scrollPercent))}%`;
}
if (scrollTop > 10) header?.classList.add('scrolled');
else header?.classList.remove('scrolled');
}
window.addEventListener('scroll', updateScroll, { passive: true });
burgerBtn?.addEventListener('click', () => {
mobileMenuOverlay?.classList.toggle('active');
burgerBtn?.classList.toggle('active');
document.body.style.overflow = mobileMenuOverlay?.classList.contains('active') ? 'hidden' : '';
});
updateScroll();
});
</script>