Maket UI Alat Perbandingan JSON Gelap

Tujuan: Membuat prototipe UI aplikasi desktop mode gelap untuk alat perbandingan JSON bernama {argument name="app name" default="Tilted Diffs"}, yang menampilkan perbandingan respons API berjudul {argument name="diff title" default="API Response — Checkout v2"}. Kanvas: Tangkapan layar desktop layar lebar 16:10, kira-kira 1152×768, dengan jendela aplikasi bergaya macOS yang mengambang di atas latar belakang gradien biru tua. Manfaatkan bayangan halus, sudut membulat, batas tipis, dan estetika alat pengembang yang disempurnakan. Tata Letak: Aplikasi ini terdiri dari empat area utama: bilah sisi kiri, bilah alat atas yang membentang di area editor, dan tiga panel editor kode vertikal. Panel editor pertama dipilih dengan lingkaran fokus biru terang. Panel tengah menampilkan sorotan perbedaan sebaris berwarna. Panel paling kanan lebih sempit dan sebagian terlihat, menyerupai tab file tambahan atau kolom perbandingan ketiga. Bilah Sisi Kiri: Sudut kiri atas menampilkan tombol lampu lalu lintas macOS: tiga lingkaran, masing-masing merah, kuning, dan hijau. Di bawah nama aplikasi terdapat kotak pencarian dengan teks placeholder "Cari perbedaan…" dan saran keyboard. Di bawahnya terdapat delapan item daftar perbedaan yang tersimpan, masing-masing dengan ikon dokumen kecil dan stempel waktu: 1) “Respons API — Checkout v2”, menampilkan “Hari Ini, 10:24 AM”, disorot dengan warna biru sebagai item yang dipilih; 2) “Profil Pengguna — API Publik”, menampilkan “Kemarin, 4:18 PM”; 3) “Endpoint Pesanan — v1 vs v2”, menampilkan “20 Mei 2025, 9:14 AM”; 4) “Katalog Produk — Wilayah EU”, menampilkan “19 Mei 2025, 2:47 PM”; 5) “Respons Otentikasi — SSO”, menampilkan “18 Mei 2025, 11:03 AM”; 6) “Ringkasan Penagihan — Q2”, menampilkan “17 Mei 2025, 3:22 PM”; 7) “Webhook Payload — Stripe”, menampilkan “16 Mei 2025, 10:11 AM”; 8) Pesan “Hasil Pencarian — Relevansi” menampilkan “15 Mei 2025, 5:35 PM”. Bagian bawah menampilkan tombol biru “+ Perbedaan Baru” yang menonjol dan ikon roda gigi kecil. Toolbar atas menampilkan “Respons API — Checkout v2” di sebelah kiri, disertai dengan ikon pensil pengeditan kecil. Kontrol tersegmentasi di tengah berisi dua label: “Editor” (dipilih dengan warna biru) dan “Perbedaan” (tidak dipilih). Sisi kanan berisi empat pintasan keyboard ringkas berlabel “⌘T tambah kolom”, “⌘D alihkan perbedaan”, dan “⌘← / ⌘→ pindahkan fokus”, dengan jarak kecil antar grup. Panel editor menggunakan font kode monospasi, nomor baris, penyorotan sintaks JSON, panel biru tua, dan batas membulat tipis. Panel sebelah kiri diberi judul "source.json" dengan ikon dokumen dan menu tiga titik. Panel tengah diberi judul "target.json" dengan ikon dokumen dan menu tiga titik. Panel kanan yang sempit diberi judul "more.json" dan hanya menampilkan sisi kiri kode, yang menunjukkan kemungkinan kelebihan konten. Setiap panel editor lengkap memiliki bilah status di bagian bawah yang menampilkan "Ln 1, Col 1", "Spasi: 2", "UTF-8", "LF", dan "JSON". Konten kode menampilkan respons JSON untuk proses checkout pesanan. Kode tersebut menggunakan requestId "req_8f3a9b42", orderId "ord_123456", mata uang USD, dan informasi produk serta pengiriman untuk headphone nirkabel dan kantong perjalanan. Versi sumber di sebelah kiri harus menyertakan stempel waktu "2025-05-21T10:24:31Z", versi "v1", status "pending", totalAmount 129.99, unitPrice headphone nirkabel 99.99 (diskon tidak ada), kuantitas kantong perjalanan 1, unitPrice 30.00 (diskon tidak ada), metode pengiriman "standar", estimatedDays 5, dan alamat "123 Market St". Versi target perantara harus menampilkan penanda perbedaan di sisi kiri dan disorot dengan garis berwarna: merah untuk baris yang dihapus, hijau untuk baris yang ditambahkan, dan kuning untuk baris yang dimodifikasi. Perubahan yang disertakan antara lain: stempel waktu diubah dari "2025-05-20T15:11:09Z" menjadi "2025-05-21T10:24:31Z", versi diubah menjadi v2, status diubah dari tertunda menjadi dikonfirmasi, totalAmount diubah menjadi 139,99, harga unit earphone nirkabel diubah menjadi 109,99 dengan diskon 10,00, jumlah kantong perjalanan diubah menjadi 2, metode pengiriman diubah menjadi ekspres, dan perkiraan hari diubah menjadi 2. Sekitar 32 baris kode bernomor harus ditampilkan di setiap editor lengkap. Gaya visual: Antarmuka alat pengembang SaaS tingkat lanjut, rendering tingkat vektor yang tajam, tema gelap, warna aksen biru kobalt, teks abu-abu lembut, tangkapan layar UI yang realistis namun bersih, tanpa figur manusia, tanpa tanda air, dan tanpa batas browser di luar jendela aplikasi. Jaga agar semua teks tetap jelas dan sejajar dengan grid.