Web Design
Sito web completo per un'autofficina: design responsive, dark/light mode, gestione pratiche con tracking in tempo reale, galleria fotografica e pannello di amministrazione.
Caratteristiche
Tech Stack
MASTRO è un sito web completo pensato per un'autofficina moderna. Non è un semplice template: è un prodotto funzionante con backend, database, API REST e pannello di gestione. Il design combina un'estetica industriale — ingranaggi animati, tipografia monospace, palette burnt orange su fondo scuro — con un'esperienza utente curata e completamente responsive.
Il cliente dell'officina può consultare i servizi, sfogliare la galleria fotografica e, soprattutto, monitorare lo stato della propria auto in tempo reale tramite un codice pratica. L'operatore gestisce tutto da un pannello admin protetto: crea pratiche, aggiorna stati, carica foto e configura i dati dell'attività.
Cosa trovi nel sito
Sezione a tutto schermo con ingranaggi SVG rotanti, pistoni animati e statistiche dell'officina. Effetto grain e scan-lines in dark mode.
Diagnostica OBD, tagliando, freni e sospensioni, motore, aria condizionata, elettronica. Ogni card con icona, descrizione e animazione hover.
Timeline verticale dal primo ascolto alla consegna con documentazione. Linea di progresso con gradiente e marker animati.
Griglia responsive con lightbox, navigazione frecce e swipe touch. Le immagini vengono ri-elaborate server-side per rimuovere EXIF e generare thumbnail.
Portale pubblico dove il cliente inserisce il codice pratica e vede uno stepper con 6 stati, da "Accettazione" a "Consegnato", con barra di progresso.
Dashboard protetta con login, gestione pratiche (crea, aggiorna stato, elimina), upload galleria, impostazioni sito, backup database automatico.
Il sito è completamente funzionante. Puoi navigarlo dall'anteprima qui sopra oppure aprirlo a schermo intero. Per testare il tracking dei veicoli, abbiamo inserito 6 pratiche demo con stati diversi. Ecco come fare:
Apri il sito completo
Clicca il pulsante arancione qui sopra oppure naviga dal menu del sito alla sezione "Stato veicolo".
Vai alla pagina Tracking
Dalla home, clicca "Controlla stato veicolo" nella sezione dedicata. Si aprirà il portale di tracking.
Inserisci un codice dalla tabella
Digita uno dei codici qui sotto nel campo di ricerca e premi "Cerca". Vedrai lo stepper aggiornarsi in base allo stato.
| Codice | Stato |
|---|---|
C100 |
Accettazione |
C101 |
Diagnosi |
C102 |
Preventivo |
C103 |
Intervento |
C104 |
Pronto |
C105 |
Consegnato |
Prova codici diversi per vedere come cambia lo stepper e la barra di progresso.
Sotto il cofano
Palette warm neutral con accento burnt orange (#e05c1a). Tipografia a tre livelli: Bebas Neue per i titoli impattanti, Playfair Display italic per gli accenti, DM Mono per il corpo testo con effetto "tecnico". Supporto completo dark/light mode con transizioni fluide.
Ingranaggi SVG con rotazione continua, pistoni con movimento verticale, grain overlay e scan-lines animate. Scroll reveal con Intersection Observer, marquee infinito dei servizi, hover con scale e rotate sulle icone. Tutto rispetta prefers-reduced-motion.
API REST in PHP con database SQLite in modalità WAL. Autenticazione con sessioni, protezione CSRF su tutte le operazioni di scrittura, rate limiting (60 req/15min) sull'endpoint pubblico di tracking. Upload immagini con validazione magic bytes, ri-codifica GD per strip EXIF e generazione thumbnail 400px.
Attributi ARIA su tutti i controlli interattivi, navigazione completa da tastiera, focus ring visibili, HTML semantico. Il lightbox della galleria supporta frecce, Escape e swipe touch.
La privacy è il filo conduttore di ogni progetto VZApps, e MASTRO non fa eccezione. Abbiamo dimostrato che è possibile offrire un servizio completo e professionale — tracking in tempo reale, galleria, gestione pratiche — senza chiedere nulla all'utente. Nessuna email, nessuna registrazione, nessun cookie di profilazione.
Il cliente controlla lo stato del proprio veicolo con un semplice codice pratica. Nessun account, nessuna email, nessuna password da ricordare.
Nessun cookie di terze parti, nessun analytics esterno, nessun pixel di tracking. Il sito non profila i visitatori in alcun modo.
Ogni foto caricata nella galleria viene ri-codificata server-side: i dati EXIF (posizione GPS, dispositivo, data) vengono completamente rimossi prima della pubblicazione.
Il database contiene solo il codice pratica e lo stato. Nessun dato personale del cliente viene memorizzato: niente nomi, targhe, numeri di telefono o indirizzi.
Questo approccio dimostra un principio a cui teniamo molto: la privacy non è un compromesso. Un prodotto può essere completo, funzionale e utile senza raccogliere dati non necessari. È la stessa filosofia che applichiamo a tutte le app VZApps.
Contattaci
Compila il modulo e ti ricontatteremo per discutere il tuo progetto.