Millclock-style Nixie Configurator — HTML5/CSS3 + JS

Nixie Clock Configurator — веб-сторінка налаштувань nixie-годинника у стилі Millclock з живим прев’ю ламп.

Задача
• Передати фірмовий темний стиль, зробити сторінку адаптивною, з живим попереднім переглядом та миттєвим застосуванням налаштувань.
• Підтримка секунд, 12/24-формату, різних режимів розділювача, яскравості, підсвітки, Wi-Fi та NTP-синхронізації.
• Локалізація EN/DE.

Стек

HTML5, CSS3 (custom props, grid), JavaScript (ES6)

Верстка
• Архітектура: семантичний header/main/section/footer, модульні секції-картки.
• Стилі: CSS-змінні в :root (кольори, радіуси, тіні, глоу), кастомні тумблери й селекти у стилі iOS.
• JS-логіка: реактивне оновлення прев’ю (формати часу, сепаратор, яскравість, колір), м’яке блимання розділювача (~1 c).
• Адаптив: clamp-типографіка, гріди, флюїдні розміри ламп і сепаратора із збереженням пропорцій.

Обсяг функціоналу
• Time & Date: формат часу, часовий пояс, DST (US/EU/OFF), дата, Set Time.
• Display & Lighting: яскравість, LED-колір (RGB), режим сяйва/анімації, нічний режим, автозатемнення.
• Connectivity: SSID/Password, NTP, тест підключення.
• Sound & Alarms: годинний сигнал, тривоги, гучність.
• Modes & Safety: slot machine, одиниці температури, відображення температури.
• System: ім’я пристрою, оновлення, firmware, скидання.
• Separator: blinking/static/off; окремий «малий» nixie-сепаратор з варіантами «:» і «.»
• Спец-символи: °C і °F у nixie-стилі.

#Nixie #UI #UX #WebDesign #Frontend #HTML5 #CSS3 #JavaScript #SVG #Canvas #Animation #Responsive #DarkTheme #IoT #Clock #Millclock #Accessibility #Localization