Files
AI_portal/feature-request/static/index.html
2026-07-07 13:16:26 +02:00

189 lines
7.3 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 nového nástroje | Colsys AI</title>
<base href="/apps/navrhy/">
<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 nového nástroje</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-form">
<div class="section-intro">
<h1 class="section-title">Chybí vám nějaký nástroj?</h1>
<p class="section-desc">
Popište, co byste potřebovali. Pokud máte ukázkový soubor
(faktura, smlouva, výkres…), přiložte ho — pomůže nám pochopit
kontext. Návrh se uloží a my se na něj podíváme.
</p>
</div>
<form id="request-form" class="request-form">
<div class="form-row">
<label class="form-label" for="title">Krátký název *</label>
<input type="text" id="title" name="title" class="form-input" required
minlength="3" maxlength="120"
placeholder="např. „Generování zápisů z porad"">
</div>
<div class="form-row">
<label class="form-label" for="description">Popis *</label>
<textarea id="description" name="description" class="form-textarea"
required minlength="10" maxlength="8000" rows="8"
placeholder="Co by tento nástroj měl umět? Jaký problém řeší? Jak ho budete používat?
Klidně i v odrážkách — nemusí být napsané dokonale."></textarea>
</div>
<div class="form-grid">
<div class="form-row">
<label class="form-label" for="name">
Vaše jméno
<span class="form-label-hint">nepovinné</span>
</label>
<input type="text" id="name" name="name" class="form-input"
maxlength="120" autocomplete="name">
</div>
<div class="form-row">
<label class="form-label" for="email">
E-mail
<span class="form-label-hint">nepovinné — pro zpětnou vazbu</span>
</label>
<input type="email" id="email" name="email" class="form-input"
maxlength="200" autocomplete="email"
placeholder="vase.jmeno@colsys.cz">
</div>
</div>
<div class="form-row">
<label class="form-label">
Ukázkový soubor
<span class="form-label-hint">nepovinné · max 25 MB</span>
</label>
<div id="file-drop" class="file-drop">
<span class="file-drop-text" id="file-drop-text">
Přetáhněte soubor sem nebo
<button type="button" class="btn-link" id="file-pick-btn">vyberte z disku</button>
</span>
<input type="file" id="file-input" name="file" style="display:none">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-lg" id="submit-btn">
Odeslat návrh
</button>
<span class="run-hint">Návrhy ukládáme interně — uvidí je jen tým, který portál vyvíjí.</span>
</div>
</form>
</section>
<section id="s-processing" class="hidden">
<div class="processing-card">
<div class="spinner"></div>
<h2 class="processing-title">Odesílám návrh…</h2>
</div>
</section>
<section id="s-thanks" class="hidden">
<div class="thanks-card">
<svg class="thanks-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="m9 12 2 2 4-4"/>
</svg>
<h2 class="thanks-title">Děkujeme!</h2>
<p class="thanks-text">
Návrh byl uložen. Podíváme se na něj a pokud má smysl, ozveme se
nebo rovnou přidáme nástroj do portálu.
</p>
<div class="thanks-actions">
<a href="/" class="btn btn-primary">Zpět na portál</a>
<button class="btn btn-secondary" id="another-btn" type="button">Odeslat další návrh</button>
</div>
</div>
</section>
</main>
<script src="static/app.js"></script>
</body>
</html>