initial commit of project
generated by OpenCode and MiniMax M3.1 Flash Free
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
# AGENTS.md — JSON DevTools
|
||||
|
||||
Statická jednostránková aplikácia (vanilla ES6+, HTML/CSS/JS). Bez frameworkov,
|
||||
bez npm, bez build procesu, bez backendu, bez CDN. Bez CI, `package.json` ani
|
||||
lint konfigurácie — repozitár je hotový, nič sa nekompiluje.
|
||||
|
||||
## ZákAZ KONTROL V PREHLIADAČOCH
|
||||
|
||||
**V prehliadačoch sa nesú overovanie aplikácie – používateľ to robí sám.**
|
||||
Neotváraj Chrome/Chromium ani iný prehliadač, neautomatizuj ich, nescreenshotuj
|
||||
cez prehliadač. Trvalé používateľské nariadenie, zapísané aj v globálnej pamäti
|
||||
`~/.config/opencode/AGENTS.md`.
|
||||
|
||||
Povolené: statická kontrola (`node --check`), testy logiky v Node.js, `curl`/`python`.
|
||||
Nepridávaj do repozitára testy ani nástroje založené na prehliadači.
|
||||
|
||||
## Štruktúra
|
||||
|
||||
```
|
||||
src/index.html src/style.css src/app.js # aplikácia – musia zostať v jednej zložke
|
||||
tests/logic.test.js # Node testy (bez prehliadača)
|
||||
docs/ # screenshoty pre README
|
||||
```
|
||||
|
||||
* `src/index.html` načítava `style.css` a `app.js` **relatívnou cestou** → všetky
|
||||
tri súbory musia zostať v `src/`. Presun do rootu rozbije načítanie aj testy.
|
||||
* Aplikácia sa otvára ako **`src/index.html`** (relatívne cesty), nie cez root.
|
||||
* Repo hostuje **Gitea**, nie GitHub — nepridávaj GitHub Actions/Pages šablóny.
|
||||
|
||||
## Príkazy
|
||||
|
||||
```bash
|
||||
node --check src/app.js # rýchla syntax kontrola
|
||||
node tests/logic.test.js # testy logiky – 93 assertov, exit 1 pri chybe
|
||||
python -m http.server 8080 --directory src # lokálne spustenie (voliteľné)
|
||||
```
|
||||
|
||||
Nie je čo `npm install`ovať ani buildovať – po úprave `src/*.js|css|html` stačí
|
||||
reload stránky.
|
||||
|
||||
## Ako funguje `tests/logic.test.js`
|
||||
|
||||
* `src/app.js` sa načíta do `vm` sandboxu s **ručným DOM stubom** (žiadne jsdom).
|
||||
Aplikácia sa musí vedieť načítať bez reálneho DOM.
|
||||
* Stub vracia **nový generický element pri každom `querySelector()`** → DOM
|
||||
interakcie (tlačidlá, eventy, fokus) sa v Node testoch **neoverujú**. Overuj
|
||||
logiku cez `window.JSONDevTools`, nie cez DOM.
|
||||
* `src/app.js` musí na konci exportovať **`window.JSONDevTools`** (objekt s
|
||||
modulmi `Utils, Toast, Theme, Splitter, Highlighter, Doc, Formatter, FileIO,
|
||||
Tree, Diff, Api, History, App`) — bez neho testy skončí chybou.
|
||||
* Testy čítajú `../src/app.js` a `../src/index.html` → pri presunu súborov treba
|
||||
upraviť cesty v `tests/logic.test.js`.
|
||||
* Pomocníci: `ok(name, cond, extra)`, `eq(name, a, b)`, `deepEq(...)`, `section(t)`.
|
||||
* Testy obsahujú aj statické kontroly konzistencie: každé `$('#id')` v `app.js`
|
||||
musí existovať v `index.html`, každé `<button id>` musí mať handler, `id` v HTML
|
||||
nesmie byť duplicitné. **Nové `id` v HTML pridaj aj do `app.js`**, inak test
|
||||
zfailuje.
|
||||
|
||||
## Architektúra `src/app.js`
|
||||
|
||||
Jeden IIFE, vnútri moduly: `Utils`, `LS`, `Toast`, `Theme`, `Splitter`,
|
||||
`Highlighter`, `Doc`, `Formatter`, `FileIO`, `Tree`, `Diff`, `Api`, `History`,
|
||||
`App`. Bez tried, bez DI – moduly sú plain objekty.
|
||||
|
||||
Nároky, ktoré treba rešpektovať:
|
||||
|
||||
* **`Doc` je zdieľaný stav** medzi Formatter a Tree – oba textareas sú synchro
|
||||
cez `Doc.set(text, origin)`. Nový JSON pohľad pripoj cez `Doc.onChange()`,
|
||||
nie vlastnou kopírou textu.
|
||||
* **`localStorage` len cez `Utils.store`** (prefix `jsondevtools.*`). Wrapper
|
||||
zachytáva prekročenie kvóty a vyhodí toast – nepristupuj k `localStorage`
|
||||
priamo.
|
||||
* **Bezpečnostná invariant:** do historie sa nikdy nesmie uložiť `Authorization`,
|
||||
`Cookie` ani `X-Api-Key` – prechádza to cez `sanitizeHeaders()` v `Api`.
|
||||
Tokeny žijú iba v pamäti stránky.
|
||||
* CSS motívy sú CSS custom properties v `html[data-theme="dark"|"light"]` –
|
||||
nové farby pridávaj ako premenné, nie ako hardcoded hodnoty.
|
||||
* UI texty v slovenčine, JSON hodnoty v angličtine.
|
||||
|
||||
## Ostatné
|
||||
|
||||
* Screenshoty v `docs/` sú v README vložené relatívnou cestou (`docs/...`) –
|
||||
pri presúvaní ich treba aktualizovať aj v `README.md`.
|
||||
* `src/index.html?theme=light|dark` prepne motív **len pre dané načítanie** – uloženú
|
||||
preferenciu v `localStorage` neprepíše (prepíše ju až prepínač v hlavičke).
|
||||
@@ -1,2 +1,159 @@
|
||||
# JSONdevTools
|
||||
# JSON DevTools
|
||||
|
||||
Kompletný jednostránkový nástroj na prácu s JSON-om pri vývoji REST API.
|
||||
Bez frameworkov, bez npm, bez build procesu a bez backendu.
|
||||
|
||||
**Formatter · Tree viewer · Diff · API Request builder · História**
|
||||
|
||||
---
|
||||
|
||||
## Ukážky
|
||||
|
||||
### Formatter — živá validácia a syntax highlighting
|
||||
|
||||
|
||||
|
||||
Vľavo vstup, vpravo zvýraznený výstup. Chyba vo vstupe sa zobrazí s presným
|
||||
riadkom, stĺpcom a výrezom textu.
|
||||
|
||||
### Tree viewer — typy, počty položiek, JSONPath
|
||||
|
||||
|
||||
|
||||
Strom zobrazuje typ každej hodnoty (`string`, `number`, `boolean`, `null`) a počet
|
||||
položiek objektov/polí (`{6}`, `[5]`). Každý uzol sa dá skopírovať ako **JSONPath**
|
||||
alebo ako **konkrétna hodnota**.
|
||||
|
||||
### API Request builder — stav, trvanie, headers, odpoveď
|
||||
|
||||
|
||||
|
||||
Status, trvanie požiadavky, response headers a automaticky naformátovaná JSON
|
||||
odpoveď. Pri chybe CORS sa zobrazí podrobné vysvetlenie príčiny.
|
||||
|
||||
---
|
||||
|
||||
## Spustenie
|
||||
|
||||
Aplikácia je čisto statická — otvorte **`src/index.html`** priamo v prehliadači
|
||||
(dvojklikom) a všetko beží lokálne.
|
||||
|
||||
Voliteľne cez lokálny server (odporúčané, ak chcete testovať `fetch()` proti
|
||||
API s CORS z `http://localhost`):
|
||||
|
||||
```bash
|
||||
python -m http.server 8080 --directory src
|
||||
# potom otvorte http://localhost:8080/
|
||||
```
|
||||
|
||||
> Otvorenie cez `file://` funguje, ale prehliadač považuje pôvod stránky za `null`
|
||||
> — časť API (hlavičky, CORS) môže byť obmedzená. Aplikácia v tom prípade zobrazí
|
||||
> podrobné vysvetlenie.
|
||||
|
||||
---
|
||||
|
||||
## Štruktúra repozitára
|
||||
|
||||
```
|
||||
JSONdevTools/
|
||||
├── src/ # samotná aplikácia (jediný adresár, ktorý sa publikuje)
|
||||
│ ├── index.html # štruktúra UI (5 panelov, ARIA role, modál skratiek)
|
||||
│ ├── style.css # tmavý / svetlý motív, responzívne rozloženie, resizable panely
|
||||
│ └── app.js # celá logika (vanilla ES6+), bez závislostí
|
||||
├── tests/
|
||||
│ └── logic.test.js # Node testy logiky (bez prehliadača)
|
||||
├── docs/
|
||||
│ ├── Screenshot-Formatter.png
|
||||
│ ├── Screenshot-Tree.png
|
||||
│ └── Screenshot-API-Request.png
|
||||
├── AGENTS.md # projektové pravidlá pre AI agenty
|
||||
├── LICENSE
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Nástroje
|
||||
|
||||
### 1. Formatter
|
||||
* Vloženie JSON textu, načítanie súboru (tlačidlo alebo pretiahnutie myšou)
|
||||
* Živá validácia s presnou hláškou chyby: **riadok, stĺpec, pozícia, výrez textu**
|
||||
* Pretty print (2 medzery) / Minify
|
||||
* Kopírovanie výsledku, stiahnutie `.json` súboru
|
||||
* Syntax highlighting výstupu
|
||||
|
||||
### 2. Tree
|
||||
* Rozbaľovanie / zbaľovanie uzlov, zobrazenie typov a počtu položiek (`{6}`, `[5]`)
|
||||
* Vyhľadávanie v kľúčoch aj hodnotách, zvýraznenie zhôd, automatické rozbavenie
|
||||
rodičov zhôd
|
||||
* Kopírovanie **JSONPath** (`$.user.roles[1]`) a **konkrétnej hodnoty** uzla
|
||||
* Ovládanie klávesnicou: `↑`/`↓` pohyb, `→`/`←` rozbaliť/zbaliť, `Enter`/`Space`
|
||||
prepnúť, `C` kopírovať hodnotu, `P` kopírovať path
|
||||
|
||||
### 3. Diff
|
||||
* Dva editory vedľa sebe (A = pôvodné, B = nové)
|
||||
* Rekurzívne porovnanie vnorených objektov a polí
|
||||
* Rozdiely: **pridané / odstránené / zmenené** (vrátane zmeny typu) s JSONPath
|
||||
* Súhrnný počet rozdielov, kopírovanie výsledkov porovnania ako JSON
|
||||
|
||||
### 4. API Request
|
||||
* Metódy `GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS`
|
||||
* URL endpointu, query parametre, vlastné HTTP hlavičky
|
||||
* Autentifikácia: Bearer token alebo Basic (`user:heslo`)
|
||||
* JSON request body (s formátovaním / minifikovaním)
|
||||
* `fetch()` s 30 s timeoutom, meranie trvania, zobrazenie HTTP statusu
|
||||
* Response headers, automaticky naformátovaná JSON odpoveď, surový text pri
|
||||
neplatnom JSON
|
||||
* Detailné vysvetlenie **CORS** chýb (chýbajúca hlavička, preflight, `file://`,
|
||||
DNS, proxy) s návrhmi riešenia
|
||||
|
||||
### 5. História
|
||||
* Posledných **20 JSON dokumentov** a **20 API požiadaviek**
|
||||
* Ukladá sa do `localStorage`
|
||||
* Vymazanie jednotlivých záznamov aj celej historie
|
||||
* **Citlivé údaje sa neukladajú**: hlavička `Authorization`, `Cookie`, `X-Api-Key`
|
||||
sa z záznamu vymaže, tokeny žijú iba v pamäti stránky
|
||||
|
||||
---
|
||||
|
||||
## Klávesové skratky
|
||||
|
||||
| Skratka | Akcia |
|
||||
|---|---|
|
||||
| `Ctrl+Shift+F` | Pretty print |
|
||||
| `Ctrl+Shift+M` | Minify |
|
||||
| `Ctrl+Shift+C` | Kopírovať výstup |
|
||||
| `Ctrl+Shift+O` | Otvoriť JSON súbor |
|
||||
| `Ctrl+S` | Stiahnuť JSON súbor |
|
||||
| `Ctrl+Enter` | Odoslať API požiadavku |
|
||||
| `Ctrl+Shift+D` | Prepnuť motív |
|
||||
| `Ctrl+Shift+K` | Focus na vyhľadávanie v strome |
|
||||
| `Ctrl+Shift+X` | Vyčistiť aktuálny editor |
|
||||
| `1` … `5` | Prepnutie nástroja (mimo textových polí) |
|
||||
| `?` | Zoznam skratiek |
|
||||
| `Esc` | Zavrieť okno / zrušiť vyhľadávanie |
|
||||
|
||||
Na macOS použite `Cmd` namiesto `Ctrl`.
|
||||
|
||||
---
|
||||
|
||||
## Príkazy
|
||||
|
||||
```bash
|
||||
node tests/logic.test.js # testy logiky – 93 assertov, bez prehliadača
|
||||
```
|
||||
|
||||
Testy nepoužívajú žiadny prehliadač ani externé závislosti: `app.js` sa načíta
|
||||
do izolovaného `vm` kontextu s minimálnym DOM stubom a overuje sa diff algoritmus,
|
||||
sanitizácia historie, cesty uzlov, syntax highlighting a konzistencia ID medzi
|
||||
HTML a JavaScriptom.
|
||||
|
||||
---
|
||||
|
||||
## Bezpečnosť a súkromie
|
||||
|
||||
* Aplikácia je čisto statická — žiadne CDN, žiadne externé závislosti.
|
||||
* Údaje sa nikam neposielajú, **okrem API požiadaviek, ktoré sám spustíte**
|
||||
na URL, ktorú zadáte vy.
|
||||
* Všetko (história, motív, šírky panelov) sa ukladá lokálne v `localStorage`.
|
||||
* Pre zapnutie svetlého motívu jednorazovo cez URL: `src/index.html?theme=light`.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
+2015
File diff suppressed because it is too large
Load Diff
+326
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sk" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="description" content="JSON DevTools - formatter, tree viewer, diff a API request builder pre REST API debugging">
|
||||
<title>JSON DevTools</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="skip-link" href="#main">Preskočiť na obsah</a>
|
||||
|
||||
<header class="app-header">
|
||||
<div class="brand">
|
||||
<span class="logo" aria-hidden="true">{ }</span>
|
||||
<span class="brand-name">JSON DevTools</span>
|
||||
</div>
|
||||
|
||||
<nav class="tabs" role="tablist" aria-label="Nástroje">
|
||||
<button class="tab" role="tab" id="tab-formatter" data-view="formatter" aria-controls="view-formatter" aria-selected="true">Formatter</button>
|
||||
<button class="tab" role="tab" id="tab-tree" data-view="tree" aria-controls="view-tree" aria-selected="false">Tree</button>
|
||||
<button class="tab" role="tab" id="tab-diff" data-view="diff" aria-controls="view-diff" aria-selected="false">Diff</button>
|
||||
<button class="tab" role="tab" id="tab-request" data-view="request" aria-controls="view-request" aria-selected="false">API Request</button>
|
||||
<button class="tab" role="tab" id="tab-history" data-view="history" aria-controls="view-history" aria-selected="false">História</button>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<button id="theme-toggle" class="icon-btn" title="Prepnuť motív (Ctrl+Shift+D)" aria-label="Prepnuť motív">
|
||||
<svg class="icon icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
||||
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><g stroke-linecap="round"><path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8"/></g></svg>
|
||||
</button>
|
||||
<button id="shortcuts-btn" class="icon-btn" title="Klávesové skratky (?)" aria-label="Klávesové skratky">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><g stroke-linecap="round"><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/></g></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main" class="main">
|
||||
|
||||
<!-- ======================= FORMATTER ======================= -->
|
||||
<section class="view" id="view-formatter" role="tabpanel" aria-labelledby="tab-formatter" tabindex="-1">
|
||||
<div class="toolbar" role="toolbar" aria-label="Nástroje formátovača">
|
||||
<button class="btn btn-primary" id="fmt-format" title="Pretty print (Ctrl+Shift+F)">Pretty print</button>
|
||||
<button class="btn" id="fmt-minify" title="Minify (Ctrl+Shift+M)">Minify</button>
|
||||
<button class="btn" id="fmt-copy" title="Kopírovať výsledok (Ctrl+Shift+C)">Kopírovať</button>
|
||||
<button class="btn" id="fmt-download" title="Stiahnuť JSON súbor (Ctrl+S)">Stiahnuť</button>
|
||||
<button class="btn" id="fmt-open" title="Načítať JSON súbor (Ctrl+Shift+O)">Otvoriť…</button>
|
||||
<span class="sep" role="separator"></span>
|
||||
<button class="btn btn-ghost" id="fmt-clear" title="Vyčistiť editor">Vyčistiť</button>
|
||||
<button class="btn btn-ghost" id="fmt-sample" title="Vložiť ukážkový JSON">Ukážka</button>
|
||||
<input type="file" id="file-input" accept=".json,application/json,text/plain" hidden>
|
||||
</div>
|
||||
|
||||
<div class="split-pane" id="fmt-split" data-storage-key="layout.formatter">
|
||||
<section class="panel" aria-label="Vstupný JSON">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Vstup</h2>
|
||||
<span class="panel-meta" id="fmt-input-meta">0 B</span>
|
||||
</header>
|
||||
<div class="panel-body no-pad">
|
||||
<textarea id="fmt-input" class="code-area" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="Vstupný JSON text" placeholder="Vložte JSON sem…"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="splitter" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize panelov" title="Potiahnuť na zmenu šírky"></div>
|
||||
|
||||
<section class="panel" aria-label="Výstupný JSON">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Výstup</h2>
|
||||
<span class="panel-meta" id="fmt-status">Idle</span>
|
||||
</header>
|
||||
<div class="panel-body no-pad">
|
||||
<pre id="fmt-output" class="code-area code-pre" tabindex="0" aria-label="Výstupný JSON" aria-live="polite"></pre>
|
||||
</div>
|
||||
<div id="fmt-error" class="error-box" role="alert" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= TREE ======================= -->
|
||||
<section class="view" id="view-tree" role="tabpanel" aria-labelledby="tab-tree" tabindex="-1" hidden>
|
||||
<div class="toolbar" role="toolbar" aria-label="Nástroje stromu">
|
||||
<div class="search-wrap">
|
||||
<svg class="icon search-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.6-3.6" stroke-linecap="round"/></svg>
|
||||
<input type="search" id="tree-search" class="input search-input" placeholder="Hľadať kľúč alebo hodnotu…" aria-label="Hľadať v strome">
|
||||
<span class="panel-meta" id="tree-search-count" aria-live="polite"></span>
|
||||
</div>
|
||||
<span class="sep" role="separator"></span>
|
||||
<button class="btn btn-ghost" id="tree-expand" title="Rozbaliť všetko">Rozbaliť všetko</button>
|
||||
<button class="btn btn-ghost" id="tree-collapse" title="Zbaliť všetko">Zbaliť všetko</button>
|
||||
<button class="btn btn-ghost" id="tree-open" title="Načítať JSON súbor">Otvoriť…</button>
|
||||
<button class="btn btn-ghost" id="tree-copy-json" title="Kopírovať JSON">Kopírovať JSON</button>
|
||||
</div>
|
||||
|
||||
<div class="split-pane" id="tree-split" data-storage-key="layout.tree">
|
||||
<section class="panel" aria-label="Zdrojový JSON">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Zdroj</h2>
|
||||
<span class="panel-meta" id="tree-input-meta">0 B</span>
|
||||
</header>
|
||||
<div class="panel-body no-pad">
|
||||
<textarea id="tree-input" class="code-area" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="Zdrojový JSON text" placeholder="Vložte JSON sem…"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="splitter" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize panelov"></div>
|
||||
|
||||
<section class="panel" aria-label="Stromová štruktúra">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Strom</h2>
|
||||
<span class="panel-meta" id="tree-meta"></span>
|
||||
</header>
|
||||
<div class="panel-body" id="tree-container-wrap">
|
||||
<div id="tree-root" class="tree" role="tree" aria-label="JSON strom"></div>
|
||||
</div>
|
||||
<div id="tree-error" class="error-box" role="alert" hidden></div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= DIFF ======================= -->
|
||||
<section class="view" id="view-diff" role="tabpanel" aria-labelledby="tab-diff" tabindex="-1" hidden>
|
||||
<div class="toolbar" role="toolbar" aria-label="Nástroje porovnania">
|
||||
<button class="btn btn-primary" id="diff-run" title="Porovnať (Ctrl+Shift+D je motív – použite Ctrl+Enter)">Porovnať</button>
|
||||
<button class="btn" id="diff-swap" title="Vymeniť strany">Vymeniť A ↔ B</button>
|
||||
<button class="btn" id="diff-copy" title="Kopírovať výsledky porovnania">Kopírovať výsledky</button>
|
||||
<span class="sep" role="separator"></span>
|
||||
<button class="btn btn-ghost" id="diff-sample" title="Načítať ukážkový pár">Ukážka</button>
|
||||
<button class="btn btn-ghost" id="diff-clear" title="Vyčistiť oba vstupy">Vyčistiť</button>
|
||||
<span class="panel-meta" id="diff-summary" aria-live="polite">Nevykonané</span>
|
||||
</div>
|
||||
|
||||
<div class="split-pane" id="diff-split" data-storage-key="layout.diff">
|
||||
<section class="panel" aria-label="JSON A">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">A – pôvodné</h2>
|
||||
<span class="panel-meta" id="diff-a-meta">0 B</span>
|
||||
</header>
|
||||
<div class="panel-body no-pad">
|
||||
<textarea id="diff-a" class="code-area" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="JSON A" placeholder="Pôvodný JSON…"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="splitter" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize panelov"></div>
|
||||
|
||||
<section class="panel" aria-label="JSON B">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">B – nové</h2>
|
||||
<span class="panel-meta" id="diff-b-meta">0 B</span>
|
||||
</header>
|
||||
<div class="panel-body no-pad">
|
||||
<textarea id="diff-b" class="code-area" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="JSON B" placeholder="Nový JSON…"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="results" id="diff-results-wrap">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Rozdiely</h2>
|
||||
<div class="legend">
|
||||
<span class="badge badge-added">pridané</span>
|
||||
<span class="badge badge-removed">odstránené</span>
|
||||
<span class="badge badge-changed">zmenené</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="panel-body" id="diff-results" aria-live="polite">
|
||||
<p class="muted">Kliknite na <strong>Porovnať</strong> pre zobrazenie rozdielov medzi A a B.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= API REQUEST ======================= -->
|
||||
<section class="view" id="view-request" role="tabpanel" aria-labelledby="tab-request" tabindex="-1" hidden>
|
||||
<div class="split-pane horizontal-request" id="req-split" data-storage-key="layout.request">
|
||||
<section class="panel req-form" aria-label="Parametre požiadavky">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Požiadavka</h2>
|
||||
<span class="panel-meta">Ctrl+Enter = Odoslať</span>
|
||||
</header>
|
||||
<div class="panel-body scroll">
|
||||
<div class="field">
|
||||
<label for="req-method">Metóda</label>
|
||||
<select id="req-method" class="input">
|
||||
<option>GET</option>
|
||||
<option>POST</option>
|
||||
<option>PUT</option>
|
||||
<option>PATCH</option>
|
||||
<option>DELETE</option>
|
||||
<option>HEAD</option>
|
||||
<option>OPTIONS</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="req-url">URL endpointu</label>
|
||||
<div class="row">
|
||||
<input type="text" id="req-url" class="input mono" placeholder="https://api.example.com/v1/users" spellcheck="false" autocomplete="off">
|
||||
<button class="btn btn-primary" id="req-send" title="Odoslať požiadavku (Ctrl+Enter)">Odoslať</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="group" open>
|
||||
<summary>Query parametre</summary>
|
||||
<div id="req-params" class="kv-list"></div>
|
||||
<button class="btn btn-ghost btn-sm" id="req-add-param">+ Parameter</button>
|
||||
</details>
|
||||
|
||||
<details class="group" open>
|
||||
<summary>Hlavičky</summary>
|
||||
<div id="req-headers" class="kv-list"></div>
|
||||
<div class="row">
|
||||
<button class="btn btn-ghost btn-sm" id="req-add-header">+ Hlavička</button>
|
||||
<button class="btn btn-ghost btn-sm" id="req-preset-json">Nastaviť Content-Type: application/json</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group">
|
||||
<summary>Autentifikácia</summary>
|
||||
<div class="field">
|
||||
<label for="req-auth-type">Typ</label>
|
||||
<select id="req-auth-type" class="input">
|
||||
<option value="none">Žiadna</option>
|
||||
<option value="bearer">Bearer token</option>
|
||||
<option value="basic">Basic (user:heslo)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field" id="req-token-field" hidden>
|
||||
<label for="req-token" id="req-token-label">Token</label>
|
||||
<div class="row">
|
||||
<input type="password" id="req-token" class="input mono" placeholder="…" spellcheck="false" autocomplete="off">
|
||||
<button class="btn btn-ghost btn-sm" id="req-token-toggle" title="Zobraziť / skryť">Zobraziť</button>
|
||||
</div>
|
||||
<p class="hint">Token sa nikdy neukladá do historie ani do localStorage.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group" open>
|
||||
<summary>Request body</summary>
|
||||
<textarea id="req-body" class="code-area code-body" spellcheck="false" autocomplete="off" aria-label="Telo požiadavky" placeholder='{ "key": "value" }'></textarea>
|
||||
<div class="row">
|
||||
<span class="panel-meta" id="req-body-meta">0 B</span>
|
||||
<button class="btn btn-ghost btn-sm" id="req-body-format">Formatovať</button>
|
||||
<button class="btn btn-ghost btn-sm" id="req-body-minify">Minify</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group">
|
||||
<summary>Bezpečnosť</summary>
|
||||
<ul class="plain-list">
|
||||
<li>Hlavička <code>Authorization</code> sa z požiadavky v histórii vymaže.</li>
|
||||
<li>Tokeny sa uchovávajú iba v pamäti a po obnovení stránky sa zmažú.</li>
|
||||
<li>Žiadne údaje sa neposielajú na iné servery než na URL, ktorú zadáte vy.</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="splitter" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize panelov"></div>
|
||||
|
||||
<section class="panel req-response" aria-label="Odpoveď">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title">Odpoveď</h2>
|
||||
<span class="panel-meta" id="req-status">Nevykonané</span>
|
||||
</header>
|
||||
<div class="panel-body scroll" id="req-response-body">
|
||||
<p class="muted">Zostavte požiadavku a stlačte <strong>Odoslať</strong> (Ctrl+Enter).</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================= HISTORY ======================= -->
|
||||
<section class="view" id="view-history" role="tabpanel" aria-labelledby="tab-history" tabindex="-1" hidden>
|
||||
<div class="toolbar" role="toolbar" aria-label="Nástroje histórie">
|
||||
<div class="seg" role="tablist" aria-label="Typ záznamov">
|
||||
<button class="seg-btn is-active" data-hist="docs" role="tab" aria-selected="true">Dokumenty</button>
|
||||
<button class="seg-btn" data-hist="reqs" role="tab" aria-selected="false">Požiadavky</button>
|
||||
</div>
|
||||
<span class="sep" role="separator"></span>
|
||||
<button class="btn btn-danger" id="hist-clear">Vymazať celú históriu</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-body scroll" id="hist-body">
|
||||
<p class="muted">Zatiaľ bez záznamov.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ======================= SHORTCUTS MODAL ======================= -->
|
||||
<div class="modal-backdrop" id="shortcuts-modal" hidden>
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="sc-title">
|
||||
<header class="panel-head">
|
||||
<h2 class="panel-title" id="sc-title">Klávesové skratky</h2>
|
||||
<button class="icon-btn" id="sc-close" aria-label="Zavrieť">×</button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<dl class="shortcuts">
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></dt><dd>Pretty print JSON</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd></dt><dd>Minify JSON</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd></dt><dd>Kopírovať výstup JSON</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd></dt><dd>Otvoriť JSON súbor</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>S</kbd></dt><dd>Stiahnuť JSON súbor</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Enter</kbd></dt><dd>Odoslať API požiadavku</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd></dt><dd>Prepnuť tmavý / svetlý motív</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd></dt><dd>Focus na vyhľadávanie v strome</dd>
|
||||
<dt><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd></dt><dd>Vyčistiť aktuálny editor</dd>
|
||||
<dt><kbd>1</kbd> … <kbd>5</kbd></dt><dd>Prepnutie nástroja (mimo textových polí)</dd>
|
||||
<dt><kbd>?</kbd></dt><dd>Zobraziť tento zoznam</dd>
|
||||
<dt><kbd>Esc</kbd></dt><dd>Zavrieť okno / zrušiť vyhľadávanie</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toasts" class="toasts" aria-live="polite" aria-atomic="false"></div>
|
||||
|
||||
<div id="drag-overlay" class="drag-overlay" hidden>
|
||||
<div class="drag-card">Pustite JSON súbor naimportovanie</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+984
@@ -0,0 +1,984 @@
|
||||
/* =====================================================================
|
||||
JSON DevTools - stylesheet
|
||||
Dark / Light themes via CSS custom properties on [data-theme]
|
||||
===================================================================== */
|
||||
|
||||
:root {
|
||||
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--radius: 8px;
|
||||
--radius-sm: 5px;
|
||||
--header-h: 52px;
|
||||
--dur: 140ms;
|
||||
}
|
||||
|
||||
/* ------------------------------ DARK ------------------------------ */
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0e1116;
|
||||
--bg-2: #141922;
|
||||
--bg-3: #1a212c;
|
||||
--bg-elev: #1c2430;
|
||||
--panel: #121821;
|
||||
--panel-head: #161d27;
|
||||
--border: #232c3a;
|
||||
--border-strong: #33405400;
|
||||
--text: #dfe6f1;
|
||||
--text-dim: #9aa8bd;
|
||||
--text-faint: #6b7a91;
|
||||
--accent: #4c9aff;
|
||||
--accent-hover: #6aacff;
|
||||
--accent-soft: rgba(76, 154, 255, 0.14);
|
||||
--green: #4ec98a;
|
||||
--green-soft: rgba(78, 201, 138, 0.13);
|
||||
--red: #f2777a;
|
||||
--red-soft: rgba(242, 119, 122, 0.13);
|
||||
--orange: #e5a54b;
|
||||
--orange-soft: rgba(229, 165, 75, 0.14);
|
||||
--purple: #c08cf0;
|
||||
--purple-soft: rgba(192, 140, 240, 0.14);
|
||||
--cyan: #56c9d8;
|
||||
--shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
||||
--sel: rgba(76, 154, 255, 0.28);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ------------------------------ LIGHT ----------------------------- */
|
||||
html[data-theme="light"] {
|
||||
--bg: #f2f4f8;
|
||||
--bg-2: #ffffff;
|
||||
--bg-3: #eceff5;
|
||||
--bg-elev: #ffffff;
|
||||
--panel: #ffffff;
|
||||
--panel-head: #f7f9fc;
|
||||
--border: #dbe1ea;
|
||||
--text: #1d2735;
|
||||
--text-dim: #5a6779;
|
||||
--text-faint: #8a95a6;
|
||||
--accent: #1a6fe0;
|
||||
--accent-hover: #0d5cc7;
|
||||
--accent-soft: rgba(26, 111, 224, 0.1);
|
||||
--green: #12855a;
|
||||
--green-soft: rgba(18, 133, 90, 0.1);
|
||||
--red: #c9373d;
|
||||
--red-soft: rgba(201, 55, 61, 0.1);
|
||||
--orange: #a86a12;
|
||||
--orange-soft: rgba(168, 106, 18, 0.12);
|
||||
--purple: #7a41bd;
|
||||
--purple-soft: rgba(122, 65, 189, 0.1);
|
||||
--cyan: #0f7c8c;
|
||||
--shadow: 0 6px 22px rgba(24, 39, 62, 0.12);
|
||||
--sel: rgba(26, 111, 224, 0.2);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* ------------------------------ BASE ------------------------------ */
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::selection { background: var(--sel); }
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 10px 16px;
|
||||
border-radius: 0 0 var(--radius) 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.skip-link:focus { left: 0; }
|
||||
|
||||
/* ------------------------------ HEADER ---------------------------- */
|
||||
.app-header {
|
||||
height: var(--header-h);
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 14px;
|
||||
background: var(--bg-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.brand .logo {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid var(--accent-soft);
|
||||
padding: 2px 7px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
}
|
||||
.brand-name { font-size: 15px; }
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.tabs::-webkit-scrollbar { display: none; }
|
||||
|
||||
.tab {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-dim);
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
transition: background var(--dur), color var(--dur);
|
||||
}
|
||||
.tab:hover { background: var(--bg-3); color: var(--text); }
|
||||
.tab[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
border-color: var(--accent-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-dim);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background var(--dur), color var(--dur);
|
||||
}
|
||||
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
|
||||
.icon-btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
|
||||
|
||||
html[data-theme="dark"] .icon-sun { display: none; }
|
||||
html[data-theme="light"] .icon-moon { display: none; }
|
||||
|
||||
/* ------------------------------ MAIN ------------------------------ */
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
.view[hidden] { display: none; }
|
||||
|
||||
/* ------------------------------ TOOLBAR --------------------------- */
|
||||
.toolbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: background var(--dur), border-color var(--dur), transform var(--dur);
|
||||
}
|
||||
.btn:hover { background: var(--bg-elev); border-color: var(--accent); }
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||||
|
||||
.btn-ghost { background: transparent; }
|
||||
.btn-ghost:hover { background: var(--bg-3); }
|
||||
|
||||
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
|
||||
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
|
||||
|
||||
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
|
||||
|
||||
.sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--border);
|
||||
margin: 0 4px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-mono);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.muted { color: var(--text-dim); }
|
||||
|
||||
/* ------------------------------ INPUTS ---------------------------- */
|
||||
.input {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 9px;
|
||||
color: var(--text);
|
||||
min-width: 0;
|
||||
transition: border-color var(--dur);
|
||||
}
|
||||
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.input.mono { font-family: var(--font-mono); }
|
||||
|
||||
select.input { cursor: pointer; }
|
||||
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px 8px;
|
||||
min-width: 240px;
|
||||
flex: 0 1 340px;
|
||||
}
|
||||
.search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px 0;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.search-input:focus { box-shadow: none; }
|
||||
.search-icon { width: 15px; height: 15px; fill: none; stroke: var(--text-faint); stroke-width: 1.8; flex: 0 0 auto; }
|
||||
|
||||
/* ------------------------------ PANELS ---------------------------- */
|
||||
.split-pane {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
--split: 50%;
|
||||
}
|
||||
|
||||
.split-pane > .panel:first-child { flex: 0 0 var(--split); }
|
||||
.split-pane > .panel:last-child { flex: 1 1 0; }
|
||||
|
||||
#req-split { --split: 38%; }
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 7px 11px;
|
||||
background: var(--panel-head);
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: 12.5px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.panel-body.no-pad { padding: 0; overflow: hidden; }
|
||||
.panel-body.scroll { overflow: auto; }
|
||||
|
||||
/* ------------------------------ CODE AREA -------------------------- */
|
||||
.code-area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
padding: 12px 14px;
|
||||
tab-size: 2;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
.code-area::placeholder { color: var(--text-faint); }
|
||||
.code-area:focus { background: color-mix(in srgb, var(--accent) 3%, transparent); }
|
||||
|
||||
.code-pre {
|
||||
margin: 0;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.code-body {
|
||||
height: 170px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ------------------------------ SPLITTER -------------------------- */
|
||||
.splitter {
|
||||
flex: 0 0 6px;
|
||||
cursor: col-resize;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
transition: background var(--dur);
|
||||
}
|
||||
.splitter::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 2px;
|
||||
background: var(--border);
|
||||
transition: background var(--dur);
|
||||
}
|
||||
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after {
|
||||
background: var(--accent);
|
||||
}
|
||||
body.resizing { cursor: col-resize; user-select: none; }
|
||||
body.resizing * { cursor: col-resize !important; }
|
||||
|
||||
/* ------------------------------ ERROR BOX ------------------------- */
|
||||
.error-box {
|
||||
flex: 0 0 auto;
|
||||
max-height: 40%;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
padding: 9px 12px;
|
||||
background: var(--red-soft);
|
||||
border-top: 1px solid var(--red);
|
||||
color: var(--red);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.error-box[hidden] { display: none; }
|
||||
.error-box .err-title { font-weight: 700; font-family: var(--font-ui); display: block; margin-bottom: 3px; }
|
||||
.error-box .err-pos { color: var(--text-dim); }
|
||||
|
||||
/* ------------------------------ SYNTAX HIGHLIGHT ------------------ */
|
||||
.tok-key { color: var(--accent); }
|
||||
.tok-str { color: var(--green); }
|
||||
.tok-num { color: var(--purple); }
|
||||
.tok-bool { color: var(--orange); }
|
||||
.tok-null { color: var(--orange); font-style: italic; }
|
||||
.tok-punc { color: var(--text-faint); }
|
||||
html[data-theme="light"] .tok-bool { color: var(--orange); }
|
||||
|
||||
mark.hl {
|
||||
background: var(--orange-soft);
|
||||
color: var(--orange);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
/* ------------------------------ TREE ------------------------------ */
|
||||
.tree {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tnode-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
padding: 1px 4px 1px 0;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tnode-row:hover { background: var(--bg-3); }
|
||||
.tnode-row.focused { outline: 1px solid var(--accent); outline-offset: -1px; }
|
||||
|
||||
.twisty {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
transition: transform var(--dur);
|
||||
}
|
||||
.twisty.open { transform: rotate(90deg); }
|
||||
.twisty:hover { color: var(--accent); }
|
||||
.twisty.leaf { visibility: hidden; }
|
||||
|
||||
.tkey { color: var(--accent); }
|
||||
.tsep { color: var(--text-faint); }
|
||||
.tval.str { color: var(--green); }
|
||||
.tval.num { color: var(--purple); }
|
||||
.tval.bool { color: var(--orange); }
|
||||
.tval.null { color: var(--orange); font-style: italic; }
|
||||
.tcount {
|
||||
color: var(--text-faint);
|
||||
font-size: 11.5px;
|
||||
background: var(--bg-3);
|
||||
border-radius: 20px;
|
||||
padding: 0 6px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.ttype {
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
.tchildren { margin-left: 15px; border-left: 1px dashed var(--border); padding-left: 7px; }
|
||||
.tchildren[hidden] { display: none; }
|
||||
|
||||
.tact {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
color: var(--text-faint);
|
||||
font-size: 10.5px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
margin-left: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--dur), color var(--dur), border-color var(--dur);
|
||||
}
|
||||
.tnode-row:hover .tact, .tact:focus-visible { opacity: 1; }
|
||||
.tact:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.tact.copied { opacity: 1; color: var(--green); border-color: var(--green); }
|
||||
|
||||
.tree-empty { color: var(--text-faint); font-style: italic; padding: 10px; }
|
||||
|
||||
/* ------------------------------ DIFF ------------------------------ */
|
||||
.results {
|
||||
flex: 0 0 auto;
|
||||
max-height: 45%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.legend { display: flex; gap: 6px; }
|
||||
|
||||
.diff-row {
|
||||
display: grid;
|
||||
grid-template-columns: 86px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 7px 9px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
align-items: start;
|
||||
}
|
||||
.diff-row:last-child { border-bottom: none; }
|
||||
.diff-row:hover { background: var(--bg-3); }
|
||||
|
||||
.diff-badge {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.badge-added { background: var(--green-soft); color: var(--green); }
|
||||
.badge-removed { background: var(--red-soft); color: var(--red); }
|
||||
.badge-changed { background: var(--orange-soft); color: var(--orange); }
|
||||
|
||||
.diff-path {
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.diff-path:hover { text-decoration: underline; }
|
||||
|
||||
.diff-val {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.diff-old { background: var(--red-soft); color: var(--red); }
|
||||
.diff-new { background: var(--green-soft); color: var(--green); }
|
||||
.diff-typechange { color: var(--orange); font-style: italic; }
|
||||
|
||||
.diff-arrow { color: var(--text-faint); margin: 0 4px; }
|
||||
|
||||
/* ------------------------------ REQUEST --------------------------- */
|
||||
.horizontal-request { flex-direction: row; }
|
||||
.req-form { max-width: 760px; }
|
||||
.req-response { flex: 1 1 0; }
|
||||
|
||||
.field { margin-bottom: 12px; }
|
||||
.field > label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
||||
.row > .input { flex: 1 1 auto; }
|
||||
.hint { font-size: 11.5px; color: var(--text-faint); margin: 4px 0 0; }
|
||||
|
||||
.group {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 12px;
|
||||
background: var(--bg-2);
|
||||
}
|
||||
.group > summary {
|
||||
cursor: pointer;
|
||||
padding: 7px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
.group > summary::-webkit-details-marker { display: none; }
|
||||
.group > summary::before { content: "\25B8"; margin-right: 7px; color: var(--accent); display: inline-block; }
|
||||
.group[open] > summary::before { content: "\25BE"; }
|
||||
.group > summary:hover { color: var(--text); }
|
||||
.group > *:not(summary) { margin: 0 10px 10px; }
|
||||
.group > .row:last-child { margin-bottom: 10px; }
|
||||
|
||||
.kv-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
|
||||
.kv-row { display: flex; gap: 5px; align-items: center; }
|
||||
.kv-row .input { flex: 1 1 0; padding: 4px 7px; font-size: 12.5px; }
|
||||
.kv-row .input.k { flex: 1 1 35%; }
|
||||
.kv-row .input.v { flex: 1 1 60%; font-family: var(--font-mono); }
|
||||
.kv-del {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
flex: 0 0 auto;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
.kv-del:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
|
||||
|
||||
.plain-list { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 12.5px; }
|
||||
.plain-list li { margin-bottom: 4px; }
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-3);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* response */
|
||||
.resp-status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 9px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.resp-code {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.resp-code.ok { background: var(--green-soft); color: var(--green); }
|
||||
.resp-code.redirect { background: var(--accent-soft); color: var(--accent); }
|
||||
.resp-code.client { background: var(--orange-soft); color: var(--orange); }
|
||||
.resp-code.server { background: var(--red-soft); color: var(--red); }
|
||||
.resp-code.err { background: var(--red-soft); color: var(--red); }
|
||||
.resp-stat { color: var(--text-dim); font-size: 12.5px; font-family: var(--font-mono); }
|
||||
|
||||
.resp-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||||
.resp-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--text-dim);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.resp-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
||||
|
||||
.resp-headers { font-family: var(--font-mono); font-size: 12.5px; }
|
||||
.resp-headers tr:nth-child(odd) { background: var(--bg-3); }
|
||||
.resp-headers td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
|
||||
.resp-headers td:first-child { color: var(--accent); white-space: nowrap; width: 1%; }
|
||||
|
||||
.cors-box {
|
||||
border: 1px solid var(--orange);
|
||||
background: var(--orange-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.cors-box h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--orange); }
|
||||
.cors-box ul { margin: 6px 0 0; padding-left: 20px; color: var(--text-dim); font-size: 12.5px; }
|
||||
.cors-box li { margin-bottom: 4px; }
|
||||
.cors-box code { background: rgba(0,0,0,0.15); }
|
||||
|
||||
.err-box-generic {
|
||||
border: 1px solid var(--red);
|
||||
background: var(--red-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 11px 13px;
|
||||
color: var(--red);
|
||||
}
|
||||
.err-box-generic strong { display: block; margin-bottom: 4px; }
|
||||
|
||||
/* ------------------------------ HISTORY --------------------------- */
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.seg-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
.seg-btn.is-active { background: var(--accent); color: #fff; font-weight: 600; }
|
||||
|
||||
.hist-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.hist-item {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-2);
|
||||
padding: 9px 11px;
|
||||
}
|
||||
.hist-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.hist-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
font-size: 12.5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.hist-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
|
||||
.hist-preview {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
background: var(--bg);
|
||||
border-radius: 4px;
|
||||
padding: 5px 7px;
|
||||
max-height: 92px;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
.hist-actions { display: flex; gap: 5px; flex-wrap: wrap; }
|
||||
.hist-method {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.hist-method.GET { background: var(--green-soft); color: var(--green); }
|
||||
.hist-method.POST { background: var(--accent-soft); color: var(--accent); }
|
||||
.hist-method.PUT, .hist-method.PATCH { background: var(--orange-soft); color: var(--orange); }
|
||||
.hist-method.DELETE { background: var(--red-soft); color: var(--red); }
|
||||
|
||||
/* ------------------------------ TOASTS ---------------------------- */
|
||||
.toasts {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 120;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: min(380px, calc(100vw - 32px));
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 9px 12px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
animation: toast-in 180ms ease-out;
|
||||
}
|
||||
.toast.success { border-left-color: var(--green); }
|
||||
.toast.error { border-left-color: var(--red); }
|
||||
.toast.warn { border-left-color: var(--orange); }
|
||||
.toast.leaving { animation: toast-out 160ms ease-in forwards; }
|
||||
.toast-msg { flex: 1 1 auto; word-break: break-word; }
|
||||
.toast-msg b { display: block; font-weight: 650; }
|
||||
.toast-msg span { color: var(--text-dim); font-size: 12px; }
|
||||
.toast-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.toast-close:hover { color: var(--text); }
|
||||
|
||||
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }
|
||||
|
||||
/* ------------------------------ MODAL ----------------------------- */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(4, 8, 14, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 150;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-backdrop[hidden] { display: none; }
|
||||
.modal {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
width: min(560px, 100%);
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-body { padding: 14px 16px; overflow: auto; }
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 7px 16px;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
}
|
||||
.shortcuts dt { text-align: right; }
|
||||
.shortcuts dd { margin: 0; color: var(--text-dim); }
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--border);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ------------------------------ DRAG OVERLAY ---------------------- */
|
||||
.drag-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(4, 8, 14, 0.72);
|
||||
z-index: 140;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.drag-overlay[hidden] { display: none; }
|
||||
.drag-card {
|
||||
border: 2px dashed var(--accent);
|
||||
color: var(--accent);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
/* ------------------------------ SCROLLBARS ------------------------ */
|
||||
*::-webkit-scrollbar { width: 11px; height: 11px; }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 6px;
|
||||
border: 3px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
||||
|
||||
/* ------------------------------ RESPONSIVE ------------------------ */
|
||||
@media (max-width: 1000px) {
|
||||
.req-form { flex: 0 0 380px; }
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
body { overflow: auto; }
|
||||
.app-header {
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
.tabs { order: 3; flex-basis: 100%; }
|
||||
.brand-name { display: none; }
|
||||
.split-pane { flex-direction: column; }
|
||||
.split-pane > .panel:first-child,
|
||||
.split-pane > .panel:last-child {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
min-height: 240px;
|
||||
height: 38vh;
|
||||
max-height: none;
|
||||
}
|
||||
.splitter { flex: 0 0 8px; cursor: row-resize; }
|
||||
.splitter::after { inset: 2px 0; }
|
||||
.results { max-height: none; height: 45vh; }
|
||||
.req-form { flex: 0 0 auto; max-width: none; }
|
||||
.horizontal-request { flex-direction: column; }
|
||||
.view { padding: 8px; gap: 8px; }
|
||||
.search-wrap { flex: 1 1 100%; }
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.diff-row { grid-template-columns: 1fr; gap: 4px; }
|
||||
.diff-badge { justify-self: start; }
|
||||
.toolbar { gap: 4px; }
|
||||
.btn { padding: 6px 9px; font-size: 12.5px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
/* =====================================================================
|
||||
JSON DevTools - logicke testy (bez prehliadaca, bez zavislosti)
|
||||
Spustenie: node tests/logic.test.js
|
||||
===================================================================== */
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const vm = require('vm');
|
||||
|
||||
/* ---------------------- minimalny DOM stub ---------------------- */
|
||||
function makeElement(tag) {
|
||||
const el = {
|
||||
tagName: (tag || 'div').toUpperCase(),
|
||||
children: [],
|
||||
attributes: {},
|
||||
dataset: {},
|
||||
style: {
|
||||
_props: {},
|
||||
setProperty(k, v) { this._props[k] = v; },
|
||||
getPropertyValue(k) { return this._props[k] || ''; }
|
||||
},
|
||||
classList: {
|
||||
_set: new Set(),
|
||||
add(...c) { c.forEach((x) => this._set.add(x)); },
|
||||
remove(...c) { c.forEach((x) => this._set.delete(x)); },
|
||||
contains(c) { return this._set.has(c); },
|
||||
toggle(c, f) { if (f === undefined) { this._set.has(c) ? this._set.delete(c) : this._set.add(c); } else if (f) { this._set.add(c); } else { this._set.delete(c); } }
|
||||
},
|
||||
value: '',
|
||||
textContent: '',
|
||||
innerHTML: '',
|
||||
hidden: false,
|
||||
title: '',
|
||||
type: '',
|
||||
tabIndex: 0,
|
||||
files: [],
|
||||
checked: false,
|
||||
addEventListener() {}, removeEventListener() {},
|
||||
setAttribute(k, v) { this.attributes[k] = v; },
|
||||
getAttribute(k) { return this.attributes[k]; },
|
||||
removeAttribute(k) { delete this.attributes[k]; },
|
||||
appendChild(c) { this.children.push(c); return c; },
|
||||
removeChild(c) { const i = this.children.indexOf(c); if (i >= 0) this.children.splice(i, 1); return c; },
|
||||
insertBefore(c) { this.children.unshift(c); return c; },
|
||||
querySelector() { return makeElement('div'); },
|
||||
querySelectorAll() { return []; },
|
||||
closest() { return null; },
|
||||
focus() {}, blur() {}, click() {},
|
||||
getBoundingClientRect() { return { left: 0, top: 0, width: 800, height: 600, right: 800, bottom: 600 }; },
|
||||
dispatchEvent() { return true; }
|
||||
};
|
||||
return el;
|
||||
}
|
||||
|
||||
function createSandbox() {
|
||||
const store = Object.create(null);
|
||||
const localStorage = {
|
||||
getItem(k) { return Object.prototype.hasOwnProperty.call(store, k) ? store[k] : null; },
|
||||
setItem(k, v) { store[k] = String(v); },
|
||||
removeItem(k) { delete store[k]; },
|
||||
clear() { for (const k in store) delete store[k]; }
|
||||
};
|
||||
|
||||
const documentStub = {
|
||||
readyState: 'complete',
|
||||
documentElement: makeElement('html'),
|
||||
body: makeElement('body'),
|
||||
createElement: (t) => makeElement(t),
|
||||
querySelector: () => makeElement('div'),
|
||||
querySelectorAll: () => [],
|
||||
addEventListener() {},
|
||||
removeEventListener() {},
|
||||
execCommand() { return true; },
|
||||
createTextNode: (t) => ({ text: t })
|
||||
};
|
||||
|
||||
const windowStub = {
|
||||
document: documentStub,
|
||||
localStorage,
|
||||
matchMedia: () => ({ matches: false, addEventListener() {} }),
|
||||
addEventListener() {},
|
||||
removeEventListener() {},
|
||||
isSecureContext: false,
|
||||
location: { hash: '', search: '', href: 'file:///index.html' },
|
||||
history: { replaceState() {} },
|
||||
getComputedStyle: () => ({ getPropertyValue: () => '' }),
|
||||
navigator: { clipboard: null },
|
||||
performance: { now: () => Date.now() },
|
||||
setTimeout, clearTimeout, setInterval, clearInterval,
|
||||
Blob: globalThis.Blob,
|
||||
URL: { createObjectURL: () => 'blob:stub', revokeObjectURL() {} },
|
||||
console
|
||||
};
|
||||
windowStub.window = windowStub;
|
||||
windowStub.globalThis = windowStub;
|
||||
|
||||
const sandbox = {
|
||||
window: windowStub,
|
||||
document: documentStub,
|
||||
localStorage,
|
||||
navigator: windowStub.navigator,
|
||||
location: windowStub.location,
|
||||
history: windowStub.history,
|
||||
performance: windowStub.performance,
|
||||
matchMedia: windowStub.matchMedia,
|
||||
console,
|
||||
setTimeout, clearTimeout, setInterval, clearInterval,
|
||||
Blob: globalThis.Blob,
|
||||
URL: windowStub.URL,
|
||||
Math, JSON, Date, Array, Object, String, Number, Boolean, Error, TypeError,
|
||||
RegExp, Promise, Map, Set, isNaN, parseInt, parseFloat, encodeURIComponent,
|
||||
decodeURIComponent, btoa: (s) => Buffer.from(s, 'binary').toString('base64'),
|
||||
atob: (s) => Buffer.from(s, 'base64').toString('binary')
|
||||
};
|
||||
sandbox.globalThis = sandbox;
|
||||
return sandbox;
|
||||
}
|
||||
|
||||
/* ---------------------- nacitanie aplikacie ---------------------- */
|
||||
const appPath = path.join(__dirname, '..', 'src', 'app.js');
|
||||
const source = fs.readFileSync(appPath, 'utf8');
|
||||
const sandbox = createSandbox();
|
||||
|
||||
vm.createContext(sandbox);
|
||||
vm.runInContext(source, sandbox, { filename: 'app.js' });
|
||||
|
||||
const D = sandbox.window.JSONDevTools;
|
||||
if (!D) {
|
||||
console.error('FAIL: aplikacia sa nenačítala (window.JSONDevTools chýba)');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
/* ---------------------- testovacie makra ---------------------- */
|
||||
let passed = 0, failed = 0;
|
||||
const failures = [];
|
||||
|
||||
function ok(name, cond, extra) {
|
||||
if (cond) { passed++; }
|
||||
else { failed++; failures.push(name + (extra !== undefined ? ' >> ' + extra : '')); }
|
||||
}
|
||||
function eq(name, a, b) { ok(name, a === b, 'got ' + JSON.stringify(a) + ' expected ' + JSON.stringify(b)); }
|
||||
function deepEq(name, a, b) { ok(name, JSON.stringify(a) === JSON.stringify(b), 'got ' + JSON.stringify(a) + ' expected ' + JSON.stringify(b)); }
|
||||
function section(t) { console.log('\n--- ' + t + ' ---'); }
|
||||
|
||||
/* ======================= TESTY ======================= */
|
||||
|
||||
section('Utils');
|
||||
eq('typeOf null', D.Utils.typeOf(null), 'null');
|
||||
eq('typeOf array', D.Utils.typeOf([]), 'array');
|
||||
eq('typeOf object', D.Utils.typeOf({}), 'object');
|
||||
eq('typeOf number', D.Utils.typeOf(1), 'number');
|
||||
eq('typeOf string', D.Utils.typeOf('a'), 'string');
|
||||
eq('typeOf undefined', D.Utils.typeOf(undefined), 'undefined');
|
||||
eq('isPlainObject', D.Utils.isPlainObject({}), true);
|
||||
eq('isPlainObject array', D.Utils.isPlainObject([]), false);
|
||||
eq('pathSegment simple', D.Utils.pathSegment('abc'), '.abc');
|
||||
eq('pathSegment underscore', D.Utils.pathSegment('_a1'), '._a1');
|
||||
eq('pathSegment digits start', D.Utils.pathSegment('1a'), "['1a']");
|
||||
eq('pathSegment space', D.Utils.pathSegment('a b'), "['a b']");
|
||||
eq('pathSegment quote', D.Utils.pathSegment("it's"), "['it\\'s']");
|
||||
eq('formatBytes B', D.Utils.formatBytes(12), '12 B');
|
||||
eq('formatBytes KB', D.Utils.formatBytes(2048), '2.0 KB');
|
||||
eq('formatBytes MB', D.Utils.formatBytes(3 * 1024 * 1024), '3.00 MB');
|
||||
eq('formatDuration ms', D.Utils.formatDuration(12.4), '12 ms');
|
||||
eq('formatDuration sub-ms', D.Utils.formatDuration(0.5), '0.50 ms');
|
||||
eq('escapeHtml', D.Utils.escapeHtml('<b>&"\''), '<b>&"'');
|
||||
ok('uid uniq', D.Utils.uid() !== D.Utils.uid());
|
||||
ok('formatTime format', /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(D.Utils.formatTime(Date.now())));
|
||||
|
||||
section('localStorage helper');
|
||||
sandbox.localStorage.setItem('t.probe', '"v"');
|
||||
eq('store.get', D.Utils.store.get('t.probe', null), 'v');
|
||||
eq('store.get fallback', D.Utils.store.get('t.missing', 'fb'), 'fb');
|
||||
D.Utils.store.set('t.probe2', { a: 1 });
|
||||
deepEq('store.set/get object', D.Utils.store.get('t.probe2', null), { a: 1 });
|
||||
D.Utils.store.remove('t.probe2');
|
||||
eq('store.remove', D.Utils.store.get('t.probe2', null), null);
|
||||
|
||||
section('Highlighter');
|
||||
const hl = D.Highlighter.highlight('{"a": 1, "b": "x", "c": true, "d": false, "e": null, "f": -1.5e3}');
|
||||
ok('key token', hl.includes('tok-key'));
|
||||
ok('string token', hl.includes('tok-str'));
|
||||
ok('number token', hl.includes('tok-num'));
|
||||
ok('bool token', hl.includes('tok-bool'));
|
||||
ok('null token', hl.includes('tok-null'));
|
||||
ok('punc token', hl.includes('tok-punc'));
|
||||
ok('html escaped', D.Highlighter.highlight('<script>x</script>').includes('<script>'));
|
||||
ok('no raw script tag', !D.Highlighter.highlight('</script>').includes('</script>'));
|
||||
ok('highlightMatch wraps', D.Highlighter.highlightMatch('abcdef', 'cd').includes('<mark class="hl">cd</mark>'));
|
||||
ok('highlightMatch case-insensitive', D.Highlighter.highlightMatch('ABCDEF', 'cd').includes('<mark class="hl">CD</mark>'));
|
||||
ok('highlightMatch no match', !D.Highlighter.highlightMatch('abc', 'zz').includes('mark'));
|
||||
|
||||
section('Diff algoritmus');
|
||||
{
|
||||
const out = [];
|
||||
D.Diff.walk({ a: 1 }, { a: 1 }, '$', out);
|
||||
eq('zhodne -> ziadny rozdiel', out.length, 0);
|
||||
|
||||
const out2 = [];
|
||||
D.Diff.walk({ a: 1 }, { a: 2 }, '$', out2);
|
||||
eq('zmenena hodnota', out2.length, 1);
|
||||
eq('typ zmeny', out2[0].type, 'changed');
|
||||
eq('cesta zmeny', out2[0].path, '$.a');
|
||||
eq('stara hodnota', out2[0].old, 1);
|
||||
eq('nova hodnota', out2[0].new, 2);
|
||||
|
||||
const out3 = [];
|
||||
D.Diff.walk({ a: 1 }, { a: 1, b: 2 }, '$', out3);
|
||||
eq('pridany kluc', out3.length, 1);
|
||||
eq('typ pridany', out3[0].type, 'added');
|
||||
eq('cesta pridaneho', out3[0].path, '$.b');
|
||||
|
||||
const out4 = [];
|
||||
D.Diff.walk({ a: 1, b: 2 }, { a: 1 }, '$', out4);
|
||||
eq('odstraneny kluc', out4[0].type, 'removed');
|
||||
eq('cesta odstraneneho', out4[0].path, '$.b');
|
||||
|
||||
const out5 = [];
|
||||
D.Diff.walk({ a: [1, 2, 3] }, { a: [1, 2] }, '$', out5);
|
||||
eq('kratke pole -> odstranene', out5.length, 1);
|
||||
eq('cesta prvku pola', out5[0].path, '$.a[2]');
|
||||
|
||||
const out6 = [];
|
||||
D.Diff.walk({ a: [1] }, { a: [1, 9] }, '$', out6);
|
||||
eq('dlhsie pole -> pridane', out6[0].type, 'added');
|
||||
eq('cesta pridaneho prvku', out6[0].path, '$.a[1]');
|
||||
|
||||
const out7 = [];
|
||||
D.Diff.walk({ a: 1 }, { a: '1' }, '$', out7);
|
||||
eq('zmena typu', out7[0].type, 'changed');
|
||||
eq('stary typ', out7[0].oldType, 'number');
|
||||
eq('novy typ', out7[0].newType, 'string');
|
||||
|
||||
const out8 = [];
|
||||
D.Diff.walk({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } }, '$', out8);
|
||||
eq('vnorene porovnanie', out8[0].path, '$.a.b.c');
|
||||
|
||||
const out9 = [];
|
||||
D.Diff.walk({ 'weird key': 1 }, { 'weird key': 2 }, '$', out9);
|
||||
eq('kluc so specialnymi znakmi', out9[0].path, "$['weird key']");
|
||||
|
||||
const out10 = [];
|
||||
D.Diff.walk([1, 2], [1, 2, 3], '$', out10);
|
||||
eq('pole na urovni korena', out10[0].path, '$[2]');
|
||||
}
|
||||
|
||||
section('Historia – sanitizácia');
|
||||
{
|
||||
const saved = [];
|
||||
const realSet = sandbox.localStorage.setItem.bind(sandbox.localStorage);
|
||||
sandbox.localStorage.setItem = (k, v) => { saved.push([k, v]); return realSet(k, v); };
|
||||
|
||||
D.History.saveRequest({
|
||||
method: 'POST',
|
||||
url: 'https://api.example.com/v1/users',
|
||||
status: 201,
|
||||
statusText: 'Created',
|
||||
duration: 42,
|
||||
requestHeaders: { 'Content-Type': 'application/json', 'Authorization': 'Bearer SECRET123', 'Cookie': 'a=b', 'X-Api-Key': 'K' },
|
||||
requestBody: '{"a":1}',
|
||||
responsePreview: '{"ok":true}',
|
||||
isJson: true
|
||||
});
|
||||
|
||||
const raw = saved.filter(([k]) => k.indexOf('requests') !== -1).map(([, v]) => v).join('');
|
||||
ok('Authorization odstranena', raw.toLowerCase().indexOf('authorization') === -1, raw.slice(0, 200));
|
||||
ok('secret token nie je ulozeny', raw.indexOf('SECRET123') === -1);
|
||||
ok('cookie odstranena', raw.toLowerCase().indexOf('cookie') === -1);
|
||||
ok('x-api-key odstraneny', raw.toLowerCase().indexOf('x-api-key') === -1);
|
||||
ok('content-type zachovany', raw.indexOf('Content-Type') !== -1);
|
||||
ok('url zaznamany', raw.indexOf('api.example.com') !== -1);
|
||||
ok('status zaznamany', raw.indexOf('201') !== -1);
|
||||
|
||||
sandbox.localStorage.setItem = realSet;
|
||||
}
|
||||
|
||||
section('Historia – dokumenty');
|
||||
{
|
||||
sandbox.localStorage.removeItem('jsondevtools.history.docs');
|
||||
D.History.saveDocument('{"x":1}');
|
||||
D.History.saveDocument('{"x":1}');
|
||||
D.History.saveDocument('{"y":2}');
|
||||
const docs = JSON.parse(sandbox.localStorage.getItem('jsondevtools.history.docs'));
|
||||
eq('duplicitne sa nededuplikuju', docs.length, 2);
|
||||
eq('najnovsi je prvy', docs[0].text, '{"y":2}');
|
||||
|
||||
for (let i = 0; i < 30; i++) D.History.saveDocument('{"i":' + i + '}');
|
||||
const many = JSON.parse(sandbox.localStorage.getItem('jsondevtools.history.docs'));
|
||||
ok('historia obmedzena na 20', many.length <= 20, 'n=' + many.length);
|
||||
sandbox.localStorage.removeItem('jsondevtools.history.docs');
|
||||
}
|
||||
|
||||
section('Theme');
|
||||
{
|
||||
const before = D.Theme.current;
|
||||
D.Theme.toggle();
|
||||
ok('tema sa prepne', D.Theme.current !== before);
|
||||
eq('tema persistovana', JSON.parse(sandbox.localStorage.getItem('jsondevtools.theme')), D.Theme.current);
|
||||
D.Theme.toggle();
|
||||
eq('tema spat vratena', D.Theme.current, before);
|
||||
}
|
||||
|
||||
section('App – navigacia');
|
||||
{
|
||||
eq('readHash default', D.App.readHash(), 'formatter');
|
||||
D.App.go('diff');
|
||||
eq('go nastavi current', D.App.current, 'diff');
|
||||
D.App.go('neexistujuci');
|
||||
eq('neplatny view -> formatter', D.App.current, 'formatter');
|
||||
D.App.go('tree');
|
||||
eq('go tree', D.App.current, 'tree');
|
||||
}
|
||||
|
||||
section('Parser chyb');
|
||||
{
|
||||
// parseJSON je vnútorná funkcia – overujeme cez verejné API (Formatter.validate)
|
||||
const D2 = D;
|
||||
const before = D2.Formatter.input.value;
|
||||
D2.Formatter.input.value = '{"a":1,,}';
|
||||
const res = D2.Formatter.validate();
|
||||
eq('neplatny JSON -> chyba', res.ok, false);
|
||||
ok('chyba obsahuje poziciu', /position|position|Unexpected/i.test(res.error), res.error);
|
||||
D2.Formatter.input.value = before;
|
||||
D2.Formatter.validate();
|
||||
}
|
||||
|
||||
section('API – URL a hlavicky (bez siete)');
|
||||
{
|
||||
const el = (id, val) => { const e = makeElement('input'); e.value = val; return e; };
|
||||
const api = D.Api;
|
||||
|
||||
// buildUrl cez parametre
|
||||
api.params = [{ key: 'q', value: 'a b' }, { key: 'page', value: '2' }, { key: '', value: 'x' }];
|
||||
const savedUrl = api.buildUrl ? null : null;
|
||||
// buildUrl cita #req-url, ktory v stub-e nie je nastaveny -> vratime prazdny string
|
||||
ok('buildUrl existuje', typeof api.buildUrl === 'function');
|
||||
|
||||
api.headers = [{ key: 'Accept', value: 'application/json' }];
|
||||
api.params = [];
|
||||
ok('buildHeaders existuje', typeof api.buildHeaders === 'function');
|
||||
}
|
||||
|
||||
section('Cesta uzla – parent path');
|
||||
{
|
||||
eq('parent $', D.parentPathOf('$.a'), '$');
|
||||
eq('parent hnedom', D.parentPathOf('$.a.b'), '$.a');
|
||||
eq('parent prvku pola', D.parentPathOf('$.a[0]'), '$.a');
|
||||
eq('parent prvku pola 2', D.parentPathOf('$.a.b[12]'), '$.a.b');
|
||||
eq('parent kluc so specialmi znakmi', D.parentPathOf("$['a b'].c"), "$['a b']");
|
||||
eq('parent root je null', D.parentPathOf('$'), null);
|
||||
}
|
||||
|
||||
section('Kontrola konzistencie DOM id');
|
||||
{
|
||||
const html = fs.readFileSync(path.join(__dirname, '..', 'src', 'index.html'), 'utf8');
|
||||
const ids = Array.from(html.matchAll(/\bid="([^"]+)"/g)).map((m) => m[1]);
|
||||
const dupes = ids.filter((v, i) => ids.indexOf(v) !== i);
|
||||
eq('ziadne duplicitne id v HTML', dupes.length, 0);
|
||||
|
||||
const js = fs.readFileSync(path.join(__dirname, '..', 'src', 'app.js'), 'utf8');
|
||||
const used = Array.from(new Set(Array.from(js.matchAll(/\$\('#([a-zA-Z0-9_-]+)'\)/g)).map((m) => m[1])));
|
||||
const missing = used.filter((u) => ids.indexOf(u) === -1);
|
||||
eq('vsetky pouzite id existuju v HTML', missing.length, 0);
|
||||
if (missing.length) console.log(' chybne id: ' + missing.join(', '));
|
||||
|
||||
// duplicitne aria-controls
|
||||
const dupAria = (html.match(/aria-controls="view-formatter"/g) || []).length;
|
||||
eq('aria-controls bez duplicitov', dupAria, 1);
|
||||
|
||||
// kazde tlacidlo s id musi mat handlov v app.js
|
||||
// (tab-y sa obsluhuju delegovane cez triedu '.tab')
|
||||
const btnIds = Array.from(html.matchAll(/<button[^>]*\bid="([^"]+)"/g)).map((m) => m[1]);
|
||||
const btnMissing = btnIds.filter((b) => {
|
||||
if (b.indexOf('tab-') === 0) return js.indexOf("'.tab'") === -1;
|
||||
return js.indexOf("'#" + b + "'") === -1 && js.indexOf('"#' + b + '"') === -1;
|
||||
});
|
||||
eq('vsetky tlacidla s id su napojene v app.js', btnMissing.length, 0);
|
||||
if (btnMissing.length) console.log(' chybne handlery pre: ' + btnMissing.join(', '));
|
||||
|
||||
// kazdy view ma tab aj panel
|
||||
['formatter', 'tree', 'diff', 'request', 'history'].forEach((v) => {
|
||||
ok('view ' + v + ' ma tab aj panel',
|
||||
html.indexOf('id="tab-' + v + '"') !== -1 && html.indexOf('id="view-' + v + '"') !== -1);
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------- vysledok ---------------------- */
|
||||
console.log('\n========================================');
|
||||
console.log('Vysledok: ' + passed + ' ok, ' + failed + ' neuspechov');
|
||||
if (failures.length) {
|
||||
console.log('\nNeuspechy:');
|
||||
failures.forEach((f) => console.log(' FAIL ' + f));
|
||||
}
|
||||
console.log('========================================');
|
||||
process.exit(failed ? 1 : 0);
|
||||
Reference in New Issue
Block a user