HUD/UI Interface

Проекційний дизайн для скляної поверхні  ·  Component Library  ·  2026

Компонентів: 8 категорій CSS: Flex12-3D v2.17 Шрифти: Handjet + Tektur Теми: Light + Dark
Кнопки
btn, btn-line, btn-bg, btn-primary — заповнені та контурні варіанти з розмірами S/M/L
6 варіантів  ·  3 розміри
H1 – H5
Тактичні заголовки: h-tactical (neon), h-neural (purple), h-signal (biruz), h-corpo (corporate)
4 стилі  ·  H1–H5
Перемикачі
Чекбокси chk-neon / chk-bevel, тоглери sw, sw-3d, toggle-modern з кольоровими варіантами
5 варіантів
Акордеони
hud-accordion-v1 (мінімалізм), v2 (purple), v3 (gradient) — на нативному <details>
3 варіанти
UL / OL
Списки hud-ul-v1/v2 та hud-ol-v1/v2, DL-списки hud-dl-v1/v2/v3 для форм і даних
7 варіантів
Карточки
hud-cyber-card з темами blue/purple/green/red, LED-індикатор, прогрес-бар, scanline-ефект
4 теми  ·  2 типи
Кольори
Повна палітра CSS-змінних: black, dark, gray, white, biruz, blue, red, yellow, green, purple
10 груп  ·  6 прозоростей
Іконки
SVG-спрайт nabir-svg-ico — тонкі лінійні іконки для HUD-інтерфейсів
SVG Sprite
Про авторів
Команда розробників ARD HUD/UI Studio, філософія скляних проекційних систем
Команда  ·  R&D Studio

FLEX-12-3D

Візуальний приклад розбивки на 4 колонки:

<section class="row col-3-3-3-3">

<div class="c-3">c-3</div>
<div class="c-3">c-3</div>
<div class="c-3">c-3</div>
<div class="c-3">c-3</div>

</section>

Ієрархія CSS ← Відступів → (Gap Scale)

Візуальне співвідношення проміжків від --gapm7 до --gapb7

m7
3.22px
m6
4.00px
m5
5.20px
m4
6.62px
m3
8.43px
m2
10.72px
m1
13.64px
--gap
17.35px
b1
22.07px
b2
28.07px
b3
35.71px
b4
45.42px
b5
57.77px
b6
73.48px
b7
93.47px
var(--gapm7)
var(--gap)
var(--gapb7)
Псевдо HR лінії
Дизайн нестандартних ліній:




Псевдо HR лінії
Дизайн нестандартних ліній:




ТЕХНОЛОГІЧНИЙ ПАСПОРТ // SYSTEM ARCHITECTURE
// CORE PHILOSOPHY

Сучасний проекційний інтерфейс майбутнього:

ARD HUD/UI Interface — це інноваційна бібліотека компонентів та веб-інтерфейсів, розроблена на базі CSS-фреймворку Flex12-3D. Вона поєднує естетику тактичних HUD-панелей, кібернетичного скляного дизайну (Glassmorphic Bevel) та ергономіку високої читабельності для моніторів будь-якої роздільної здатності.

01 // GRID ENGINE
ACTIVE

Flex12-3D Сітка

12-Column Mesh

Математично точний вирахунок пропорцій та дробових відступів (--gapm7 ... --gapb7) з фасковими кутами corner-shape: bevel.

02 // GLASS & NEON
ACTIVE

Скляна ергономіка

Neon & Glow

Напівпрозорі ефекти з подвійним розмиттям тла (Backdrop Blur), світлодіодними індикаторами та тактичними сканерами.

03 // TYPOGRAPHY
ONLINE

Шрифтова матриця

Handjet + Tektur

Когнітивний шрифт Handjet для цифрових заголовків і моноширинний Tektur для тактичних даних та коду.

04 // ZERO DEPS
READY

Автономність

Pure HTML5 / CSS3

Повна незалежність від важких фреймворків, миттєве завантаження коду та мінімальне навантаження на систему.

Промт для створення сторінок HTML шаблонів
Промт для правок існуючих елементів HTML
Промт для створення нових елементів HTML
s