JiriUhlirandClaude Opus 5
a6722f9379
body je jeden retezec, ale co v nem stoji, urcuje ten, kdo ho naplnil. Krok
"Zalozit nebo doplnit ticket" dosadi {{data}} a sablona objekt prevede na JSON,
takze v obsahu skoncila slozena zavorka vypsana jako odstavec. Necitelne, i kdyz
jsou v ni presne ty udaje, kvuli kterym ticket vznikl.
Nova web/src/components/dashboard/TicketBody.tsx telo prectе:
- veta od cloveka -> text tak, jak prisel
- cely retezec je JSON -> tabulka klic a hodnota
- seznam objektu -> tabulka se sloupci podle klicu
- text a za nim JSON -> odstavec a pod nim tabulka
- cokoliv, co se neprecte -> text tak, jak prisel
Ctvrta radka je bezny pripad, sablona {{voicebotId}}, {{data}} da presne tohle.
Deli se az od prvni zavorky, od ktere je zbytek platny JSON - bez te druhe
podminky by veta s jednou slozenou zavorkou skoncila rozpulena.
Zanoreni se kresli o uroven niz jako vnorena tabulka, hloubeji uz jako JSON:
tabulka v tabulce v tabulce se necte a odesilatele umi zanorit data hluboko.
Nic se nezahazuje, neprecteny obsah se ukaze jako puvodni text.
Overeno na osmi tvarech tela vcetne toho, ktery na instanci opravdu vznika,
vety se slozenou zavorkou a nedopsaneho JSONu.
Vedle toho zdroje vizualniho navrhu detailu ticketu v design/. Sestavene platno
je v gitignore, je to 2,5 MB generovaneho souboru, ktery vznikne znovu ze
zdroju vedle nej.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
125 lines
8.5 KiB
HTML
125 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
|
|
<style>
|
|
body { margin: 0; background: #0f1411; font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; }
|
|
a { color: #cdff7a; text-decoration: none; }
|
|
a:hover { color: #b7ff3c; }
|
|
.h { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.035em; line-height: 1.04; }
|
|
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="width: 900px; min-height: 1080px; box-sizing: border-box; background: #0f1411; padding: 40px 60px 56px; color: #ffffff; display: flex; flex-direction: column; gap: 20px;">
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.4);">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
<span>Moje požadavky</span>
|
|
</div>
|
|
|
|
<!-- SLOZKA: jazyk nahore, pod nim jedna karta -->
|
|
<div style="display: flex; flex-direction: column;">
|
|
|
|
<!-- jazyk slozky -->
|
|
<div style="display: flex; align-items: flex-end; gap: 6px; padding-left: 24px;">
|
|
<div style="display: inline-flex; align-items: center; gap: 10px; border-radius: 12px 12px 0 0; border: 1px solid rgba(46,58,50,0.7); border-bottom: none; background: rgba(26,33,28,0.9); padding: 9px 18px 10px;">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#cdff7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
|
<span class="mono" style="font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.75);">TK-4823</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- telo slozky -->
|
|
<div style="border-radius: 0 16px 16px 16px; border: 1px solid rgba(46,58,50,0.7); background: rgba(26,33,28,0.7); padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 28px;">
|
|
|
|
<!-- co to je a jak to je, jednou vetou -->
|
|
<div style="display: flex; flex-direction: column; gap: 14px;">
|
|
<h1 class="h" style="margin: 0; font-size: 27px; font-weight: 800; color: #ffffff; text-wrap: pretty;">Prádelna v Brně neodpovídá na platbu kartou</h1>
|
|
<p style="margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.7);">
|
|
Máme to u sebe od 1. září. Pracuje na tom <span style="color: #ffffff; font-weight: 600;">Petr Vomáčka</span>
|
|
a naposledy se vám ozval včera odpoledne.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- stitek na slozce: jen to, co je opravdu v datech -->
|
|
<div style="display: flex; flex-wrap: wrap; gap: 0; border-radius: 12px; border: 1px solid rgba(46,58,50,0.7); background: rgba(15,20,17,0.55); overflow: hidden;">
|
|
<div style="flex-grow: 1; min-width: 150px; padding: 14px 18px; border-right: 1px solid rgba(46,58,50,0.5); display: flex; flex-direction: column; gap: 4px;">
|
|
<span style="font-size: 12px; color: rgba(255,255,255,0.35);">Přijali jsme</span>
|
|
<span style="font-size: 14px; color: rgba(255,255,255,0.85);">1. 9. ve 14:27</span>
|
|
</div>
|
|
<div style="flex-grow: 1; min-width: 150px; padding: 14px 18px; border-right: 1px solid rgba(46,58,50,0.5); display: flex; flex-direction: column; gap: 4px;">
|
|
<span style="font-size: 12px; color: rgba(255,255,255,0.35);">Ozvali jsme se</span>
|
|
<span style="font-size: 14px; color: #2dd4bf;">za 36 minut</span>
|
|
</div>
|
|
<div style="flex-grow: 1; min-width: 150px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;">
|
|
<span style="font-size: 12px; color: rgba(255,255,255,0.35);">Hotovo</span>
|
|
<span style="font-size: 14px; color: rgba(255,255,255,0.5);">zatím ne</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- prvni list ve slozce: co poslal zakaznik -->
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<span style="font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.45);">Co jste nám poslali</span>
|
|
<div style="border-radius: 12px; border: 1px solid rgba(46,58,50,0.6); background: rgba(15,20,17,0.55); padding: 20px 22px;">
|
|
<p style="margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.85); text-wrap: pretty;">
|
|
Volal jsem kvůli prádelně v Brně na Veveří. Platba kartou neprošla, terminál napsal chybu a peníze
|
|
mi odešly z účtu. Potřebuju vědět, jestli se vrátí, nebo mám reklamovat u banky.
|
|
</p>
|
|
<span class="mono" style="display: block; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,0.3);">1. 9. 2026, 14:27 · telefon</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- dalsi listy: co pribylo, jako papiry ve slozce -->
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<span style="font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.45);">Co k tomu přibylo</span>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<div style="border-radius: 12px; border: 1px solid rgba(46,58,50,0.6); border-left: 3px solid rgba(183,255,60,0.5); background: rgba(15,20,17,0.55); padding: 18px 22px;">
|
|
<div style="display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px;">
|
|
<span style="font-size: 14px; font-weight: 600; color: #ffffff;">Petr Vomáčka</span>
|
|
<span class="mono" style="font-size: 12px; color: rgba(255,255,255,0.3);">1. 9., 15:03</span>
|
|
</div>
|
|
<p style="margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.75);">
|
|
Dobrý den, ověřujeme transakci u provozovatele terminálu. Ozveme se nejpozději do dvou pracovních dnů.
|
|
</p>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 2px;">
|
|
<span style="width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.25);"></span>
|
|
<span style="font-size: 13.5px; color: rgba(255,255,255,0.45);">Požadavek si převzal Petr Vomáčka</span>
|
|
<span class="mono" style="font-size: 12px; color: rgba(255,255,255,0.28);">dnes, 8:12</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- co muze zakaznik udelat: jedna vec -->
|
|
<div style="display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(46,58,50,0.5); padding-top: 24px;">
|
|
<span style="font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.45);">Chcete něco doplnit?</span>
|
|
<div style="border-radius: 12px; border: 1px solid rgba(46,58,50,0.7); background: rgba(15,20,17,0.7); padding: 14px 16px; min-height: 76px;">
|
|
<span style="font-size: 14.5px; color: rgba(255,255,255,0.25);">Napište nám. Přečte to člověk, který požadavek řeší.</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; justify-content: space-between; gap: 16px;">
|
|
<span style="font-size: 13px; color: rgba(255,255,255,0.35);">Odpovídáme v pracovní dny do 24 hodin.</span>
|
|
<button style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px; border: none; border-radius: 999px; background: #b7ff3c; color: #080b09; font-family: inherit; font-size: 15.2px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(155,230,25,0.2);">
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
|
|
Odeslat
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="margin: 0; padding-left: 4px; font-size: 13px; color: rgba(255,255,255,0.3);">
|
|
Číslo požadavku <span class="mono">TK-4823</span> se hodí, když nám budete volat.
|
|
</p>
|
|
</div>
|
|
</x-dc>
|
|
</body>
|
|
</html>
|