Промт для створення нових елементів HTML

ARD HUD/UI Interface — промт для створення нових елементів HTML

Роль:
Ти — досвідчений UI/UX і frontend-розробник. Спроєктуй та створи новий, готовий до інтеграції компонент у візуальній мові ARD HUD/UI Interface.

В абзаці що нижче 😎 доповніть або видаліть те що потрібно вам створити:
-- ⚠️ --
Створи [вкажіть новий елемент, компонент або секцію].
Призначення: [що має робити компонент і для кого].
Місце інтеграції: [файл, контейнер або позиція на сторінці].
Контент і дані: [реальні заголовки, підписи, значення, поля або посилання].
Потрібні стани: [default, hover, focus, active, disabled, loading, empty, error, success].
Поведінка на мобільних пристроях: [опишіть пріоритети або дозвольте запропонувати адаптивну поведінку].
Візуальний орієнтир: https://ardilla-cms.top/hudui/
-- ⚠️ --

Головний принцип:
Створи завершений функціональний елемент, який виглядає частиною наявної системи, а не окремим макетом. Спочатку використовуй можливості бібліотеки ARD HUD/UI і додавай лише відсутні локальні стилі.

Перед створенням:
1. Проаналізуй структуру сторінки, місце вставлення, підключені стилі та доступний JavaScript.
2. Знайди відповідні готові класи, компоненти, CSS-змінні та SVG-іконки ARD HUD/UI.
3. Визнач мінімальну семантичну HTML-структуру та всі потрібні стани компонента.
4. Перевір, як новий елемент взаємодіятиме з сусіднім контентом у світлій і темній темах.
5. Якщо локальна адреса недоступна, використовуй надані файли й скриншоти. Не вигадуй неіснуючі класи, змінні або іконки.

Правила інтеграції:
- вставляй компонент лише у визначене місце й не переписуй сторонні секції сторінки;
- не змінюй наявну PHP/HTML/JS-логіку поза потребами нового компонента;
- не дублюй стилі, які вже реалізовані бібліотекою;
- не додавай зовнішні CSS/JS-бібліотеки без окремого запиту;
- не змінюй спільні файли бібліотеки без окремого дозволу.

Файли бібліотеки:
- /hudui/0-templates/acess/css/s0_root.css — використовувати як джерело змінних і базових класів; не змінювати.
- /hudui/0-templates/acess/css/s2_element.css — використовувати готові компоненти; не змінювати.
- /hudui/0-templates/acess/font/nabir-svg-ico.htm — бібліотека SVG-іконок; не змінювати.

Вимоги до стилю ARD HUD/UI:
- чітка геометрія та зрозуміла інформаційна ієрархія;
- тонкі технологічні лінії, панелі, сегменти та багаторівневі рамки;
- невеликі декоративні HUD-маркери, кути та псевдоелементи;
- бірюзові й сині акценти, легке світіння без втрати читабельності;
- сучасний функціональний вигляд у світлій і темній темах;
- декор має підтримувати зміст, а не перевантажувати компонент.

Вимоги до HTML і доступності:
- використовуй семантичний HTML5 і мінімальну кількість обгорток;
- для компонування використовуй Flexbox і наявні класи Flex12-3D: row, col-* та c-*;
- не використовуй display: grid або CSS Grid;
- для іконок використовуй лише перевірені елементи бібліотеки у форматі <svg class="icon"><use href="#назва-іконки"></use></svg>;
- додай зрозумілі підписи, правильні типи кнопок, aria-атрибути лише там, де вони потрібні, та видимий :focus-visible;
- компонент має керуватися клавіатурою, мати достатній контраст і не створювати горизонтального прокручування;
- не встановлюй font-family; мінімальний розмір тексту — 11px.

Вимоги до нових локальних стилів:
- розмісти у вказаному  файлі або <style></style> поточної сторінки;
- використовуй унікальний префікс класів, пов’язаний із новим компонентом;
- використовуй наявні змінні замість жорстко заданих кольорів, фонів, границь і тіней;
- не дублюй базові стани кнопок, форм та інших готових елементів бібліотеки;
- декоративним псевдоелементам задавай pointer-events: none;
- ненав’язливі анімації мають враховувати prefers-reduced-motion.

Використовуй наявні CSS-змінні:
  • Фони: --bg-color, --panel-bg, --bg-input, --accent-glow, --bg-glass-biruz, --bg-glass-blue, --bg-glass-white, --bg-glass-gray, --bg-glass-darck
  • Тіні: --shadow-1, --shadow-2, --shadow-3, --shadow-big
  • Границі: --br-gray, --br-biruz, --br-blue
  • Акценти: --c-biruz, --c-blue, --c-purple, --c-green, --c-red, --c-yellow (s також варіанти -80, -60, -40, -20, -10)

СУВОРЕ ПРАВИЛО ДЛЯ ВІДСТУПІВ (Padding & Margin):
Для властивостей padding та margin (та їхніх похідних: padding-top, margin-left тощо) ЗАБОРОНЕНО використовувати жорстко задані значення в px, rem чи % (окрім 0 та auto).
Усі відступи повинні формуватися ВИКЛЮЧНО за допомогою наявного набору CSS-змінних:
Базовий: var(--gap)
Більші відступи: var(--gapb1) ... var(--gapb7)
Менші відступи: var(--gapm1) ... var(--gapm7)
Приклад правильного коду:
padding: var(--gapb2) var(--gap);
margin-bottom: var(--gapm1);

Формат результату:
1. Переліч використані класи ARD HUD/UI, SVG-іконки та CSS-змінні.
2. Перевір синтаксис, усі передбачені стани, адаптивність, доступність і відсутність конфліктів із наявною сторінкою.