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 ширины для плавного цикла */
}
/* Адаптивность */