feat: обновил страницу входа

frontend/src/views/auth/LoginView.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import AppIcon from '@/components/ui/AppIcon.vue'
+import campusBg from '@/assets/images/login-campus.webp'
 
 const auth = useAuthStore()
 const route = useRoute()
@@ -11,113 +12,642 @@ const loading = ref(false)
 
 if (typeof route.query.error === 'string') error.value = route.query.error
 
-async function login() {
+const featureCards = [
+  {
+    icon: 'search' as const,
+    tone: 'blue',
+    title: 'Поиск лекций',
+    description:
+      'Найдите самые интересные курсы и открытые лекции от ведущих преподавателей ЮФУ.',
+  },
+  {
+    icon: 'coin' as const,
+    tone: 'green',
+    title: 'Зарабатывайте монеты',
+    description:
+      'Оставляйте конструктивные отзывы после занятий и получайте вознаграждение.',
+  },
+  {
+    icon: 'trophy' as const,
+    tone: 'amber',
+    title: 'Достижения и награды',
+    description:
+      'Отслеживайте свой рост и открывайте уникальные достижения за активность.',
+  },
+]
+
+async function loginViaYufu() {
   loading.value = true
   error.value = ''
   const ok = auth.startMicrosoftLogin()
   loading.value = false
-  if (!ok) error.value = auth.error ?? 'Не удалось начать вход через Microsoft.'
+  if (!ok) error.value = auth.error ?? 'Не удалось начать вход.'
 }
 </script>
 
 <template>
-  <div class="login-bg">
+  <div class="login-page" :style="{ '--login-bg': `url(${campusBg})` }">
-    <div class="login-card">
+    <div class="login-bg" aria-hidden="true" />
-      <div class="login-header">
+    <div class="login-overlay" aria-hidden="true" />
-        <div class="logo-mark">
+    <div class="login-glow login-glow--left" aria-hidden="true" />
-          <AppIcon icon="world" :size="52" />
+    <div class="login-glow login-glow--right" aria-hidden="true" />
+
+    <main class="login-main fade-in">
+      <section class="login-panel" aria-label="Вход в систему">
+        <div class="login-card">
+          <div class="brand-head">
+            <div>
+              <p class="brand-eyebrow">Южный федеральный университет</p>
+              <h1 class="brand-title">UniVerse</h1>
+              <p class="brand-tagline">Откройте для себя вселенную знаний</p>
+            </div>
+          </div>
+
+          <div class="login-actions">
+            <button class="btn-yufu" type="button" :disabled="loading" @click="loginViaYufu">
+              <span v-if="loading" class="spinner-inline">
+                <span class="spinner spinner-light" />
+              </span>
+              {{ loading ? 'Вход...' : 'Войти через ЮФУ' }}
+            </button>
+
+            <p class="login-trust">
+              <AppIcon icon="shield" :size="14" />
+              Безопасный вход через Microsoft Entra ID
+            </p>
+
+            <div v-if="error" class="login-error" role="alert">
+              <AppIcon class="error-icon" icon="alert-triangle" :size="16" />
+              {{ error }}
+            </div>
+          </div>
         </div>
-        <h1 class="brand">UniVerse</h1>
+      </section>
-        <p class="brand-sub">«Откройте для себя вселенную знаний»</p>
-      </div>
 
-      <div class="login-desc">
+      <section class="login-brand" aria-label="О платформе UniVerse">
-        UniVerse — единая платформа ЮФУ для поиска, записи и участия в открытых межнаправленческих лекциях.
-        Получайте рекомендации, оставляйте отзывы и зарабатывайте монеты за полезную обратную связь.
-      </div>
 
-      <div class="login-actions">
-        <button class="btn-primary btn-full" type="button" :disabled="loading" @click="login">
-          <span v-if="loading" class="spinner-inline">
-            <span class="spinner"></span>
-          </span>
-          {{ loading ? 'Вход...' : 'Войти через ЮФУ (Microsoft Entra ID)' }}
-        </button>
-        <div class="error" v-if="error">
-          <AppIcon class="error-icon" icon="alert-triangle" :size="16" />
-          {{ error }}
-        </div>
-      </div>
 
-      <div class="login-footer">
+        <ul class="feature-list">
-        Вход осуществляется через корпоративный аккаунт ЮФУ. При первом входе требуется подтверждение доступа.
+          <li v-for="(card, index) in featureCards" :key="card.title" class="feature-card"
+            :style="{ '--stagger': `${index * 80}ms` }">
+            <div class="feature-icon" :class="`feature-icon--${card.tone}`" aria-hidden="true">
+              <AppIcon :icon="card.icon" :size="22" />
+            </div>
+            <div>
+              <h2 class="feature-title">{{ card.title }}</h2>
+              <p class="feature-desc">{{ card.description }}</p>
+            </div>
+          </li>
+        </ul>
+      </section>
+
+
+    </main>
+
+    <footer class="login-footer">
+      <div class="footer-left">
       </div>
-    </div>
+      <nav class="footer-center" aria-label="Правовая информация">
+        <a href="#">Политика конфиденциальности</a>
+        <a href="#">Техническая поддержка</a>
+      </nav>
+      <div class="footer-right">© 2026 UniVerse. Все права защищены.</div>
+    </footer>
   </div>
 </template>
 
 <style scoped>
-.login-bg {
+.login-page {
+  --login-text-muted: var(--color-text-secondary);
+  --login-text-soft: var(--color-gray-400);
+
   min-height: 100vh;
-  background: var(--gradient-bg);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  color: var(--color-text);
+}
+
+.login-bg {
+  position: absolute;
+  inset: 0;
+  background-image: var(--login-bg);
+  background-size: cover;
+  background-position: center 72%;
+  transform: scale(1.02);
+}
+
+.login-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(115deg,
+      rgba(224, 242, 254, 0.92) 0%,
+      rgba(220, 252, 231, 0.78) 38%,
+      rgba(255, 255, 255, 0.55) 62%,
+      rgba(224, 242, 254, 0.88) 100%),
+    linear-gradient(to top, rgba(255, 255, 255, 0.35) 0%, transparent 42%);
+  pointer-events: none;
+}
+
+.login-glow {
+  position: absolute;
+  width: min(520px, 55vw);
+  height: min(520px, 55vw);
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.login-glow--left {
+  top: -12%;
+  left: -8%;
+  background: radial-gradient(circle, var(--color-aqua-a40), transparent 70%);
+}
+
+.login-glow--right {
+  bottom: 8%;
+  right: -6%;
+  background: radial-gradient(circle, var(--color-primary-a40), transparent 70%);
+}
+
+.login-main {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(340px, 440px) minmax(340px, 1fr) ;
+  gap: clamp(32px, 5vw, 72px);
+  align-content: center;
+  align-items: stretch;
+  max-width: 1240px;
+  width: 100%;
+  margin: 0 auto;
+  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px) 96px;
+}
+
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  min-height: 100%;
+}
+
+.brand-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.brand-logo {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-md);
+  background: var(--color-white);
+  box-shadow: var(--shadow-card);
+  border: 1px solid var(--color-border-glass);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary-dark);
+  flex-shrink: 0;
+}
+
+.brand-eyebrow {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-aqua-dark);
+}
+
+.brand-title {
+  margin: 0;
+  font-size: clamp(32px, 4vw, 44px);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.brand-tagline {
+  margin: 8px 0 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  max-width: 28ch;
+}
+
+.feature-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.feature-card {
+  --stagger: 0ms;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  background: var(--color-white-a86);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-glass);
+  border: 1px solid var(--color-border-glass);
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+  animation: featureIn 0.55s ease backwards;
+  animation-delay: var(--stagger);
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 36px var(--color-black-a08);
+}
+
+.feature-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.feature-icon--blue {
+  background: var(--color-info-bg-a95);
+  color: var(--color-info-text);
+}
+
+.feature-icon--green {
+  background: var(--color-success-bg-a95);
+  color: var(--color-success-text);
+}
+
+.feature-icon--amber {
+  background: var(--color-warning-bg-a90);
+  color: var(--color-warning-text);
+}
+
+.feature-title {
+  margin: 0 0 4px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.feature-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--login-text-muted);
+}
+
+.login-panel {
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.login-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 400px;
+  padding: 40px 32px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background: var(--color-white-a86);
+  backdrop-filter: blur(28px);
+  -webkit-backdrop-filter: blur(28px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: 24px;
+  box-shadow:
+    0 24px 64px var(--color-black-a12),
+    inset 0 1px 0 var(--color-white-a96);
+  overflow: hidden;
+}
+
+.login-card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--gradient-brand);
+}
+
+.login-card-header {
+  text-align: center;
+}
+
+.login-badge {
+  width: 52px;
+  height: 52px;
+  margin: 0 auto 16px;
+  border-radius: 16px;
+  background: var(--gradient-nav-active);
+  border: 1px solid var(--color-primary-a25);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary-border);
+  box-shadow: 0 8px 20px var(--color-primary-a12);
+}
+
+.login-title {
+  margin: 0 0 8px;
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+}
+
+.login-subtitle {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--login-text-muted);
+}
+
+.login-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.btn-yufu {
+  width: 100%;
+  min-height: 52px;
+  border-radius: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease,
+    opacity 0.18s ease;
+  border: none;
+  color: var(--color-white);
+  background: var(--gradient-brand);
+  box-shadow: 0 12px 28px var(--color-black-a12);
+}
+
+.btn-yufu:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 32px var(--color-black-a16);
+}
+
+.btn-yufu:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-yufu:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.ms-icon {
+  display: inline-grid;
+  grid-template-columns: repeat(2, 9px);
+  grid-template-rows: repeat(2, 9px);
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.ms-tile {
+  border-radius: 1px;
+}
+
+.ms-tile--1 {
+  background: #f25022;
+}
+
+.ms-tile--2 {
+  background: #7fba00;
+}
+
+.ms-tile--3 {
+  background: #00a4ef;
+}
+
+.ms-tile--4 {
+  background: #ffb900;
+}
+
+.login-trust {
+  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--login-text-soft);
 }
-.login-card {
+
-  width: 100%;
+.login-error {
-  max-width: 520px;
-  background: rgba(255,255,255,0.82);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--color-border-glass);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 32px 80px rgba(0,0,0,0.12);
-  padding: 40px 36px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.login-header { text-align: center; }
-.logo-mark { display: inline-flex; justify-content: center; color: var(--color-text); }
-.brand {
-  font-size: 34px;
-  font-weight: 900;
-  background: var(--gradient-brand);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin: 0;
-}
-.brand-sub { font-size: 14px; color: var(--color-text-secondary); margin: 6px 0 0; }
-.login-desc {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  background: rgba(255,255,255,0.6);
-  border-radius: var(--radius-md);
-  padding: 14px 16px;
-  border: 1px solid var(--color-border-glass);
-}
-.login-actions { display: flex; flex-direction: column; gap: 10px; }
-.btn-full { width: 100%; justify-content: center; }
-.error {
   font-size: 13px;
   color: var(--color-error);
-  background: rgba(239,68,68,0.1);
+  background: var(--color-error-a10);
-  border: 1px solid rgba(239,68,68,0.3);
+  border: 1px solid var(--color-error-a30);
   border-radius: var(--radius-sm);
-  padding: 8px 12px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.4;
+}
+
+.error-icon {
+  color: var(--color-error);
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.login-footer {
+  position: relative;
+  z-index: 1;
+  margin-top: auto;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 16px;
+  padding: 14px clamp(16px, 4vw, 40px);
+  background: var(--color-white-a72);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid var(--color-border-glass);
+  font-size: 12px;
+  color: var(--login-text-muted);
+}
+
+.footer-left,
+.footer-center,
+.footer-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
-.error-icon { color: var(--color-error); }
+
-.login-footer {
+.footer-left {
-  text-align: center;
+  justify-content: flex-start;
-  font-size: 12px;
+}
-  color: var(--color-text-secondary);
+
+.footer-uni {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--gradient-brand);
+  color: var(--color-white);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px var(--color-primary-a25);
+}
+
+.footer-uni-label {
+  font-weight: 700;
+  color: var(--color-text);
+  letter-spacing: 0.04em;
+}
+
+.footer-center {
+  justify-content: center;
+  gap: 20px;
+}
+
+.footer-right {
+  justify-content: flex-end;
+  color: var(--login-text-soft);
+  white-space: nowrap;
+}
+
+.footer-center a {
+  color: var(--login-text-muted);
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+
+.footer-center a:hover {
+  color: var(--color-primary-dark);
+}
+
+.spinner-inline {
+  display: inline-flex;
+}
+
+.spinner-inline .spinner {
+  width: 18px;
+  height: 18px;
+  border-width: 2px;
+}
+
+.spinner-light {
+  border-color: var(--color-white-a40);
+  border-top-color: var(--color-white);
+}
+
+@keyframes featureIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 960px) {
+  .login-main {
+    grid-template-columns: 1fr;
+    align-items: center;
+    max-width: 480px;
+    padding-bottom: 108px;
+  }
+
+  .login-brand {
+    order: 1;
+    gap: 20px;
+    width: 100%;
+  }
+
+  .login-panel {
+    order: 2;
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .login-card {
+    max-width: none;
+    width: 100%;
+  }
+
+  .brand-tagline {
+    max-width: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .login-footer {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 10px;
+    padding-bottom: 18px;
+  }
+
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    justify-content: center;
+  }
+
+  .footer-right {
+    white-space: normal;
+  }
+
+  .login-card {
+    padding: 32px 22px 26px;
+    border-radius: 20px;
+  }
+
+  .login-glow {
+    opacity: 0.3;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .feature-card {
+    animation: none;
+  }
+
+  .btn-yufu:hover:not(:disabled) {
+    transform: none;
+  }
+
+  .feature-card:hover {
+    transform: none;
+  }
 }
-.spinner-inline { display: inline-flex; margin-right: 6px; }
-.spinner-inline .spinner { width: 16px; height: 16px; border-width: 2px; }
 </style>