Mockup dell'interfaccia utente dello strumento di confronto JSON in versione scura

Obiettivo: Creare un prototipo di interfaccia utente per un'applicazione desktop in modalità scura per uno strumento di confronto JSON denominato {argument name="app name" default="Tilted Diffs"}, che mostri i confronti delle risposte API intitolati {argument name="diff title" default="API Response — Checkout v2"}. Area di lavoro: Screenshot di un desktop widescreen 16:10, di circa 1152×768, con una finestra dell'applicazione in stile macOS che fluttua su uno sfondo sfumato blu scuro. Utilizzare ombre delicate, angoli arrotondati, bordi sottili e un'estetica raffinata da strumento di sviluppo. Layout: L'applicazione comprende quattro aree principali: una barra laterale sinistra, una barra degli strumenti superiore che si estende sull'area dell'editor e tre pannelli verticali dell'editor di codice. Il primo pannello dell'editor è selezionato con un alone di focus blu brillante. Il pannello centrale visualizza evidenziazioni colorate delle differenze in linea. Il pannello più a destra è più stretto e parzialmente visibile, simile a una scheda file aggiuntiva o a una terza colonna di confronto. Barra laterale sinistra: Nell'angolo in alto a sinistra viene visualizzato un pulsante a semaforo di macOS: tre cerchi, rispettivamente rosso, giallo e verde. Sotto il nome dell'app è presente una casella di ricerca con il testo segnaposto "Cerca differenze..." e suggerimenti da tastiera. Di seguito sono riportati otto elementi dell'elenco delle differenze salvate, ciascuno con una piccola icona di documento e un timestamp: 1) "Risposta API - Checkout v2", che mostra "Oggi, 10:24", evidenziato in blu come elemento selezionato; 2) "Profilo utente - API pubblica", che mostra "Ieri, 16:18"; 3) "Endpoint ordini - v1 vs v2", che mostra "20 maggio 2025, 09:14"; 4) "Catalogo prodotti - Regione UE", che mostra "19 maggio 2025, 14:47"; 5) "Risposta di autenticazione - SSO", che mostra "18 maggio 2025, 11:03"; 6) "Riepilogo fatturazione - Q2", che mostra "17 maggio 2025, 15:22"; 7) “Payload Webhook — Stripe”, che mostra “16 maggio 2025, 10:11”; 8) Il messaggio “Risultati di ricerca — Pertinenza” mostra “15 maggio 2025, 17:35”. In basso è presente un pulsante blu ben visibile “+ Nuovo Diff” e una piccola icona a forma di ingranaggio. La barra degli strumenti superiore mostra “Risposta API — Checkout v2” a sinistra, accompagnato da una piccola icona a forma di matita. Un controllo segmentato al centro contiene due etichette: “Editor” (selezionata in blu) e “Diff” (non selezionata). Il lato destro contiene quattro scorciatoie da tastiera compatte etichettate “⌘T aggiungi colonna”, “⌘D attiva/disattiva diff” e “⌘← / ⌘→ sposta il focus”, con una piccola spaziatura tra i gruppi. Il pannello dell'editor utilizza un font di codice a spaziatura fissa, numeri di riga, evidenziazione della sintassi JSON, un pannello blu scuro e sottili bordi arrotondati. Il pannello di sinistra è intitolato "source.json" con un'icona di documento e un menu a tre punti. Il pannello centrale è intitolato "target.json" con un'icona di documento e un menu a tre punti. Il pannello di destra, più stretto, è intitolato "more.json" e visualizza solo la parte sinistra del codice, indicando un overflow. Ogni pannello dell'editor completo ha una barra di stato in basso che visualizza "Ln 1, Col 1", "Spazi: 2", "UTF-8", "LF" e "JSON". Il contenuto del codice visualizza la risposta JSON al checkout dell'ordine. Utilizza requestId "req_8f3a9b42", orderId "ord_123456", valuta USD e informazioni sul prodotto e sulla spedizione per le cuffie wireless e la custodia da viaggio. La versione sorgente a sinistra dovrebbe includere il timestamp "2025-05-21T10:24:31Z", la versione "v1", lo stato "pending", l'importo totale 129,99, il prezzo unitario delle cuffie wireless 99,99 (lo sconto è nullo), la quantità della custodia da viaggio 1, il prezzo unitario 30,00 (lo sconto è nullo), il metodo di spedizione "standard", i giorni stimati 5 e l'indirizzo "123 Market St". La versione intermedia di destinazione dovrebbe mostrare un indicatore di differenza nel margine sinistro ed essere evidenziata con linee colorate: rosse per le righe eliminate, verdi per le righe aggiunte e gialle per le righe modificate. Dovrebbe includere modifiche come: timestamp modificato da "2025-05-20T15:11:09Z" a "2025-05-21T10:24:31Z", versione modificata in v2, stato modificato da in sospeso a confermato, importo totale modificato in 139,99, prezzo unitario auricolari wireless modificato in 109,99 con uno sconto di 10,00, quantità custodia da viaggio modificata in 2, metodo di consegna modificato in espresso e giorni stimati modificati in 2. Circa 32 righe di codice numerato dovrebbero essere visualizzate in ogni editor completo. Stile visivo: interfaccia avanzata per strumenti di sviluppo SaaS, rendering vettoriale nitido, tema scuro, colore di accento blu cobalto, testo grigio tenue, screenshot dell'interfaccia utente realistici ma puliti, nessuna figura umana, nessuna filigrana e nessun bordo del browser al di fuori della finestra dell'applicazione. Mantenere tutto il testo chiaro e allineato alla griglia.