Конфигуратор Nixie в стиле Millclock — HTML5/CSS3 + JS

Nixie Clock Configurator — веб-страница настроек nixie-часов в стиле Millclock с живым превью ламп.

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

Стек

HTML5, CSS3 (кастомные свойства, сетка), JavaScript (ES6)

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

Объем функционала
• Time & Date: формат времени, часовой пояс, DST (США/ЕС/ВЫКЛ), дата, Установить время.
• Display & Lighting: яркость, LED-цвет (RGB), режим сияния/анимации, ночной режим, автозатемнение.
• Connectivity: SSID/Пароль, NTP, тест подключения.
• Sound & Alarms: часовой сигнал, будильники, громкость.
• Modes & Safety: игровой автомат, единицы температуры, отображение температуры.
• System: имя устройства, обновление, прошивка, сброс.
• Separator: мигающий/статический/выключен; отдельный «малый» nixie-разделитель с вариантами «:» и «.»
• Спец-символы: °C и °F в nixie-стиле.

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