225 lines
11 KiB
HTML
225 lines
11 KiB
HTML
<!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> |