128 lines
4.3 KiB
HTML
128 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="Навигационная панель экосистемы с разделами, подразделами, поиском и быстрыми переходами."
|
||
/>
|
||
<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=Inter:wght@400;500;600;700;800&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="ambient ambient-one"></div>
|
||
<div class="ambient ambient-two"></div>
|
||
|
||
<main class="shell">
|
||
<section class="hero" aria-labelledby="page-title">
|
||
<div class="hero-content">
|
||
<p class="eyebrow">Infrastructure map</p>
|
||
<h1 id="page-title">Панель экосистемы</h1>
|
||
<p class="lead">
|
||
Единая точка входа в пользовательские, административные,
|
||
мониторинговые и инфраструктурные интерфейсы.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="control-panel" aria-label="Настройки панели">
|
||
<label class="search-field">
|
||
<span>Поиск</span>
|
||
<input
|
||
type="search"
|
||
placeholder="Grafana, S3, журнал, сервер..."
|
||
autocomplete="off"
|
||
data-search-input
|
||
/>
|
||
</label>
|
||
|
||
<div class="control-group">
|
||
<span>Тема</span>
|
||
<button class="segmented is-active" type="button" data-theme="dark">
|
||
Темная
|
||
</button>
|
||
<button class="segmented" type="button" data-theme="light">
|
||
Светлая
|
||
</button>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<span>Вид</span>
|
||
<button class="segmented is-active" type="button" data-view="cards">
|
||
Плитки
|
||
</button>
|
||
<button class="segmented" type="button" data-view="list">
|
||
Список
|
||
</button>
|
||
</div>
|
||
|
||
<div class="control-group accent-group">
|
||
<span>Акцент</span>
|
||
<button
|
||
class="accent-swatch is-active"
|
||
type="button"
|
||
data-accent="violet"
|
||
aria-label="Фиолетовый акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="cyan"
|
||
aria-label="Голубой акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="lime"
|
||
aria-label="Лаймовый акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="amber"
|
||
aria-label="Янтарный акцент"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="overview" aria-label="Сводка">
|
||
<div>
|
||
<span data-total-sections>0</span>
|
||
<p>раздела</p>
|
||
</div>
|
||
<div>
|
||
<span data-total-groups>0</span>
|
||
<p>подразделов</p>
|
||
</div>
|
||
<div>
|
||
<span data-total-items>0</span>
|
||
<p>элементов</p>
|
||
</div>
|
||
<div>
|
||
<span data-visible-items>0</span>
|
||
<p>найдено</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="catalog cards-view" aria-live="polite" data-catalog-root></section>
|
||
|
||
<template id="empty-template">
|
||
<div class="empty-state">
|
||
<img src="assets/search.svg" alt="" />
|
||
<h2>Ничего не найдено</h2>
|
||
<p>Попробуй изменить запрос или искать по названию системы, тегу или роли.</p>
|
||
</div>
|
||
</template>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|