# ZUNI – klikací prototyp mobilní aplikace Statický HTML/CSS/JS prototyp aplikace ZUNI (fotodokumentace, skenování, video a formuláře v nemocnicích, ukládání do PACS/DMS). Slouží k návrhu nových obrazovek nad přesným obrazem toho, co aplikace **dnes** umí. - **„Aplikace dnes“** = všechny obrazovky, dialogy a stavy překreslené 1:1 ze zdrojáků `bindworks/bw-zuni-app-monorepo` (commit `951c65e2`, stav na disku 12. 10. 2026). Texty jsou z českých ARB souborů, barvy a rozměry z `default_theme.dart`. - Nové návrhy se přidávají jako další oblasti/varianty vedle „Aplikace dnes“ (viz níže), nikdy se nepřepisuje stávající stav. ## Spuštění Otevřít přes lokální web server (ne `file://`, kvůli fontům a obrázkům): ``` python3 -m http.server 8000 --bind 127.0.0.1 ``` a v prohlížeči `http://127.0.0.1:8000/`. Žádný build, žádné závislosti za běhu (fonty Inter a Material Icons jsou v `assets/fonts`). ## Ovládání - Vlevo seznam **variant** (obrazovka + stav) po oblastech, nahoře **zařízení** (telefon 402×874, 360×800, tablet 800×1280 **jako v aplikaci** = roztažené telefonní rozložení, protože aplikace je zamčená na výšku a tablet neřeší; a tablet **NÁVRH rozložení** = dvoupanelové návrhy, které v aplikaci nejsou), **velikost textu** (100 / 120 % = max. v aplikaci / 130 %), **Restart** varianty, **Kopírovat odkaz**. - Odkaz na konkrétní variantu: `index.html?v=&d=phone402|phone360|tablet&t=1.2` – vhodné do Trella / zadání. - V telefonu funguje navigace (zpět, dialogy, sheety, snackbary). Obnovení stránky vrátí ukázková data. - Žluté rámečky „Pozn. prototypu“ označují místa, kde se prototyp liší od aplikace nebo kde UI není v repozitáři (balíčky `bw_auth`, `bw_image_commons`, `zscanner_api`). ## Konfigurace ze serveru (profily nemocnic) Záložka **Konfigurace** v levém panelu: výběr **profilu instalace** (Výchozí, CSLR základ, Opava, FTN, FN Brno, ZUNI Cloud, Jen dokumenty, Showcase) a 47 přepínačů ve skupinách Manifest / Server (sync) / Moduly a flows / Formulář rány / AI / Capability. Změna se hned projeví v telefonu a v URL (`&p=ftn&c=server.scannerEnabled:false`). Žlutě jsou ruční změny proti profilu, ↺ je zruší. U každé volby je odkaz na dotčené obrazovky a v nápovědě zdroj v kódu. Katalog všech voleb: `dokumentace/zjisteni/06-konfigurace-ze-serveru.md`; skutečné instalace: `07-konfigurace-instalaci.md`. ## Režim pro klienty Pro ukázku nemocnici bez interních informací (jiné nemocnice, zjištění z kódu, odkazy na repozitáře). - **Spuštění:** `index.html?klient=1` (nebo `window.ZUNI_CLIENT = true` před `js/proto.js`). Skryje záložku Konfigurace, žluté poznámky (nejdou zapnout), poznámky variant, přepínač Poznámky a odkaz README; v záhlaví „ZUNI – ukázka aplikace“. Seznam variant, zařízení, text a restart zůstávají. - **Profily:** jen v URL `&p=` a jen neutrální (`client: true` v `js/config-defs.js`): `rany` (Rány – základ CSLR), `rany-material` (Rány + materiál + převaz), `rany-ai` (Rány s AI měřením), `dokumenty-sken` (Skenování dokumentů), `vse` (Vše zapnuto – demo). Interní profily nemocnic (`internal: true`) se v tomto režimu ignorují. - **Export k odeslání:** `node tools/export-klient.mjs` → `dist-klient/` (v `.gitignore`; zabalit a poslat, nebo nahrát na web). Obsahuje `index.html`, `css`, `js` (jen soubory, které načítá `index.html`) a `assets`; bez `dokumentace/`, `tools/`, `README`, `data/`. - **Co export odstraní:** interní profily (blok `// @internal-start` … `// @internal-end` v `config-defs.js`), komentáře v JS a CSS, obsah všech `Z.note(…)`, poznámky variant (`note` i `note` v parametrech), zdroje a poznámky voleb konfigurace, jména nemocnic v názvech variant a v identifikátorech (`cslr-ftn` → `cslr-ext`), „(zjištění z kódu)“, font `ZLogos.ttf`. Skript pak ověří `node --check` všech JS, načte export s `ZUNI_CLIENT` (jen neutrální profily, žádné poznámky) a **selže**, pokud výsledek obsahuje Opava, Thomayer, FTN, Brno, Olomouc, Bulovka, Jihlava, Showcase, bw-zuni, zscanner_api, github, Raynet nebo „Pozn. prototypu“. - Nový interní profil patří mezi značky `@internal-…`; poznámky jen přes `Z.note(…)` nebo `note` varianty (jinak je export neodstraní a kontrola selže). ## Struktura | Cesta | Obsah | |---|---| | `index.html` | Stránka s panelem náhledu a rámcem zařízení | | `css/zuni.css` | Design tokeny a komponenty podle tématu aplikace | | `js/proto.js` | Jádro prototypu (obrazovky, varianty, navigace, overlaye) | | `js/data.js` | Ukázková data (smyšlená) | | `js/config.js`, `js/config-defs.js` | Engine konfigurace (`Z.cfg`) a definice voleb + profily instalací | | `js/screens/*.js` | Obrazovky a varianty po oblastech: `obal` (start, přihlášení), `jadro` (dashboard, pacient), `formulare` (metadata widgety), `foto-spolecne` (focení, galerie, odeslání), `rany` (rány, AI), `moduly` (foto, dokument, video, formuláře) | | `dokumentace/konvence.md` | Jak psát obrazovky a varianty (API jádra, ID obrazovek, pravidla) | | `dokumentace/zjisteni/` | Popis obrazovek ze zdrojáků po oblastech + „Zjištění z kódu“ (nesrovnalosti, TODO, mrtvý kód) | | `tools/check.mjs` | Playwright průchod všech variant (JS chyby, chybějící soubory, vodorovné přetečení) | | `tools/shot.mjs` | Screenshot varianty | | `tools/click.mjs` | Proklikání všech ovládacích prvků ve všech variantách (chyby, nenakreslené cíle, prvky bez odezvy) | | `tools/cfgtest.mjs` | Každá volba konfigurace × všechny hodnoty × dotčené obrazovky + profily v panelu | | `tools/export-klient.mjs` | Export pro klienty do `dist-klient/` (viz Režim pro klienty) | ## Jak přidat nový návrh obrazovky 1. Založ `js/screens/.js` (IIFE) a zapoj ho do `index.html` před `js/variants.js`. 2. `Z.area('', 'N · Název návrhu', pořadí)`, obrazovky `Z.screen(...)`, stavy `Z.variant(...)` – viz `dokumentace/konvence.md` a vzor `js/screens/obal.js`. 3. Vycházej z existujících obrazovek „Aplikace dnes“ (kopíruj, neupravuj je), ukázková data přidávej do `js/data.js`. 4. Ověř: `node --check js/screens/.js` a `node tools/check.mjs` (viz níže). Odkaz na variantu dej do zadání (Trello / Raynet). ## Kontrola (Playwright) ``` npm i playwright # jednou; Chromium: npx playwright install chromium node tools/check.mjs # všechny varianty, telefon + tablet node tools/shot.mjs [phone402|phone360|tablet] [out.png] ``` Proměnná `CHROMIUM_PATH` umožní použít vlastní Chromium. ## Verze Verze prototypu je v `js/data.js` (`ZUNI_PROTO_VERSION`) a v `CHANGELOG.md`.