253 lines
11 KiB
HTML
253 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" />
|
||
<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">
|
||
<!--
|
||
Основная сетка приложения:
|
||
слева sticky-меню с деревом навигации, справа каталог карточек.
|
||
Ширина левой колонки управляется CSS-переменной --sidebar-width и ресайзером.
|
||
-->
|
||
<div class="app-layout">
|
||
<!-- Боковая панель: поиск, настройки и дерево навигации по всей структуре. -->
|
||
<aside class="side-panel" aria-label="Навигация по экосистеме">
|
||
<div class="hero-content">
|
||
<!-- Шестеренка открывает fixed popup с настройками внешнего вида и поведения. -->
|
||
<button
|
||
class="settings-button"
|
||
type="button"
|
||
aria-label="Открыть настройки внешнего вида"
|
||
aria-expanded="false"
|
||
data-settings-toggle
|
||
>
|
||
⚙
|
||
</button>
|
||
|
||
<p class="eyebrow" id="page-title">Панель экосистемы</p>
|
||
|
||
<!-- Поиск фильтрует каталог и подсвечивает совпадения в дереве и карточках. -->
|
||
<label class="search-field">
|
||
<input
|
||
type="search"
|
||
placeholder="Grafana, S3, журнал, сервер..."
|
||
autocomplete="off"
|
||
data-search-input
|
||
/>
|
||
</label>
|
||
|
||
<!-- Дерево генерируется из ecosystemSections в script.js. -->
|
||
<nav class="nav-tree" aria-label="Дерево навигации" data-nav-tree></nav>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Вертикальная ручка для изменения ширины бокового меню мышью/указателем. -->
|
||
<div
|
||
class="sidebar-resizer"
|
||
role="separator"
|
||
aria-orientation="vertical"
|
||
aria-label="Изменить ширину бокового меню"
|
||
data-sidebar-resizer
|
||
></div>
|
||
|
||
<!-- Затемнение страницы за popup-настройками. -->
|
||
<div class="settings-overlay" data-settings-overlay></div>
|
||
|
||
<!--
|
||
Popup настроек:
|
||
- тема;
|
||
- режим отображения карточек;
|
||
- видимость нумерации;
|
||
- видимость тегов в дереве;
|
||
- авто-раскрытие дерева при поиске;
|
||
- цветовой акцент.
|
||
-->
|
||
<div class="control-panel" aria-label="Настройки панели" data-settings-panel>
|
||
<div class="settings-panel-head">
|
||
<div>
|
||
<p class="eyebrow">View settings</p>
|
||
<h2>Настройки</h2>
|
||
</div>
|
||
<button class="settings-close" type="button" aria-label="Закрыть настройки" data-settings-close>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Переключение светлой/темной темы. Значение сохраняется в localStorage. -->
|
||
<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 view-group">
|
||
<span>Вид</span>
|
||
<button class="segmented is-active" type="button" data-view="cards">
|
||
Плитки
|
||
</button>
|
||
<button class="segmented" type="button" data-view="list">
|
||
Список
|
||
</button>
|
||
<button class="segmented" type="button" data-view="compact-cards">
|
||
Компакт плитки
|
||
</button>
|
||
<button class="segmented" type="button" data-view="compact-list">
|
||
Компакт список
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Показывать номера разделов, подразделов и элементов. -->
|
||
<label class="toggle-row">
|
||
<span>
|
||
<strong>Показывать нумерацию</strong>
|
||
<small>Разделы, подразделы и элементы</small>
|
||
</span>
|
||
<input type="checkbox" data-show-numbers />
|
||
</label>
|
||
|
||
<!-- Показывать поисковые теги рядом с файлами в дереве навигации. -->
|
||
<label class="toggle-row">
|
||
<span>
|
||
<strong>Показывать теги дерева</strong>
|
||
<small>Теги рядом с элементом, без 2 колонок</small>
|
||
</span>
|
||
<input type="checkbox" data-show-tree-tags />
|
||
</label>
|
||
|
||
<!-- Элементы внутри папок дерева отображаются в две колонки без тегов. -->
|
||
<label class="toggle-row">
|
||
<span>
|
||
<strong>2 колонки в дереве</strong>
|
||
<small>Компактный вид элементов папок</small>
|
||
</span>
|
||
<input type="checkbox" data-tree-two-column />
|
||
</label>
|
||
|
||
<!-- Управляет тем, раскрывает ли поиск только ветки с совпадениями. -->
|
||
<label class="toggle-row">
|
||
<span>
|
||
<strong>Авто раскрывать поиск</strong>
|
||
<small>Сворачивать ветки без совпадений</small>
|
||
</span>
|
||
<input type="checkbox" data-auto-collapse-search />
|
||
</label>
|
||
|
||
<!-- Выбор акцентного цвета интерфейса. -->
|
||
<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>
|
||
<button
|
||
class="accent-swatch accent-swatch-custom"
|
||
type="button"
|
||
data-accent="custom"
|
||
aria-label="Свой градиент"
|
||
title="Свой градиент"
|
||
>
|
||
<span class="accent-swatch-label">Свой</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Настройки пользовательского linear-gradient акцента. -->
|
||
<div class="accent-custom-panel" data-accent-custom-panel hidden>
|
||
<p class="accent-custom-title">Свой градиент</p>
|
||
|
||
<label class="accent-custom-row">
|
||
<span>Угол</span>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="360"
|
||
step="1"
|
||
value="135"
|
||
data-custom-accent-angle
|
||
/>
|
||
<output data-custom-accent-angle-value>135°</output>
|
||
</label>
|
||
|
||
<label class="accent-custom-row">
|
||
<span>Цвет от</span>
|
||
<input type="color" value="#8b5cf6" data-custom-accent-from />
|
||
</label>
|
||
|
||
<label class="accent-custom-row">
|
||
<span>Цвет до</span>
|
||
<input type="color" value="#22d3ee" data-custom-accent-to />
|
||
</label>
|
||
|
||
<div class="accent-custom-preview" data-custom-accent-preview aria-hidden="true"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Каталог карточек генерируется из ecosystemSections в script.js. -->
|
||
<section class="catalog cards-view" aria-live="polite" data-catalog-root></section>
|
||
|
||
<!-- Шаблон ошибки загрузки settings.json / panel data. -->
|
||
<template id="config-error-template">
|
||
<div class="empty-state config-error-state">
|
||
<img src="assets/config.svg" alt="" />
|
||
<h2>Не удалось загрузить панель</h2>
|
||
<p data-config-error-message></p>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон состояния, когда поиск не нашел ни одного элемента. -->
|
||
<template id="empty-template">
|
||
<div class="empty-state">
|
||
<img src="assets/search.svg" alt="" />
|
||
<h2>Ничего не найдено</h2>
|
||
<p>Попробуй изменить запрос или искать по названию системы, тегу или роли.</p>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
</html>
|