modified: main_dc/BB/bbvue/src/App.vue

modified:   main_dc/BB/bbvue/src/views/Login.vue
css rule for center vertical and with login form

main_dc/BB/bbvue/src/App.vue

@@ -269,7 +269,7 @@ body {
 
 /* Page Styles */
 .page {
-  max-width: 800px;
+  width: 100%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

main_dc/BB/bbvue/src/views/Login.vue

@@ -1,35 +1,37 @@
 <template>
-  <div class="page">
+  <div class="page login-page">
-    <h1>🔐 Вход в систему</h1>
+    <div class="login-container">
-    <p>Войдите в свой личный кабинет</p>
+      <h1>🔐 Вход в систему</h1>
+      <p>Войдите в свой личный кабинет</p>
 
-    <form @submit.prevent="handleLogin" class="login-form">
+      <form @submit.prevent="handleLogin" class="login-form">
-      <div class="form-group">
+        <div class="form-group">
-        <input type="email" placeholder="Email" class="form-input" v-model="credentials.email" required
+          <input type="email" placeholder="Email" class="form-input" v-model="credentials.email" required
-          :disabled="loading" autocomplete="username">
+            :disabled="loading" autocomplete="username">
-      </div>
+        </div>
-      <div class="form-group">
+        <div class="form-group">
-        <input type="password" placeholder="Пароль" class="form-input" autocomplete="current-password"
+          <input type="password" placeholder="Пароль" class="form-input" autocomplete="current-password"
-          v-model="credentials.password" required :disabled="loading">
+            v-model="credentials.password" required :disabled="loading">
+        </div>
+
+        <button type="submit" class="btn btn-primary" :disabled="loading">
+          {{ loading ? 'Вход...' : 'Войти' }}
+        </button>
+
+        <div v-if="error" class="error-message">
+          {{ error }}
+        </div>
+      </form>
+
+      <div class="login-links">
+        <div class="register-link">
+          <p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
+        </div>
+        <p><router-link to="/forgot-password" class="link">Забыли пароль?</router-link></p>
       </div>
 
-      <button type="submit" class="btn btn-primary" :disabled="loading">
+      <button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
-        {{ loading ? 'Вход...' : 'Войти' }}
-      </button>
-
-      <div v-if="error" class="error-message">
-        {{ error }}
-      </div>
-    </form>
-
-    <div class="login-links">
-      <div class="register-link">
-        <p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
-      </div>
-      <p><router-link to="/forgot-password" class="link">Забыли пароль?</router-link></p>
     </div>
-
-    <button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
   </div>
 </template>
 
@@ -48,7 +50,10 @@ export default {
       credentials: {
         email: '',
         password: ''
-      }
+      },
+      hasInteracted: false,
+      isContentVisible: false,
+      autoShowTimeout: null
     }
   },
   computed: {
@@ -104,6 +109,31 @@ export default {
 
       document.body.appendChild(notification)
 
+      setTimeout(() => {
+        if (notification.parentNode) {
+          notification.parentNode.removeChild(notification)
+        }
+      }, 3000)
+    },
+    showAlreadyLoggedInNotification() {
+      const notification = document.createElement('div')
+      notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: #ffd700;
+        color: #333;
+        padding: 15px 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        z-index: 10000;
+        max-width: 300px;
+        font-family: Arial, sans-serif;
+      `
+      notification.textContent = 'ℹ️ Вы уже авторизованы!'
+
+      document.body.appendChild(notification)
+
       setTimeout(() => {
         if (notification.parentNode) {
           notification.parentNode.removeChild(notification)
@@ -132,43 +162,36 @@ export default {
         this.showContent()
       }
     }, 3000)
-  },
-  showAlreadyLoggedInNotification() {
-    const notification = document.createElement('div')
-    notification.style.cssText = `
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        background: #ffd700;
-        color: #333;
-        padding: 15px 20px;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        z-index: 10000;
-        max-width: 300px;
-        font-family: Arial, sans-serif;
-      `
-    notification.textContent = 'ℹ️ Вы уже авторизованы!'
-
-    document.body.appendChild(notification)
-
-    setTimeout(() => {
-      if (notification.parentNode) {
-        notification.parentNode.removeChild(notification)
-      }
-    }, 3000)
   }
 }
 </script>
 
 <style scoped>
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+  margin: 0;
+}
+
+.login-container {
+  width: fit-content;
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+
 .login-form {
-  max-width: 300px;
+  width: 100%;
   margin: 2rem auto;
 }
 
 .form-group {
   margin-bottom: 1rem;
+  width: 100%;
 }
 
 .form-input {
@@ -178,6 +201,7 @@ export default {
   border-radius: 6px;
   font-size: 1rem;
   transition: border-color 0.3s;
+  box-sizing: border-box;
 }
 
 .form-input:focus {
@@ -197,6 +221,7 @@ export default {
   padding: 12px;
   font-size: 1rem;
   margin-top: 1rem;
+  box-sizing: border-box;
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -211,6 +236,7 @@ export default {
 .login-links {
   margin-top: 1.5rem;
   text-align: center;
+  width: 100%;
 }
 
 .link {
@@ -230,5 +256,33 @@ export default {
   margin-top: 1rem;
   border-left: 4px solid #c33;
   text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.btn-secondary {
+  margin-top: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Стили для заголовков и текста */
+.login-container h1 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+  width: 100%;
+}
+
+.login-container p {
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+  color: #666;
+  width: 100%;
+}
+
+.register-link {
+  width: 100%;
+  margin-bottom: 1rem;
 }
 </style>