♥ ♥ ♥  SITO_PER_MAYA — LEGGIMI PER PRIMO  ♥ ♥ ♥

Questa cartella contiene il vostro sito, pronto all'uso.
È un sito "statico": HTML + CSS + JavaScript puri.
Non serve installare niente: aprite i file e modificateli.


═══════════════════════════════════════════════════════════
LA CARTELLA, FILE PER FILE
═══════════════════════════════════════════════════════════

Sito_Per_Maya/
│
├── index.html               ← pagina di benvenuto (aprite questa!)
├── LEGGIMI.txt              ← questo file
│
├── html/                    LE PAGINE DEL SITO
│   ├── index.html           – la pagina principale (tutte le sezioni)
│   └── privata.html         – la pagina +18 (il cassetto con password)
│
├── css/                     LA GRAFICA
│   └── style.css            – tutti i colori e gli stili del sito
│
├── js/                      IL CERVELLO (i file sono numerati)
│   ├── 01-config.js         – ★ I VOSTRI DATI: nomi, città, date,
│   │                           frasi, lettera, codice degli abbracci
│   ├── 02-main.js           – pagina principale: meteo, countdown,
│   │                           frase del giorno, timeline, lettera
│   ├── 03-mappa.js          – la mappa vera (trascina, zoom, satellite)
│   ├── 04-musica.js         – il bottone "La nostra canzone"
│   ├── 05-abbracci.js       – gli abbracci in tempo reale
│   └── 06-cassetto.js       – il cassetto +18: password, foto, video
│
├── foto/                    METTETE QUI LE VOSTRE FOTO
│   └── METTI-QUI-LE-FOTO.txt
│
└── canzoni/                 METTETE QUI LA VOSTRA CANZONE
    └── METTI-QUI-LA-CANZONE.txt


REGOLA PRATICA — cosa volete cambiare?
   le parole e le date vostre  →  js/01-config.js
   i colori                    →  css/style.css (variabili in cima)
   i testi delle pagine        →  html/index.html
   le foto                     →  cartella foto/
   la canzone                  →  cartella canzoni/


═══════════════════════════════════════════════════════════
APRIRLO IN VISUAL STUDIO CODE
═══════════════════════════════════════════════════════════

1. VS Code → File → Apri cartella… → scegliete "Sito_Per_Maya"
2. Installate l'estensione "Live Server" (consigliata)
3. Tasto destro su index.html → "Open with Live Server"
   → il sito si apre nel browser e si aggiorna da solo quando salvate
4. Modificate, salvate con Ctrl+S (Cmd+S su Mac), guardate il risultato

Funziona anche con doppio clic su index.html, senza VS Code.


═══════════════════════════════════════════════════════════
LA PASSWORD DEL CASSSETTO (+18)
═══════════════════════════════════════════════════════════

• La prima volta che aprite il cassetto su un telefono, scegliete la
  password (due volte). Scegliete LA STESSA su tutti e due i telefoni.
• Viene salvata come impronta SHA-256, mai in chiaro.
• Il cassetto resta aperto solo mentre tenete il sito aperto.
• Si cambia dal bottone "🔑 Cambia password" dentro il cassetto.
• Dimenticata? Cancellate i dati del sito dal browser (attenzione:
  si cancellano anche i ricordi salvati su quel telefono).

I ricordi (foto, video, letterine) restano nella memoria del telefono
(IndexedDB): non finiscono online, non si sincronizzano tra telefoni.


═══════════════════════════════════════════════════════════
GLI ABBRACCI IN TEMPO REALE
═══════════════════════════════════════════════════════════

• Viaggiano su un canale privato gratuito (broker MQTT pubblico).
• Il canale si chiama "cuori-a-distanza/v1/<codice>": scegliete un
  codice difficile da indovinare in js/01-config.js.
• Arrivano quando il sito è aperto sul telefono di chi riceve.
  Toccate "🔔 Attiva notifiche" per le notifiche del telefono.
• Aggiungete il sito alla schermata Home del telefono: funziona
  meglio (Chrome: menu → Aggiungi a schermata Home).
• Pallino rosso "offline" = broker non raggiungibile: riprova da
  solo; se insiste, cambiate rete (alcune reti bloccano le WebSocket).


═══════════════════════════════════════════════════════════
LA MAPPA
═══════════════════════════════════════════════════════════

• È una mappa vera: si trascina e si zoomma, con vista Mappa e Satellite.
• Le mattonelle arrivano da internet: senza connessione resta scura.
• Coordinate delle città: Google Maps → tasto destro sul punto →
  "Copia coordinate" (prima la latitudine, poi la longitudine).
• Se cambiate città, aggiornate anche la distanza in km (01-config.js).


═══════════════════════════════════════════════════════════
PUBBLICARLO ONLINE (GRATIS)
═══════════════════════════════════════════════════════════

• NETLIFY DROP (il più facile)
  1. https://app.netlify.com/drop
  2. trascinate la cartella "Sito_Per_Maya" (tutta intera)
  3. in pochi secondi avete un indirizzo tipo https://nome.netlify.app
  4. per cambiarlo: Site configuration → Site details → Change site name

• HOSTING CON FTP (Aruba, Altervista, ecc.)
  caricate TUTTA la cartella dentro public_html (o www).

• GITHUB PAGES / VERCEL / CLOUDFLARE PAGES
  caricate la cartella come progetto statico, senza nessun build.

IMPORTANTE: caricate sempre la cartella INTERA (html + css + js + foto +
canzoni). Se caricate solo le pagine, i file non vengono trovati.


═══════════════════════════════════════════════════════════
SE QUALCOSA NON FUNZIONA
═══════════════════════════════════════════════════════════

• Stili spariti        → le cartelle css/ e js/ devono restare accanto
                          a html/, con gli stessi nomi
• Mappa bianca         → serve la connessione (le mattonelle sono online)
• Meteo non disponibile→ niente rete, o Open-Meteo momentaneamente giù
• Abbracci offline     → il broker non è raggiungibile, riprova da solo
• Foto non si salvano  → browser in modalità privata o memoria bloccata
• Modifiche non si vedono → salvate il file (Ctrl+S) e ricaricate la
                          pagina (con Live Server fa da solo)


═══════════════════════════════════════════════════════════
LA NOSTRA STORIA
═══════════════════════════════════════════════════════════

Bussoleno (Piemonte) ♡ Putignano (Puglia)
1017 km di distanza, un solo cuore.

Fatto con amore. ♡