сборка для Ильи
This commit is contained in:
Антон committed
commit
59ce64be5c
18 files changed
+2400
No files matched your search
@@ -0,0 +1,148 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!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="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/style.css') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1><i class="fas fa-sliders-h"></i> Управление устройством</h1>
|
||||
<p class="subtitle">Удаленное управление с проверкой IP-адреса</p>
|
||||
|
||||
<div class="status-panel">
|
||||
<div class="status-title">Текущий статус устройства:</div>
|
||||
<div id="statusIndicator" class="status-indicator status-loading">
|
||||
<i class="fas fa-sync-alt fa-spin"></i> Загрузка...
|
||||
</div>
|
||||
<div id="statusInfo" class="status-info">
|
||||
Получение текущего состояния с сервера...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="btnOn" class="btn btn-on btn-disabled">
|
||||
<i class="fas fa-play"></i> Включить
|
||||
</button>
|
||||
<button id="btnOff" class="btn btn-off btn-disabled">
|
||||
<i class="fas fa-stop"></i> Выключить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="notification" class="notification">
|
||||
<h3><i class="fas fa-info-circle"></i> Информация:</h3>
|
||||
<div id="notificationMessage" class="notification-message">
|
||||
Система определяет ваш IP-адрес и проверяет доступ к управлению.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-info">
|
||||
<strong>Как это работает:</strong>
|
||||
<ul>
|
||||
<li>Сервер автоматически определяет ваш IP-адрес при подключении</li>
|
||||
<li>IP-адрес проверяется по списку доверенных адресов</li>
|
||||
<li>При успешной проверке отображаются кнопки управления</li>
|
||||
<li>При отсутствии интеграции показывается сообщение об ошибке</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!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/style.css') }}">
|
||||
<style>
|
||||
.login-container {
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
color: #3498db;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: left;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
color: #4a5a6a;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-with-icon i {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #95a5a6;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.input-with-icon input {
|
||||
width: 100%;
|
||||
padding: 14px 15px 14px 45px;
|
||||
border: 2px solid #edf2f7;
|
||||
border-radius: 14px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.input-with-icon input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
.input-with-icon input:focus+i {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 30px;
|
||||
font-size: 0.9rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container login-container">
|
||||
<div class="login-header">
|
||||
<div class="login-icon">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
<h1>Безопасный вход</h1>
|
||||
<p class="subtitle">Управление прокси-сервером MikroTik</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label>Имя пользователя</label>
|
||||
<div class="input-with-icon">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" id="username" placeholder="admin" required autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Пароль</label>
|
||||
<div class="input-with-icon">
|
||||
<i class="fas fa-key"></i>
|
||||
<input type="password" id="password" placeholder="••••••••" required>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-on btn-login" id="loginBtn">
|
||||
<i class="fas fa-sign-in-alt"></i> Войти в панель
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="notification" class="notification"></div>
|
||||
|
||||
<div class="footer-links">
|
||||
<p><a href="/"><i class="fas fa-arrow-left"></i> На главную</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/login.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user