# Le slide del carosello degli store

Ogni slide è una schermata vera dell'app dentro la cornice di un telefono (o
di un tablet), con sopra il nome dell'app, un titolo e una frase. Le misure
sono quelle che chiedono gli store:

| Piattaforma | Misura | Dove va |
|---|---|---|
| `android` | 1080×1920 | Google Play, telefono |
| `ios` | 1320×2868 | App Store, iPhone 6,9" |
| `tablet` | 1440×2560 | Google Play, tablet 7" e 10" (stesse slide) |

## Cosa serve nell'app

Una cartella "store" nel repository dell'app (in QuantoBasta è `docs/store/`):

```
store/
  schermate/android/*.png   le schermate grezze (dall'emulatore)
  schermate/ios/*.png       (dal simulatore, iPhone da 6,9")
  schermate/tablet/*.png    (dall'emulatore tablet, in verticale)
  carosello/testi.js        i testi e i colori, vedi sotto
  grafica/icona-512.png     per l'anteprima (e per Google Play)
  grafica/in-evidenza.png   1024×500, senza trasparenza (Google Play)
```

`carosello/testi.js`, per esempio (quello completo è in QuantoBasta):

```js
var CAROSELLO = {
  marchio: 'Quanto Basta',
  colori: {
    chiaro: { fondo: '#F4E9DE', testo: '#2E2A26', tenue: '#6E6259', accento: '#AE4F2C' },
    scuro: { fondo: '#1C1917', testo: '#F5EDE6', tenue: '#B0A69C', accento: '#E08A5F' },
  },
  slide: {
    1: { foto: '04-riscalata', titolo: 'Le dosi giuste per <em>quanti siete</em>', sotto: 'Cambi le porzioni...' },
    6: { foto: '06b-scuro', titolo: 'Bella anche <em>di sera</em>', sotto: '...', scuro: true,
         tablet: { sotto: 'Tema chiaro, scuro o quello del dispositivo.' } },
  },
  piattaforme: { android: [1, 6], ios: [1, 6], tablet: [1, 6] },
};
```

- `foto` è il nome del PNG in `schermate/<piattaforma>/`, senza estensione.
- Nel titolo `<em>` colora le parole con l'accento.
- `scuro: true` usa i colori scuri (per la slide del tema scuro).
- `tablet` cambia titolo o frase solo sul tablet ("in tasca" su un tablet non torna).
- `piattaforme` dice quali slide fare per ciascuna; una piattaforma senza
  cartella in `schermate/` si salta.

I font (Caveat per il nome, Bricolage Grotesque per il titolo, Instrument Sans
per la frase) sono fissi in `slide.html`. Per un'app con un'altra identità si
cambiano lì, o si aggiunge un campo a `testi.js` quando serve davvero.

## Generare e guardare

```bash
"/Users/paolo/Server/Siti Web/_private/ - App/comune/carosello/genera.sh" <cartella store>
```

Esce in `store/carosello/{android,ios,tablet}/<n>.png`. Serve Google Chrome in
`/Applications` e `node`. Per vederle tutte insieme (con Paolo) si apre in
Chrome:

```
file:///Users/paolo/Server/Siti%20Web/_private/%20-%20App/comune/carosello/anteprima.html?dir=<cartella store>
```

## Le schermate grezze

- **Android**: emulatore, lingua italiana, barra di stato pulita con la
  modalità demo di SystemUI:
  ```bash
  adb -s <emu> shell settings put global sysui_demo_allowed 1
  adb -s <emu> shell am broadcast -a com.android.systemui.demo -e command enter
  adb -s <emu> shell am broadcast -a com.android.systemui.demo -e command clock -e hhmm 0941
  adb -s <emu> shell am broadcast -a com.android.systemui.demo -e command battery -e level 100 -e plugged false
  adb -s <emu> shell am broadcast -a com.android.systemui.demo -e command network -e wifi show -e level 4 -e mobile hide
  adb -s <emu> shell am broadcast -a com.android.systemui.demo -e command notifications -e visible false
  adb -s <emu> exec-out screencap -p > schermata.png
  # alla fine: ... -e command exit
  ```
- **iOS**: simulatore da 6,9" (iPhone 18 Pro Max), con
  `xcrun simctl status_bar <udid> override --time 9:41 --batteryState discharging`
  e `xcrun simctl io <udid> screenshot schermata.png`.
- **Tablet**: emulatore tablet in verticale (1600×2560). Le schermate devono
  mostrare l'app che gira davvero sul tablet, non quelle del telefono.
- Le foto dei contenuti di esempio: vere e belle, una per ogni elemento; se
  una foto non convince (Paolo lo nota subito) si cambia o si toglie
  l'elemento.

## Trappole viste (Faraway, settembre 2026)

- **Sfondo della slide uguale allo sfondo dell'app**: lo schermo del telefono
  si fonde con la slide. Serve una tinta o una texture che stacchi (Faraway usa
  una carta macchiata, `Faraway/docs/store/grafica/genera-carta.py`).
- **Al massimo due righe** di titolo e due di frase: di più finisce sotto il
  telefono, soprattutto su Android, dove la slide è più bassa.
- **App Store**: il riquadro che si vede per primo è il 6,5" e rifiuta le
  1320×2868. Si caricano in Gestione risorse multimediali → Display da 6,9".
- **Una alla volta, nell'ordine**, su tutti e due gli store: caricandone
  diverse insieme l'ordine si rovescia, e il trascinamento per riordinare non
  ha funzionato.
- Faraway ha una copia propria di `slide.html` (i suoi caratteri da
  `pwa/fonts/`, il logo al posto del nome, e una barra di stato Android finta
  sopra le schermate dell'iPhone). Per un'app nuova meglio non copiare, ma
  aggiungere qui un campo facoltativo a `testi.js`.