From 36e844d4ea64a0f41e3b42be2bba99d7c53c2f9a Mon Sep 17 00:00:00 2001
From: Falknat <Falknat@gmail.com>
Date: Thu, 15 Jan 2026 16:26:45 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=90?=
 =?UTF-8?q?=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Новая форма авторизации.
---
 front_vue/src/views/LoginPage.vue | 735 +++++++++++++++++++++++++-----
 front_vue/src/views/MainApp.vue   |  16 +-
 2 files changed, 645 insertions(+), 106 deletions(-)

diff --git a/front_vue/src/views/LoginPage.vue b/front_vue/src/views/LoginPage.vue
index 1a17824..7d8e02d 100644
--- a/front_vue/src/views/LoginPage.vue
+++ b/front_vue/src/views/LoginPage.vue
@@ -1,184 +1,709 @@
 <template>
   <div class="login-page">
-    <div class="login-card">
-      <!-- Логотип -->
-      <div class="login-logo">
-        <i data-lucide="layout-grid"></i>
-        <span>TaskBoard</span>
-      </div>
+    <!-- Левитирующие иконки на фоне -->
+    <div class="floating-icons">
+      <div class="float-icon icon-1"><i data-lucide="check-square"></i></div>
+      <div class="float-icon icon-2"><i data-lucide="clipboard-list"></i></div>
+      <div class="float-icon icon-3"><i data-lucide="calendar"></i></div>
+      <div class="float-icon icon-4"><i data-lucide="users"></i></div>
+      <div class="float-icon icon-5"><i data-lucide="folder"></i></div>
+      <div class="float-icon icon-6"><i data-lucide="target"></i></div>
+      <div class="float-icon icon-7"><i data-lucide="star"></i></div>
+      <div class="float-icon icon-8"><i data-lucide="zap"></i></div>
+      <div class="float-icon icon-9"><i data-lucide="flag"></i></div>
+      <div class="float-icon icon-10"><i data-lucide="layers"></i></div>
+      <div class="float-icon icon-11"><i data-lucide="clock"></i></div>
+      <div class="float-icon icon-12"><i data-lucide="message-circle"></i></div>
+    </div>
+
+    <!-- Градиентные сферы на фоне -->
+    <div class="bg-glow glow-2"></div>
+    <div class="bg-glow glow-3"></div>
+
+    <!-- Контент авторизации -->
+    <div class="login-content" :class="{ 'is-loading': isAuthenticating, 'is-success': showSuccess }">
       
-      <form @submit.prevent="handleLogin" class="login-form">
-        <!-- Поле логина -->
-        <div class="field">
-          <input 
-            type="text" 
-            v-model="login" 
-            placeholder="Логин"
-            autocomplete="username"
-          >
+      <!-- Состояние успеха -->
+      <Transition name="success-fade">
+        <div v-if="showSuccess" class="success-state">
+          <div class="success-icon">
+            <i data-lucide="check"></i>
+          </div>
+          <h1 class="success-title">Добро пожаловать!</h1>
+          <p class="success-text">Авторизация прошла успешно</p>
+          <div class="success-loader">
+            <span></span><span></span><span></span>
+          </div>
         </div>
-        
-        <!-- Поле пароля -->
-        <div class="field">
-          <input 
-            type="password" 
-            v-model="password" 
-            placeholder="Пароль"
-            autocomplete="current-password"
-          >
+      </Transition>
+
+      <!-- Форма входа -->
+      <Transition name="form-fade">
+        <div v-if="!showSuccess" class="login-form-wrapper">
+          <!-- Логотип -->
+          <div class="login-header">
+            <div class="logo-icon">
+              <i data-lucide="layout-grid"></i>
+            </div>
+            <h1 class="login-title">TaskBoard</h1>
+            <p class="login-subtitle">Войдите в систему управления задачами</p>
+          </div>
+
+          <form @submit.prevent="handleLogin" class="login-form">
+            <!-- Поле логина -->
+            <div class="input-group" :class="{ 'has-value': login, 'has-focus': loginFocused }">
+              <div class="input-icon">
+                <i data-lucide="user"></i>
+              </div>
+              <input 
+                type="text" 
+                v-model="login"
+                @focus="loginFocused = true"
+                @blur="loginFocused = false"
+                placeholder="Введите логин"
+                autocomplete="username"
+                :disabled="isAuthenticating"
+              >
+              <div class="input-line"></div>
+            </div>
+            
+            <!-- Поле пароля -->
+            <div class="input-group" :class="{ 'has-value': password, 'has-focus': passwordFocused }">
+              <div class="input-icon">
+                <i data-lucide="lock"></i>
+              </div>
+              <input 
+                type="password" 
+                v-model="password"
+                @focus="passwordFocused = true"
+                @blur="passwordFocused = false"
+                placeholder="Введите пароль"
+                autocomplete="current-password"
+                :disabled="isAuthenticating"
+              >
+              <div class="input-line"></div>
+            </div>
+            
+            <!-- Ошибка -->
+            <Transition name="error-shake">
+              <div v-if="error" class="error-message">
+                <i data-lucide="alert-circle"></i>
+                <span>{{ error }}</span>
+              </div>
+            </Transition>
+            
+            <!-- Кнопка входа -->
+            <button 
+              type="submit" 
+              class="login-btn" 
+              :class="{ 'is-loading': isAuthenticating }"
+              :disabled="isAuthenticating || !login || !password"
+            >
+              <span class="btn-text">Войти</span>
+              <span class="btn-loader">
+                <span></span><span></span><span></span>
+              </span>
+              <i data-lucide="arrow-right" class="btn-arrow"></i>
+            </button>
+          </form>
         </div>
-        
-        <!-- Ошибка -->
-        <div v-if="error" class="error-message">
-          {{ error }}
-        </div>
-        
-        <!-- Кнопка входа -->
-        <button type="submit" class="login-btn" :disabled="loading">
-          <span v-if="loading">Вход...</span>
-          <span v-else>Войти</span>
-        </button>
-      </form>
+      </Transition>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { authApi } from '../api'
+import { authApi, cardsApi } from '../api'
+import { useProjectsStore } from '../stores/projects'
 
 const router = useRouter()
+const store = useProjectsStore()
 
 const login = ref('')
 const password = ref('')
 const error = ref('')
-const loading = ref(false)
+const isAuthenticating = ref(false)
+const showSuccess = ref(false)
+const loginFocused = ref(false)
+const passwordFocused = ref(false)
+
+// Предзагрузка данных пока показывается анимация успеха
+const prefetchData = async () => {
+  try {
+    // Загружаем проекты, колонки, отделы, лейблы, юзеров
+    await store.init()
+    
+    // Если есть текущий проект — загружаем карточки
+    if (store.currentProjectId) {
+      const result = await cardsApi.getAll(store.currentProjectId)
+      if (result.success) {
+        // Сохраняем в sessionStorage для MainApp
+        sessionStorage.setItem('prefetchedCards', JSON.stringify(result.data))
+      }
+    }
+  } catch (e) {
+    console.error('Prefetch error:', e)
+  }
+}
 
 const handleLogin = async () => {
   error.value = ''
-  loading.value = true
+  isAuthenticating.value = true
   
   try {
     const data = await authApi.login(login.value, password.value)
     
     if (data.success) {
+      // Показываем анимацию успеха
+      showSuccess.value = true
+      await nextTick()
+      refreshIcons()
+      
+      // Параллельно: предзагрузка данных + ожидание анимации
+      const prefetchPromise = prefetchData()
+      const animationPromise = new Promise(resolve => setTimeout(resolve, 1800))
+      
+      // Ждём обоих (минимум 1.8 сек анимации)
+      await Promise.all([prefetchPromise, animationPromise])
+      
       router.push('/')
     } else {
+      isAuthenticating.value = false
       error.value = data.errors?.username || data.errors?.password || 'Неверный логин или пароль'
+      await nextTick()
+      refreshIcons()
     }
   } catch (e) {
+    isAuthenticating.value = false
     error.value = 'Ошибка подключения к серверу'
-  } finally {
-    loading.value = false
+    await nextTick()
+    refreshIcons()
   }
 }
 
-onMounted(() => {
+const refreshIcons = () => {
   if (window.lucide) {
     window.lucide.createIcons()
   }
+}
+
+onMounted(refreshIcons)
+
+// Обновляем иконки только когда меняется состояние успеха
+watch(showSuccess, () => {
+  nextTick(refreshIcons)
 })
 </script>
 
 <style scoped>
 .login-page {
   min-height: 100vh;
+  min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-body);
+  background: linear-gradient(135deg, #0a0a0c 0%, #111113 50%, #0d1117 100%);
+  position: relative;
+  overflow: hidden;
   padding: 20px;
 }
 
-.login-card {
-  width: 100%;
-  max-width: 400px;
-  background: var(--bg-sidebar);
-  border-radius: 16px;
-  padding: 40px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+/* Градиентные сферы на фоне */
+.bg-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.4;
+  pointer-events: none;
 }
 
-.login-logo {
+.glow-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, transparent 70%);
+  bottom: -150px;
+  left: -100px;
+  animation: glowFloat2 10s ease-in-out infinite;
+}
+
+.glow-3 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(244, 114, 182, 0.2) 0%, transparent 70%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: glowFloat3 12s ease-in-out infinite;
+}
+
+@keyframes glowFloat2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(40px, -20px) scale(1.05); }
+}
+
+@keyframes glowFloat3 {
+  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
+  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
+}
+
+/* Левитирующие иконки */
+.floating-icons {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.float-icon {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.04);
+  transition: color 0.3s;
+}
+
+.float-icon i,
+.float-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.icon-1 { width: 48px; height: 48px; top: 8%; left: 12%; animation: float1 6s ease-in-out infinite; }
+.icon-2 { width: 36px; height: 36px; top: 15%; right: 18%; animation: float2 7s ease-in-out infinite; }
+.icon-3 { width: 42px; height: 42px; top: 25%; left: 8%; animation: float3 8s ease-in-out infinite; }
+.icon-4 { width: 32px; height: 32px; top: 35%; right: 10%; animation: float1 5s ease-in-out infinite; }
+.icon-5 { width: 40px; height: 40px; top: 55%; left: 15%; animation: float2 9s ease-in-out infinite; }
+.icon-6 { width: 44px; height: 44px; top: 65%; right: 20%; animation: float3 6s ease-in-out infinite; }
+.icon-7 { width: 28px; height: 28px; top: 75%; left: 10%; animation: float1 7s ease-in-out infinite; }
+.icon-8 { width: 38px; height: 38px; top: 85%; right: 15%; animation: float2 8s ease-in-out infinite; }
+.icon-9 { width: 34px; height: 34px; bottom: 20%; left: 25%; animation: float3 5s ease-in-out infinite; }
+.icon-10 { width: 46px; height: 46px; top: 45%; left: 5%; animation: float1 10s ease-in-out infinite; }
+.icon-11 { width: 30px; height: 30px; top: 20%; left: 25%; animation: float2 6s ease-in-out infinite; }
+.icon-12 { width: 36px; height: 36px; bottom: 30%; right: 8%; animation: float3 7s ease-in-out infinite; }
+
+@keyframes float1 {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-15px) rotate(5deg); }
+  75% { transform: translateY(10px) rotate(-3deg); }
+}
+
+@keyframes float2 {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  33% { transform: translateY(-20px) rotate(-5deg); }
+  66% { transform: translateY(15px) rotate(3deg); }
+}
+
+@keyframes float3 {
+  0%, 100% { transform: translateY(0) translateX(0); }
+  50% { transform: translateY(-12px) translateX(8px); }
+}
+
+/* Контент */
+.login-content {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 420px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  margin-bottom: 32px;
-  color: var(--text-primary);
 }
 
-.login-logo i {
-  width: 32px;
-  height: 32px;
-  color: var(--accent);
-}
-
-.login-logo span {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.login-form {
+.login-form-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-}
-
-.field input {
+  gap: 40px;
   width: 100%;
-  padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  transition: all 0.15s;
 }
 
-.field input::placeholder {
-  color: var(--text-muted);
-}
-
-.field input:focus {
-  outline: none;
-  border-color: var(--accent);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.error-message {
-  padding: 12px 16px;
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 8px;
-  color: #ef4444;
-  font-size: 13px;
+/* Заголовок */
+.login-header {
   text-align: center;
 }
 
-.login-btn {
-  width: 100%;
-  padding: 14px;
-  background: var(--accent);
+.logo-icon {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, var(--accent) 0%, #00e6b8 100%);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20px 60px rgba(0, 212, 170, 0.3);
+  animation: logoFloat 4s ease-in-out infinite;
+}
+
+.logo-icon i,
+.logo-icon svg {
+  width: 36px;
+  height: 36px;
+  color: #000;
+}
+
+@keyframes logoFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.login-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  font-size: 15px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+/* Форма */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Группа инпута */
+.input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 4px;
+}
+
+.input-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--text-muted);
+  transition: color 0.3s, transform 0.3s;
+  flex-shrink: 0;
+}
+
+.input-icon i,
+.input-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.input-group.has-focus .input-icon,
+.input-group.has-value .input-icon {
+  color: var(--accent);
+  transform: scale(1.1);
+}
+
+.input-group input {
+  flex: 1;
+  background: transparent;
   border: none;
-  border-radius: 10px;
+  padding: 16px 0;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 400;
+  outline: none;
+}
+
+.input-group input::placeholder {
+  color: var(--text-muted);
+  transition: opacity 0.3s;
+}
+
+.input-group.has-focus input::placeholder {
+  opacity: 0.5;
+}
+
+.input-group input:disabled {
+  opacity: 0.5;
+}
+
+/* Линия под инпутом */
+.input-line {
+  position: absolute;
+  bottom: 0;
+  left: 44px;
+  right: 0;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.input-line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--accent), #00e6b8);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
+}
+
+.input-group.has-focus .input-line::after,
+.input-group.has-value .input-line::after {
+  transform: scaleX(1);
+}
+
+/* Ошибка */
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  background: rgba(248, 113, 113, 0.08);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+  border-radius: 12px;
+  color: #f87171;
+  font-size: 14px;
+}
+
+.error-message i,
+.error-message svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* Кнопка входа */
+.login-btn {
+  position: relative;
+  width: 100%;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, var(--accent) 0%, #00e6b8 100%);
+  border: none;
+  border-radius: 14px;
   color: #000;
   font-family: inherit;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.15s;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   margin-top: 8px;
+  box-shadow: 0 10px 40px rgba(0, 212, 170, 0.3);
 }
 
 .login-btn:hover:not(:disabled) {
-  background: #00e6b8;
+  transform: translateY(-2px);
+  box-shadow: 0 15px 50px rgba(0, 212, 170, 0.4);
+}
+
+.login-btn:active:not(:disabled) {
+  transform: translateY(0);
 }
 
 .login-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  box-shadow: none;
+}
+
+.btn-text {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.btn-arrow {
+  width: 20px;
+  height: 20px;
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.btn-loader {
+  position: absolute;
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.btn-loader span {
+  width: 8px;
+  height: 8px;
+  background: #000;
+  border-radius: 50%;
+  animation: btnLoaderBounce 1.2s ease-in-out infinite;
+}
+
+.btn-loader span:nth-child(2) { animation-delay: 0.1s; }
+.btn-loader span:nth-child(3) { animation-delay: 0.2s; }
+
+@keyframes btnLoaderBounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1.2); opacity: 1; }
+}
+
+.login-btn.is-loading .btn-text,
+.login-btn.is-loading .btn-arrow {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.login-btn.is-loading .btn-loader {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Состояние успеха */
+.success-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  animation: successAppear 0.6s ease;
+}
+
+@keyframes successAppear {
+  0% { opacity: 0; transform: scale(0.9); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+.success-icon {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(135deg, var(--accent) 0%, #00e6b8 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 28px;
+  box-shadow: 0 25px 80px rgba(0, 212, 170, 0.4);
+  animation: successPulse 1.5s ease-in-out infinite;
+}
+
+.success-icon i,
+.success-icon svg {
+  width: 48px;
+  height: 48px;
+  color: #000;
+  animation: successCheck 0.5s ease 0.2s both;
+}
+
+@keyframes successPulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 25px 80px rgba(0, 212, 170, 0.4); }
+  50% { transform: scale(1.05); box-shadow: 0 30px 100px rgba(0, 212, 170, 0.5); }
+}
+
+@keyframes successCheck {
+  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
+  50% { transform: scale(1.2) rotate(10deg); }
+  100% { transform: scale(1) rotate(0); opacity: 1; }
+}
+
+.success-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.success-text {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.success-loader {
+  display: flex;
+  gap: 8px;
+}
+
+.success-loader span {
+  width: 10px;
+  height: 10px;
+  background: var(--accent);
+  border-radius: 50%;
+  animation: successLoaderBounce 1.4s ease-in-out infinite;
+}
+
+.success-loader span:nth-child(2) { animation-delay: 0.16s; }
+.success-loader span:nth-child(3) { animation-delay: 0.32s; }
+
+@keyframes successLoaderBounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Transitions */
+.form-fade-enter-active,
+.form-fade-leave-active {
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.form-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.form-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+  position: absolute;
+  width: 100%;
+}
+
+.success-fade-enter-active {
+  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
+}
+
+.success-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.error-shake-enter-active {
+  animation: errorShake 0.5s ease;
+}
+
+.error-shake-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.error-shake-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+@keyframes errorShake {
+  0% { opacity: 0; transform: translateX(0) translateY(-10px); }
+  20% { opacity: 1; transform: translateX(-8px) translateY(0); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+  100% { transform: translateX(0); }
+}
+
+/* Мобильная адаптация (MOBILE_BREAKPOINT: 768px) */
+@media (max-width: 768px) {
+  .login-title {
+    font-size: 26px;
+  }
+  
+  .login-subtitle {
+    font-size: 14px;
+  }
+  
+  .logo-icon {
+    width: 64px;
+    height: 64px;
+  }
+  
+  .logo-icon i,
+  .logo-icon svg {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .float-icon {
+    opacity: 0.5;
+  }
 }
 </style>
diff --git a/front_vue/src/views/MainApp.vue b/front_vue/src/views/MainApp.vue
index 5f18f22..1a69d21 100644
--- a/front_vue/src/views/MainApp.vue
+++ b/front_vue/src/views/MainApp.vue
@@ -219,8 +219,22 @@ const stopPolling = () => {
 
 // ==================== ИНИЦИАЛИЗАЦИЯ ====================
 onMounted(async () => {
+  // Store уже мог быть инициализирован при логине (prefetch)
   await store.init()
-  await fetchCards()
+  
+  // Проверяем предзагруженные карточки
+  const prefetchedCards = sessionStorage.getItem('prefetchedCards')
+  if (prefetchedCards) {
+    try {
+      cards.value = JSON.parse(prefetchedCards)
+      sessionStorage.removeItem('prefetchedCards')
+    } catch (e) {
+      await fetchCards()
+    }
+  } else {
+    await fetchCards()
+  }
+  
   startPolling()
   
   if (window.lucide) window.lucide.createIcons()