From 5e8b25f84d3d729c98640201b6e6f9a59ce2573a Mon Sep 17 00:00:00 2001 From: Professional Date: Fri, 23 May 2025 22:51:08 +0700 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/HomeView.vue | 31 ++++++++++---------- src/views/LoginView.vue | 60 ++++++++++++++++++-------------------- src/views/RegisterView.vue | 47 ++++++++++++++++------------- 3 files changed, 72 insertions(+), 66 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 06f23d2..6324436 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -392,29 +392,30 @@ onMounted(async () => { position: absolute; bottom: 0; left: 0; - width: 200%; + width: 300%; /* Увеличиваем ширину для сглаживания краёв */ height: 150px; - background: url('data:image/svg+xml;utf8,') repeat-x; + background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; - transform: rotate(180deg); - animation: wave 10s linear infinite; + transform: translateX(0) rotate(180deg); /* Начинаем с нулевого положения */ + animation: wave-slide 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Плавная бесконечная анимация */ + opacity: 0.6; } .wave:nth-child(2) { bottom: 10px; - animation: wave 16s linear reverse infinite; + animation: wave-slide 36s cubic-bezier(0.36, 0.45, 0.63, 0.53) reverse infinite; /* Другая длительность */ opacity: 0.8; } .wave:nth-child(3) { bottom: 20px; - animation: wave 13s linear infinite; + animation: wave-slide 42s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Ещё одна длительность */ opacity: 0.6; } -@keyframes wave { +@keyframes wave-slide { 0% { transform: translateX(0) rotate(180deg); } - 100% { transform: translateX(-50%) rotate(180deg); } + 100% { transform: translateX(-66.66%) rotate(180deg); } /* Анимируем точно на 2/3 ширины для плавного цикла */ } /* Мобильный телефон/макет */ @@ -1276,24 +1277,24 @@ onMounted(async () => { position: absolute; bottom: 0; left: 0; - width: 200%; + width: 300%; /* Увеличиваем ширину для сглаживания краёв */ height: 150px; - background: url('data:image/svg+xml;utf8,') repeat-x; + background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; - transform: rotate(180deg); - animation: wave-auth 10s linear infinite; + transform: translateX(0) rotate(180deg); /* Начинаем с нулевого положения */ + animation: wave-slide-auth 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Плавная бесконечная анимация */ opacity: 0.6; } .wave-auth:nth-child(2) { bottom: 10px; - animation: wave-auth 16s linear reverse infinite; + animation: wave-slide-auth 36s cubic-bezier(0.36, 0.45, 0.63, 0.53) reverse infinite; opacity: 0.3; } -@keyframes wave-auth { +@keyframes wave-slide-auth { 0% { transform: translateX(0) rotate(180deg); } - 100% { transform: translateX(-50%) rotate(180deg); } + 100% { transform: translateX(-66.66%) rotate(180deg); } /* Анимируем точно на 2/3 ширины для плавного цикла */ } /* Медиа-запросы для авторизованного интерфейса */ diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 6e84d8d..f83f47a 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -146,6 +146,7 @@ const handleLogin = async () => { overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; touch-action: none; + color: white; /* Явно задаем белый цвет текста для всего контейнера */ } .auth-bg { @@ -218,25 +219,27 @@ const handleLogin = async () => { position: relative; z-index: 10; margin: 0 auto; - max-height: 90%; display: flex; flex-direction: column; + color: white; /* Явно задаем белый цвет текста */ } .login-header { - margin-bottom: 1.5rem; - color: white; + margin-bottom: 1rem; + color: white; /* Явно задаем белый цвет текста для заголовка */ } .login-header h2 { font-size: 1.8rem; - font-weight: 700; - margin-bottom: 0.5rem; + margin-bottom: 0.3rem; + color: white; /* Явно задаем белый цвет текста для h2 */ + font-weight: 600; } .login-header p { - font-size: 1.1rem; - opacity: 0.9; + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый для подзаголовка */ + margin-bottom: 1.5rem; } .login-form { @@ -247,16 +250,18 @@ const handleLogin = async () => { .form-group { margin-bottom: 0.8rem; + position: relative; + text-align: left; /* Выравниваем текст полей формы по левому краю */ } .form-group label { - display: block; - margin-bottom: 0.5rem; - color: white; - font-weight: 500; display: flex; align-items: center; gap: 0.5rem; + margin-bottom: 0.4rem; + color: white; + font-weight: 500; + font-size: 1rem; } .form-group label i { @@ -265,7 +270,7 @@ const handleLogin = async () => { .form-group input { width: 100%; - padding: 0.7rem 1rem; + padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; @@ -275,23 +280,16 @@ const handleLogin = async () => { } .form-group input::placeholder { - color: rgba(255, 255, 255, 0.7); -} - -.form-group input:focus { - outline: none; - background: rgba(255, 255, 255, 0.25); - border-color: rgba(255, 255, 255, 0.5); - box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.6); } .action-button { width: 100%; - padding: 0.8rem; - margin-top: 0.8rem; - background: linear-gradient(45deg, #00BFFF, #20B2AA); + padding: 1rem; + margin-top: 1rem; + background: #00BFFF; border: none; - border-radius: 12px; + border-radius: 50px; /* Более закругленная кнопка как на скриншоте */ color: white; font-size: 1.1rem; font-weight: 600; @@ -410,24 +408,24 @@ const handleLogin = async () => { position: absolute; bottom: 0; left: 0; - width: 200%; + width: 300%; /* Увеличиваем ширину для сглаживания краёв */ height: 150px; - background: url('data:image/svg+xml;utf8,') repeat-x; + background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; - transform: rotate(180deg); - animation: wave 10s linear infinite; + transform: translateX(0) rotate(180deg); /* Начинаем с нулевого положения */ + animation: login-wave 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Плавная бесконечная анимация */ opacity: 0.6; } .wave:nth-child(2) { bottom: 10px; - animation: wave 16s linear reverse infinite; + animation: login-wave 36s cubic-bezier(0.36, 0.45, 0.63, 0.53) reverse infinite; opacity: 0.3; } -@keyframes wave { +@keyframes login-wave { 0% { transform: translateX(0) rotate(180deg); } - 100% { transform: translateX(-50%) rotate(180deg); } + 100% { transform: translateX(-66.66%) rotate(180deg); } /* Анимируем точно на 2/3 ширины для плавного цикла */ } /* Адаптивность */ diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue index c8719da..f67bc03 100644 --- a/src/views/RegisterView.vue +++ b/src/views/RegisterView.vue @@ -194,6 +194,7 @@ const handleRegister = async () => { overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; touch-action: none; + color: white; /* Явно задаем белый цвет текста для всего контейнера */ } .auth-bg { @@ -266,22 +267,27 @@ const handleRegister = async () => { position: relative; z-index: 10; margin: 0 auto; - max-height: 90%; display: flex; flex-direction: column; + color: white; /* Явно задаем белый цвет текста */ } .register-header { margin-bottom: 1rem; + color: white; /* Явно задаем белый цвет текста для заголовка */ } .register-header h2 { - font-size: 1.5rem; + font-size: 1.8rem; margin-bottom: 0.3rem; + color: white; /* Явно задаем белый цвет текста для h2 */ + font-weight: 600; } .register-header p { - font-size: 0.9rem; + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый для подзаголовка */ + margin-bottom: 1.5rem; } .register-form { @@ -291,18 +297,19 @@ const handleRegister = async () => { } .form-group { - margin-bottom: 0.6rem; + margin-bottom: 0.8rem; position: relative; + text-align: left; /* Выравниваем текст полей формы по левому краю */ } .form-group label { - display: block; - margin-bottom: 0.5rem; - color: white; - font-weight: 500; display: flex; align-items: center; gap: 0.5rem; + margin-bottom: 0.4rem; + color: white; + font-weight: 500; + font-size: 1rem; } .form-group label i { @@ -311,7 +318,7 @@ const handleRegister = async () => { .form-group input { width: 100%; - padding: 0.8rem 1rem; + padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; @@ -321,7 +328,7 @@ const handleRegister = async () => { } .form-group input::placeholder { - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.6); } .form-group input:focus { @@ -335,9 +342,9 @@ const handleRegister = async () => { width: 100%; padding: 1rem; margin-top: 1rem; - background: linear-gradient(45deg, #00BFFF, #20B2AA); + background: #00BFFF; border: none; - border-radius: 12px; + border-radius: 50px; /* Более закругленная кнопка как на скриншоте */ color: white; font-size: 1.1rem; font-weight: 600; @@ -391,7 +398,7 @@ const handleRegister = async () => { } .auth-footer { - margin-top: 1rem; + margin-top: 1.5rem; color: white; font-size: 0.95rem; } @@ -456,24 +463,24 @@ const handleRegister = async () => { position: absolute; bottom: 0; left: 0; - width: 200%; + width: 300%; /* Увеличиваем ширину для сглаживания краёв */ height: 150px; - background: url('data:image/svg+xml;utf8,') repeat-x; + background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 1200px 150px; - transform: rotate(180deg); - animation: wave 10s linear infinite; + transform: translateX(0) rotate(180deg); /* Начинаем с нулевого положения */ + animation: register-wave 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; /* Плавная бесконечная анимация */ opacity: 0.6; } .wave:nth-child(2) { bottom: 10px; - animation: wave 16s linear reverse infinite; + animation: register-wave 36s cubic-bezier(0.36, 0.45, 0.63, 0.53) reverse infinite; opacity: 0.3; } -@keyframes wave { +@keyframes register-wave { 0% { transform: translateX(0) rotate(180deg); } - 100% { transform: translateX(-50%) rotate(180deg); } + 100% { transform: translateX(-66.66%) rotate(180deg); } /* Анимируем точно на 2/3 ширины для плавного цикла */ } /* Адаптивность */