c5efac71fa
Source files (src/) and rendered bundle (www/) extracted on 2026-04-29T01:35:47+02:00. Adds nginx:alpine Dockerfile + docker-compose.yml (Caddy-labels) so the bot runs stand-alone or as a per-customer template clone. Parent monorepo commit: d2c816f3edbc9760802a11b29ff4151c7aad4b46 Bot version: 2026-04-25
129 lines
6.1 KiB
HTML
129 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Ida · Dein AdA-Prüfungscoach</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<meta name="theme-color" content="#0a0a0f">
|
||
<meta name="description" content="Ida — gamifizierter Coach für den Ausbilder-Eignungsschein (AEVO). Schriftliche + praktische IHK-Prüfung. Läuft im deutschen Bunker.">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<script>window.__IDA_KEY__ = 'qb_851f77553fdf';</script>
|
||
</head>
|
||
<body>
|
||
<div class="app" role="application" aria-label="Ida AdA-Prüfungscoach">
|
||
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="brand-icon" aria-hidden="true">I</span>
|
||
<span>Ida <small>Dein AdA-Prüfungscoach</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">
|
||
Flashcards
|
||
<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">
|
||
AEVO-Atlas
|
||
<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>Hi, ich bin Ida.</h2>
|
||
<p>Ich helfe dir, den <strong>AdA-Schein</strong> in 4 Wochen locker zu bestehen — IHK-konform, schriftlich + praktisch. Die Didaktik, die du lernst, wende ich dabei <strong>selbst an</strong>. Das ist kein Zufall. Sag mir: Wann hast du Prüfung, und wo stehst du gerade?</p>
|
||
<div class="mode-grid">
|
||
<button class="mode-card" data-goto="chat">
|
||
<strong>Chat</strong>
|
||
<span>Frag mich zu BBiG/AEVO, Methoden, Lernzielen, JArbSchG.</span>
|
||
</button>
|
||
<button class="mode-card" data-goto="quiz">
|
||
<strong>Quiz</strong>
|
||
<span>Handlungsorientierte AEVO-Fragen — IHK-Stil, mit XP.</span>
|
||
</button>
|
||
<button class="mode-card" data-goto="flash">
|
||
<strong>Flashcards</strong>
|
||
<span>Paragraphen, Methoden, Begriffe — Spaced Repetition.</span>
|
||
</button>
|
||
<button class="mode-card" data-goto="progress">
|
||
<strong>Fortschritt</strong>
|
||
<span>XP, Streaks, Badges, Level.</span>
|
||
</button>
|
||
<button class="mode-card" data-goto="curriculum">
|
||
<strong>AEVO-Atlas</strong>
|
||
<span>HF 1–4 + Prüfungstraining + Lernpsychologie.</span>
|
||
</button>
|
||
<button class="mode-card" data-prompt="EXAM_REQUEST: AEVO Handlungsfeld 3 — Ausbildung durchführen, 5 Fragen">
|
||
<strong>Prüfungs-Set</strong>
|
||
<span><code>EXAM_REQUEST</code> + Handlungsfeld → IHK-Stil-Aufgaben mit Musterlösung als Karte.</span>
|
||
</button>
|
||
<button class="mode-card" data-prompt="UNTERWEISUNG_REQUEST: Vier-Stufen-Methode für [Tätigkeit]">
|
||
<strong>Unterweisung</strong>
|
||
<span><code>UNTERWEISUNG_REQUEST</code> + Tätigkeit → Vier-Stufen-Methode komplett ausgeplant als Karte.</span>
|
||
</button>
|
||
</div>
|
||
<p style="font-size:.82rem;color:var(--text-mute)">In 3 Sätzen: Chat zum Verstehen → Quiz zum Testen → Flashcards zum Merken. Fortschritt zeigt dir, wo du stehst; der AEVO-Atlas führt dich Modul für Modul durch alle 4 Handlungsfelder.</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>
|
||
|
||
<!-- CURRICULUM -->
|
||
<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 Ida — 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>
|