Инициализация проекта
Стабильный рабочий проект.
This commit is contained in:
Falknat
225
Backend/admin/html/index.html
Normal file
225
Backend/admin/html/index.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>vServer - Админ панель</title>
|
||||
|
||||
<!-- CSS файлы -->
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<link rel="stylesheet" href="assets/css/navigation.css">
|
||||
<link rel="stylesheet" href="assets/css/dashboard.css">
|
||||
<link rel="stylesheet" href="assets/css/system-metrics.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Фоновые частицы -->
|
||||
<div class="floating-particles">
|
||||
<div class="particle" style="width: 18px; height: 18px; top: 15%; left: 10%; animation-delay: 0s;"></div>
|
||||
<div class="particle" style="width: 14px; height: 14px; top: 65%; left: 85%; animation-delay: 3s;"></div>
|
||||
<div class="particle" style="width: 10px; height: 10px; top: 85%; left: 20%; animation-delay: 6s;"></div>
|
||||
<div class="particle" style="width: 22px; height: 22px; top: 25%; left: 75%; animation-delay: 2s;"></div>
|
||||
<div class="particle" style="width: 12px; height: 12px; top: 75%; left: 50%; animation-delay: 4s;"></div>
|
||||
<div class="particle" style="width: 16px; height: 16px; top: 40%; left: 15%; animation-delay: 1s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Основной контейнер -->
|
||||
<div class="admin-container">
|
||||
<!-- Навигация -->
|
||||
<nav class="admin-nav">
|
||||
<div class="nav-header">
|
||||
<div class="logo">vServer</div>
|
||||
<div class="logo-subtitle">Админ панель</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav-menu">
|
||||
<!-- Меню загружается из JSON -->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="admin-main">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Панель Управления</h1>
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot"></div>
|
||||
<span class="status-text">Сервер работает </span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Системная панель метрик -->
|
||||
<div class="system-panel">
|
||||
<div class="system-panel-header">
|
||||
<h2 class="system-title">
|
||||
<span class="system-icon">⚡</span>
|
||||
Системные ресурсы
|
||||
</h2>
|
||||
<div class="system-uptime">
|
||||
<div class="uptime-label">Время работы</div>
|
||||
<div class="uptime-value"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<!-- Метрики загружаются динамически через JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
|
||||
<!-- Статус серверов -->
|
||||
<div class="dashboard-card full-width">
|
||||
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🖥️</span>
|
||||
Статус серверов
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="servers-grid">
|
||||
<!-- Здесь будут статусы серверов -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Сайты -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🌐</span>
|
||||
Сайты
|
||||
</h2>
|
||||
<button class="btn-primary" id="add-site-btn">
|
||||
<span class="btn-plus">+</span>Новый сайт
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stats-row">
|
||||
<!-- Статистика генерируется через JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="sites-preview">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">Последние сайты</span>
|
||||
</div>
|
||||
<div class="sites-list">
|
||||
<!-- Автоматически загружается из JS -->
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#sites" class="btn-link show-all-btn">
|
||||
Показать все сайты (7) →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сертификаты -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🔒</span>
|
||||
Сертификаты
|
||||
</h2>
|
||||
<button class="btn-primary" id="add-cert-btn">
|
||||
<span class="btn-plus">+</span>Новый SSL
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">5</div>
|
||||
<div class="stat-label">Всего сертификатов</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number valid-stat">3</div>
|
||||
<div class="stat-label">Действующих</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number warning-stat">2</div>
|
||||
<div class="stat-label">Истекающих</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="certs-preview">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">Состояние сертификатов</span>
|
||||
</div>
|
||||
<div class="certs-list">
|
||||
<div class="cert-item">
|
||||
<div class="cert-status valid"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">*.voxsel.ru</span>
|
||||
<span class="cert-details">Wildcard • Let's Encrypt</span>
|
||||
</div>
|
||||
<div class="cert-expires">
|
||||
<span class="expires-date">До 30.12.2024</span>
|
||||
<span class="expires-days">89 дней</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon" title="Обновить">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-status warning"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">example.com</span>
|
||||
<span class="cert-details">Standard • Cloudflare</span>
|
||||
</div>
|
||||
<div class="cert-expires warning">
|
||||
<span class="expires-date">До 15.01.2024</span>
|
||||
<span class="expires-days">21 день</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon warning" title="Обновить срочно">⚠️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-status valid"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">api.voxsel.ru</span>
|
||||
<span class="cert-details">Standard • Let's Encrypt</span>
|
||||
</div>
|
||||
<div class="cert-expires">
|
||||
<span class="expires-date">До 05.03.2024</span>
|
||||
<span class="expires-days">72 дня</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon" title="Обновить">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#certificates" class="btn-link show-all-btn">
|
||||
Показать все сертификаты (5) →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Копирайт -->
|
||||
<footer class="admin-footer">
|
||||
<div class="footer-content">
|
||||
Powered by vServer | Сайт разработчика: <a href="https://voxsel.ru" target="_blank">voxsel.ru</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript файлы -->
|
||||
<script src="assets/js/tools.js"></script>
|
||||
<script src="assets/js/dashboard.js"></script>
|
||||
<script src="assets/js/json_loader.js"></script>
|
||||
<script src="assets/js/menu_loader.js"></script>
|
||||
<script src="assets/js/server_status.js"></script>
|
||||
<script src="assets/js/metrics_loader.js"></script>
|
||||
<script src="assets/js/site_list.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user