From e15ff1ddfb3b6a213765d2eae83757d1b168a39f Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Fri, 23 May 2025 22:39:52 +0700
Subject: [PATCH] =?UTF-8?q?=D0=B1=D0=BB=D0=BE=D0=BA=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B0=20=D1=81=D1=80=D0=BE=D0=BA=D0=BB=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=85=20=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B8?=
 =?UTF-8?q?=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/LoginView.vue    | 80 ++++++++++++++++++++++-----------
 src/views/RegisterView.vue | 90 +++++++++++++++++++++++++-------------
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 293d6e4..6e84d8d 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useAuth } from '@/auth';
 
 const email = ref('');
@@ -90,6 +90,30 @@ const loading = ref(false);
 
 const { login } = useAuth();
 
+// Функция для блокировки прокрутки страницы
+const preventScroll = () => {
+  document.body.style.overflow = 'hidden';
+  document.body.style.position = 'fixed';
+  document.body.style.height = '100%';
+  document.body.style.width = '100%';
+};
+
+// Функция для восстановления прокрутки
+const enableScroll = () => {
+  document.body.style.overflow = '';
+  document.body.style.position = '';
+  document.body.style.height = '';
+  document.body.style.width = '';
+};
+
+onMounted(() => {
+  preventScroll(); // Блокируем прокрутку при монтировании компонента
+});
+
+onUnmounted(() => {
+  enableScroll(); // Восстанавливаем прокрутку при размонтировании компонента
+});
+
 const handleLogin = async () => {
   errorMessage.value = '';
   loading.value = true;
@@ -112,22 +136,32 @@ const handleLogin = async () => {
 
 <style scoped>
 .login-container {
-  min-height: 100vh;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  touch-action: none;
 }
 
 .auth-bg {
-  min-height: 100vh;
-  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 1rem;
-  position: relative;
+  padding: 0;
   overflow: hidden;
 }
 
@@ -172,26 +206,21 @@ const handleLogin = async () => {
 }
 
 .login-card {
-  width: 100%;
-  max-width: 450px;
+  width: 90%;
+  max-width: 400px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  padding: 2rem 2rem;
+  padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: fadeUp 0.8s ease;
   text-align: center;
   position: relative;
   z-index: 10;
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
   margin: 0 auto;
-}
-
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
 }
 
 .login-header {
@@ -211,12 +240,13 @@ const handleLogin = async () => {
 }
 
 .login-form {
-  text-align: left;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group {
-  margin-bottom: 1rem;
-  position: relative;
+  margin-bottom: 0.8rem;
 }
 
 .form-group label {
@@ -235,7 +265,7 @@ const handleLogin = async () => {
 
 .form-group input {
   width: 100%;
-  padding: 1rem 1.2rem;
+  padding: 0.7rem 1rem;
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
@@ -257,8 +287,8 @@ const handleLogin = async () => {
 
 .action-button {
   width: 100%;
-  padding: 1rem;
-  margin-top: 1rem;
+  padding: 0.8rem;
+  margin-top: 0.8rem;
   background: linear-gradient(45deg, #00BFFF, #20B2AA);
   border: none;
   border-radius: 12px;
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index a56b445..c8719da 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -110,7 +110,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useAuth } from '@/auth';
 
 const name = ref('');
@@ -122,6 +122,30 @@ const loading = ref(false);
 
 const { register } = useAuth();
 
+// Функция для блокировки прокрутки страницы
+const preventScroll = () => {
+  document.body.style.overflow = 'hidden';
+  document.body.style.position = 'fixed';
+  document.body.style.height = '100%';
+  document.body.style.width = '100%';
+};
+
+// Функция для восстановления прокрутки
+const enableScroll = () => {
+  document.body.style.overflow = '';
+  document.body.style.position = '';
+  document.body.style.height = '';
+  document.body.style.width = '';
+};
+
+onMounted(() => {
+  preventScroll(); // Блокируем прокрутку при монтировании компонента
+});
+
+onUnmounted(() => {
+  enableScroll(); // Восстанавливаем прокрутку при размонтировании компонента
+});
+
 const handleRegister = async () => {
   errorMessage.value = '';
   loading.value = true;
@@ -160,22 +184,32 @@ const handleRegister = async () => {
 
 <style scoped>
 .register-container {
-  min-height: 100vh;
-  height: 100vh;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  touch-action: none;
 }
 
 .auth-bg {
-  min-height: 100vh;
-  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 1rem;
-  position: relative;
+  padding: 0;
   overflow: hidden;
 }
 
@@ -183,10 +217,10 @@ const handleRegister = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 800;
   letter-spacing: 1px;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   flex-shrink: 0;
 }
 
@@ -220,50 +254,44 @@ const handleRegister = async () => {
 }
 
 .register-card {
-  width: 100%;
-  max-width: 500px;
+  width: 90%;
+  max-width: 400px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  padding: 2rem 2rem;
+  padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  animation: fadeUp 0.8s ease;
   text-align: center;
   position: relative;
   z-index: 10;
   margin: 0 auto;
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
-}
-
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
 }
 
 .register-header {
-  margin-bottom: 1.5rem;
-  color: white;
+  margin-bottom: 1rem;
 }
 
 .register-header h2 {
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  margin-bottom: 0.3rem;
 }
 
 .register-header p {
-  font-size: 1.1rem;
-  opacity: 0.9;
+  font-size: 0.9rem;
 }
 
 .register-form {
-  text-align: left;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .form-group {
-  margin-bottom: 0.9rem;
+  margin-bottom: 0.6rem;
   position: relative;
 }
 
@@ -363,7 +391,7 @@ const handleRegister = async () => {
 }
 
 .auth-footer {
-  margin-top: 2rem;
+  margin-top: 1rem;
   color: white;
   font-size: 0.95rem;
 }