# PRD — Venice Hotel Interactive Map **Version:** 1.0 **Target:** Claude Code (autonomous implementation) **Stack:** Single-file HTML · Leaflet.js · OpenStreetMap · Zero backend · Zero cost --- ## 1. Obiettivo Creare un'unica pagina web (`index.html`) che funzioni come mappa turistica interattiva di Venezia per i clienti di un hotel. Accessibile via QR code, senza app da scaricare, senza costi di hosting se deployata su GitHub Pages / Netlify / Cloudflare Pages. --- ## 2. Requisiti Funzionali ### 2.1 Mappa - Libreria: **Leaflet.js 1.9.x** (CDN) - Tile provider: **OpenStreetMap** (gratuito, no API key) - Centro mappa iniziale: Venezia centro (`45.4408, 12.3155`), zoom `14` - Bounds limitati alla laguna veneziana (impedire scroll infinito) - Responsive: mobile-first, funziona su qualsiasi smartphone senza zoom manuale ### 2.2 Punti di Interesse (POI) - **72 POI** totali, definiti in un array JSON all'interno del file HTML (facilmente editabile) - Ogni POI ha: ```json { "id": 1, "name": "Nome del luogo", "category": "ristorante", "lat": 45.4408, "lng": 12.3155, "description": "Breve descrizione (max 100 caratteri)", "address": "Indirizzo o sestiere", "tip": "Consiglio dell'hotel (opzionale)", "url": "https://... (opzionale)" } ``` ### 2.3 Categorie e Icone Minimo 6 categorie con colori/icone distinti: | Categoria | Colore marker | Emoji icona | |-----------|---------------|-------------| | `ristorante` | #E8472A | 🍽️ | | `museo` | #6B3FA0 | 🏛️ | | `chiesa` | #C4962A | ⛪ | | `aperitivo` | #F59E0B | 🍹 | | `trasporto` | #2563EB | 🚢 | | `shopping` | #16A34A | 🛍️ | | `hotel` | #DC2626 | ⭐ (posizione hotel, fisso) | ### 2.4 Interazione - Click su marker → **popup** con: nome, indirizzo, descrizione, tip hotel, link esterno (se presente) - **Filtro categorie** — barra orizzontale in basso (mobile) o sidebar (desktop) con toggle per categoria - **Search bar** — filtra POI per nome in real-time - Popup include bottone "Apri in Google Maps" che lancia navigazione nativa - Cluster automatico dei marker quando zoom < 13 (plugin Leaflet.markercluster) ### 2.5 UI / UX - Header minimale con: logo hotel (placeholder sostituibile), nome mappa, lingua toggle IT/EN - Footer: "© [Hotel Name] — Mappa aggiornata [data]" - Tema visivo: elegante, veneziano — palette caldi (oro, bordeaux, avorio) - Font: **Playfair Display** (titoli) + **Lato** (body) via Google Fonts - Dark/light mode NON richiesto (mantieni semplice) - Loading state con spinner mentre la mappa inizializza --- ## 3. Requisiti Non Funzionali | Requisito | Specifica | |-----------|-----------| | **Costo** | €0 — nessuna API a pagamento, nessun backend | | **Hosting** | File statico (GitHub Pages, Netlify, Cloudflare Pages) | | **Performance** | First load < 3s su connessione 4G | | **Compatibilità** | iOS Safari 14+, Chrome Android 90+, Chrome/Firefox desktop | | **Offline** | Non richiesto (v1) | | **Privacy** | Nessun cookie, nessun tracking, nessun dato utente raccolto | | **Manutenzione** | Aggiornare i POI modificando solo l'array JSON nel file | --- ## 4. Architettura del File ``` index.html │ ├── │ ├── Meta viewport, og:tags per condivisione social │ ├── CDN: Leaflet CSS + JS │ ├── CDN: Leaflet.markercluster CSS + JS │ └── CDN: Google Fonts (Playfair Display, Lato) │ ├──