डार्क JSON डिफ टूल UI मॉकअप

उद्देश्य: {argument name="app name" default="Tilted Diffs"} नामक JSON diff टूल के लिए एक डार्क मोड डेस्कटॉप एप्लिकेशन UI प्रोटोटाइप बनाएं, जिसमें {argument name="diff title" default="API Response — Checkout v2"} शीर्षक से API प्रतिक्रिया तुलनाएं प्रदर्शित हों। कैनवास: 16:10 वाइडस्क्रीन डेस्कटॉप स्क्रीनशॉट, लगभग 1152×768, जिसमें macOS-शैली की एप्लिकेशन विंडो गहरे नीले ग्रेडिएंट बैकग्राउंड पर तैरती हुई दिखाई दे रही हो। सूक्ष्म छाया, गोल कोने, पतले बॉर्डर और परिष्कृत डेवलपर टूल सौंदर्यशास्त्र का उपयोग करें। लेआउट: एप्लिकेशन में चार मुख्य क्षेत्र हैं: एक बायां साइडबार, संपादक क्षेत्र में फैला एक शीर्ष टूलबार और तीन ऊर्ध्वाधर कोड संपादक पैनल। पहला संपादक पैनल चमकीले नीले फोकस हेलो से चयनित होता है। मध्य पैनल रंगीन इनलाइन diff हाइलाइट्स प्रदर्शित करता है। सबसे दाहिना पैनल संकरा और आंशिक रूप से दिखाई देता है, जो एक अतिरिक्त फ़ाइल टैब या तीसरे तुलना कॉलम जैसा दिखता है। बायां साइडबार: ऊपरी बाएं कोने में macOS ट्रैफिक लाइट बटन प्रदर्शित होता है: तीन वृत्त, क्रमशः लाल, पीला और हरा। ऐप के नाम के नीचे एक सर्च बॉक्स है जिसमें "Search diffs…" लिखा हुआ है और कीबोर्ड के सुझाव भी दिए गए हैं। नीचे आठ सेव किए गए अंतर सूची आइटम हैं, जिनमें से प्रत्येक में एक छोटा दस्तावेज़ आइकन और एक टाइमस्टैम्प है: 1) “API रिस्पॉन्स — चेकआउट v2”, जिसमें “आज, सुबह 10:24 बजे” दिखाया गया है, जो नीले रंग में चयनित आइटम के रूप में हाइलाइट किया गया है; 2) “यूज़र प्रोफ़ाइल — पब्लिक API”, जिसमें “कल, शाम 4:18 बजे” दिखाया गया है; 3) “ऑर्डर्स एंडपॉइंट — v1 बनाम v2”, जिसमें “20 मई, 2025, सुबह 9:14 बजे” दिखाया गया है; 4) “प्रोडक्ट कैटलॉग — EU क्षेत्र”, जिसमें “19 मई, 2025, दोपहर 2:47 बजे” दिखाया गया है; 5) “ऑथ रिस्पॉन्स — SSO”, जिसमें “18 मई, 2025, सुबह 11:03 बजे” दिखाया गया है। 6) “बिलिंग सारांश — Q2”, जिसमें “17 मई, 2025, दोपहर 3:22” दिखाया गया है; 7) “वेबहुक पेलोड — स्ट्राइप”, जिसमें “16 मई, 2025, सुबह 10:11” दिखाया गया है; 8) “खोज परिणाम — प्रासंगिकता” संदेश में “15 मई, 2025, शाम 5:35” प्रदर्शित होता है। नीचे एक प्रमुख नीला “+ नया अंतर” बटन और एक छोटा गियर आइकन है। शीर्ष टूलबार में बाईं ओर “एपीआई प्रतिक्रिया — चेकआउट v2” प्रदर्शित होता है, जिसके साथ एक छोटा संपादन पेंसिल आइकन भी है। मध्य में एक खंडित नियंत्रण में दो लेबल हैं: “संपादक” (नीले रंग में चयनित) और “अंतर” (अचयनित)। दाईं ओर चार संक्षिप्त कीबोर्ड शॉर्टकट हैं जिन्हें “⌘T कॉलम जोड़ें”, “⌘D अंतर टॉगल करें” और “⌘← / ⌘→ फोकस स्थानांतरित करें” लेबल किया गया है, समूहों के बीच कम दूरी है। एडिटर पैनल में मोनोस्पेस्ड कोड फॉन्ट, लाइन नंबर, JSON सिंटैक्स हाइलाइटिंग, गहरा नेवी ब्लू पैनल और पतले गोल बॉर्डर हैं। बाएँ पैनल का शीर्षक "source.json" है, जिसमें एक दस्तावेज़ आइकन और तीन-बिंदु वाला मेनू है। मध्य पैनल का शीर्षक "target.json" है, जिसमें एक दस्तावेज़ आइकन और तीन-बिंदु वाला मेनू है। दाएँ संकीर्ण पैनल का शीर्षक "more.json" है और यह केवल कोड का बायाँ भाग प्रदर्शित करता है, जो ओवरफ़्लो दर्शाता है। प्रत्येक पूर्ण एडिटर पैनल के नीचे एक स्टेटस बार है जो "Ln 1, Col 1", "Spaces: 2", "UTF-8", "LF" और "JSON" प्रदर्शित करता है। कोड सामग्री ऑर्डर चेकआउट के JSON रिस्पॉन्स को प्रदर्शित करती है। इसमें requestId "req_8f3a9b42", orderId "ord_123456", मुद्रा USD, और वायरलेस हेडफ़ोन और ट्रैवल पाउच के लिए उत्पाद और शिपिंग जानकारी का उपयोग किया गया है। बाईं ओर के मूल संस्करण में टाइमस्टैम्प "2025-05-21T10:24:31Z", संस्करण "v1", स्थिति "लंबित", कुल राशि 129.99, वायरलेस हेडफ़ोन की इकाई कीमत 99.99 (छूट शून्य), ट्रैवल पाउच की मात्रा 1, इकाई कीमत 30.00 (छूट शून्य), शिपिंग विधि "मानक", अनुमानित दिन 5 और पता "123 मार्केट स्ट्रीट" शामिल होना चाहिए। मध्यवर्ती लक्ष्य संस्करण में बाईं ओर एक अंतर चिह्न प्रदर्शित होना चाहिए और उसे रंगीन रेखाओं से हाइलाइट किया जाना चाहिए: हटाई गई रेखाओं के लिए लाल, जोड़ी गई रेखाओं के लिए हरा और संशोधित रेखाओं के लिए पीला। इसमें निम्नलिखित बदलाव शामिल होने चाहिए: टाइमस्टैम्प "2025-05-20T15:11:09Z" से बदलकर "2025-05-21T10:24:31Z" कर दिया गया है, वर्शन v2 में बदल दिया गया है, स्थिति लंबित से पुष्ट कर दी गई है, कुल राशि 139.99 कर दी गई है, वायरलेस इयरफ़ोन यूनिट की कीमत 10.00 की छूट के साथ 109.99 कर दी गई है, ट्रैवल पाउच की संख्या 2 कर दी गई है, डिलीवरी विधि एक्सप्रेस कर दी गई है, और अनुमानित दिन 2 कर दिए गए हैं। प्रत्येक पूर्ण संपादक में लगभग 32 पंक्तियों का क्रमांकित कोड प्रदर्शित होना चाहिए। दृश्य शैली: उन्नत SaaS डेवलपर टूल इंटरफ़ेस, स्पष्ट वेक्टर-स्तरीय रेंडरिंग, डार्क थीम, कोबाल्ट ब्लू एक्सेंट रंग, हल्का ग्रे टेक्स्ट, यथार्थवादी लेकिन साफ़ UI स्क्रीनशॉट, कोई मानव आकृति नहीं, कोई वॉटरमार्क नहीं, और एप्लिकेशन विंडो के बाहर कोई ब्राउज़र बॉर्डर नहीं। सभी टेक्स्ट स्पष्ट और ग्रिड के साथ संरेखित रखें।