122 lines
5.9 KiB
HTML
122 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Cleo · Deine Compliance-Concierge</title>
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
|
|
<meta name="theme-color" content="#0a0a0f">
|
||
|
|
<meta name="description" content="Cleo — die Compliance-Concierge für Mittelstand. Lotsen-Funktion über DSGVO, AI-Act, NIS-2, GoBD, BetrVG, ArbSchG. Pragmatisch, priorisiert, ohne Beratersprech. Im deutschen Bunker.">
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
<script>window.__CLEO_KEY__ = 'qb_bhtuuckt3tkeh4xse7';</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="app" role="application" aria-label="Cleo Compliance-Lotse für KMU">
|
||
|
|
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="brand">
|
||
|
|
<span class="brand-icon" aria-hidden="true">C</span>
|
||
|
|
<span>Cleo <small>Compliance-Concierge</small></span>
|
||
|
|
</div>
|
||
|
|
<div class="spacer"></div>
|
||
|
|
<span class="status" role="status" aria-live="polite">Online</span>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav class="tabbar" role="tablist" aria-label="Modi">
|
||
|
|
<button class="tab" role="tab" aria-selected="true" aria-controls="view-chat" data-mode="chat">
|
||
|
|
Chat
|
||
|
|
<span class="tab-kbd">⌃1</span>
|
||
|
|
</button>
|
||
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="view-quiz" data-mode="quiz">
|
||
|
|
Quiz
|
||
|
|
<span class="tab-kbd">⌃2</span>
|
||
|
|
</button>
|
||
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="view-flash" data-mode="flash">
|
||
|
|
Begriffe
|
||
|
|
<span class="tab-kbd">⌃3</span>
|
||
|
|
</button>
|
||
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="view-progress" data-mode="progress">
|
||
|
|
Fortschritt
|
||
|
|
<span class="tab-kbd">⌃4</span>
|
||
|
|
</button>
|
||
|
|
<button class="tab" role="tab" aria-selected="false" aria-controls="view-curriculum" data-mode="curriculum">
|
||
|
|
Compliance-Karte
|
||
|
|
<span class="tab-kbd">⌃5</span>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<main class="main">
|
||
|
|
<!-- CHAT -->
|
||
|
|
<section id="view-chat" class="view" role="tabpanel" aria-labelledby="tab-chat" data-active="true">
|
||
|
|
<div id="welcome-screen" class="welcome hidden" aria-hidden="true">
|
||
|
|
<h2>Willkommen — ich bin Cleo.</h2>
|
||
|
|
<p>Ich bin eure <strong>Compliance-Lotsin für den Mittelstand</strong> — die Sortier-Stelle für die Frage "<em>was gilt für uns überhaupt?</em>". Sag mir <strong>Branche + MA-Zahl + IT-Realität</strong>, ich gebe dir die <strong>Pflichten-Karte</strong> mit Schwellenwerten (DSGVO, AI-Act, NIS-2, GoBD, BetrVG, ArbSchG, AGG) und verweise dich an die richtige Spezialist:in für die Tiefe.</p>
|
||
|
|
<div class="mode-grid">
|
||
|
|
<button class="mode-card" data-goto="chat">
|
||
|
|
<strong>Pflichten-Check</strong>
|
||
|
|
<span>Beschreib deine Firma — ich gebe dir die Pflichten-Karte mit Quellen.</span>
|
||
|
|
</button>
|
||
|
|
<button class="mode-card" data-goto="curriculum">
|
||
|
|
<strong>Compliance-Atlas</strong>
|
||
|
|
<span>6 Säulen + Schwellenwerte: ab welcher MA-Zahl was greift.</span>
|
||
|
|
</button>
|
||
|
|
<button class="mode-card" data-goto="quiz">
|
||
|
|
<strong>Selbst-Test</strong>
|
||
|
|
<span>Szenario-Fragen ob du eine Pflicht erkennst (optional, mit XP).</span>
|
||
|
|
</button>
|
||
|
|
<button class="mode-card" data-goto="flash">
|
||
|
|
<strong>Begriffe</strong>
|
||
|
|
<span>Compliance-Vokabular als Karteikarten (optional).</span>
|
||
|
|
</button>
|
||
|
|
<button class="mode-card" data-goto="progress">
|
||
|
|
<strong>Fortschritt</strong>
|
||
|
|
<span>XP, Badges — wenn du gamifiziert lernen willst.</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<p style="font-size:.82rem;color:var(--text-mute)">Cleo = Lotsin / Diagnose. Für Tiefe ruf <strong>Cora</strong> (DSGVO-HR), <strong>KURT</strong> (DSGVO+AI-Act-Crosswalk), <strong>VESTIGIA</strong> (AI-Act-Audit-Trail), <strong>Pia</strong> (Phishing/NIS-2), <strong>Eli</strong> (E-Rechnung/GoBD) oder <strong>PAUL</strong> (Pflege-spezifisch).</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="chat-box" class="chat-box" aria-live="polite" aria-label="Gespräch"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- QUIZ -->
|
||
|
|
<section id="view-quiz" class="view" role="tabpanel" aria-labelledby="tab-quiz">
|
||
|
|
<div id="quiz-host"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- FLASHCARDS -->
|
||
|
|
<section id="view-flash" class="view" role="tabpanel" aria-labelledby="tab-flash">
|
||
|
|
<div id="flash-host"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- PROGRESS -->
|
||
|
|
<section id="view-progress" class="view" role="tabpanel" aria-labelledby="tab-progress">
|
||
|
|
<div id="progress-host"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- COMPLIANCE_MAP -->
|
||
|
|
<section id="view-curriculum" class="view" role="tabpanel" aria-labelledby="tab-curr">
|
||
|
|
<div id="curr-host"></div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<form id="composer-form" class="composer" aria-label="Nachricht verfassen">
|
||
|
|
<div id="attach-strip" class="attach-strip" aria-live="polite"></div>
|
||
|
|
<div class="composer-row">
|
||
|
|
<button type="button" class="btn-attach" id="composer-attach" aria-label="Datei anhängen" title="Datei anhängen (PDF, Bild, Text — max 5 Dateien, 8 MB)">📎</button>
|
||
|
|
<input type="file" id="composer-file" multiple accept=".pdf,.txt,.md,.csv,.json,.xml,.yaml,.yml,.log,.png,.jpg,.jpeg,.webp,.gif" hidden>
|
||
|
|
<textarea id="composer" rows="1" placeholder="Frag Cleo — Enter zum Senden, Shift+Enter für Zeilenumbruch" aria-label="Nachricht"></textarea>
|
||
|
|
<button type="submit" class="btn-primary" id="composer-send">Senden</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
Sovereign AI · Deutscher Bunker · <a href="https://qognio.com">Qognio</a> · DSGVO-konform · Keine externen Fonts · Keine Cookies
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="toast-stack" class="toast-stack" aria-live="polite"></div>
|
||
|
|
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|