Szalone auto – karta projektu

Zadanie

Warsztat, któremu można zaufać – mimo szalonej nazwy

Klient chciał strony, która przyciągnie nowych klientów z Wrocławia i regionu, pokaże ofertę z cenami i przekona, że warsztat działa fachowo. Główny cel: odwiedzający ma zadzwonić i przyjechać.

„Szalona nazwa. Poważna robota.”Kontrast nazwy i profesjonalizmu stał się osią całej marki.

BranżaWarsztat samochodowy: mechanika, klimatyzacja, diagnostyka, elektronika, opony, geometria, LPG, blacharstwo, szyby
SpecjalizacjaBMW, Audi, Toyota
KlienciKierowcy prywatni i firmy z flotą; zwrot „Pan / Pani”
WartościZaufanie, fachowość, przystępna cena, staranność
KontaktWizyty tylko telefonicznie – przycisk „Zadzwoń” na każdym ekranie
WymaganieWłaściciel sam aktualizuje teksty, cennik, promocje, godziny i zdjęcia

Identyfikacja

Logo z jednej linii

Litera „S” narysowana jedną kreską o stałej grubości – jak tor jazdy przez dwa zakręty. Kształt jest dynamiczny, ale linia równa i kontrolowana. Mosiężny odcinek na końcu to „meta”: robota skończona. Znak jest czytelny także jako ikona 32 px i zdjęcie profilowe.

Z trzech koncepcji ta najlepiej łączy nowoczesny i luksusowy charakter z obietnicą przystępnej ceny. Pominąłem ograne symbole branży: klucz, zębatkę, tłok.

Archivo Expandednagłówki i logo

Hanken Grotesk – czytelny tekst na telefonietreść

Grafit
#15171C

Mosiądz
#C9A35B

Mosiądz ciemny
#8A6A2E

Stal
#EEF0F3

Kontrast tekstu sprawdzony wg WCAG 2.1 AA: mosiądz na graficie 7,6:1, ciemny mosiądz na bieli 5,0:1.

Strona

Wszystko prowadzi do telefonu

Pięć podstron: Start, Usługi, Cennik, O nas, Kontakt. Numer telefonu jest w nagłówku, na kartach usług i promocji, w pasku na dole ekranu telefonu i w stopce.

Promocje, które same się kończą

Każda promocja ma termin. Karta pokazuje datę końca, odliczanie („Zostało 30 dni 3 h”) i pasek postępu. Po terminie promocja znika ze strony bez udziału właściciela. Aktywne promocje przewijają się też na górnym pasku komunikatów.

Sekcja Aktualne promocje z dwiema kartami: plakietka ceny, odliczanie do końca i pasek postępu — Karty promocji z odliczaniem i przyciskiem „Zadzwoń i umów”.

Usługi z cenami od–do

Dziesięć usług w pięciu kategoriach. Przy każdej: opis, czas, przedział ceny i przycisk – „Zadzwoń i umów” albo „Zapytaj o wycenę”, który otwiera formularz z wybraną usługą. Plakietki „Promocja” i „Nowość” pojawiają się automatycznie.

Siatka kart usług z ikonami, przedziałami cen i przyciskami — Najczęściej wybierane usługi na stronie głównej.

Ruch, który nie odbiera powagi

Zamiast przypadkowych zdjęć ze stocku – animowane rysunki techniczne w kolorach logo: auto, sygnał diagnostyczny, geometria kół, klimatyzacja, hamulce. Linie rysują się przy zmianie slajdu. W sekcji specjalizacji w tle płynie przebieg „z oscyloskopu”.

Slider z płynnym przejściem i zbliżeniem co 6 s
Galeria z filtrami i powiększeniem (strzałki, klawiatura, licznik)
Wszystko wyłącza się przy ustawieniu „ogranicz ruch”

Powiększona grafika z galerii: rysunek sygnału diagnostycznego z gniazdem OBD — Galeria w powiększeniu – rysunek „Diagnostyka komputerowa”.

Godziny i status na żywo

Strona wie, czy warsztat jest teraz otwarty: „Otwarte teraz · do 18:00”, na żółto w ostatniej godzinie, „Zamknięte · otwieramy jutro o 8:00”. Dzisiejszy dzień jest wyróżniony, a święta pojawiają się 60 dni wcześniej jako „Zmiany w godzinach”.

Podstrona Kontakt: duży numer telefonu, tabela godzin z wyróżnionym dniem, status otwarcia i zmiany w godzinach — Kontakt: telefon, godziny, status i nadchodzące święta.

Panel administratora

Właściciel zmienia stronę sam

Kłódka w rogu strony otwiera panel. Każda zmiana od razu pojawia się na stronie i zapisuje się automatycznie. Bez instalowania czegokolwiek i bez znajomości kodu.

Pulpit z harmonogramem

Na start: czy warsztat jest teraz otwarty, ile promocji działa, ile czeka w kolejce. Wykres pokazuje promocje i aktualności na osi czasu – 30 dni wstecz i 90 naprzód – a lista „Najbliższe 45 dni” podpowiada, co się pojawi, co zniknie i kiedy warsztat będzie nieczynny.

Pulpit panelu: kafelki ze stanem warsztatu i liczbami, wykres Gantta promocji i aktualności z linią dzisiaj — Pulpit: kafelki, harmonogram i szybkie przyciski „+ Promocja”, „+ Aktualność”.

Lista promocji w panelu z filtrami statusu, plakietkami Aktywna, Zaplanowana, Zakończona i przyciskami Ukryj, Duplikuj, Edytuj, Usuń — Promocje: statusy liczone automatycznie, filtry, kolejność strzałkami.

Okno edycji promocji: tytuł, opis, plakietka, powiązana usługa, zdjęcie, daty od–do i opcja paska komunikatów — Edycja: zdjęcie z dysku zmniejsza się samo, daty są sprawdzane.

Ekran godzin otwarcia: siedem dni z przełącznikami i polami godzin, przyciski kopiowania poniedziałku — Godziny: kopiowanie poniedziałku na tydzień, dni specjalne.

Ekran sekcji strony z przełącznikami widoczności dla każdej sekcji — Sekcje: włączanie, wyłączanie i tytuły każdej części strony.

Oferta: usługi, kategorie, cennik w tabelach, pakiety
Treści czasowe: promocje i aktualności z terminami i paskiem komunikatów
Wizerunek: nagłówek, slider, wyróżniki, kroki wizyty, marki, galeria
Zaufanie: opinie z podsumowaniem ocen, FAQ, części i produkty

Warsztat: o firmie, zespół, godziny, dane kontaktowe, dojazd i płatności
Bezpieczne usuwanie: „Na pewno?” przed każdym usunięciem, ukrywanie bez kasowania
Kopia zapasowa: eksport i import pliku .json, przywracanie treści początkowych
Formatowanie: *kursywa w kolorze marki*, **pogrubienie**, akapity

Telefon

Najpierw telefon, potem komputer

Większość kierowców szuka mechanika w telefonie. Na wąskim ekranie na dole zawsze są trzy przyciski: Zadzwoń, SMS, Dojazd. Panel też działa na telefonie – menu zamienia się w przewijane zakładki.

Technika i jakość

Lekko, szybko, dostępnie

Jeden plik, zero zależności

Strona i panel to ok. 190 KB czystego HTML, CSS i JavaScriptu. Treści są w jednym obiekcie danych, a strona renderuje się z niego na bieżąco.

Zapis w przeglądarce

Zmiany trafiają do bazy danych w przeglądarce, z awaryjnym zapisem zapasowym. Przy starcie zapis scala się z danymi z kodu, więc nowe pola dodane w przyszłości nie znikają.

Bezpieczeństwo i hosting

Strona przygotowana pod GitHub i Cloudflare Pages: każda zmiana w repozytorium publikuje nową wersję. Nagłówki bezpieczeństwa w pliku _headers.

Dostępność

Kontrast WCAG 2.1 AA, pełna obsługa klawiatury, widoczny fokus, okna jako dialogi z pułapką fokusu, etykiety pól, link „Przejdź do treści”.

Szybkość

Mapa Google ładuje się dopiero po kliknięciu, grafiki są w SVG, zdjęcia ładują się leniwie. Brak ciasteczek reklamowych.

Przetestowane

34 testy automatyczne (Playwright): logowanie, promocje zaplanowane i aktywne, usuwanie, kolejność, ukrywanie, godziny, dni specjalne, sekcje i zapis po odświeżeniu – na komputerze i na ekranie 390 px.

Projekt demonstracyjny – firma i dane są fikcyjne„Szalone auto” powstało do portfolio. Adres, ceny i zespół są przykładowe, a na stronie nie ma wymyślonych opinii klientów. W wersji demo zmiany z panelu zapisują się tylko w przeglądarce osoby edytującej; wdrożenie dla prawdziwej firmy obejmuje zapis na serwerze i bezpieczne logowanie.

Szalone auto. Strona z panelem.