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

Готові інструкції для створення шаблонів сторінок ARD HUD/UI.

ARD HUD/UI — створення HTML

Create protocol

Скопіюйте промт і замініть текст у квадратних дужках на опис нового компонента. Додайте його призначення, контент, стани та місце інтеграції — ШІ отримає чіткі правила для створення готового елемента.

Назвіть конкретний новий елемент: картка, форма, панель статистики, навігація або секція сторінки.

Додайте реальні тексти, дані, функціональні стани й очікувану поведінку на мобільних пристроях.

Вкажіть файл і точне місце, куди потрібно вставити компонент, а також доступні пов’язані стилі та скрипти.

Якщо ШІ не має доступу до локального проєкту, прикріпіть код сторінки та скриншот стилю ARD HUD/UI.

Ти — досвідчений UI/UX та Frontend-розробник. 
Створи завершений функціональний адаптивний веб-дизайн Головної сторінки інтернет магазину що продає кондиціонери з установкою.
Futuristic 3D HUD interface for a high-tech air conditioning and installation online store, displayed as a translucent holographic glass panel floating in a modern, dark luxury apartment interior. Cyberpunk visual aesthetics, glowing neon cyan and ice-blue neon UI lines, dark glassy background panels with subtle ambient glow.
Контекст: Holographic HUD glass screen floating.
Стиль: Sci-fi, Cyberpunk, Glassmorphism, Neon cyan illumination.
Тема: Тільки світла
---
- Абсолютний шлях до файлів проекту: C:\OSPanel\home\hudui-interface.local\www\
- Головна сторінка: main.php
---
Файли бібліотеки [ARD HUD/UI Interface]:
- /www/hudui/0-templates/acess/css/s0_root.css — використовувати як джерело змінних і базових класів; не змінювати.
- /www/hudui/0-templates/acess/css/s2_element.css — використовувати готові компоненти; не змінювати.
- /www/hudui/0-templates/acess/font/nabir-svg-ico.htm — бібліотека SVG-іконок; не змінювати.
- /www/hudui/img/emoticons/ - набір смайликів.
---
Вимоги до HTML, CSS і доступності:
- використовуй семантичний HTML5 і мінімальну кількість обгорток;
- СУВОРЕ ПРАВИЛО для побудови колонок в блоках використовуй класи сітки Flex12-3D: row, col-* та c-* (ці назви класів мають бути першими).
СТРОГІ ПРАВИЛА CSS:
СТРОГІ ПРАВИЛА CSS:
- НІКОЛИ не використовуй display: grid і будь-які grid-* властивості.
- Завжди спочатку намагайся верстати через float.
- Тільки якщо float принципово не підходить — використовуй flex.
- Grid можна використовувати лише там де неможливо зробити за допомогою flex.
- Використовуй унікальний префікс класів (наприклад, `.shop-*`).
- Додай зрозумілі підписи, правильні типи кнопок, aria-атрибути лише там, де вони потрібні, та видимий :focus-visible;
- Не встановлюй font-family вручну (використовуй успадковані стилі); мінімальний розмір тексту — 11px.
- Ніяких закруглених кутів (border-radius) тільки corner-shape: bevel.   Не можна використовувати - clip-path.
- Для властивостей 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. Шаблони HTML, CSS, JS — суто фронтенд (без бекенд-коду).
2. Шапка (Header) та Підвал (Footer) мають бути ізольованими компонентами/файлами, в "/includes/" для зручного підключення на кожній сторінці.
3. Унікальне HUD-меню: трансформується для мобільних пристроїв, містить іконку пошуку.
4. Усі шляхи до картинок у коді мають вказувати на папку `/img/` (наприклад, `/img/poster-1.webp`).
---
Спочатку продумай план реалізації. Задай уточнюючі запитання.