Makieta interfejsu użytkownika narzędzia Dark JSON Diff

Cel: Stworzenie prototypu interfejsu użytkownika aplikacji desktopowej w trybie ciemnym dla narzędzia do porównywania JSON o nazwie {argument name="app name" default="Tilted Diffs"}, prezentującego porównania odpowiedzi API zatytułowane {argument name="diff title" default="API Response — Checkout v2"}. Kanwa: Zrzut ekranu pulpitu o proporcjach 16:10, około 1152×768, z oknem aplikacji w stylu macOS unoszącym się na ciemnoniebieskim tle gradientowym. Wykorzystanie subtelnych cieni, zaokrąglonych narożników, cienkich ramek i dopracowanej estetyki narzędzi programistycznych. Układ: Aplikacja składa się z czterech głównych obszarów: lewego paska bocznego, górnego paska narzędzi obejmującego obszar edytora oraz trzech pionowych paneli edytora kodu. Pierwszy panel edytora jest zaznaczony jasnoniebieską otoczką. Środkowy panel wyświetla kolorowe, wbudowane wyróżnienia różnic. Prawy panel jest węższy i częściowo widoczny, przypominając dodatkową kartę pliku lub trzecią kolumnę porównania. Lewy pasek boczny: W lewym górnym rogu wyświetla się przycisk sygnalizacji świetlnej systemu macOS: trzy kółka, odpowiednio czerwone, żółte i zielone. Pod nazwą aplikacji znajduje się pole wyszukiwania z tekstem zastępczym „Szukaj różnic…” i sugestiami klawiatury. Poniżej znajduje się osiem zapisanych pozycji listy różnic, każda z małą ikoną dokumentu i znacznikiem czasu: 1) „Odpowiedź API — Kasa v2” z informacją „Dzisiaj, 10:24”, zaznaczoną na niebiesko jako wybraną pozycję; 2) „Profil użytkownika — Publiczne API” z informacją „Wczoraj, 16:18”; 3) „Punkt końcowy zamówień — v1 vs v2” z informacją „20 maja 2025, 9:14”; 4) „Katalog produktów — Region UE” z informacją „19 maja 2025, 14:47”; 5) „Odpowiedź uwierzytelnienia — SSO” z informacją „18 maja 2025, 11:03”; 6) „Podsumowanie rozliczeń — 2. kwartał” z datą „17 maja 2025, 15:22”; 7) „Ładunek webhooka — Stripe” z datą „16 maja 2025, 10:11”; 8) Komunikat „Wyniki wyszukiwania — Trafność” wyświetla datę „15 maja 2025, 17:35”. Na dole widoczny jest niebieski przycisk „+ Nowa różnica” oraz mała ikona koła zębatego. Na górnym pasku narzędzi po lewej stronie znajduje się napis „Odpowiedź API — Checkout v2” wraz z małą ikoną ołówka do edycji. Segmentowana kontrolka pośrodku zawiera dwie etykiety: „Edytorzy” (zaznaczona na niebiesko) i „Różnice” (niezaznaczona). Po prawej stronie znajdują się cztery kompaktowe skróty klawiaturowe oznaczone etykietami „⌘T dodaj kolumnę”, „⌘D przełącz różnice” i „⌘← / ⌘→ przenieś fokus”, z niewielkimi odstępami między grupami. Panel edytora wykorzystuje czcionkę kodu o stałej szerokości, numery wierszy, podświetlanie składni JSON, ciemnogranatowy panel i cienkie, zaokrąglone obramowania. Lewy panel nosi nazwę „source.json” z ikoną dokumentu i menu z trzema kropkami. Środkowy panel nosi nazwę „target.json” z ikoną dokumentu i menu z trzema kropkami. Wąski prawy panel nosi nazwę „more.json” i wyświetla tylko lewą stronę kodu, co sugeruje przepełnienie. Każdy pełny panel edytora ma pasek stanu u dołu, wyświetlający „Ln 1, Col 1”, „Spaces: 2”, „UTF-8”, „LF” i „JSON”. Zawartość kodu wyświetla odpowiedź JSON na zamówienie. Używa on requestId „req_8f3a9b42”, orderId „ord_123456”, waluty USD oraz informacji o produkcie i wysyłce dla słuchawek bezprzewodowych i torby podróżnej. Wersja źródłowa po lewej stronie powinna zawierać znacznik czasu „2025-05-21T10:24:31Z”, wersję „v1”, status „w trakcie realizacji”, kwotę całkowitą 129,99, cenę jednostkową słuchawek bezprzewodowych 99,99 (zniżka zerowa), ilość toreb podróżnych 1, cenę jednostkową 30,00 (zniżka zerowa), metodę wysyłki „standardową”, szacowany czas dostawy 5 dni oraz adres „123 Market St”. Wersja docelowa powinna wyświetlać znacznik różnic na lewym marginesie i być wyróżniona kolorowymi liniami: czerwonymi dla usuniętych linii, zielonymi dla dodanych i żółtymi dla zmodyfikowanych. Powinien zawierać takie zmiany, jak: zmiana znacznika czasu z „2025-05-20T15:11:09Z” na „2025-05-21T10:24:31Z”, zmiana wersji na v2, zmiana statusu z oczekującego na potwierdzony, zmiana kwoty całkowitej na 139,99, zmiana ceny zestawu słuchawkowego na 109,99 z rabatem 10,00, zmiana ilości saszetek podróżnych na 2, zmiana metody dostawy na ekspresową oraz zmiana szacowanej liczby dni na 2. W każdym pełnym edytorze powinno być wyświetlanych około 32 wierszy ponumerowanego kodu. Styl wizualny: Zaawansowany interfejs narzędzia programistycznego SaaS, wyraźne renderowanie wektorowe, ciemny motyw, kobaltowy kolor akcentujący, delikatny szary tekst, realistyczne, a zarazem przejrzyste zrzuty ekranu interfejsu użytkownika, brak postaci ludzkich, znaków wodnych i obramowań przeglądarki poza oknem aplikacji. Tekst powinien być czytelny i wyrównany do siatki.