mikrotik-proxy-api/templates/admin.html

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Админ-панель | MikroTik Proxy</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
</head>

<body>
    <header class="admin-header">
        <div class="header-left">
            <h2><i class="fas fa-shield-alt"></i> MikroTik Proxy Admin</h2>
        </div>
        <div class="header-right" style="display: flex; gap: 10px;">
            <a href="/" class="btn btn-primary"><i class="fas fa-home"></i> К дашборду</a>
            <button onclick="logout()" class="btn btn-danger"><i class="fas fa-sign-out-alt"></i> Выход</button>
        </div>
    </header>

    <main class="admin-container">
        <!-- Статистика -->
        <div class="stats-grid">
            <div class="stat-card">
                <h3>Всего IP</h3>
                <div id="statTotal" class="value">0</div>
            </div>
            <div class="stat-card">
                <h3>Активных</h3>
                <div id="statActive" class="value" style="color: var(--success-color)">0</div>
            </div>
            <div class="stat-card">
                <h3>Отключенных</h3>
                <div id="statInactive" class="value" style="color: var(--danger-color)">0</div>
            </div>
        </div>

        <!-- Форма добавления -->
        <div class="management-card">
            <h3 class="card-title"><i class="fas fa-plus-circle"></i> Добавить новый адрес</h3>
            <form id="addAddressForm" class="inline-form">
                <div class="form-group">
                    <label>IP Адрес</label>
                    <input type="text" id="inputAddress" placeholder="например, 192.168.1.50" required>
                </div>
                <div class="form-group">
                    <label>Название списка</label>
                    <select id="inputList" required>
                        <!-- Опции загружаются через JS -->
                    </select>
                </div>
                <div class="form-group">
                    <label>Комментарий</label>
                    <input type="text" id="inputComment" placeholder="например, Мой ПК">
                </div>
                <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> Добавить</button>
            </form>
        </div>

        <!-- Управление списками -->
        <div class="management-card">
            <h3 class="card-title"><i class="fas fa-tags"></i> Управление списками доступа</h3>
            <p style="margin-bottom: 20px; color: #666; font-size: 0.9rem;">
                Создавайте именованные списки доступа здесь. Вы сможете выбирать их при добавлении новых IP.
            </p>
            <form id="addListForm" class="inline-form" style="margin-bottom: 25px;">
                <div class="form-group">
                    <label>Новое имя списка</label>
                    <input type="text" id="newListName" placeholder="например, guest_access" required>
                </div>
                <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> Создать список</button>
            </form>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Название</th>
                            <th style="width: 100px;">Действие</th>
                        </tr>
                    </thead>
                    <tbody id="listsTableBody">
                        <!-- Данные загружаются через JS -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Список адресов -->
        <div class="management-card">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 class="card-title" style="margin: 0;"><i class="fas fa-list"></i> Управление списком доступа</h3>
                <div class="form-group" style="width: 250px;">
                    <input type="text" id="tableFilter" placeholder="Поиск по IP или списку...">
                </div>
            </div>

            <div class="table-container">
                <table id="addressesTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>IP Адрес</th>
                            <th>Список</th>
                            <th>Комментарий</th>
                            <th>Статус</th>
                            <th style="width: 150px;">Действия</th>
                        </tr>
                    </thead>
                    <tbody id="addressesTableBody">
                        <!-- Данные загружаются через JS -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Настройки профиля -->
        <div class="management-card">
            <h3 class="card-title"><i class="fas fa-user-cog"></i> Настройки администратора</h3>
            <p style="margin-bottom: 20px; color: #666; font-size: 0.9rem;">
                Здесь вы можете изменить имя пользователя и пароль для входа в панель управления.
            </p>
            <form id="profileForm" class="inline-form">
                <div class="form-group">
                    <label>Имя пользователя</label>
                    <input type="text" id="profileUsername" placeholder="admin" required>
                </div>
                <div class="form-group">
                    <label>Новый пароль (оставьте пустым для сохранения текущего)</label>
                    <input type="password" id="profilePassword" placeholder="••••••••">
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Обновить профиль</button>
            </form>
        </div>
    </main>

    <div id="toast" class="notification"></div>

    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
</body>

</html>