216 lines
8.7 KiB
HTML
216 lines
8.7 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>My App</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="shell">
|
||
|
||
<!-- ═══════ Sidebar ═══════════════════════════════════════════════════ -->
|
||
<div class="sidebar" id="main-sidebar">
|
||
|
||
<div class="logo">
|
||
<div class="logo-dot"></div>
|
||
<span class="nav-label">MyApp</span>
|
||
<button class="sb-toggle" id="sb-toggle-btn" onclick="toggleSidebar()" title="Свернуть">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
|
||
<path d="M10 12l-4-4 4-4"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="nav-section">Навигация</div>
|
||
|
||
<a href="#" class="nav-item active" title="Главная">
|
||
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M2 8l6-6 6 6M4 8v6h8V8"/>
|
||
</svg>
|
||
<span class="nav-label">Главная</span>
|
||
</a>
|
||
|
||
<a href="#" class="nav-item" title="Элементы">
|
||
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M5 6h6M5 9h6M5 12h4"/>
|
||
</svg>
|
||
<span class="nav-label">Элементы</span>
|
||
</a>
|
||
|
||
<a href="#" class="nav-item" title="Пользователи">
|
||
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="8" cy="6" r="3"/><path d="M3 14c0-2.8 2.2-5 5-5s5 2.2 5 5"/>
|
||
</svg>
|
||
<span class="nav-label">Пользователи</span>
|
||
</a>
|
||
|
||
<div class="nav-divider"></div>
|
||
<div class="nav-section">Управление</div>
|
||
|
||
<a href="#" class="nav-item" title="Настройки">
|
||
<svg class="nav-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="8" cy="8" r="2.5"/>
|
||
<path d="M8 2v1.5M8 12.5V14M14 8h-1.5M3.5 8H2M12.2 3.8l-1.1 1.1M4.9 11.1l-1.1 1.1M12.2 12.2l-1.1-1.1M4.9 4.9L3.8 3.8"/>
|
||
</svg>
|
||
<span class="nav-label">Настройки</span>
|
||
</a>
|
||
|
||
<div class="nav-bot">
|
||
<span class="nav-bot-uname">admin</span>
|
||
<button class="theme-toggle" onclick="toggleTheme()" title="Тема">
|
||
<svg data-theme-icon viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
|
||
<circle cx="8" cy="8" r="3"/>
|
||
<path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.2 3.2l1.4 1.4M11.4 11.4l1.4 1.4M3.2 12.8l1.4-1.4M11.4 4.6l1.4-1.4"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ═══════ Main content ═════════════════════════════════════════════ -->
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<h1>Главная</h1>
|
||
<input class="search" placeholder="Поиск...">
|
||
<button class="btn btn-primary btn-sm" onclick="openModal('m1')">+ Добавить</button>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- Metrics grid -->
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-label">Всего записей</div>
|
||
<div class="metric-val">1,284</div>
|
||
<div class="metric-sub">+12 за сегодня</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">Активных</div>
|
||
<div class="metric-val">42</div>
|
||
<div class="metric-sub"><span class="dot dot-green"></span>Online</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">Ошибки</div>
|
||
<div class="metric-val">3</div>
|
||
<div class="metric-sub"><span class="dot dot-red"></span>Требуют внимания</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label">Использование</div>
|
||
<div class="metric-val">68%</div>
|
||
<div class="metric-sub">256 из 378 ГБ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table card -->
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<div class="card-title">Последние события</div>
|
||
<button class="btn btn-sm">Экспорт</button>
|
||
</div>
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr><th>Имя</th><th>Статус</th><th>Тип</th><th>Обновлено</th><th></th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>example-1</td>
|
||
<td><span class="badge badge-green">active</span></td>
|
||
<td>primary</td>
|
||
<td>2 мин назад</td>
|
||
<td><button class="btn btn-sm">…</button></td>
|
||
</tr>
|
||
<tr class="selected">
|
||
<td>example-2</td>
|
||
<td><span class="badge badge-amber">pending</span></td>
|
||
<td>secondary</td>
|
||
<td>15 мин назад</td>
|
||
<td><button class="btn btn-sm">…</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>example-3</td>
|
||
<td><span class="badge badge-red">error</span></td>
|
||
<td>primary</td>
|
||
<td>1 час назад</td>
|
||
<td><button class="btn btn-sm btn-danger">×</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Form card -->
|
||
<div class="card">
|
||
<div class="card-head"><div class="card-title">Форма настроек</div></div>
|
||
<div class="card-body">
|
||
<div class="form-row"><label>Название</label><input value="My App"></div>
|
||
<div class="form-row"><label>Email</label><input type="email" placeholder="you@example.com"></div>
|
||
<div class="form-row"><label>Режим</label>
|
||
<select><option>Автоматический</option><option>Ручной</option></select>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-primary">Сохранить</button>
|
||
<button class="btn">Отмена</button>
|
||
<button class="btn btn-danger" style="margin-left:auto">Сбросить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ Modal ═════════════════════════════════════════════════════ -->
|
||
<div class="overlay" id="m1">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<div class="modal-title">Новый элемент</div>
|
||
<button class="modal-close" onclick="closeModal('m1')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-row"><label>Имя</label><input required></div>
|
||
<div class="form-row"><label>Тип</label>
|
||
<select><option>primary</option><option>secondary</option></select>
|
||
</div>
|
||
<div class="form-row"><label>Описание</label><textarea rows="3"></textarea></div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn" onclick="closeModal('m1')">Отмена</button>
|
||
<button class="btn btn-primary">Создать</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ Mobile nav (видна < 768px) ═════════════════════════════════ -->
|
||
<nav class="mob-nav">
|
||
<a href="#" class="mob-nav-item active">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<path d="M2 8l6-6 6 6M4 8v6h8V8"/>
|
||
</svg>
|
||
<span>Главная</span>
|
||
</a>
|
||
<a href="#" class="mob-nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M5 6h6M5 9h6"/>
|
||
</svg>
|
||
<span>Элементы</span>
|
||
</a>
|
||
<a href="#" class="mob-nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<circle cx="8" cy="6" r="3"/><path d="M3 14c0-2.8 2.2-5 5-5s5 2.2 5 5"/>
|
||
</svg>
|
||
<span>Люди</span>
|
||
</a>
|
||
<button class="mob-nav-item" onclick="toggleTheme()">
|
||
<svg data-theme-icon viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<circle cx="8" cy="8" r="3"/>
|
||
<path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.2 3.2l1.4 1.4M11.4 11.4l1.4 1.4M3.2 12.8l1.4-1.4M11.4 4.6l1.4-1.4"/>
|
||
</svg>
|
||
<span>Тема</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|