diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index fd49d01..612a3cf 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -76,38 +76,154 @@ -
-
-
-

С возвращением, {{ user?.name || 'Пользователь' }}!

-

Готовы продолжить поиск своей половинки?

+
+
+
+ +
+ +
+
+
+ +
+

С возвращением, {{ user?.name || 'Пользователь' }}!

+

Рады видеть вас снова в REFLEX. Найдите свою идеальную пару сегодня.

+
-
- -
- +
+
+
+
-

Мой профиль

-

Управление личными данными

- - - -
- +
+

25

+

Просмотров профиля

-

Поиск пары

-

Находите интересных людей рядом

- +
- -
+
+
+ +
+
+

8

+

Лайков

+
+
+ +
+
-

Сообщения

-

Общайтесь с вашими совпадениями

+
+

3

+

Новых сообщения

+
+
+
+ +
+

Что вы хотите сделать сегодня?

+ +
+ +
+
+ +
+

Искать пару

+

Находите совпадения с интересными людьми вокруг вас

+
+
+ + + +
+
+ +
+

Мой профиль

+

Обновите информацию и фотографии в своем профиле

+
+
+ + + +
+
+ +
+

Сообщения

+

Проверьте новые сообщения и продолжите беседы

+
+
+ +
+
+ +
+

Предлагаем познакомиться

+ +
+
+
+
+

Анна, 26

+

На расстоянии 2 км

+
+ Музыка + Путешествия +
+
+
87%
+
+ +
+
+
+

Мария, 24

+

На расстоянии 5 км

+
+ Спорт + Книги +
+
+
78%
+
+ +
+
+
+

Елена, 29

+

На расстоянии 3 км

+
+ Кино + Искусство +
+
+
71%
+
+
+ + + Смотреть больше +
+ +
+
+
+
@@ -518,159 +634,549 @@ onMounted(async () => { font-size: 0.9rem; } -/* Медиа-запросы для улучшения адаптивности */ +/* Новые стили для авторизованного интерфейса */ +.auth-home-view { + min-height: 100vh; + color: #333; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} -/* Планшеты и небольшие ноутбуки */ +.auth-bg-gradient { + min-height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + position: relative; + overflow: hidden; +} + +.auth-header { + padding: 1.5rem 2rem; + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 2; +} + +.auth-logo { + display: flex; + align-items: center; + font-size: 2rem; + font-weight: 800; + letter-spacing: 1px; +} + +.logo-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; +} + +.logo-letter:nth-child(1) { animation-delay: 0s; } +.logo-letter:nth-child(2) { animation-delay: 0.25s; } +.logo-letter:nth-child(3) { animation-delay: 0.5s; } +.logo-letter:nth-child(4) { animation-delay: 0.75s; } +.logo-letter:nth-child(5) { animation-delay: 1s; } +.logo-letter:nth-child(6) { animation-delay: 1.25s; } + +.auth-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem 6rem; + position: relative; + z-index: 2; +} + +.welcome-banner { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: white; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + animation: fadeIn 0.8s ease; +} + +.welcome-avatar { + width: 90px; + height: 90px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + border: 3px solid rgba(255, 255, 255, 0.3); +} + +.welcome-avatar i { + font-size: 3rem; + color: white; +} + +.welcome-heading { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + color: white; +} + +.user-name { + background: linear-gradient(45deg, #FFD700, #FFA500); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 800; +} + +.welcome-message { + font-size: 1.2rem; + opacity: 0.9; + max-width: 600px; + margin: 0 auto; +} + +.stats-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 3rem; +} + +.stat-card { + background: white; + border-radius: 16px; + padding: 1.5rem; + display: flex; + align-items: center; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); +} + +.stat-icon { + width: 60px; + height: 60px; + border-radius: 12px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + display: flex; + align-items: center; + justify-content: center; + margin-right: 1.5rem; + color: white; + flex-shrink: 0; +} + +.stat-icon i { + font-size: 1.8rem; +} + +.stat-info { + flex-grow: 1; +} + +.stat-info h3 { + font-size: 2rem; + font-weight: 700; + margin: 0 0 0.2rem; + background: linear-gradient(45deg, #667eea, #764ba2); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.stat-info p { + font-size: 0.9rem; + color: #6c757d; + margin: 0; + line-height: 1.4; +} + +.section-title { + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 1.5rem; + color: white; + position: relative; + display: inline-block; +} + +.section-title::after { + content: ''; + position: absolute; + left: 0; + bottom: -10px; + height: 4px; + width: 60px; + background: linear-gradient(90deg, #FFD700, #FFA500); + border-radius: 2px; +} + +.action-section { + margin-bottom: 3rem; +} + +.action-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.action-card { + background: white; + border-radius: 16px; + overflow: hidden; + position: relative; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + text-decoration: none; + color: #333; + height: 100%; +} + +.action-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.action-card:hover .card-glare { + transform: translateX(150%) translateY(-50%) skew(-20deg, 0); +} + +.action-card-content { + padding: 2rem; + height: 100%; + position: relative; + z-index: 1; +} + +.action-icon { + width: 70px; + height: 70px; + border-radius: 16px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; + color: white; +} + +.action-icon i { + font-size: 2rem; +} + +.action-card h3 { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: #333; +} + +.action-card p { + font-size: 0.95rem; + color: #6c757d; + line-height: 1.6; +} + +.card-glare { + position: absolute; + width: 40%; + height: 200%; + top: 50%; + left: -120%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transform: translateY(-50%) skew(-20deg, 0); + transition: transform 0.7s ease; + z-index: 1; +} + +.suggestions-section { + color: white; +} + +.user-suggestions { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.suggestion-card { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border-radius: 16px; + overflow: hidden; + position: relative; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + display: flex; + flex-direction: column; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.suggestion-card:hover { + transform: translateY(-5px) scale(1.02); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); +} + +.suggestion-photo { + height: 180px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.suggestion-info { + padding: 1.5rem; + flex-grow: 1; +} + +.suggestion-info h3 { + font-size: 1.2rem; + font-weight: 600; + margin: 0 0 0.5rem; +} + +.suggestion-info p { + font-size: 0.85rem; + opacity: 0.8; + margin: 0 0 1rem; +} + +.suggestion-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.suggestion-tags span { + padding: 0.3rem 0.8rem; + background: rgba(255, 255, 255, 0.2); + border-radius: 50px; + font-size: 0.75rem; + white-space: nowrap; +} + +.suggestion-match-percent { + position: absolute; + top: 10px; + right: 10px; + background: linear-gradient(45deg, #FF416C, #FF4B2B); + color: white; + border-radius: 50px; + padding: 0.3rem 0.8rem; + font-size: 0.85rem; + font-weight: 600; + box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3); +} + +.see-more-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.8rem 1.5rem; + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + transition: all 0.3s ease; +} + +.see-more-btn:hover { + background: rgba(255, 255, 255, 0.3); + transform: translateX(5px); +} + +.see-more-btn i { + transition: transform 0.3s ease; +} + +.see-more-btn:hover i { + transform: translateX(5px); +} + +.wave-container-auth { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 150px; + overflow: hidden; + z-index: 1; +} + +.wave-auth { + position: absolute; + bottom: 0; + left: 0; + width: 200%; + height: 150px; + background: url('data:image/svg+xml;utf8,') repeat-x; + background-size: 1200px 150px; + animation: wave 10s linear infinite; + opacity: 0.6; +} + +.wave-auth:nth-child(2) { + bottom: 10px; + animation: wave 16s linear reverse infinite; + opacity: 0.3; +} + +/* Медиа-запросы для авторизованного интерфейса */ @media (max-width: 1100px) { - .landing-content { - padding-left: 3%; - } - - .phone-mockup { - width: 240px; - height: 480px; - } - - .app-name { - font-size: 4rem; - } -} - -/* Планшеты */ -@media (max-width: 992px) { - .landing-page { - flex-direction: column; - height: auto; - min-height: 100vh; - } - - .landing-content, - .mobile-showcase { - width: 100%; - padding: 2rem 1rem; - } - - .landing-content { - padding-top: 4rem; - padding-bottom: 0; - } - - .mobile-showcase { - height: 350px; - order: 1; - margin-top: 2rem; - } - - .phone-mockup { - transform: rotate(-5deg) scale(0.9); - } - - .wave-container { - height: 100px; - } - - .wave { - height: 100px; - background-size: 1200px 100px; - } - - .action-tiles { - gap: 1.5rem; - } -} - -/* Мобильные устройства */ -@media (max-width: 768px) { - .landing-features { - grid-template-columns: 1fr; - } - - .welcome-card { - padding: 2rem 1.5rem; - } - - .welcome-card h1 { - font-size: 2rem; - } - - .action-tiles { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .action-tile { - padding: 1.5rem; - } - - .app-name { - font-size: 3.5rem; - } - - .tagline { - font-size: 1.2rem; - } - - .feature { - padding: 1.5rem; - } - - .cta-buttons { - flex-direction: column; + .stats-cards, + .action-cards, + .user-suggestions { gap: 1rem; - width: 100%; } - .action-btn { - width: 100%; - justify-content: center; - } -} - -/* Мелкие мобильные устройства */ -@media (max-width: 480px) { - .app-name { - font-size: 2.5rem; - justify-content: center; + .welcome-heading { + font-size: 2.2rem; } - .feature-icon { - width: 50px; - height: 50px; - } - - .feature-icon i { - font-size: 1.5rem; - } - - .mobile-showcase { - height: 300px; - } - - .phone-mockup { - transform: rotate(-5deg) scale(0.7); - } - - .welcome-card h1 { - font-size: 1.7rem; - } - - .welcome-card .subtitle { - font-size: 1rem; - margin-bottom: 2rem; - } - - .action-tile { - padding: 1.2rem; - } - - .tile-icon { + .action-icon, + .stat-icon { width: 60px; height: 60px; } - .tile-icon i { + .action-card-content { + padding: 1.5rem; + } +} + +@media (max-width: 992px) { + .stats-cards, + .action-cards, + .user-suggestions { + grid-template-columns: repeat(2, 1fr); + } + + .welcome-banner { + padding: 2rem; + } + + .welcome-heading { + font-size: 2rem; + } + + .section-title { + font-size: 1.6rem; + } + + .welcome-message { + font-size: 1.1rem; + } +} + +@media (max-width: 768px) { + .stats-cards, + .action-cards, + .user-suggestions { + grid-template-columns: 1fr; + gap: 1rem; + } + + .welcome-heading { + font-size: 1.8rem; + } + + .welcome-message { + font-size: 1rem; + } + + .welcome-avatar { + width: 70px; + height: 70px; + } + + .welcome-avatar i { + font-size: 2.2rem; + } + + .section-title { + font-size: 1.4rem; + } + + .welcome-banner, + .stat-card, + .action-card-content, + .suggestion-info { + padding: 1.5rem; + } + + .auth-container { + padding: 0 1rem 5rem; + } + + .auth-header { + padding: 1rem; + } + + .auth-logo { + font-size: 1.7rem; + } +} + +@media (max-width: 480px) { + .welcome-heading { + font-size: 1.6rem; + } + + .welcome-avatar { + width: 60px; + height: 60px; + margin-bottom: 1rem; + } + + .welcome-avatar i { + font-size: 1.8rem; + } + + .section-title { + font-size: 1.3rem; + } + + .welcome-banner, + .stat-card, + .action-card-content, + .suggestion-info { + padding: 1.2rem; + } + + .stat-info h3 { + font-size: 1.6rem; + } + + .action-icon, + .stat-icon { + width: 50px; + height: 50px; + margin-right: 1rem; + } + + .action-icon i, + .stat-icon i { font-size: 1.5rem; } + + .suggestion-photo { + height: 150px; + } } /* Исправления Safari */