Realizacja · Salon fryzjerski
Strona internetowa salonu fryzjerskiego LUMA
Wizytówka kameralnego salonu fryzjerskiego. W kilka sekund widać, co salon oferuje, ile to kosztuje i jak umówić wizytę — na telefonie tak samo wygodnie jak na komputerze.
Zobacz projekt
LUMA (otwiera się w nowej karcie)
Kod źródłowy
na GitHubie (otwiera się w nowej karcie)
Projekt demonstracyjny. Nazwa salonu, dane kontaktowe, ceny i ilustracje są przykładowe.
Założenia
Strona kameralnego salonu fryzjerskiego, która odpowiada na trzy pytania klienta: co salon robi, ile to kosztuje i jak się umówić. Wszystkie dane — nazwa, adres, telefon, cennik i godziny — są fikcyjne i przygotowane do łatwej podmiany.
Rozwiązania
- Jedno źródło danych. Nazwa, kontakt, godziny i cennik są w jednym pliku. Mały skrypt Node.js bez zależności generuje z niego gotowe strony HTML, więc treść nie zależy od JavaScriptu w przeglądarce.
-
Cennik w natywnych elementach
details. Rozwija się bez skryptów i jest poprawnie odczytywany przez czytniki ekranu. -
Galeria w natywnym oknie
dialog. Fokus zostaje w oknie, Esc je zamyka, strzałki przełączają ilustracje, a po zamknięciu fokus wraca na miniaturę. -
Menu mobilne z atrybutem
aria-expanded; tło jest blokowane atrybuteminert, a Esc zamyka menu i przywraca fokus. - Lokalny font (29 KB) z dopasowanym fontem zastępczym, który ogranicza przesunięcia układu podczas wczytywania.
- Prywatność: brak cookies i usług zewnętrznych. Moduł zgód jest przygotowany, ale domyślnie wyłączony.
-
Wersja demonstracyjna jest wyłączona z indeksowania (
noindex); po podaniu prawdziwych danych skrypt włącza indeksowanie i dane strukturalne salonu.
Zbliżenia
