admin.html - master - Lekant/Anketa

admin.html
167 строк5 KB
Lekant
create: admin.html
26 май 2026, 10:39
26 май 2026, 10:3990f8d42
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Админ-панель - Результаты анкетирования</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .admin-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        .stats-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .stats-number {
            font-size: 32px;
            font-weight: bold;
        }
        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .btn-primary {
            background: #667eea;
            color: white;
        }
        .btn-primary:hover {
            background: #5a67d8;
        }
        .btn-success {
            background: #48bb78;
            color: white;
        }
        .btn-danger {
            background: #f56565;
            color: white;
        }
        .search-box {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 300px;
        }
        .table-wrapper {
            overflow-x: auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            background: #f7fafc;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid #e2e8f0;
            position: sticky;
            top: 0;
            background-color: #f7fafc;
        }
        td {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
        tr:hover {
            background: #f7fafc;
        }
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-filled {
            background: #c6f6d5;
            color: #22543d;
        }
        .status-missing {
            background: #fed7d7;
            color: #742a2a;
        }
        .auto-refresh {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }
        .refresh-indicator {
            font-size: 12px;
            color: #718096;
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <div class="stats-bar">
            <div>
                <h2>📊 Результаты анкетирования выпускников</h2>
                <p>Онлайн-таблица обновляется автоматически</p>
            </div>
            <div class="stats-number" id="statsCount">
                0 / 0
            </div>
        </div>

        <div class="controls">
            <input type="text" id="searchInput" class="search-box" placeholder="🔍 Поиск по ФИО, группе, должности...">
            <button class="btn btn-primary" onclick="refreshTable()">🔄 Обновить вручную</button>
            <button class="btn btn-success" onclick="exportToCSV()">📥 Экспорт в Excel (CSV)</button>
            <button class="btn btn-danger" onclick="resetAutoRefresh()">⏸ Сброс автообновления</button>
            <div class="auto-refresh">
                <span>🔄 Автообновление:</span>
                <span id="refreshStatus" class="refresh-indicator">активно (каждые 10 сек)</span>
            </div>
        </div>

        <div class="table-wrapper">
            <table id="resultsTable">
                <thead>
                    <tr>
                        <th>Статус</th>
                        <th>Дата заполнения</th>
                        <th>ФИО</th>
                        <th>Год выпуска</th>
                        <th>Группа/Факультет</th>
                        <th>Сфера интересов</th>
                        <th>Желаемая должность</th>
                        <th>Ожидаемый доход</th>
                        <th>Готовность к переезду</th>
                        <th>Навыки</th>
                        <th>Комментарий</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <tr>
                        <td colspan="11" style="text-align: center;">Загрузка данных...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="admin.js"></script>
</body>
</html>