Crea un prototipo frontend interattivo usando lo stack di progetto esistente e dati dimostrativi esplicitamente etichettati per [PROJECT] e [AUDIENCE]. L'attività è: Stato offline e di sincronizzazione.

## Contenuti e struttura obbligatori

Mostra modifiche locali, stato della connessione, azioni in coda e revisione dei conflitti.

Usa [APPROVED_CONTENT] come fonte per nomi, date, dati, dichiarazioni e destinazioni. Elenca gli input mancanti prima di sostituire qualsiasi elemento. Se è necessaria una dimostrazione, indica che i contenuti sono fittizi. Non inventare citazioni di clienti, classifiche, loghi di partner o funzionalità del prodotto.

## Direzione del design

Usa [BRAND_RULES] e il design system già selezionato nel progetto. Se non è stato fornito alcun sistema, parti da questa direzione: sfondo neutro chiaro, testo color grafite, accenti cobalto e separatori sottili e precisi; gerarchia densa ma leggibile. Mantieni coerenti i ruoli di tipografia, spaziatura e colore. Dai priorità all'attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate.

## Preparazione dei contenuti

Definisci gli eventi di salvataggio locale, le modifiche in coda, gli stati della connessione e le regole per i conflitti. Includi le modifiche salvate sul dispositivo ma non ancora accettate dal server.

## Layout e comportamento

Nel linguaggio degli stati, separa ciò che è salvato localmente da ciò che è sincronizzato. Per i conflitti, fornisci un percorso di revisione che spieghi entrambe le versioni, invece di nasconderle dietro un generico nuovo tentativo.

## Verifica di accettazione specifica dell'attività

- Distingui ciò che è salvato localmente da ciò che è stato sincronizzato correttamente.
- Passa offline, modifica i contenuti e riconnettiti in presenza di una versione del server in conflitto.
- Conserva il lavoro locale ed evita di mostrare che la sincronizzazione è riuscita finché le modifiche in coda non sono state effettivamente risolte.

## Implementazione e revisione

Mantieni il testo modificabile. Usa una struttura semantica, controlli descrittivi, un focus da tastiera visibile e stati vuoti/di errore appropriati. Verifica i layout stretti e ampi. Rispetta le preferenze per la riduzione del movimento. Mantieni il framework e le dipendenze esistenti del progetto; non sostituire lo stack senza segnalarlo. Restituisci i file modificabili e spiega eventuali comportamenti incompleti o input non supportati. Esamina questa attività specifica prima di proporre funzionalità aggiuntive.

## Allegato di riferimento e obiettivo di ricostruzione

Allega reference.webp, incluso nel pacchetto scaricabile di questo prompt, insieme al prompt in OpenDesign. Crea un risultato modificabile con composizione e gerarchia simili; non incorporare l'intera immagine di riferimento come interfaccia finale. Mantieni i contenuti di progetto approvati e le regole del brand se sono in conflitto con le etichette fittizie dell'esempio. Se l'immagine manca o è illeggibile, richiedila invece di dichiarare fedeltà visiva.

## Composizione e contenuti di riferimento

Usa il file reference.webp allegato come riferimento visivo per Stato offline e di sincronizzazione. Prima di iniziare, identifica le aree principali dall'alto verso il basso, le relative larghezze e altezze, l'allineamento, la spaziatura, la gerarchia tipografica, i colori delle superfici, i bordi, le immagini e i componenti ripetuti. Mantieni queste relazioni invece di sostituirle con un modello generico. Contenuto richiesto per l'attività: mostra modifiche locali, stato della connessione, azioni in coda e revisione dei conflitti. Quando traduci l'immagine in elementi modificabili, segui queste indicazioni di layout specifiche per l'attività: nel linguaggio degli stati, separa ciò che è salvato localmente da ciò che è sincronizzato. Per i conflitti, fornisci un percorso di revisione che spieghi entrambe le versioni, invece di nasconderle dietro un generico nuovo tentativo.

## Direzione visiva dal brief di esempio

sfondo neutro chiaro, testo color grafite, accenti cobalto e separatori sottili e precisi; gerarchia densa ma leggibile.

## Specifiche di interazione

Il riferimento è un concept statico: il comportamento descritto di seguito è un requisito da implementare, non una prova che l'immagine sia già funzionante. Copia il prompt personalizzato nel progetto di lavoro. Inizia dall'attività principale: mostra modifiche locali, stato della connessione, azioni in coda e revisione dei conflitti. Distingui ciò che è salvato localmente da ciò che è stato sincronizzato correttamente. Per ogni controllo visibile, specifica il relativo trigger, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente tra le viste correlate. Fai in modo che ricerca e filtri producano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio forniscano, quando pertinente, un feedback visibile di operazione in sospeso, riuscita o non riuscita. Non aggiungere flussi di lavoro non pertinenti. Usa link appropriati per la navigazione, pulsanti per le azioni e nomi accessibili per i controlli con icone. Non lasciare intendere che un'operazione backend sia riuscita quando è cambiata solo una demo locale.

## Confronto visivo e consegna

1. Confronta il risultato con l'immagine allegata usando le stesse proporzioni. Prima di perfezionare i dettagli decorativi, verifica il posizionamento delle aree principali, le dimensioni relative delle immagini, le interruzioni di riga, la spaziatura, la gerarchia tipografica, il contrasto, gli stati attivi e la densità dei contenuti.
2. Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
3. Mantieni loghi, foto e icone come risorse separate e tutte le etichette significative modificabili. Elenca eventuali caratteri o risorse non disponibili e qualsiasi scostamento intenzionale. Restituisci i file funzionanti insieme a una descrizione concisa dei comportamenti implementati e delle integrazioni ancora necessarie; non promettere un risultato identico al pixel basandoti solo sul prompt.