feat: complete UI redesign with glassmorphism and custom multi-select equipment dropdown

.agent/rules/main.md

@@ -8,7 +8,8 @@ trigger: always_on
 Этот проект представляет собой веб-сайт системы управления университетским расписанием.
 - **Роль**: Образовательная платформа для управления расписанием.
 - **Язык**: Смешанный (Java Backend + Web Frontend).
-- **Публичный URL**: https://magistr.zuev.company
+- **Публичный URL прода**: https://magistr.zuev.company
+- **Локальный URL проекта**: localhost:80
 
 ## Структура директорий и обязанности
 Проект следует определенной структуре папок. Вы должны придерживаться этих путей:

frontend/admin/admin.css

@@ -8,45 +8,56 @@
 }
 
 :root {
-    --bg-primary: #0f0f1a;
+    /* Deep dark premium background */
-    --bg-sidebar: rgba(255, 255, 255, 0.03);
+    --bg-primary: #0a0a0f;
-    --bg-card: rgba(255, 255, 255, 0.05);
+    --bg-sidebar: rgba(255, 255, 255, 0.02);
-    --bg-card-border: rgba(255, 255, 255, 0.08);
+    --bg-card: rgba(255, 255, 255, 0.03);
-    --bg-input: rgba(255, 255, 255, 0.06);
+    --bg-card-border: rgba(255, 255, 255, 0.05);
-    --bg-input-focus: rgba(255, 255, 255, 0.1);
+    --bg-input: rgba(255, 255, 255, 0.04);
+    --bg-input-focus: rgba(255, 255, 255, 0.08);
     --bg-hover: rgba(255, 255, 255, 0.06);
-    --text-primary: #f0f0f5;
+
-    --text-secondary: #9ca3af;
+    /* Typography */
-    --text-placeholder: #6b7280;
+    --text-primary: #f8fafc;
-    --accent: #6366f1;
+    --text-secondary: #94a3b8;
-    --accent-hover: #818cf8;
+    --text-placeholder: #475569;
-    --accent-glow: rgba(99, 102, 241, 0.35);
+
-    --error: #f87171;
+    /* Vibrant Accents */
-    --success: #34d399;
+    --accent: #8b5cf6;
-    --warning: #fbbf24;
+    --accent-hover: #a78bfa;
-    --radius-sm: 8px;
+    --accent-glow: rgba(139, 92, 246, 0.4);
-    --radius-md: 12px;
+    --accent-secondary: #ec4899;
-    --transition: 0.2s ease;
+
+    /* Status Colors */
+    --error: #ef4444;
+    --success: #10b981;
+    --warning: #f59e0b;
+
+    /* Spatial */
+    --radius-sm: 10px;
+    --radius-md: 16px;
+    --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 /* ===== Light Theme ===== */
 [data-theme="light"] {
-    --bg-primary: #e8eaef;
+    --bg-primary: #f8fafc;
-    --bg-sidebar: rgba(255, 255, 255, 0.88);
+    --bg-sidebar: rgba(255, 255, 255, 0.7);
-    --bg-card: rgba(255, 255, 255, 0.95);
+    --bg-card: rgba(255, 255, 255, 0.7);
-    --bg-card-border: rgba(0, 0, 0, 0.22);
+    --bg-card-border: rgba(0, 0, 0, 0.08);
-    --bg-input: rgba(0, 0, 0, 0.08);
+    --bg-input: rgba(0, 0, 0, 0.03);
-    --bg-input-focus: rgba(0, 0, 0, 0.12);
+    --bg-input-focus: rgba(0, 0, 0, 0.06);
-    --bg-hover: rgba(0, 0, 0, 0.08);
+    --bg-hover: rgba(0, 0, 0, 0.05);
     --text-primary: #0f172a;
-    --text-secondary: #374151;
+    --text-secondary: #475569;
-    --text-placeholder: #6b7280;
+    --text-placeholder: #94a3b8;
     --accent: #6366f1;
     --accent-hover: #4f46e5;
-    --accent-glow: rgba(99, 102, 241, 0.25);
+    --accent-glow: rgba(99, 102, 241, 0.3);
-    --error: #dc2626;
+    --accent-secondary: #d946ef;
-    --success: #16a34a;
+    --error: #ef4444;
-    --warning: #d97706;
+    --success: #10b981;
+    --warning: #f59e0b;
 }
 
 [data-theme="light"] .form-group select option,
@@ -59,6 +70,10 @@
     background: rgba(99, 102, 241, 0.18);
 }
 
+[data-theme="light"] .custom-multi-select .dropdown-menu {
+    background: rgba(255, 255, 255, 0.98);
+}
+
 [data-theme="light"] .form-group input,
 [data-theme="light"] .form-group select,
 [data-theme="light"] .filter-row select {
@@ -85,9 +100,11 @@ body {
 
 /* ===== Sidebar ===== */
 .sidebar {
-    width: 240px;
+    width: 260px;
     min-height: 100vh;
     background: var(--bg-sidebar);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border-right: 1px solid var(--bg-card-border);
     display: flex;
     flex-direction: column;
@@ -96,7 +113,7 @@ body {
     top: 0;
     bottom: 0;
     z-index: 10;
-    transition: background 0.4s ease, border-color 0.4s ease;
+    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .sidebar-header {
@@ -121,14 +138,31 @@ body {
 .nav-item {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.75rem;
-    padding: 0.65rem 0.8rem;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.25rem;
     border-radius: var(--radius-sm);
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     font-weight: 500;
-    transition: background var(--transition), color var(--transition);
+    transition: all var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--accent);
+    border-radius: 0 4px 4px 0;
+    transform: scaleY(0);
+    transition: transform var(--transition);
+    opacity: 0;
 }
 
 .nav-item:hover {
@@ -137,12 +171,23 @@ body {
     transform: translateX(4px);
 }
 
+.nav-item.active {
+    background: rgba(139, 92, 246, 0.12);
+    color: var(--accent-hover);
+}
+
+.nav-item.active::before {
+    transform: scaleY(1);
+    opacity: 1;
+}
+
 .nav-item svg {
     transition: transform var(--transition);
 }
 
-.nav-item:hover svg {
+.nav-item:hover svg,
-    transform: scale(1.1);
+.nav-item.active svg {
+    transform: scale(1.15) rotate(-5deg);
 }
 
 /* Checkbox list styling */
@@ -247,7 +292,7 @@ body {
 /* ===== Main ===== */
 .main {
     flex: 1;
-    margin-left: 240px;
+    margin-left: 260px;
     min-height: 100vh;
 }
 
@@ -290,11 +335,38 @@ body {
 
 .card {
     background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--bg-card-border);
     border-radius: var(--radius-md);
-    padding: 1.5rem;
+    padding: 1.75rem;
-    transition: background 0.4s ease, border-color 0.4s ease;
+    position: relative;
-    animation: slideUpCard 0.4s ease-out both;
+    overflow: visible;
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    animation: slideUpCard 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    opacity: 0;
+    transition: opacity var(--transition);
+}
+
+.card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.card:hover::before {
+    opacity: 1;
 }
 
 /* Staggered cards */
@@ -310,6 +382,11 @@ body {
     animation-delay: 0.3s;
 }
 
+/* Specific Cards */
+.create-card {
+    z-index: 10;
+}
+
 .card h2 {
     font-size: 0.8rem;
     font-weight: 600;
@@ -345,26 +422,43 @@ body {
 .form-group input,
 .form-group select {
     width: 100%;
-    padding: 0.65rem 0.8rem;
+    padding: 0.75rem 1rem;
     background: var(--bg-input);
-    border: 1px solid transparent;
+    border: 1px solid var(--bg-card-border);
     border-radius: var(--radius-sm);
     color: var(--text-primary);
     font-family: inherit;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     outline: none;
-    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
+    transition: all var(--transition);
 }
 
 .form-group input::placeholder {
     color: var(--text-placeholder);
+    transition: opacity var(--transition);
 }
 
 .form-group input:focus,
 .form-group select:focus {
     background: var(--bg-input-focus);
     border-color: var(--accent);
-    box-shadow: 0 0 0 3px var(--accent-glow);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    transform: translateY(-1px);
+}
+
+.form-group input:focus::placeholder {
+    opacity: 0.5;
+}
+
+/* Hide Number Arrows */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
 }
 
 .form-group select {
@@ -382,23 +476,48 @@ body {
 }
 
 .btn-create {
-    padding: 0.65rem 1.5rem;
+    position: relative;
-    background: linear-gradient(135deg, var(--accent), #8b5cf6);
+    overflow: hidden;
+    padding: 0.75rem 1.75rem;
+    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
     border: none;
     border-radius: var(--radius-sm);
     color: #fff;
     font-family: inherit;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     font-weight: 600;
+    letter-spacing: 0.02em;
     cursor: pointer;
     white-space: nowrap;
-    transition: transform var(--transition), box-shadow var(--transition);
+    transition: all var(--transition);
-    box-shadow: 0 2px 10px var(--accent-glow);
+    box-shadow: 0 4px 15px var(--accent-glow);
+}
+
+.btn-create::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--transition);
 }
 
 .btn-create:hover {
-    transform: translateY(-1px);
+    transform: translateY(-2px);
-    box-shadow: 0 4px 16px var(--accent-glow);
+    box-shadow: 0 8px 25px var(--accent-glow);
+}
+
+.btn-create:hover::before {
+    opacity: 1;
+}
+
+.btn-create:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 10px var(--accent-glow);
 }
 
 @keyframes slideDownAlert {
@@ -439,7 +558,7 @@ body {
 
 /* ===== Table ===== */
 .table-wrap {
-    overflow-x: auto;
+    overflow-x: visible;
 }
 
 table {
@@ -459,9 +578,22 @@ thead th {
 }
 
 tbody td {
-    padding: 0.7rem 0.8rem;
+    padding: 0.85rem 1rem;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+    border-bottom: 1px solid var(--bg-card-border);
+    transition: background var(--transition);
+}
+
+@keyframes slideInRow {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slideInRow {
@@ -683,6 +815,122 @@ tbody tr:hover {
 }
 
 /* ===== Theme Toggle Button ===== */
+.theme-toggle {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: var(--bg-card);
+    border: 1px solid var(--bg-card-border);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    transition: all var(--transition);
+    z-index: 100;
+    flex-shrink: 0;
+}
+
+.theme-toggle svg {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.4s ease;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 16px var(--accent-glow);
+}
+
+.theme-toggle:active {
+    transform: scale(0.95);
+}
+
+/* ===== Custom Multi Select ===== */
+.custom-multi-select {
+    position: relative;
+    width: 100%;
+}
+
+.custom-multi-select .select-box {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.95rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all var(--transition);
+}
+
+.custom-multi-select .select-box.active {
+    background: var(--bg-input-focus);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+}
+
+.custom-multi-select .dropdown-icon {
+    transition: transform var(--transition);
+}
+
+.custom-multi-select .select-box.active .dropdown-icon {
+    transform: rotate(180deg);
+}
+
+.custom-multi-select .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 5px);
+    left: 0;
+    width: 100%;
+    background: rgba(15, 15, 26, 0.98);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    padding: 0.75rem;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all var(--transition);
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+.custom-multi-select .dropdown-menu.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.checkbox-group-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.checkbox-group-vertical .checkbox-item {
+    padding: 6px 8px;
+    border-radius: 6px;
+    transition: background var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.checkbox-group-vertical .checkbox-item:hover {
+    background: var(--bg-hover);
+}
 
 /* ===== Modals ===== */
 .modal-overlay {

frontend/admin/admin.js

@@ -73,6 +73,56 @@
     const createEquipmentAlert = document.getElementById('create-equipment-alert');
     const equipmentCheckboxes = document.getElementById('equipment-checkboxes');
 
+    // --- Multi-select logic ---
+    function updateSelectText(containerId, textId) {
+        const container = document.getElementById(containerId);
+        const textEl = document.getElementById(textId);
+        if (!container || !textEl) return;
+        const checked = Array.from(container.querySelectorAll('input:checked'));
+        if (checked.length === 0) {
+            textEl.textContent = 'Выберите оборудование...';
+        } else if (checked.length === 1) {
+            textEl.textContent = checked[0].parentElement.textContent.trim();
+        } else {
+            textEl.textContent = `Выбрано: ${checked.length}`;
+        }
+    }
+
+    function initMultiSelect(boxId, menuId, textId, checkboxContainerId) {
+        const box = document.getElementById(boxId);
+        const menu = document.getElementById(menuId);
+        const container = document.getElementById(checkboxContainerId);
+        if (!box || !menu || !container) return;
+
+        box.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = menu.classList.contains('open');
+            document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
+            document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
+            if (!isOpen) {
+                menu.classList.add('open');
+                box.classList.add('active');
+            }
+        });
+
+        menu.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+
+        container.addEventListener('change', () => {
+            updateSelectText(checkboxContainerId, textId);
+        });
+    }
+
+    initMultiSelect('equipment-select-box', 'equipment-dropdown-menu', 'equipment-select-text', 'equipment-checkboxes');
+    initMultiSelect('edit-equipment-select-box', 'edit-equipment-dropdown-menu', 'edit-equipment-select-text', 'edit-equipment-checkboxes');
+
+    document.addEventListener('click', () => {
+        document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
+        document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
+    });
+    // --------------------------
+
     const navItems = document.querySelectorAll('.nav-item[data-tab]');
     const tabContents = document.querySelectorAll('.tab-content');
 
@@ -427,6 +477,7 @@
                 <input type="checkbox" value="${eq.id}"> ${escapeHtml(eq.name)}
             </label>
         `).join('');
+        updateSelectText('equipment-checkboxes', 'equipment-select-text');
     }
 
     createEquipmentForm.addEventListener('submit', async (e) => {
@@ -541,6 +592,7 @@
             if (res.ok) {
                 showAlert(createClassroomAlert, `Аудитория "${data.name}" добавлена`, 'success');
                 createClassroomForm.reset();
+                updateSelectText('equipment-checkboxes', 'equipment-select-text');
                 loadClassrooms();
             } else {
                 showAlert(createClassroomAlert, data.message || 'Ошибка создания', 'error');
@@ -611,6 +663,7 @@
             } else {
                 editEquipmentCheckboxes.innerHTML = '<p class="text-muted"><small>Нет доступного оборудования</small></p>';
             }
+            updateSelectText('edit-equipment-checkboxes', 'edit-equipment-select-text');
 
             hideAlert(editClassroomAlert);
             modalEditClassroom.classList.add('open');

frontend/admin/index.html

@@ -292,12 +292,24 @@
                             <input type="number" id="new-classroom-capacity" placeholder="30" min="1" required>
                         </div>
                     </div>
-                    <div class="form-row">
+                    <div class="form-row" style="margin-top: 1rem;">
                         <div class="form-group" style="flex: 2;">
                             <label>Оборудование</label>
-                            <div id="equipment-checkboxes" class="checkbox-group">
+                            <div class="custom-multi-select">
-                                <!-- Подгружается через JS -->
+                                <div class="select-box" id="equipment-select-box">
-                                <p class="text-muted"><small>Загрузка...</small></p>
+                                    <span class="select-text" id="equipment-select-text">Выберите оборудование...</span>
+                                    <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </div>
+                                <div class="dropdown-menu" id="equipment-dropdown-menu">
+                                    <div id="equipment-checkboxes" class="checkbox-group-vertical">
+                                        <!-- Подгружается через JS -->
+                                        <p class="text-muted"><small>Загрузка...</small></p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="form-group" style="display: flex; align-items: flex-end;">
@@ -351,8 +363,21 @@
                     <div class="form-row" style="margin-top: 1rem;">
                         <div class="form-group" style="flex: 2;">
                             <label>Оборудование</label>
-                            <div id="edit-equipment-checkboxes" class="checkbox-group">
+                            <div class="custom-multi-select">
-                                <!-- Подгружается через JS -->
+                                <div class="select-box" id="edit-equipment-select-box">
+                                    <span class="select-text" id="edit-equipment-select-text">Выберите
+                                        оборудование...</span>
+                                    <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </div>
+                                <div class="dropdown-menu" id="edit-equipment-dropdown-menu">
+                                    <div id="edit-equipment-checkboxes" class="checkbox-group-vertical">
+                                        <!-- Подгружается через JS -->
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="form-group" style="display: flex; align-items: flex-end;">

frontend/student/index.html

@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html lang="ru">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Панель студента</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -14,72 +13,168 @@
         }
 
         :root {
-            --bg-primary: #0f0f1a;
+            /* Deep dark premium background */
-            --text-primary: #f0f0f5;
+            --bg-primary: #0a0a0f; 
-            --text-secondary: #9ca3af;
+            --bg-card: rgba(255, 255, 255, 0.03);
-            --accent-hover: #818cf8;
+            --bg-card-border: rgba(255, 255, 255, 0.05);
-            --bg-card: rgba(255, 255, 255, 0.05);
+            /* Typography */
-            --bg-card-border: rgba(255, 255, 255, 0.08);
+            --text-primary: #f8fafc;
-            --bg-input: rgba(255, 255, 255, 0.06);
+            --text-secondary: #94a3b8;
-            --accent-glow: rgba(99, 102, 241, 0.35);
+            /* Vibrant Accents */
+            --accent: #8b5cf6;
+            --accent-hover: #a78bfa;
+            --accent-glow: rgba(139, 92, 246, 0.4);
+            --accent-secondary: #ec4899;
         }
 
         [data-theme="light"] {
-            --bg-primary: #e8eaef;
+            --bg-primary: #f8fafc;
+            --bg-card: rgba(255, 255, 255, 0.7);
+            --bg-card-border: rgba(0, 0, 0, 0.08);
             --text-primary: #0f172a;
-            --text-secondary: #374151;
+            --text-secondary: #475569;
+            --accent: #6366f1;
             --accent-hover: #4f46e5;
-            --bg-card: rgba(255, 255, 255, 0.95);
+            --accent-glow: rgba(99, 102, 241, 0.3);
-            --bg-card-border: rgba(0, 0, 0, 0.22);
+            --accent-secondary: #d946ef;
-            --bg-input: rgba(0, 0, 0, 0.08);
-            --accent-glow: rgba(99, 102, 241, 0.25);
         }
 
         body {
-            font-family: 'Inter', sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             background: var(--bg-primary);
             color: var(--text-primary);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            overflow: hidden;
             transition: background 0.4s ease, color 0.4s ease;
         }
 
+        /* ===== Animated Background ===== */
+        .background {
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            overflow: hidden;
+        }
+
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(90px);
+            opacity: 0.4;
+            animation: float 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
+            transition: opacity 0.5s ease;
+            will-change: transform;
+        }
+        
+        [data-theme="light"] .shape { opacity: 0.15; }
+
+        .shape-1 {
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, var(--accent), transparent 60%);
+            top: -20%;
+            left: -10%;
+            animation-delay: 0s;
+        }
+
+        .shape-2 {
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, var(--accent-secondary), transparent 60%);
+            bottom: -20%;
+            right: -10%;
+            animation-delay: -5s;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            50% { transform: translate(-30px, 30px) scale(0.95); }
+        }
+
         @keyframes fadeInScale {
-            from {
+            from { opacity: 0; transform: scale(0.9) translateY(20px); }
-                opacity: 0;
+            to { opacity: 1; transform: scale(1) translateY(0); }
-                transform: scale(0.9);
-            }
-
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
         }
 
-        .placeholder {
+        .placeholder-card {
+            position: relative;
+            z-index: 1;
+            background: var(--bg-card);
+            backdrop-filter: blur(32px);
+            -webkit-backdrop-filter: blur(32px);
+            border: 1px solid var(--bg-card-border);
+            border-radius: 24px;
+            padding: 4rem 3rem;
             text-align: center;
-            animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+            box-shadow: 
+                0 24px 48px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            animation: fadeInScale 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+            max-width: 400px;
+            width: 90%;
         }
         
-        .placeholder h1 {
+        [data-theme="light"] .placeholder-card {
-            font-size: 1.5rem;
+             box-shadow:
-            margin-bottom: 0.5rem;
+                0 20px 40px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.8);
         }
         
-        .placeholder p {
+        .placeholder-card::before {
-            color: var(--text-secondary);
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        }
+
+        .placeholder-card .icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
+            color: var(--text-primary);
             margin-bottom: 1.5rem;
+            box-shadow: 0 0 30px var(--accent-glow);
         }
 
-        .placeholder a {
+        .placeholder-card h1 {
-            color: var(--accent-hover);
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
+        }
+
+        .placeholder-card p {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .btn-logout {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.8rem 2rem;
+            background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+            color: #fff;
             text-decoration: none;
+            font-weight: 600;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px var(--accent-glow);
         }
 
-        .placeholder a:hover {
+        .btn-logout:hover {
-            text-decoration: underline;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px var(--accent-glow);
         }
 
         /* Theme Toggle */
@@ -124,10 +219,21 @@
 </head>
 
 <body>
-    <div class="placeholder">
+    <div class="background">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+    </div>
+
+    <div class="placeholder-card">
+        <div class="icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+            </svg>
+        </div>
         <h1>Панель студента</h1>
-        <p>Раздел в разработке</p>
+        <p>Раздел в разработке.<br>Ожидайте обновлений!</p>
-        <a href="/" onclick="localStorage.removeItem('token'); localStorage.removeItem('role')">Выйти</a>
+        <a href="/" class="btn-logout" onclick="localStorage.removeItem('token'); localStorage.removeItem('role')">Выйти</a>
     </div>
 
     <script src="/theme-toggle.js"></script>

frontend/style.css

@@ -8,50 +8,64 @@
 }
 
 :root {
-  --bg-primary: #0f0f1a;
+  /* Deep dark premium background */
-  --bg-card: rgba(255, 255, 255, 0.05);
+  --bg-primary: #0a0a0f; 
-  --bg-card-border: rgba(255, 255, 255, 0.08);
+  --bg-card: rgba(255, 255, 255, 0.03);
-  --bg-input: rgba(255, 255, 255, 0.06);
+  --bg-card-border: rgba(255, 255, 255, 0.05);
-  --bg-input-focus: rgba(255, 255, 255, 0.1);
+  --bg-input: rgba(255, 255, 255, 0.04);
-  --text-primary: #f0f0f5;
+  --bg-input-focus: rgba(255, 255, 255, 0.08);
-  --text-secondary: #9ca3af;
+  
-  --text-placeholder: #6b7280;
+  /* Typography */
-  --accent: #6366f1;
+  --text-primary: #f8fafc;
-  --accent-hover: #818cf8;
+  --text-secondary: #94a3b8;
-  --accent-glow: rgba(99, 102, 241, 0.35);
+  --text-placeholder: #475569;
-  --error: #f87171;
+  
-  --success: #34d399;
+  /* Vibrant Accents */
-  --radius-sm: 8px;
+  --accent: #8b5cf6;
-  --radius-md: 14px;
+  --accent-hover: #a78bfa;
-  --radius-lg: 20px;
+  --accent-glow: rgba(139, 92, 246, 0.4);
-  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --accent-secondary: #ec4899;
+  
+  /* Status Colors */
+  --error: #ef4444;
+  --success: #10b981;
+  --warning: #f59e0b;
+  
+  /* Spatial */
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 /* ===== Light Theme ===== */
 [data-theme="light"] {
-  --bg-primary: #e8eaef;
+  --bg-primary: #f8fafc;
-  --bg-card: rgba(255, 255, 255, 0.95);
+  --bg-card: rgba(255, 255, 255, 0.7);
-  --bg-card-border: rgba(0, 0, 0, 0.22);
+  --bg-card-border: rgba(0, 0, 0, 0.08);
-  --bg-input: rgba(0, 0, 0, 0.08);
+  --bg-input: rgba(0, 0, 0, 0.03);
-  --bg-input-focus: rgba(0, 0, 0, 0.12);
+  --bg-input-focus: rgba(0, 0, 0, 0.06);
   --text-primary: #0f172a;
-  --text-secondary: #374151;
+  --text-secondary: #475569;
-  --text-placeholder: #6b7280;
+  --text-placeholder: #94a3b8;
   --accent: #6366f1;
   --accent-hover: #4f46e5;
-  --accent-glow: rgba(99, 102, 241, 0.25);
+  --accent-glow: rgba(99, 102, 241, 0.3);
-  --error: #dc2626;
+  --accent-secondary: #d946ef;
-  --success: #16a34a;
+  --error: #ef4444;
+  --success: #10b981;
+  --warning: #f59e0b;
 }
 
 [data-theme="light"] .shape {
-  opacity: 0.25;
+  opacity: 0.15;
 }
 
 [data-theme="light"] .login-card {
   box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.08),
+    0 20px 40px rgba(0, 0, 0, 0.05),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    inset 0 0 20px rgba(255, 255, 255, 0.5);
 }
 
 html {
@@ -83,38 +97,39 @@ body {
 .shape {
   position: absolute;
   border-radius: 50%;
-  filter: blur(80px);
+  filter: blur(90px);
-  opacity: 0.5;
+  opacity: 0.4;
-  animation: float 20s ease-in-out infinite;
+  animation: float 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
-  transition: opacity 0.4s ease;
+  transition: opacity 0.5s ease;
+  will-change: transform;
 }
 
 .shape-1 {
-  width: 500px;
+  width: 600px;
-  height: 500px;
+  height: 600px;
-  background: radial-gradient(circle, #6366f1, transparent 70%);
+  background: radial-gradient(circle, var(--accent), transparent 60%);
-  top: -15%;
+  top: -20%;
   left: -10%;
   animation-delay: 0s;
 }
 
 .shape-2 {
-  width: 400px;
+  width: 500px;
-  height: 400px;
+  height: 500px;
-  background: radial-gradient(circle, #8b5cf6, transparent 70%);
+  background: radial-gradient(circle, var(--accent-secondary), transparent 60%);
-  bottom: -10%;
+  bottom: -20%;
   right: -10%;
-  animation-delay: -7s;
+  animation-delay: -5s;
 }
 
 .shape-3 {
-  width: 300px;
+  width: 400px;
-  height: 300px;
+  height: 400px;
-  background: radial-gradient(circle, #a78bfa, transparent 70%);
+  background: radial-gradient(circle, #3b82f6, transparent 60%);
-  top: 50%;
+  top: 40%;
-  left: 50%;
+  left: 60%;
   transform: translate(-50%, -50%);
-  animation-delay: -14s;
+  animation-delay: -10s;
 }
 
 @keyframes float {
@@ -162,15 +177,29 @@ body {
 /* ===== Login Card (Glassmorphism) ===== */
 .login-card {
   background: var(--bg-card);
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(32px);
-  -webkit-backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(32px);
   border: 1px solid var(--bg-card-border);
   border-radius: var(--radius-lg);
-  padding: 2.5rem 2rem 2rem;
+  padding: 3rem 2.5rem 2.5rem;
   box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.3),
+    0 24px 48px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+    inset 0 0 32px rgba(255, 255, 255, 0.02);
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  z-index: 1;
 }
 
 /* ===== Header ===== */
@@ -241,9 +270,9 @@ body {
 
 .input-wrapper input {
   width: 100%;
-  padding: 0.8rem 0.8rem 0.8rem 2.75rem;
+  padding: 0.9rem 1rem 0.9rem 2.8rem;
   background: var(--bg-input);
-  border: 1px solid transparent;
+  border: 1px solid var(--bg-card-border);
   border-radius: var(--radius-sm);
   color: var(--text-primary);
   font-family: inherit;
@@ -252,17 +281,24 @@ body {
   transition:
     background var(--transition),
     border-color var(--transition),
-    box-shadow var(--transition);
+    box-shadow var(--transition),
+    transform var(--transition);
 }
 
 .input-wrapper input::placeholder {
   color: var(--text-placeholder);
+  transition: opacity var(--transition);
 }
 
 .input-wrapper input:focus {
   background: var(--bg-input-focus);
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+  transform: translateY(-1px);
+}
+
+.input-wrapper input:focus::placeholder {
+  opacity: 0.5;
 }
 
 .input-wrapper input:focus~.input-icon,
@@ -356,14 +392,15 @@ body {
   position: relative;
   overflow: hidden;
   width: 100%;
-  padding: 0.85rem;
+  padding: 0.95rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, var(--accent), #8b5cf6);
+  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
   color: #fff;
   font-family: inherit;
-  font-size: 0.95rem;
+  font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.02em;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -373,22 +410,38 @@ body {
     transform var(--transition),
     box-shadow var(--transition),
     opacity var(--transition);
-  box-shadow: 0 4px 16px var(--accent-glow);
+  box-shadow: 0 4px 15px var(--accent-glow);
+}
+
+.btn-submit::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(rgba(255,255,255,0.2), transparent);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity var(--transition);
 }
 
 .btn-submit:hover {
-  transform: translateY(-1px);
+  transform: translateY(-2px);
-  box-shadow: 0 6px 24px var(--accent-glow);
+  box-shadow: 0 8px 25px var(--accent-glow);
+}
+
+.btn-submit:hover::before {
+  opacity: 1;
 }
 
 .btn-submit:active {
-  transform: translateY(0);
+  transform: translateY(1px);
+  box-shadow: 0 2px 10px var(--accent-glow);
 }
 
 .btn-submit:disabled {
-  opacity: 0.7;
+  opacity: 0.6;
   cursor: not-allowed;
   transform: none;
+  box-shadow: none;
 }
 
 /* ===== Ripple Effect ===== */

frontend/teacher/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Панель преподавателя</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -14,72 +14,186 @@
         }
 
         :root {
-            --bg-primary: #0f0f1a;
+            /* Deep dark premium background */
-            --text-primary: #f0f0f5;
+            --bg-primary: #0a0a0f;
-            --text-secondary: #9ca3af;
+            --bg-card: rgba(255, 255, 255, 0.03);
-            --accent-hover: #818cf8;
+            --bg-card-border: rgba(255, 255, 255, 0.05);
-            --bg-card: rgba(255, 255, 255, 0.05);
+            /* Typography */
-            --bg-card-border: rgba(255, 255, 255, 0.08);
+            --text-primary: #f8fafc;
-            --bg-input: rgba(255, 255, 255, 0.06);
+            --text-secondary: #94a3b8;
-            --accent-glow: rgba(99, 102, 241, 0.35);
+            /* Vibrant Accents */
+            --accent: #8b5cf6;
+            --accent-hover: #a78bfa;
+            --accent-glow: rgba(139, 92, 246, 0.4);
+            --accent-secondary: #ec4899;
         }
 
         [data-theme="light"] {
-            --bg-primary: #e8eaef;
+            --bg-primary: #f8fafc;
+            --bg-card: rgba(255, 255, 255, 0.7);
+            --bg-card-border: rgba(0, 0, 0, 0.08);
             --text-primary: #0f172a;
-            --text-secondary: #374151;
+            --text-secondary: #475569;
+            --accent: #6366f1;
             --accent-hover: #4f46e5;
-            --bg-card: rgba(255, 255, 255, 0.95);
+            --accent-glow: rgba(99, 102, 241, 0.3);
-            --bg-card-border: rgba(0, 0, 0, 0.22);
+            --accent-secondary: #d946ef;
-            --bg-input: rgba(0, 0, 0, 0.08);
-            --accent-glow: rgba(99, 102, 241, 0.25);
         }
 
         body {
-            font-family: 'Inter', sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             background: var(--bg-primary);
             color: var(--text-primary);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            overflow: hidden;
             transition: background 0.4s ease, color 0.4s ease;
         }
 
+        /* ===== Animated Background ===== */
+        .background {
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            overflow: hidden;
+        }
+
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(90px);
+            opacity: 0.4;
+            animation: float 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
+            transition: opacity 0.5s ease;
+            will-change: transform;
+        }
+
+        [data-theme="light"] .shape {
+            opacity: 0.15;
+        }
+
+        .shape-1 {
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, var(--accent), transparent 60%);
+            top: -20%;
+            left: -10%;
+            animation-delay: 0s;
+        }
+
+        .shape-2 {
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, var(--accent-secondary), transparent 60%);
+            bottom: -20%;
+            right: -10%;
+            animation-delay: -5s;
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translate(0, 0) scale(1);
+            }
+
+            50% {
+                transform: translate(-30px, 30px) scale(0.95);
+            }
+        }
+
         @keyframes fadeInScale {
             from {
                 opacity: 0;
-                transform: scale(0.9);
+                transform: scale(0.9) translateY(20px);
             }
 
             to {
                 opacity: 1;
-                transform: scale(1);
+                transform: scale(1) translateY(0);
             }
         }
 
-        .placeholder {
+        .placeholder-card {
+            position: relative;
+            z-index: 1;
+            background: var(--bg-card);
+            backdrop-filter: blur(32px);
+            -webkit-backdrop-filter: blur(32px);
+            border: 1px solid var(--bg-card-border);
+            border-radius: 24px;
+            padding: 4rem 3rem;
             text-align: center;
-            animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+            box-shadow:
+                0 24px 48px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            animation: fadeInScale 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+            max-width: 400px;
+            width: 90%;
         }
 
-        .placeholder h1 {
+        [data-theme="light"] .placeholder-card {
-            font-size: 1.5rem;
+            box-shadow:
-            margin-bottom: 0.5rem;
+                0 20px 40px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.8);
         }
 
-        .placeholder p {
+        .placeholder-card::before {
-            color: var(--text-secondary);
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        }
+
+        .placeholder-card .icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
+            color: var(--text-primary);
             margin-bottom: 1.5rem;
+            box-shadow: 0 0 30px var(--accent-glow);
         }
 
-        .placeholder a {
+        .placeholder-card h1 {
-            color: var(--accent-hover);
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
+        }
+
+        .placeholder-card p {
+            color: var(--text-secondary);
+            font-size: 1rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .btn-logout {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.8rem 2rem;
+            background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+            color: #fff;
             text-decoration: none;
+            font-weight: 600;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px var(--accent-glow);
         }
 
-        .placeholder a:hover {
+        .btn-logout:hover {
-            text-decoration: underline;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px var(--accent-glow);
         }
 
         /* Theme Toggle */
@@ -124,10 +238,23 @@
 </head>
 
 <body>
-    <div class="placeholder">
+    <div class="background">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+    </div>
+
+    <div class="placeholder-card">
+        <div class="icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
+                <path d="M6 12v5c3 3 9 3 12 0v-5" />
+            </svg>
+        </div>
         <h1>Панель преподавателя</h1>
-        <p>Раздел в разработке</p>
+        <p>Раздел в разработке.<br>Ожидайте обновлений!</p>
-        <a href="/" onclick="localStorage.removeItem('token'); localStorage.removeItem('role')">Выйти</a>
+        <a href="/" class="btn-logout"
+            onclick="localStorage.removeItem('token'); localStorage.removeItem('role')">Выйти</a>
     </div>
 
     <script src="/theme-toggle.js"></script>