фикс

src/views/LoginView.vue

@@ -68,7 +68,7 @@
       
       <router-link to="/" class="back-link">
         <i class="bi-arrow-left"></i>
-        Вернуться на главную
+        Вернуться
       </router-link>
       
       <div class="wave-container">
@@ -379,8 +379,8 @@ const handleLogin = async () => {
 
 .back-link {
   position: absolute;
-  top: 20px;
+  top: 10px;
-  left: 20px;
+  left: 10px;
   color: white;
   text-decoration: none;
   display: flex;
@@ -389,10 +389,16 @@ const handleLogin = async () => {
   font-weight: 500;
   transition: all 0.3s ease;
   z-index: 10;
+  font-size: 0.9rem;
+  padding: 6px 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 50px;
+  backdrop-filter: blur(5px);
 }
 
 .back-link:hover {
   transform: translateX(-5px);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .wave-container {
@@ -461,133 +467,135 @@ const handleLogin = async () => {
 }
 
 @media (max-width: 576px) {
-  .auth-bg {
+  .brand-logo {
-    padding: 1.5rem 1rem 3rem;
+    font-size: 1.8rem;
-  }
+    margin-top: 2.5rem;
-  
-  .login-card {
-    padding: 2rem 1.5rem;
-    margin-top: 1rem;
-  }
-  
-  .form-group {
     margin-bottom: 1.2rem;
   }
 
-  .form-group label {
+  .login-card {
-    font-size: 0.95rem;
+    width: 94%;
+    padding: 1.5rem 1.2rem;
+    margin-top: 0;
   }
   
-  .brand-logo {
+  .login-header h2 {
-    margin-top: 2.5rem;
+    font-size: 1.6rem;
+  }
+  
+  .login-header p {
+    font-size: 0.9rem;
   }
 }
 
 @media (max-width: 480px) {
-  .login-card {
-    padding: 1.8rem 1.2rem;
-  }
-  
-  .login-header h2 {
-    font-size: 1.5rem;
-  }
-  
-  .login-header p {
-    font-size: 0.95rem;
-    margin-bottom: 0.3rem;
-  }
-  
   .brand-logo {
-    font-size: 1.8rem;
+    font-size: 1.6rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
   }
   
-  .form-group input {
-    padding: 0.8rem 1rem;
-    font-size: 0.95rem;
-  }
-  
-  .action-button {
-    padding: 0.9rem;
-    font-size: 1rem;
-  }
-  
-  .auth-footer {
-    margin-top: 1.5rem;
-    font-size: 0.9rem;
-  }
-  
-  .back-link {
-    font-size: 0.85rem;
-  }
-  
-  .wave-container {
-    height: 80px;
-  }
-  
-  .wave {
-    height: 80px;
-    background-size: 1200px 80px;
-    transform: rotate(180deg);
-  }
-}
-
-@media (max-width: 370px) {
   .login-card {
-    padding: 1.5rem 1rem;
+    padding: 1.4rem 1.1rem;
+    width: 95%;
   }
   
   .login-header h2 {
     font-size: 1.4rem;
   }
   
-  .login-header p {
-    font-size: 0.9rem;
-  }
-  
-  .form-group {
-    margin-bottom: 1rem;
-  }
-  
-  .form-group label {
-    font-size: 0.9rem;
-    margin-bottom: 0.3rem;
-  }
-  
   .form-group input {
     padding: 0.7rem 0.9rem;
   }
   
-  .brand-logo {
-    font-size: 1.6rem;
-  }
-  
   .action-button {
     padding: 0.8rem;
+    font-size: 0.95rem;
   }
 }
 
-/* Стили для поддержки ориентации экрана */
+@media (max-height: 700px) {
-@media (max-height: 700px) and (min-width: 500px) {
   .brand-logo {
-    margin-bottom: 1.5rem;
+    font-size: 1.6rem;
-    margin-top: 1rem;
+    margin-bottom: 0.8rem;
-  }
-  
-  .login-card {
-    padding: 1.8rem;
   }
   
   .login-header {
-    margin-bottom: 1.8rem;
+    margin-bottom: 0.8rem;
+  }
+  
+  .login-header h2 {
+    font-size: 1.5rem;
+    margin-bottom: 0.2rem;
+  }
+  
+  .login-header p {
+    margin-bottom: 0.8rem;
   }
   
   .form-group {
-    margin-bottom: 1rem;
+    margin-bottom: 0.6rem;
+  }
+  
+  .form-group label {
+    margin-bottom: 0.2rem;
+  }
+  
+  .form-group input {
+    padding: 0.6rem 0.8rem;
+  }
+  
+  .action-button {
+    padding: 0.7rem;
+    margin-top: 0.7rem;
   }
   
   .auth-footer {
-    margin-top: 1.2rem;
+    margin-top: 1rem;
+  }
+}
+
+@media (max-height: 600px) {
+  .brand-logo {
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+    margin-top: 2rem;
+  }
+  
+  .login-card {
+    padding: 1.2rem 1rem;
+  }
+  
+  .login-header h2 {
+    font-size: 1.3rem;
+  }
+  
+  .login-header p {
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .form-group {
+    margin-bottom: 0.5rem;
+  }
+  
+  .form-group label {
+    font-size: 0.85rem;
+  }
+  
+  .form-group input {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.9rem;
+  }
+  
+  .action-button {
+    padding: 0.6rem;
+    font-size: 0.9rem;
+  }
+  
+  .auth-footer {
+    margin-top: 0.7rem;
+    font-size: 0.85rem;
   }
 }
 

src/views/RegisterView.vue

@@ -98,7 +98,7 @@
       
       <router-link to="/" class="back-link">
         <i class="bi-arrow-left"></i>
-        Вернуться на главную
+        Вернуться
       </router-link>
       
       <div class="wave-container">
@@ -434,8 +434,8 @@ const handleRegister = async () => {
 
 .back-link {
   position: absolute;
-  top: 20px;
+  top: 10px;
-  left: 20px;
+  left: 10px;
   color: white;
   text-decoration: none;
   display: flex;
@@ -444,10 +444,16 @@ const handleRegister = async () => {
   font-weight: 500;
   transition: all 0.3s ease;
   z-index: 10;
+  font-size: 0.9rem;
+  padding: 6px 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 50px;
+  backdrop-filter: blur(5px);
 }
 
 .back-link:hover {
   transform: translateX(-5px);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .wave-container {
@@ -516,82 +522,38 @@ const handleRegister = async () => {
 }
 
 @media (max-width: 576px) {
-  .auth-bg {
+  .brand-logo {
-    padding: 1.5rem 1rem 3rem;
+    font-size: 1.8rem;
-  }
+    margin-top: 2.5rem;
-  
-  .register-card {
-    padding: 2rem 1.5rem;
-    margin: 3rem 0 2rem;
-  }
-  
-  .form-group {
     margin-bottom: 1.2rem;
   }
 
-  .form-group label {
+  .register-card {
-    font-size: 0.95rem;
+    width: 94%;
+    padding: 1.5rem 1.2rem;
+    margin: 0;
   }
   
-  .brand-logo {
+  .register-header h2 {
-    margin-top: 2.5rem;
+    font-size: 1.6rem;
+  }
+  
+  .register-header p {
+    font-size: 0.9rem;
+    margin-bottom: 1.2rem;
   }
 }
 
 @media (max-width: 480px) {
-  .register-card {
-    padding: 1.8rem 1.2rem;
-    margin: 2rem 0 1.5rem;
-  }
-  
-  .register-header h2 {
-    font-size: 1.5rem;
-  }
-  
-  .register-header p {
-    font-size: 0.95rem;
-    margin-bottom: 0.3rem;
-  }
-  
   .brand-logo {
-    font-size: 1.8rem;
+    font-size: 1.6rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
   }
   
-  .form-group input {
-    padding: 0.8rem 1rem;
-    font-size: 0.95rem;
-  }
-  
-  .action-button {
-    padding: 0.9rem;
-    font-size: 1rem;
-  }
-  
-  .auth-footer {
-    margin-top: 1.5rem;
-    font-size: 0.9rem;
-  }
-  
-  .back-link {
-    font-size: 0.85rem;
-  }
-  
-  .wave-container {
-    height: 80px;
-  }
-  
-  .wave {
-    height: 80px;
-    background-size: 1200px 80px;
-    transform: rotate(180deg);
-  }
-}
-
-@media (max-width: 370px) {
   .register-card {
-    padding: 1.5rem 1rem;
+    padding: 1.3rem 1.1rem;
-    margin: 1.5rem 0 1rem;
+    width: 95%;
   }
   
   .register-header h2 {
@@ -599,83 +561,157 @@ const handleRegister = async () => {
   }
   
   .register-header p {
-    font-size: 0.9rem;
-  }
-  
-  .form-group {
     margin-bottom: 1rem;
   }
   
-  .form-group label {
-    font-size: 0.9rem;
-    margin-bottom: 0.3rem;
-  }
-  
-  .form-group input {
-    padding: 0.7rem 0.9rem;
-  }
-  
-  .brand-logo {
-    font-size: 1.6rem;
-  }
-  
-  .action-button {
-    padding: 0.8rem;
-  }
-}
-
-/* Стили для поддержки ориентации экрана */
-@media (max-height: 800px) and (min-width: 500px) {
-  .brand-logo {
-    margin-bottom: 1.5rem;
-    margin-top: 1rem;
-  }
-  
-  .register-card {
-    padding: 1.8rem;
-    margin: 0.5rem 0 1.5rem;
-  }
-  
-  .register-header {
-    margin-bottom: 1.8rem;
-  }
-  
-  .form-group {
-    margin-bottom: 0.8rem;
-  }
-  
-  .auth-footer {
-    margin-top: 1.2rem;
-  }
-}
-
-/* Для очень коротких экранов */
-@media (max-height: 650px) {
-  .auth-bg {
-    height: auto;
-    min-height: 100vh;
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-  
-  .register-card {
-    margin: 0 0 1rem;
-  }
-  
-  .brand-logo {
-    margin: 3rem 0 1rem;
-  }
-  
   .form-group {
     margin-bottom: 0.7rem;
   }
   
+  .form-group input {
+    padding: 0.7rem 0.9rem;
+  }
+  
+  .action-button {
+    padding: 0.8rem;
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-height: 700px) {
+  .brand-logo {
+    font-size: 1.6rem;
+    margin-bottom: 0.8rem;
+  }
+  
+  .register-header {
+    margin-bottom: 0.8rem;
+  }
+  
+  .register-header h2 {
+    font-size: 1.5rem;
+    margin-bottom: 0.2rem;
+  }
+  
+  .register-header p {
+    margin-bottom: 0.6rem;
+  }
+  
+  .form-group {
+    margin-bottom: 0.6rem;
+  }
+  
   .form-group label {
+    margin-bottom: 0.2rem;
+  }
+  
+  .form-group input {
+    padding: 0.6rem 0.8rem;
+  }
+  
+  .action-button {
+    padding: 0.7rem;
+    margin-top: 0.7rem;
+  }
+  
+  .auth-footer {
+    margin-top: 0.8rem;
+  }
+}
+
+@media (max-height: 640px) {
+  .brand-logo {
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+    margin-top: 1.5rem;
+  }
+  
+  .register-card {
+    padding: 1rem 1rem;
+    max-height: calc(100vh - 80px);
+  }
+  
+  .register-header h2 {
+    font-size: 1.2rem;
+    margin-bottom: 0.1rem;
+  }
+  
+  .register-header p {
+    font-size: 0.8rem;
+    margin-bottom: 0.4rem;
+  }
+  
+  .form-group {
+    margin-bottom: 0.4rem;
+  }
+  
+  .form-group label {
+    font-size: 0.8rem;
+    margin-bottom: 0.1rem;
+  }
+  
+  .form-group input {
+    padding: 0.5rem 0.6rem;
+    font-size: 0.85rem;
+  }
+  
+  .action-button {
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+  }
+  
+  .auth-footer {
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-height: 570px) {
+  .brand-logo {
+    font-size: 1.2rem;
+    margin-bottom: 0.3rem;
+    margin-top: 1rem;
+  }
+  
+  .register-card {
+    padding: 0.8rem;
+  }
+  
+  .register-header h2 {
+    font-size: 1.1rem;
+    margin-bottom: 0;
+  }
+  
+  .register-header p {
+    font-size: 0.75rem;
     margin-bottom: 0.3rem;
   }
   
+  .form-group {
+    margin-bottom: 0.3rem;
+  }
+  
+  .form-group label {
+    font-size: 0.75rem;
+  }
+  
+  .form-group input {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.8rem;
+  }
+  
+  .action-button {
+    padding: 0.4rem;
+    font-size: 0.8rem;
+  }
+  
+  .auth-footer {
+    font-size: 0.75rem;
+  }
+  
   .wave-container {
-    display: none;
+    display: none; /* Скрываем волны на очень маленьких экранах */
   }
 }