Темный макет интерфейса инструмента сравнения JSON

Цель: Создать прототип пользовательского интерфейса настольного приложения с темным режимом для инструмента сравнения JSON-данных под названием {argument name="app name" default="Tilted Diffs"}, демонстрирующего сравнение ответов API под названием {argument name="diff title" default="API Response — Checkout v2"}. Холст: Скриншот настольного приложения в широкоэкранном формате 16:10, приблизительно 1152×768, с окном приложения в стиле macOS, расположенным на темно-синем градиентном фоне. Использовать легкие тени, закругленные углы, тонкие границы и изысканную эстетику инструментов разработчика. Макет: Приложение состоит из четырех основных областей: левой боковой панели, верхней панели инструментов, охватывающей область редактора, и трех вертикальных панелей редактора кода. Первая панель редактора выделена ярким синим ореолом фокуса. Средняя панель отображает цветные встроенные выделения различий. Крайняя правая панель уже и частично видна, напоминая дополнительную вкладку файла или третий столбец сравнения. Левая боковая панель: В верхнем левом углу отображается кнопка светофора macOS: три круга, красный, желтый и зеленый соответственно. Под названием приложения находится поле поиска с текстом-заполнителем "Поиск различий…" и подсказками клавиатуры. Ниже представлены восемь сохраненных элементов списка различий, каждый с небольшим значком документа и меткой времени: 1) "Ответ API — Checkout v2", отображающий "Сегодня, 10:24", выделенный синим цветом как выбранный элемент; 2) "Профиль пользователя — Public API", отображающий "Вчера, 16:18"; 3) "Конечная точка заказов — v1 против v2", отображающий "20 мая 2025 г., 9:14"; 4) "Каталог продукции — регион ЕС", отображающий "19 мая 2025 г., 14:47"; 5) «Ответ авторизации — SSO», отображающий «18 мая 2025 г., 11:03»; 6) «Сводка по выставлению счетов — 2 квартал», отображающий «17 мая 2025 г., 15:22»; 7) «Полезная нагрузка веб-перехватчика — Stripe», отображающий «16 мая 2025 г., 10:11»; 8) Сообщение «Результаты поиска — Релевантность» отображает «15 мая 2025 г., 17:35». Внизу расположена заметная синяя кнопка «+ Новая разница» и небольшой значок шестеренки. На верхней панели инструментов слева отображается «Ответ API — Checkout 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 (скидка равна null), количество дорожных чехлов 1, цену за единицу 30.00 (скидка равна null), способ доставки "стандартный", предполагаемое время доставки 5 дней и адрес "123 Market St". Промежуточная целевая версия должна отображать маркер различий в левой боковой панели и быть выделена цветными линиями: красными — для удаленных строк, зелеными — для добавленных строк и желтыми — для измененных строк. Изменения должны включать в себя: метку времени с "2025-05-20T15:11:09Z" на "2025-05-21T10:24:31Z", версию на v2, статус с "ожидающий" на "подтвержденный", общую сумму на 139.99, цену беспроводных наушников на 109.99 со скидкой 10.00, количество дорожных чехлов на 2, способ доставки на экспресс-доставку и расчетное количество дней на 2. В каждом полноэкранном редакторе должно отображаться примерно 32 строки пронумерованного кода. Визуальный стиль: расширенный интерфейс инструментов разработчика SaaS, четкое векторное отображение, темная тема, акцентный цвет кобальтово-синего цвета, мягкий серый текст, реалистичные, но чистые скриншоты пользовательского интерфейса, отсутствие человеческих фигур, водяных знаков и границ браузера за пределами окна приложения. Весь текст должен быть четким и выровненным по сетке.