Koyu JSON Fark Aracı Kullanıcı Arayüzü Taslağı

Amaç: {argument name="uygulama adı" default="Eğimli Farklar"} adlı bir JSON fark aracı için karanlık mod masaüstü uygulama arayüzü prototipi oluşturmak ve {argument name="fark başlığı" default="API Yanıtı — Ödeme v2"} başlıklı API yanıt karşılaştırmalarını sergilemek. Tuval: Yaklaşık 1152×768 çözünürlüğünde, 16:10 geniş ekran masaüstü ekran görüntüsü, koyu mavi gradyan arka plan üzerinde yüzen macOS tarzı bir uygulama penceresi. İnce gölgeler, yuvarlak köşeler, ince kenarlıklar ve rafine geliştirici araç estetiği kullanın. Düzen: Uygulama dört ana alandan oluşur: sol kenar çubuğu, düzenleyici alanını kapsayan üst araç çubuğu ve üç dikey kod düzenleyici paneli. İlk düzenleyici panel parlak mavi bir odak halesiyle seçilir. Orta panel, renkli satır içi fark vurgularını gösterir. En sağdaki panel daha dardır ve kısmen görünür olup, ek bir dosya sekmesi veya üçüncü bir karşılaştırma sütununa benzer. Sol Kenar Çubuğu: Sol üst köşede bir macOS trafik ışığı düğmesi görüntülenir: sırasıyla kırmızı, sarı ve yeşil olmak üzere üç daire. Uygulama adının altında, "Farkları ara…" yer tutucu metni ve klavye önerileri içeren bir arama kutusu bulunmaktadır. Aşağıda, her biri küçük bir belge simgesi ve zaman damgası içeren sekiz kaydedilmiş fark listesi öğesi yer almaktadır: 1) "API Yanıtı — Ödeme v2", seçili öğe olarak mavi renkle vurgulanmış "Bugün, 10:24" tarihini göstermektedir; 2) "Kullanıcı Profili — Genel API", "Dün, 16:18" tarihini göstermektedir; 3) "Sipariş Uç Noktası — v1 ve v2 Karşılaştırması", "20 Mayıs 2025, 09:14" tarihini göstermektedir; 4) "Ürün Kataloğu — AB Bölgesi", "19 Mayıs 2025, 14:47" tarihini göstermektedir; 5) "Kimlik Doğrulama Yanıtı — SSO", "18 Mayıs 2025, 11:03" tarihini göstermektedir; 6) “Fatura Özeti — 2. Çeyrek”, “17 Mayıs 2025, 15:22” gösteriyor; 7) “Webhook Yükü — Stripe”, “16 Mayıs 2025, 10:11” gösteriyor; 8) “Arama Sonuçları — Alaka Düzeyi” mesajı “15 Mayıs 2025, 17:35” gösteriyor. Altta belirgin mavi bir “+ Yeni Fark” düğmesi ve küçük bir dişli simgesi bulunuyor. Üst araç çubuğunun solunda “API Yanıtı — Ödeme v2” ve yanında küçük bir düzenleme kalemi simgesi yer alıyor. Ortadaki bölümlü bir kontrol, iki etiket içeriyor: “Editörler” (mavi renkte seçili) ve “Fark” (seçili değil). Sağ tarafta, gruplar arasında küçük boşluklar bulunan, “⌘T sütun ekle”, “⌘D farkı değiştir” ve “⌘← / ⌘→ odak taşı” etiketli dört kompakt klavye kısayolu bulunuyor. Editör paneli, tek aralıklı bir kod yazı tipi, satır numaraları, JSON sözdizimi vurgulaması, koyu lacivert bir panel ve ince yuvarlak kenarlıklar kullanır. Sol panel, belge simgesi ve üç noktalı menü ile "source.json" başlığını taşır. Orta panel, belge simgesi ve üç noktalı menü ile "target.json" başlığını taşır. Dar sağ panel "more.json" başlığını taşır ve yalnızca kodun sol tarafını görüntüler, bu da taşmayı ima eder. Her tam editör panelinin altında "Ln 1, Col 1", "Spaces: 2", "UTF-8", "LF" ve "JSON" gösteren bir durum çubuğu bulunur. Kod içeriği, sipariş ödeme işlemine verilen JSON yanıtını görüntüler. Kablosuz kulaklıklar ve seyahat çantası için requestId "req_8f3a9b42", orderId "ord_123456", para birimi USD ve ürün ve gönderim bilgilerini kullanır. Soldaki kaynak sürüm, "2025-05-21T10:24:31Z" zaman damgasını, "v1" sürümünü, "beklemede" durumunu, toplam tutarı 129,99, kablosuz kulaklık birim fiyatını 99,99 (indirim yok), seyahat çantası miktarını 1, birim fiyatını 30,00 (indirim yok), "standart" kargo yöntemini, tahmini teslim süresini 5 gün ve "123 Market St" adresini içermelidir. Ara hedef sürüm, sol kenarda bir fark işareti göstermeli ve renkli çizgilerle vurgulanmalıdır: silinen satırlar için kırmızı, eklenen satırlar için yeşil ve değiştirilen satırlar için sarı. Aşağıdaki değişiklikler dahil edilmelidir: zaman damgası "2025-05-20T15:11:09Z"den "2025-05-21T10:24:31Z"ye değiştirildi, sürüm v2 olarak değiştirildi, durum beklemede'den onaylandı'ya değiştirildi, toplam tutar 139,99 olarak değiştirildi, kablosuz kulaklık birimi fiyatı 10,00 indirimle 109,99 olarak değiştirildi, seyahat çantası miktarı 2 olarak değiştirildi, teslimat yöntemi ekspres olarak değiştirildi ve tahmini gün sayısı 2 olarak değiştirildi. Her tam düzenleyicide yaklaşık 32 satır numaralı kod görüntülenmelidir. Görsel stil: Gelişmiş SaaS geliştirici aracı arayüzü, net vektör düzeyinde işleme, koyu tema, kobalt mavisi vurgu rengi, yumuşak gri metin, gerçekçi ancak temiz kullanıcı arayüzü ekran görüntüleri, insan figürü yok, filigran yok ve uygulama penceresinin dışında tarayıcı kenarlığı yok. Tüm metinler net ve ızgaraya hizalı olmalıdır.