universal-dashboard/examples/full/index.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="Демо панели: полная иерархия section → group → item."
    />
    <title>Пример: section → group → item</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="../shared/styles.css" />
  </head>
  <body>
    <div class="ambient ambient-one"></div>
    <div class="ambient ambient-two"></div>

    <main class="shell">
      <div class="app-layout">
        <aside class="side-panel" aria-label="Навигация по экосистеме">
          <div class="hero-content">
            <button
              class="settings-button"
              type="button"
              aria-label="Открыть настройки внешнего вида"
              aria-expanded="false"
              data-settings-toggle
            >
              ⚙
            </button>

            <p class="eyebrow" id="page-title">Пример: section → group → item</p>

            <label class="search-field">
              <input
                type="search"
                placeholder="Grafana, S3, журнал, сервер..."
                autocomplete="off"
                data-search-input
              />
            </label>

            <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>

        <div class="settings-overlay" data-settings-overlay></div>

        <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>

          <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>

          <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>

        <section class="catalog cards-view" aria-live="polite" data-catalog-root></section>

        <template id="config-error-template">
          <div class="empty-state config-error-state">
            <img src="../shared/assets/config.svg" alt="" />
            <h2>Не удалось загрузить панель</h2>
            <p data-config-error-message></p>
          </div>
        </template>

        <template id="empty-template">
          <div class="empty-state">
            <img src="../shared/assets/search.svg" alt="" />
            <h2>Ничего не найдено</h2>
            <p>Попробуй изменить запрос или искать по названию системы, тегу или роли.</p>
          </div>
        </template>
      </div>
    </main>

    <script
      src="../shared/script.js"
      data-ecosystem-panel
      data-asset-base="../shared/"
      defer
    ></script>
  </body>
</html>