diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index b8695d0..5ef8266 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -212,14 +212,15 @@ onMounted(async () => { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; + flex-direction: row; position: relative; overflow: hidden; - padding: 0 1rem; + padding: 0; } .landing-content { width: 55%; - padding: 5% 0; + padding: 5% 2rem; position: relative; z-index: 2; display: flex; @@ -323,19 +324,7 @@ onMounted(async () => { .cta-buttons { display: flex; gap: 1.25rem; - margin-bottom: 5rem; -} - -@media (max-width: 480px) { - .cta-buttons { - flex-direction: column; - gap: 1rem; - } - - .action-btn { - width: 100%; - justify-content: center; - } + margin-bottom: 2rem; } .action-btn { @@ -425,7 +414,6 @@ onMounted(async () => { .mobile-showcase { width: 45%; height: 100%; - right: 0; display: flex; justify-content: center; align-items: center; @@ -499,6 +487,419 @@ onMounted(async () => { 100% { transform: translateY(-30px) scale(0.95) rotate(3deg); } } +/* Адаптивность для лендинга */ +@media (max-width: 1200px) { + .app-name { + font-size: 4.5rem; + } + + .phone-mockup { + width: 250px; + height: 500px; + } + + .tagline { + font-size: 1.4rem; + margin-bottom: 2.5rem; + } + + .landing-features { + gap: 1.2rem; + } + + .feature h3 { + font-size: 1.1rem; + } + + .feature p { + font-size: 0.9rem; + } +} + +@media (max-width: 1024px) { + .app-name { + font-size: 4rem; + } + + .tagline { + font-size: 1.3rem; + margin-bottom: 2rem; + } + + .feature { + padding: 1.2rem; + } + + .feature-icon { + width: 50px; + height: 50px; + margin-bottom: 1.2rem; + } + + .feature-icon i { + font-size: 1.5rem; + } + + .action-btn { + padding: 0.9rem 1.8rem; + } + + .phone-mockup { + width: 220px; + height: 450px; + } +} + +@media (max-width: 900px) { + .landing-page { + flex-direction: column; + } + + .landing-content { + width: 100%; + padding: 4rem 2rem 2rem; + text-align: center; + } + + .app-name { + justify-content: center; + } + + .mobile-showcase { + width: 100%; + height: auto; + margin: 0 0 4rem; + } + + .phone-mockup { + transform: rotate(0); + width: 220px; + height: 440px; + margin-top: -30px; + } + + .landing-features { + margin-bottom: 2rem; + } + + .cta-buttons { + justify-content: center; + } + + .feature-icon { + margin: 0 auto 1.2rem; + } +} + +@media (max-width: 768px) { + .app-name { + font-size: 3.5rem; + } + + .tagline { + font-size: 1.2rem; + margin-bottom: 2rem; + } + + .landing-content { + padding: 3.5rem 1.5rem 1.5rem; + } + + .landing-features { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .cta-buttons { + gap: 1rem; + } + + .action-btn { + padding: 0.8rem 1.6rem; + font-size: 0.95rem; + } + + .phone-mockup { + width: 200px; + height: 400px; + } + + .wave-container { + height: 120px; + } + + .wave { + height: 120px; + background-size: 1200px 120px; + } +} + +@media (max-width: 576px) { + .app-name { + font-size: 3rem; + } + + .landing-content { + padding: 3rem 1.2rem 2rem; + } + + .landing-features { + grid-template-columns: 1fr; + margin-bottom: 1.5rem; + } + + .feature { + padding: 1.2rem; + } + + .cta-buttons { + flex-direction: column; + gap: 0.8rem; + width: 100%; + } + + .action-btn { + width: 100%; + justify-content: center; + } + + .mobile-showcase { + margin: 0 0 3rem; + } + + .phone-mockup { + width: 180px; + height: 360px; + } + + .wave-container { + height: 100px; + } + + .wave { + height: 100px; + background-size: 1200px 100px; + } + + .tagline { + font-size: 1.1rem; + margin-bottom: 1.5rem; + } +} + +@media (max-width: 480px) { + .app-name { + font-size: 2.5rem; + margin-bottom: 1rem; + } + + .landing-content { + padding: 2.5rem 1rem 1.5rem; + } + + .feature { + padding: 1rem; + } + + .feature-icon { + width: 45px; + height: 45px; + margin-bottom: 1rem; + } + + .feature-icon i { + font-size: 1.3rem; + } + + .feature h3 { + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .feature p { + font-size: 0.85rem; + } + + .tagline { + font-size: 1rem; + margin-bottom: 1.5rem; + } + + .mobile-showcase { + margin: 0 0 2.5rem; + } + + .phone-mockup { + width: 160px; + height: 320px; + border-radius: 30px; + border-width: 4px; + } + + .preview-header { + padding: 10px; + } + + .preview-logo { + font-size: 0.9rem; + } + + .preview-content { + padding: 15px; + gap: 10px; + } + + .preview-card { + height: 150px; + } + + .action-btn { + padding: 0.8rem 1.2rem; + font-size: 0.9rem; + } + + .wave-container { + height: 80px; + } + + .wave { + height: 80px; + background-size: 1200px 80px; + } +} + +@media (max-width: 370px) { + .app-name { + font-size: 2.2rem; + } + + .landing-content { + padding: 2rem 0.8rem 1.5rem; + } + + .tagline { + font-size: 0.9rem; + margin-bottom: 1.2rem; + } + + .feature { + padding: 0.9rem; + } + + .feature-icon { + width: 40px; + height: 40px; + } + + .feature-icon i { + font-size: 1.2rem; + } + + .action-btn { + padding: 0.7rem 1rem; + font-size: 0.85rem; + } + + .phone-mockup { + width: 140px; + height: 280px; + } +} + +/* Адаптивность для высоты экрана */ +@media (max-height: 800px) and (min-width: 901px) { + .app-name { + font-size: 3.5rem; + margin-bottom: 1rem; + } + + .tagline { + margin-bottom: 1.5rem; + } + + .landing-features { + gap: 1rem; + margin-bottom: 1.5rem; + } + + .feature { + padding: 1rem; + } + + .feature-icon { + width: 50px; + height: 50px; + margin-bottom: 1rem; + } + + .phone-mockup { + width: 220px; + height: 440px; + } +} + +@media (max-height: 650px) and (min-width: 901px) { + .app-name { + font-size: 3rem; + } + + .tagline { + font-size: 1.1rem; + margin-bottom: 1rem; + } + + .landing-features { + gap: 0.8rem; + margin-bottom: 1.2rem; + } + + .feature { + padding: 0.8rem; + } + + .feature-icon { + width: 40px; + height: 40px; + margin-bottom: 0.8rem; + } + + .feature h3 { + font-size: 0.95rem; + margin-bottom: 0.4rem; + } + + .feature p { + font-size: 0.8rem; + } + + .phone-mockup { + width: 180px; + height: 360px; + } + + .cta-buttons { + margin-bottom: 1rem; + } + + .action-btn { + padding: 0.7rem 1.5rem; + font-size: 0.9rem; + } +} + +/* Исправления Safari */ +@supports (-webkit-touch-callout: none) { + .letter, .logo-letter, .user-name, .stat-info h3 { + background-clip: text; + -webkit-text-fill-color: transparent; + } + + .welcome-card h1 { + background-clip: text; + -webkit-text-fill-color: transparent; + } +} + /* Стили для авторизованных пользователей */ .home-view { min-height: 100vh; @@ -851,6 +1252,7 @@ onMounted(async () => { z-index: 1; } +/* Волны анимация для авторизованных пользователей */ .wave-container-auth { position: absolute; bottom: 0; @@ -869,16 +1271,22 @@ onMounted(async () => { height: 150px; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; - animation: wave 10s linear infinite; + transform: rotate(180deg); + animation: wave-auth 10s linear infinite; opacity: 0.6; } .wave-auth:nth-child(2) { bottom: 10px; - animation: wave 16s linear reverse infinite; + animation: wave-auth 16s linear reverse infinite; opacity: 0.3; } +@keyframes wave-auth { + 0% { transform: translateX(0) rotate(180deg); } + 100% { transform: translateX(-50%) rotate(180deg); } +} + /* Медиа-запросы для авторизованного интерфейса */ @media (max-width: 1100px) { .stats-cards, diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index fdc667b..9115cfa 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -370,6 +370,7 @@ const handleLogin = async () => { height: 150px; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; + transform: rotate(180deg); animation: wave 10s linear infinite; opacity: 0.6; } @@ -381,8 +382,8 @@ const handleLogin = async () => { } @keyframes wave { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } + 0% { transform: translateX(0) rotate(180deg); } + 100% { transform: translateX(-50%) rotate(180deg); } } /* Адаптивность */ @@ -413,6 +414,7 @@ const handleLogin = async () => { .wave { height: 120px; background-size: 1200px 120px; + transform: rotate(180deg); } } @@ -484,6 +486,7 @@ const handleLogin = async () => { .wave { height: 80px; background-size: 1200px 80px; + transform: rotate(180deg); } } diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue index 4c06ec5..2ac034c 100644 --- a/src/views/RegisterView.vue +++ b/src/views/RegisterView.vue @@ -419,6 +419,7 @@ const handleRegister = async () => { height: 150px; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; + transform: rotate(180deg); animation: wave 10s linear infinite; opacity: 0.6; } @@ -430,8 +431,8 @@ const handleRegister = async () => { } @keyframes wave { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } + 0% { transform: translateX(0) rotate(180deg); } + 100% { transform: translateX(-50%) rotate(180deg); } } /* Адаптивность */ @@ -462,6 +463,7 @@ const handleRegister = async () => { .wave { height: 120px; background-size: 1200px 120px; + transform: rotate(180deg); } } @@ -534,6 +536,7 @@ const handleRegister = async () => { .wave { height: 80px; background-size: 1200px 80px; + transform: rotate(180deg); } }