Donkere JSON Diff Tool UI-mockup

Doel: Een UI-prototype voor een desktopapplicatie in donkere modus maken voor een JSON-difftool met de naam {argument name="app name" default="Tilted Diffs"}, die API-responsvergelijkingen toont met de titel {argument name="diff title" default="API Response — Checkout v2"}. Canvas: Een breedbeeldschermscreenshot van een desktop in 16:10-formaat, ongeveer 1152×768 pixels, met een applicatievenster in macOS-stijl dat zweeft op een donkerblauwe verloopachtergrond. Gebruik subtiele schaduwen, afgeronde hoeken, dunne randen en een verfijnde esthetiek van ontwikkelaarstools. Indeling: De applicatie bestaat uit vier hoofdgebieden: een linkerzijbalk, een bovenste werkbalk die het editorgebied beslaat en drie verticale code-editorpanelen. Het eerste editorpaneel is geselecteerd met een helderblauwe focusring. Het middelste paneel toont gekleurde inline diff-markeringen. Het meest rechtse paneel is smaller en gedeeltelijk zichtbaar, en lijkt op een extra bestandstabblad of een derde vergelijkingskolom. Linkerzijbalk: In de linkerbovenhoek wordt een macOS-verkeerslichtknop weergegeven: drie cirkels, respectievelijk rood, geel en groen. Onder de appnaam bevindt zich een zoekvak met de placeholdertekst "Zoek verschillen..." en toetsenbordsuggesties. Hieronder staan ​​acht opgeslagen items in de lijst met verschillen, elk met een klein documentpictogram en een tijdstempel: 1) "API-reactie — Checkout v2", met "Vandaag, 10:24 uur", blauw gemarkeerd als het geselecteerde item; 2) "Gebruikersprofiel — Openbare API", met "Gisteren, 16:18 uur"; 3) "Bestellingen-eindpunt — v1 vs v2", met "20 mei 2025, 09:14 uur"; 4) "Productcatalogus — EU-regio", met "19 mei 2025, 14:47 uur"; 5) "Authenticatiereactie — SSO", met "18 mei 2025, 11:03 uur"; 6) "Factuuroverzicht — Q2", met "17 mei 2025, 15:22 uur"; 7) “Webhook Payload — Stripe”, met de datum “16 mei 2025, 10:11 uur”; 8) Het bericht “Zoekresultaten — Relevantie” toont “15 mei 2025, 17:35 uur”. Onderaan bevindt zich een prominente blauwe knop “+ Nieuwe Diff” en een klein tandwielpictogram. De bovenste werkbalk toont links “API-antwoord — Checkout v2”, vergezeld van een klein potloodpictogram. Een segmentbesturingselement in het midden bevat twee labels: “Editors” (blauw geselecteerd) en “Diff” (niet geselecteerd). Aan de rechterkant bevinden zich vier compacte sneltoetsen met de labels “⌘T kolom toevoegen”, “⌘D diff in-/uitschakelen” en “⌘← / ⌘→ focus verplaatsen”, met kleine tussenruimte tussen de groepen. Het editorpaneel gebruikt een monospace lettertype, regelnummers, JSON-syntaxmarkering, een donkerblauw paneel en dunne afgeronde randen. Het linkerpaneel heet "source.json" en heeft een documentpictogram en een menu met drie puntjes. Het middelste paneel heet "target.json" en heeft een documentpictogram en een menu met drie puntjes. Het smalle rechterpaneel heet "more.json" en toont alleen de linkerkant van de code, wat duidt op een overloop. Elk volledig editorpaneel heeft een statusbalk onderaan met de tekst "Ln 1, Col 1", "Spaces: 2", "UTF-8", "LF" en "JSON". De code toont de JSON-respons van de orderchecker. Deze gebruikt requestId "req_8f3a9b42", orderId "ord_123456", valuta USD en product- en verzendinformatie voor de draadloze koptelefoon en het reisetui. De bronversie aan de linkerkant moet de volgende gegevens bevatten: tijdstempel "2025-05-21T10:24:31Z", versie "v1", status "in behandeling", totaalbedrag 129,99, prijs per stuk draadloze koptelefoon 99,99 (korting is null), aantal reisetuis 1, prijs per stuk 30,00 (korting is null), verzendmethode "standaard", geschatte levertijd 5 dagen en adres "123 Market St". De tussenliggende doelversie moet een verschilmarkering in de linkermarge weergeven en worden gemarkeerd met gekleurde lijnen: rood voor verwijderde regels, groen voor toegevoegde regels en geel voor gewijzigde regels. Het moet de volgende wijzigingen bevatten: tijdstempel gewijzigd van "2025-05-20T15:11:09Z" naar "2025-05-21T10:24:31Z", versie gewijzigd naar v2, status gewijzigd van in behandeling naar bevestigd, totaalbedrag gewijzigd naar 139,99, prijs van de draadloze oortelefoon gewijzigd naar 109,99 met een korting van 10,00, aantal reisetuis gewijzigd naar 2, leveringsmethode gewijzigd naar express en geschatte dagen gewijzigd naar 2. Ongeveer 32 regels genummerde code moeten in elke volledige editor worden weergegeven. Visuele stijl: Geavanceerde SaaS-ontwikkelaarstoolinterface, scherpe vectorrendering, donker thema, kobaltblauwe accentkleur, zachtgrijze tekst, realistische maar strakke UI-screenshots, geen mensfiguren, geen watermerken en geen browserranden buiten het applicatievenster. Houd alle tekst duidelijk en uitgelijnd op het raster.