219 lines
8.2 KiB
HTML
219 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Návrh e-mailu | Colsys AI</title>
|
||
<base href="/apps/email/">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap">
|
||
<link rel="stylesheet" href="static/styles.css">
|
||
<link rel="stylesheet" href="static/extra.css">
|
||
<script>
|
||
// Theme bootstrap — read source-of-truth in this order:
|
||
// ?theme= URL → portal_theme cookie → app_theme localStorage → OS
|
||
// The cookie is set by the portal landing on every resolvedTheme change,
|
||
// so it always reflects the portal's current state.
|
||
(function () {
|
||
var t = null;
|
||
try {
|
||
var p = new URL(window.location.href).searchParams.get("theme");
|
||
if (p === "dark" || p === "light") t = p;
|
||
} catch (e) {}
|
||
if (!t) {
|
||
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
||
if (m) t = decodeURIComponent(m[1]);
|
||
}
|
||
if (!t) { try { t = localStorage.getItem("app_theme"); } catch (e) {} }
|
||
if (!t && typeof matchMedia !== "undefined") {
|
||
try {
|
||
t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
} catch (e) {}
|
||
}
|
||
if (t === "dark" || t === "light") {
|
||
document.documentElement.classList.add(t);
|
||
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
||
}
|
||
})();
|
||
// bfcache rehydration — re-sync the class when the page is restored
|
||
// (e.g. user toggled theme on the portal, then hit Back).
|
||
// Same as pageshow, but fires when the user switches tabs.
|
||
// Covers: portal tab toggles theme → user comes back to app tab.
|
||
document.addEventListener("visibilitychange", function () {
|
||
if (document.visibilityState !== "visible") return;
|
||
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
||
if (!m) return;
|
||
var t = decodeURIComponent(m[1]);
|
||
if (t !== "dark" && t !== "light") return;
|
||
var cls = document.documentElement.classList;
|
||
if (cls.contains(t)) return;
|
||
cls.remove(t === "dark" ? "light" : "dark");
|
||
cls.add(t);
|
||
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
||
});
|
||
window.addEventListener("pageshow", function () {
|
||
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
||
if (!m) return;
|
||
var t = decodeURIComponent(m[1]);
|
||
if (t !== "dark" && t !== "light") return;
|
||
var cls = document.documentElement.classList;
|
||
if (cls.contains(t)) return;
|
||
cls.remove(t === "dark" ? "light" : "dark");
|
||
cls.add(t);
|
||
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<a href="/" class="brand">
|
||
<span class="brand-icon">C</span>
|
||
<span class="brand-name">Colsys <span class="brand-ai">AI</span></span>
|
||
</a>
|
||
<span class="header-crumb">Návrh e-mailu</span>
|
||
<a href="/" class="back-link" title="Zpět na portál">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="m15 18-6-6 6-6"/>
|
||
</svg>
|
||
<span>Zpět na portál</span>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
|
||
<section id="s-compose">
|
||
<div class="section-intro">
|
||
<h1 class="section-title">Návrh e-mailu z poznámek</h1>
|
||
<p class="section-desc">
|
||
Zadejte odrážky toho, co chcete napsat. AI z toho udělá uhlazený
|
||
profesionální e-mail.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="form-row form-row-full">
|
||
<label class="form-label" for="notes">Poznámky / odrážky</label>
|
||
<textarea id="notes" class="form-textarea" rows="8" maxlength="4000"
|
||
placeholder="Co chcete v e-mailu sdělit? Stačí odrážky, nemusí být v celých větách.
|
||
|
||
Příklad:
|
||
- omlouvám se za pozdní reakci
|
||
- dohodli jsme se na termínu 24.5.
|
||
- pošlu fakturu do středy
|
||
- prosím o potvrzení dodací adresy"></textarea>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label class="form-label" for="recipient">
|
||
Příjemce / kontext
|
||
<span class="form-label-hint">nepovinné</span>
|
||
</label>
|
||
<input type="text" id="recipient" class="form-input" maxlength="200"
|
||
placeholder="např. „CEO partnerské firmy, formální vztah"">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label class="form-label" for="signature">
|
||
Podpis
|
||
<span class="form-label-hint">uloží se pro příště</span>
|
||
</label>
|
||
<input type="text" id="signature" class="form-input" maxlength="200"
|
||
placeholder="např. „S pozdravem, Ondřej Glaser, ředitel"">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label class="form-label" for="tone">Tón</label>
|
||
<select id="tone" class="form-select">
|
||
<option value="formal">Formální</option>
|
||
<option value="friendly">Přátelský</option>
|
||
<option value="firm">Důrazný</option>
|
||
<option value="apologetic">Omluvný</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label class="form-label" for="language">Jazyk</label>
|
||
<select id="language" class="form-select">
|
||
<option value="cs">Čeština</option>
|
||
<option value="en">Angličtina</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row form-row-full">
|
||
<button class="reply-toggle" id="reply-toggle" type="button" aria-expanded="false">
|
||
<span class="reply-toggle-icon">+</span>
|
||
Odpovídám na e-mail (vložit původní zprávu)
|
||
</button>
|
||
<div class="reply-panel hidden" id="reply-panel">
|
||
<textarea id="reply-to" class="form-textarea" rows="6" maxlength="6000"
|
||
placeholder="Vložte zde celý e-mail, na který odpovídáte. AI ho použije jako kontext pro vaši reakci."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="run-row">
|
||
<button class="btn btn-primary btn-lg" id="generate-btn" type="button">
|
||
Vygenerovat e-mail
|
||
</button>
|
||
<span class="run-hint" id="generate-hint">Zadejte alespoň krátké poznámky.</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="s-processing" class="hidden">
|
||
<div class="processing-card">
|
||
<div class="spinner"></div>
|
||
<h2 class="processing-title">Píšu e-mail…</h2>
|
||
<p class="processing-sub">Obvykle 5–15 sekund.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="s-result" class="hidden">
|
||
<div class="results-header">
|
||
<div>
|
||
<h2 class="results-title">Návrh e-mailu</h2>
|
||
<p class="results-meta">Můžete upravit ručně a poté zkopírovat.</p>
|
||
</div>
|
||
<div class="results-actions">
|
||
<button class="btn btn-secondary" id="back-btn" type="button">
|
||
Upravit zadání
|
||
</button>
|
||
<button class="btn btn-secondary" id="regenerate-btn" type="button">
|
||
Vygenerovat znovu
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="email-card">
|
||
<div class="email-field">
|
||
<div class="email-field-row">
|
||
<label class="email-field-label" for="out-subject">Předmět</label>
|
||
<button class="btn-copy" data-target="out-subject" type="button">Kopírovat</button>
|
||
</div>
|
||
<input type="text" id="out-subject" class="email-subject-input">
|
||
</div>
|
||
<div class="email-divider"></div>
|
||
<div class="email-field">
|
||
<div class="email-field-row">
|
||
<label class="email-field-label" for="out-body">Tělo e-mailu</label>
|
||
<button class="btn-copy" data-target="out-body" type="button">Kopírovat</button>
|
||
</div>
|
||
<textarea id="out-body" class="email-body-textarea" rows="20"></textarea>
|
||
</div>
|
||
<div class="email-actions">
|
||
<button class="btn btn-primary" id="copy-all-btn" type="button">
|
||
Kopírovat předmět i tělo
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="static/app.js"></script>
|
||
</body>
|
||
</html>
|