From 1af632ee63e411834f48eb2786a9e364b2ae7389 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Fri, 23 May 2025 20:59:36 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=B3=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 551 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 504 insertions(+), 47 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f85b841..15da659 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,42 +1,115 @@
 <template>
-  <div class="container mt-5">
-    <div class="row justify-content-center">
-      <div class="col-md-8">
-        <div class="text-center p-5 rounded-3 bg-light shadow-sm">
-          <template v-if="isAuthenticated">
-            <h1 class="display-4 fw-bold mb-3">С возвращением, {{ user?.name || 'Пользователь' }}!</h1>
-            <p class="lead mb-4">
-              Готов продолжить поиск своей второй половинки?
-            </p>
-            <hr class="my-4" />
-            <p>
-              Перейди в свой <router-link to="/profile">профиль</router-link> или начни <router-link to="/swipe">поиск</router-link>! (Ссылка на свайпы пока не работает)
-            </p>
-            <!-- Можно добавить еще кнопки или информацию для залогиненного пользователя -->
-          </template>
-          <template v-else>
-            <h1 class="display-4 fw-bold mb-3">Добро пожаловать в Dating App!</h1>
-            <p class="lead mb-4">
-              Найди свою вторую половинку уже сегодня. Присоединяйся к нашему
-              дружелюбному сообществу.
-            </p>
-            <hr class="my-4" />
-            <p>
-              Это главная страница нашего замечательного приложения. Готов начать?
-            </p>
-            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-4">
-              <router-link to="/login" class="btn btn-outline-primary btn-lg px-4 gap-3">
-                Войти
-              </router-link>
-              <router-link to="/register" class="btn btn-success btn-lg px-4">
-                Зарегистрироваться
-              </router-link>
+  <div>
+    <!-- Экран для неавторизованных пользователей с анимированным REFLEX -->
+    <div v-if="!isAuthenticated" class="landing-page">
+      <div class="landing-content">
+        <!-- Анимированный логотип -->
+        <h1 class="app-name">
+          <span class="letter">R</span>
+          <span class="letter">E</span>
+          <span class="letter">F</span>
+          <span class="letter">L</span>
+          <span class="letter">E</span>
+          <span class="letter">X</span>
+        </h1>
+        <p class="tagline">Найди свою настоящую связь</p>
+        
+        <div class="landing-features">
+          <div class="feature">
+            <div class="feature-icon">
+              <i class="bi-heart-fill"></i>
             </div>
-          </template>
+            <h3>Встречайте людей</h3>
+            <p>Найдите подходящие пары на основе общих интересов и предпочтений</p>
+          </div>
+          
+          <div class="feature">
+            <div class="feature-icon">
+              <i class="bi-chat-dots-fill"></i>
+            </div>
+            <h3>Общайтесь</h3>
+            <p>Знакомьтесь и начинайте увлекательные беседы с новыми людьми</p>
+          </div>
+          
+          <div class="feature">
+            <div class="feature-icon">
+              <i class="bi-shield-check"></i>
+            </div>
+            <h3>Безопасность</h3>
+            <p>Ваша конфиденциальность и безопасность — наши главные приоритеты</p>
+          </div>
+        </div>
+        
+        <div class="cta-buttons">
+          <router-link to="/login" class="action-btn secondary">
+            <i class="bi-person"></i>
+            Войти
+          </router-link>
+          <router-link to="/register" class="action-btn primary">
+            <i class="bi-person-plus"></i>
+            Зарегистрироваться
+          </router-link>
+        </div>
+        
+        <div class="wave-container">
+          <div class="wave"></div>
+          <div class="wave"></div>
+          <div class="wave"></div>
+        </div>
+      </div>
+      
+      <div class="mobile-showcase">
+        <div class="phone-mockup">
+          <div class="phone-screen">
+            <div class="app-preview">
+              <div class="preview-header">
+                <div class="preview-logo">REFLEX</div>
+              </div>
+              <div class="preview-content">
+                <div class="preview-card"></div>
+                <div class="preview-card"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Экран для авторизованных пользователей -->
+    <div v-else class="home-view">
+      <div class="container">
+        <div class="welcome-card">
+          <h1>С возвращением, {{ user?.name || 'Пользователь' }}!</h1>
+          <p class="subtitle">Готовы продолжить поиск своей половинки?</p>
+          
+          <div class="action-tiles">
+            <router-link to="/profile" class="action-tile">
+              <div class="tile-icon">
+                <i class="bi-person-circle"></i>
+              </div>
+              <h3>Мой профиль</h3>
+              <p>Управление личными данными и настройками</p>
+            </router-link>
+            
+            <router-link to="/swipe" class="action-tile">
+              <div class="tile-icon">
+                <i class="bi-suit-heart"></i>
+              </div>
+              <h3>Поиск пары</h3>
+              <p>Находите интересных людей рядом с вами</p>
+            </router-link>
+            
+            <router-link to="/chats" class="action-tile">
+              <div class="tile-icon">
+                <i class="bi-chat-dots"></i>
+              </div>
+              <h3>Сообщения</h3>
+              <p>Общайтесь с вашими совпадениями</p>
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
-    <!-- ... секция с фичами (можно оставить или убрать) ... -->
   </div>
 </template>
 
@@ -55,20 +128,404 @@ onMounted(async () => {
     console.log('HomeView: Пользователь:', user.value);
   }
 });
-
-// Если нужна какая-то специфическая логика для главной страницы, можно добавить здесь.
-// Например, если пользователь аутентифицирован, можно было бы сразу перенаправлять
-// на другую страницу, но это зависит от желаемого UX.
-// import { useRouter } from 'vue-router';
-// const router = useRouter();
-// onMounted(() => {
-//   if (isAuthenticated.value) {
-//     // router.push('/swipe'); // Например, на страницу свайпов
-//   }
-// });
 </script>
 
 <style scoped>
-/* Стили Bootstrap уже должны применяться глобально */
-/* Здесь можно добавить специфичные стили для этой страницы, если нужно */
+/* Глобальные стили */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  width: 100%;
+}
+
+/* Стили для анимированного REFLEX */
+.landing-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.landing-content {
+  width: 50%;
+  padding: 5% 5%;
+  position: relative;
+  z-index: 2;
+}
+
+@media (max-width: 992px) {
+  .landing-page {
+    flex-direction: column;
+  }
+  .landing-content {
+    width: 100%;
+    padding: 10% 5% 20%;
+  }
+  .mobile-showcase {
+    position: relative !important;
+    width: 100% !important;
+    height: 400px !important;
+    transform: none !important;
+  }
+  .phone-mockup {
+    transform: scale(0.8) !important;
+  }
+}
+
+.app-name {
+  font-size: 5rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  letter-spacing: 2px;
+  display: flex;
+}
+
+.letter {
+  display: inline-block;
+  animation: gradientShift 8s infinite;
+  background: linear-gradient(45deg, #ffffff, #64b5f6, #7e57c2, #ff6e40);
+  background-size: 300% 300%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.letter:nth-child(1) { animation-delay: 0s; }
+.letter:nth-child(2) { animation-delay: 0.25s; }
+.letter:nth-child(3) { animation-delay: 0.5s; }
+.letter:nth-child(4) { animation-delay: 0.75s; }
+.letter:nth-child(5) { animation-delay: 1s; }
+.letter:nth-child(6) { animation-delay: 1.25s; }
+
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.tagline {
+  font-size: 1.5rem;
+  opacity: 0.9;
+  margin-bottom: 3rem;
+  font-weight: 300;
+  animation: fadeIn 1s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 0.9; transform: translateY(0); }
+}
+
+.landing-features {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+@media (max-width: 768px) {
+  .landing-features {
+    grid-template-columns: 1fr;
+  }
+  
+  .app-name {
+    font-size: 3rem;
+  }
+}
+
+.feature {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+}
+
+.feature:hover {
+  transform: translateY(-10px);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.feature-icon {
+  background: rgba(255, 255, 255, 0.2);
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+}
+
+.feature-icon i {
+  font-size: 2rem;
+}
+
+.feature h3 {
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.feature p {
+  opacity: 0.8;
+  line-height: 1.6;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 5rem;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 1rem;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.action-btn.primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.6);
+}
+
+.action-btn.primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.8);
+}
+
+.action-btn.secondary {
+  background: rgba(255, 255, 255, 0.9);
+  color: #764ba2;
+  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
+}
+
+.action-btn.secondary:hover {
+  transform: translateY(-3px);
+  background: white;
+  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.5);
+}
+
+.action-btn i {
+  font-size: 1.2rem;
+}
+
+/* Волны анимация */
+.wave-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.wave {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 200%;
+  height: 200px;
+  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25" fill="white"/><path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5" fill="white"/><path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" fill="white"/></svg>') repeat-x;
+  background-size: 1200px 200px;
+  animation: wave 10s linear infinite;
+}
+
+.wave:nth-child(2) {
+  bottom: 10px;
+  animation: wave 16s linear reverse infinite;
+  opacity: 0.8;
+}
+
+.wave:nth-child(3) {
+  bottom: 20px;
+  animation: wave 13s linear infinite;
+  opacity: 0.6;
+}
+
+@keyframes wave {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* Мобильный телефон/макет */
+.mobile-showcase {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateX(5%);
+}
+
+.phone-mockup {
+  width: 300px;
+  height: 600px;
+  background: #222;
+  border-radius: 40px;
+  position: relative;
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
+  border: 6px solid #333;
+  overflow: hidden;
+  transform: rotate(-5deg);
+}
+
+.phone-screen {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow: hidden;
+}
+
+.app-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.preview-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 15px;
+  text-align: center;
+}
+
+.preview-logo {
+  font-weight: 800;
+  letter-spacing: 1px;
+}
+
+.preview-content {
+  height: calc(100% - 50px);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  overflow: hidden;
+}
+
+.preview-card {
+  height: 250px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  animation: cardStack 4s infinite alternate;
+}
+
+.preview-card:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.preview-card:nth-child(2) {
+  animation-delay: 2s;
+}
+
+@keyframes cardStack {
+  0% { transform: translateY(0) scale(1); }
+  100% { transform: translateY(-30px) scale(0.95) rotate(3deg); }
+}
+
+/* Стили для авторизованных пользователей */
+.home-view {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 3rem 0;
+}
+
+.welcome-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 3rem;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.welcome-card h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 0.5rem;
+}
+
+.welcome-card .subtitle {
+  color: #6c757d;
+  font-size: 1.2rem;
+  margin-bottom: 3rem;
+}
+
+.action-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+@media (max-width: 768px) {
+  .action-tiles {
+    grid-template-columns: 1fr;
+  }
+}
+
+.action-tile {
+  background: white;
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  text-align: center;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  color: #333;
+}
+
+.action-tile:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
+}
+
+.tile-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  color: white;
+}
+
+.tile-icon i {
+  font-size: 2.5rem;
+}
+
+.action-tile h3 {
+  font-size: 1.3rem;
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+.action-tile p {
+  color: #6c757d;
+  font-size: 0.9rem;
+}
 </style>
\ No newline at end of file