1. Головна
  2. Промт для правок HTML в стилі ARD HUD/UI

AI EDITING PROTOCOL // EXISTING ELEMENTS

Промт для правок існуючих елементів HTML в стилі ARD HUD/UI

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

ARD HUD/UI — правки HTML

Edit protocol

Скопіюйте промт, додайте поточний файл або HTML-фрагмент і замініть текст у квадратних дужках на опис потрібних змін. Інструкція змушує ШІ зберегти робочу логіку та вносити лише обґрунтовані правки в межах завдання.

Додайте файл або фрагмент наявного HTML та точно вкажіть елемент, який потрібно змінити.
Опишіть бажаний результат і окремо перелічіть логіку, контент та стани, які треба зберегти.
Дозвольте ШІ спочатку перевірити доступні класи, CSS-змінні, SVG-іконки та пов’язаний JavaScript.
Якщо ШІ не має доступу до локального проєкту, прикріпіть код і скриншот поточного вигляду елемента.
ARD HUD/UI · EDIT PROMPT · UK 
ARD HUD/UI Interface — промт для правок існуючих елементів HTML

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

Завдання:
Відредагуй [вкажіть файл, секцію, компонент або CSS-селектор].
Потрібні зміни: [детально опишіть бажаний результат].
Обов’язково зберегти: [логіка, контент, атрибути, стани, адаптивність або інші важливі частини].
Візуальний орієнтир: https://ardilla-cms.top/hudui/

Головний принцип:
Працюй з наявною реалізацією — не створюй паралельний компонент і не переписуй всю сторінку, якщо цього не вимагає завдання. Не змінюй код поза визначеною областю.

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

Межі змін:
- зберігай робочу PHP/HTML/JS-логіку, якщо її зміна прямо не зазначена в завданні;
- не видаляй і не перейменовуй id, name, data-* та класи, на які можуть посилатися стилі або скрипти, без технічної необхідності;
- не дублюй оформлення, яке вже є в бібліотеці;
- не додавай зайвих обгорток, нових залежностей або глобальних стилів;
- не змінюй спільні файли бібліотеки без окремого дозволу.

Файли бібліотеки:
- /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>;
- зберігай керування клавіатурою, зрозумілі підписи, :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. Коротко опиши, що саме змінюєш і які залежності зберігаєш.
2. Перевір синтаксис, адаптивність, доступність і збереження наявної поведінки.
s