Millclock-style Nixie Configurator — HTML5/CSS3 + JS

Konfigurator zegara Nixie — strona internetowa ustawień zegara nixie w stylu Millclock z żywym podglądem lamp.

Zadanie
• Przekazać firmowy ciemny styl, uczynić stronę responsywną, z żywym podglądem i natychmiastowym zastosowaniem ustawień.
• Wsparcie dla sekund, formatu 12/24, różnych trybów separatora, jasności, podświetlenia, Wi-Fi i synchronizacji NTP.
• Lokalizacja EN/DE.

Stos

HTML5, CSS3 (własne właściwości, siatka), JavaScript (ES6)

Układ
• Architektura: semantyczny header/main/section/footer, modułowe sekcje-karty.
• Style: zmienne CSS w :root (kolory, promienie, cienie, blask), niestandardowe przełączniki i selektory w stylu iOS.
• Logika JS: reaktywne aktualizowanie podglądu (formaty czasu, separator, jasność, kolor), łagodne migotanie separatora (~1 s).
• Responsywność: typografia clamp, siatki, płynne rozmiary lamp i separatora z zachowaniem proporcji.

Zakres funkcjonalności
• Czas i data: format czasu, strefa czasowa, DST (US/EU/OFF), data, Ustaw czas.
• Wyświetlanie i oświetlenie: jasność, kolor LED (RGB), tryb blasku/animacji, tryb nocny, automatyczne przyciemnienie.
• Łączność: SSID/Hasło, NTP, test połączenia.
• Dźwięk i alarmy: sygnał zegarowy, alarmy, głośność.
• Modele i bezpieczeństwo: automat do gier, jednostki temperatury, wyświetlanie temperatury.
• System: nazwa urządzenia, aktualizacje, firmware, resetowanie.
• Separator: migający/statyczny/wyłączony; oddzielny „mały” separator nixie z opcjami „:” i „.”
• Znaki specjalne: °C i °F w stylu nixie.

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