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

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');