291 lines
14 KiB
HTML
291 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Luna · Tutor-Cockpit</title>
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
|
|
<meta name="theme-color" content="#0a0a0f">
|
||
|
|
<meta name="description" content="Luna — dein Tutor-Cockpit. Eigene Unterlagen, Klausur-Plan, Kompetenz-Diagnose, Klinikfälle.">
|
||
|
|
<link rel="stylesheet" href="cockpit.css">
|
||
|
|
<script>
|
||
|
|
window.__LUNA_KEY__ = 'qb_drfbhe3w6j2r7199w2';
|
||
|
|
window.__BOT_SLUG__ = 'physio-tutor';
|
||
|
|
window.__BOT_ID__ = 'r3816r760kur14i';
|
||
|
|
window.__API_BASE__ = 'https://api.qognio.com';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="cockpit" role="application" aria-label="Luna Cockpit">
|
||
|
|
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="brand">
|
||
|
|
<span class="brand-icon" aria-hidden="true">L</span>
|
||
|
|
<div class="brand-text">
|
||
|
|
<span class="brand-title">Luna <small>Cockpit</small></span>
|
||
|
|
<span class="brand-sub">Eigene Unterlagen · Klausur-Plan · Kompetenz-Diagnose</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spacer"></div>
|
||
|
|
<div id="auth-state" class="auth-state">
|
||
|
|
<span id="auth-user" class="auth-user"></span>
|
||
|
|
<button id="auth-logout" class="btn-secondary" type="button" hidden>Abmelden</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Login overlay -->
|
||
|
|
<section id="login-screen" class="login-screen" hidden>
|
||
|
|
<div class="login-card">
|
||
|
|
<h2>Bei Luna anmelden</h2>
|
||
|
|
<p class="login-hint">Damit Luna deine eigenen Dokumente verwenden kann, brauche ich deinen Login.</p>
|
||
|
|
<form id="login-form" class="login-form">
|
||
|
|
<label>E-Mail<input type="email" id="login-email" autocomplete="email" required></label>
|
||
|
|
<label>Passwort<input type="password" id="login-pw" autocomplete="current-password" required></label>
|
||
|
|
<button type="submit" class="btn-primary">Anmelden</button>
|
||
|
|
<div id="login-error" class="login-error" role="alert" hidden></div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<main id="main" class="main" hidden>
|
||
|
|
<!-- Status banner -->
|
||
|
|
<section class="status-block">
|
||
|
|
<h2 class="status-title">Was Luna gerade weiß</h2>
|
||
|
|
<div id="status-summary" class="status-summary">Lade…</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Top-level Tabs -->
|
||
|
|
<nav class="space-tabs" role="tablist" aria-label="Cockpit-Bereiche">
|
||
|
|
<button class="space-tab" role="tab" aria-selected="true" data-space="dokumente">
|
||
|
|
<span class="space-icon">📁</span><span class="space-label">Dokumente</span>
|
||
|
|
</button>
|
||
|
|
<button class="space-tab" role="tab" aria-selected="false" data-space="klausuren">
|
||
|
|
<span class="space-icon">📋</span><span class="space-label">Klausur-Plan</span>
|
||
|
|
</button>
|
||
|
|
<button class="space-tab" role="tab" aria-selected="false" data-space="lernen">
|
||
|
|
<span class="space-icon">🧠</span><span class="space-label">Lernen</span>
|
||
|
|
</button>
|
||
|
|
<button class="space-tab" role="tab" aria-selected="false" data-space="steuern">
|
||
|
|
<span class="space-icon">🎛</span><span class="space-label">Bot steuern</span>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- ─── Space: Dokumente ─── -->
|
||
|
|
<section class="space" data-space="dokumente" data-active="true">
|
||
|
|
<nav class="folder-tabs" role="tablist" aria-label="Dokumenten-Ordner">
|
||
|
|
<button class="folder-tab" role="tab" aria-selected="true" data-folder="curriculum">
|
||
|
|
<span class="folder-icon">📚</span>
|
||
|
|
<span class="folder-label">Curriculum</span>
|
||
|
|
<span class="folder-count" data-count="curriculum">0</span>
|
||
|
|
</button>
|
||
|
|
<button class="folder-tab" role="tab" aria-selected="false" data-folder="official">
|
||
|
|
<span class="folder-icon">🏛️</span>
|
||
|
|
<span class="folder-label">Offizielle Doks</span>
|
||
|
|
<span class="folder-count" data-count="official">0</span>
|
||
|
|
</button>
|
||
|
|
<button class="folder-tab" role="tab" aria-selected="false" data-folder="own">
|
||
|
|
<span class="folder-icon">📝</span>
|
||
|
|
<span class="folder-label">Eigene Notizen</span>
|
||
|
|
<span class="folder-count" data-count="own">0</span>
|
||
|
|
</button>
|
||
|
|
<button class="folder-tab" role="tab" aria-selected="false" data-folder="role">
|
||
|
|
<span class="folder-icon">🎯</span>
|
||
|
|
<span class="folder-label">Schwerpunkt</span>
|
||
|
|
<span class="folder-count" data-count="role">0</span>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
<section class="folder-body">
|
||
|
|
<div id="folder-help" class="folder-help"></div>
|
||
|
|
<div class="upload-zone" id="upload-zone" tabindex="0">
|
||
|
|
<input type="file" id="file-input" hidden multiple
|
||
|
|
accept=".pdf,.txt,.md,.csv,.json,.png,.jpg,.jpeg,.webp">
|
||
|
|
<div class="upload-cta">
|
||
|
|
<span class="upload-icon">⬆️</span>
|
||
|
|
<span class="upload-text">Datei hier ablegen oder klicken</span>
|
||
|
|
<span class="upload-hint">PDF, Markdown, Text — max 20 MB</span>
|
||
|
|
</div>
|
||
|
|
<div id="upload-progress" class="upload-progress" hidden></div>
|
||
|
|
</div>
|
||
|
|
<ul id="doc-list" class="doc-list" aria-live="polite"></ul>
|
||
|
|
<div id="doc-empty" class="doc-empty" hidden>Noch nichts hier — leg los mit dem ersten Upload.</div>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Space: Klausuren ─── -->
|
||
|
|
<section class="space" data-space="klausuren">
|
||
|
|
<div class="space-intro">
|
||
|
|
<h2>📋 Dein Klausur-Plan</h2>
|
||
|
|
<p>Aus deinem Curriculum extrahiert. Klick auf eine Klausur, um Luna gezielt darauf vorzubereiten.</p>
|
||
|
|
</div>
|
||
|
|
<div id="klausur-list" class="klausur-list">
|
||
|
|
<div class="empty-state" id="klausur-empty">Noch keine Klausuren erkannt. Lade ein Klausurplan-Dokument im Curriculum-Ordner hoch.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Space: Lernen ─── -->
|
||
|
|
<section class="space" data-space="lernen">
|
||
|
|
<div class="space-intro">
|
||
|
|
<h2>🧠 Lernen & Üben</h2>
|
||
|
|
<p>Wähle ein Thema aus deinem Klausur-Plan oder Curriculum, dann starte ein Mini-Spiel.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Heatmap: mastery per topic -->
|
||
|
|
<section class="heatmap-block">
|
||
|
|
<div class="heatmap-header">
|
||
|
|
<h3 class="heatmap-title">Dein aktueller Stand</h3>
|
||
|
|
<div class="heatmap-legend">
|
||
|
|
<span class="legend-cell" data-level="0"></span><span>0 noch nicht</span>
|
||
|
|
<span class="legend-cell" data-level="2"></span><span>2 in Arbeit</span>
|
||
|
|
<span class="legend-cell" data-level="4"></span><span>4 stark</span>
|
||
|
|
<span class="legend-cell" data-level="5"></span><span>5 gemeistert</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="heatmap-grid" class="heatmap-grid">
|
||
|
|
<div class="empty-state">Klick auf ein Thema unten, um deinen Stand erstmals zu erfassen.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Topic picker -->
|
||
|
|
<section class="topic-picker">
|
||
|
|
<div class="topic-picker-head">
|
||
|
|
<h3>Themen</h3>
|
||
|
|
<select id="topic-source" class="select-mini">
|
||
|
|
<option value="klausur">aus Klausur-Plan</option>
|
||
|
|
<option value="physiologie-uke">Physiologie (UKE)</option>
|
||
|
|
<option value="physiotherapie-aprv">Physiotherapie APrV</option>
|
||
|
|
<option value="pflegeschule-flensburg">Pflege Flensburg</option>
|
||
|
|
<option value="medizinische-terminologie">Med. Terminologie</option>
|
||
|
|
<option value="anatomie-grundlagen">Anatomie Grundlagen</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="topic-grid" class="topic-grid"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Minigame Launcher (visible nachdem Topic gewählt) -->
|
||
|
|
<section id="minigame-launcher" class="minigame-launcher" hidden>
|
||
|
|
<div class="launcher-head">
|
||
|
|
<span>Was willst du mit <strong id="launcher-topic">…</strong> machen?</span>
|
||
|
|
<button class="btn-icon-x" id="launcher-close" aria-label="Schließen">✕</button>
|
||
|
|
</div>
|
||
|
|
<div class="launcher-grid">
|
||
|
|
<button class="minigame-card" data-game="diagnose">
|
||
|
|
<span class="mg-icon">🩺</span>
|
||
|
|
<span class="mg-title">Kompetenz-Check</span>
|
||
|
|
<span class="mg-desc">5 adaptive Fragen — Luna ermittelt deinen Stand.</span>
|
||
|
|
<span class="mg-tag">Diagnose · 3-5 min</span>
|
||
|
|
</button>
|
||
|
|
<button class="minigame-card" data-game="klinikfall">
|
||
|
|
<span class="mg-icon">🏥</span>
|
||
|
|
<span class="mg-title">Klinikfall</span>
|
||
|
|
<span class="mg-desc">Patient*in mit Symptomen — du triffst 3 Entscheidungen.</span>
|
||
|
|
<span class="mg-tag">Anwendung · 5-7 min</span>
|
||
|
|
</button>
|
||
|
|
<button class="minigame-card" data-game="stimmt-das">
|
||
|
|
<span class="mg-icon">🤔</span>
|
||
|
|
<span class="mg-title">Stimmt das?</span>
|
||
|
|
<span class="mg-desc">6 Aussagen — wahr oder Falle? Trainiert Misconceptions.</span>
|
||
|
|
<span class="mg-tag">Retrieval · 3 min</span>
|
||
|
|
</button>
|
||
|
|
<button class="minigame-card" data-game="quiz-classic">
|
||
|
|
<span class="mg-icon">📝</span>
|
||
|
|
<span class="mg-title">Klassisches Quiz</span>
|
||
|
|
<span class="mg-desc">10 Multiple-Choice-Fragen via Luna's Quiz-Engine.</span>
|
||
|
|
<span class="mg-tag">Übung · 5 min</span>
|
||
|
|
</button>
|
||
|
|
<button class="minigame-card" data-game="flashcards">
|
||
|
|
<span class="mg-icon">🃏</span>
|
||
|
|
<span class="mg-title">Karteikarten</span>
|
||
|
|
<span class="mg-desc">Spaced-Repetition mit Eigenbewertung pro Karte.</span>
|
||
|
|
<span class="mg-tag">Memorisierung · 3-5 min</span>
|
||
|
|
</button>
|
||
|
|
<button class="minigame-card" data-game="explain">
|
||
|
|
<span class="mg-icon">🎓</span>
|
||
|
|
<span class="mg-title">Erklär's mir</span>
|
||
|
|
<span class="mg-desc">Du erklärst — Luna gibt Feedback zu Klarheit + Vollständigkeit.</span>
|
||
|
|
<span class="mg-tag">Articulation · 5 min</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Minigame Stage (gefüllt während ein Spiel läuft) -->
|
||
|
|
<section id="minigame-stage" class="minigame-stage" hidden></section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Space: Steuern ─── -->
|
||
|
|
<section class="space" data-space="steuern">
|
||
|
|
<div class="space-intro">
|
||
|
|
<h2>🎛 Bot steuern</h2>
|
||
|
|
<p>Schreibe hier rein, wie Luna mit dir arbeiten soll. Beispiele:</p>
|
||
|
|
<ul class="hint-list">
|
||
|
|
<li>„Antworte ausführlicher und gib mehr klinische Beispiele"</li>
|
||
|
|
<li>„Stell mir öfter sokratische Rückfragen statt direkt zu erklären"</li>
|
||
|
|
<li>„Ich lerne lieber visuell — beschreib Diagramme detailliert"</li>
|
||
|
|
<li>„Fokus auf Klausur 1 — ignoriere andere Themen wenn ich nicht explizit frage"</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<form id="persona-form" class="persona-form">
|
||
|
|
<label class="persona-label">
|
||
|
|
Deine Anweisungen an Luna
|
||
|
|
<textarea id="persona-overrides" rows="10"
|
||
|
|
placeholder="Schreibe hier deine Wünsche…"></textarea>
|
||
|
|
</label>
|
||
|
|
<div class="persona-actions">
|
||
|
|
<span id="persona-status" class="persona-status">—</span>
|
||
|
|
<button type="submit" class="btn-primary">Speichern</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Telegram-Pairing -->
|
||
|
|
<section class="telegram-block">
|
||
|
|
<div class="tg-head">
|
||
|
|
<h3>📱 Mobil mit Telegram</h3>
|
||
|
|
<span id="tg-status-badge" class="tg-badge">prüfe…</span>
|
||
|
|
</div>
|
||
|
|
<p class="tg-hint">
|
||
|
|
Verbinde diesen Cockpit-Account mit dem
|
||
|
|
<a href="https://t.me/qognioLunaBot" target="_blank" rel="noopener">@qognioLunaBot</a>
|
||
|
|
auf Telegram. Dann kannst du Luna unterwegs fragen — und sie nutzt deinen Lernstand & Dokumente.
|
||
|
|
</p>
|
||
|
|
<div id="tg-link-area" class="tg-link-area">
|
||
|
|
<button id="tg-generate" class="btn-primary" type="button">Code generieren</button>
|
||
|
|
<button id="tg-unlink" class="btn-secondary" type="button" hidden>Verbindung lösen</button>
|
||
|
|
</div>
|
||
|
|
<div id="tg-code-display" class="tg-code-display" hidden>
|
||
|
|
<p>Schicke diese Nachricht an
|
||
|
|
<a href="https://t.me/qognioLunaBot" target="_blank" rel="noopener">@qognioLunaBot</a>
|
||
|
|
auf Telegram:</p>
|
||
|
|
<pre class="tg-code-line"><code id="tg-code-text"></code></pre>
|
||
|
|
<p class="tg-code-hint">Code läuft in <span id="tg-code-ttl">15</span> Min ab.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- Chat-Dock (resizable + MD-rendering + structured output) -->
|
||
|
|
<aside id="chat-dock" class="chat-dock" aria-label="Luna Chat">
|
||
|
|
<div class="dock-resize" id="dock-resize" aria-hidden="true"></div>
|
||
|
|
<header class="dock-head">
|
||
|
|
<span class="dock-title">Luna</span>
|
||
|
|
<span class="dock-sub">deine Tutorin</span>
|
||
|
|
<button class="dock-reset" type="button" id="dock-reset" title="Chat zurücksetzen">↺</button>
|
||
|
|
<button class="dock-collapse" type="button" id="dock-collapse" title="Einklappen">✕</button>
|
||
|
|
</header>
|
||
|
|
<div id="dock-box" class="dock-box" aria-live="polite"></div>
|
||
|
|
<form id="dock-form" class="dock-form">
|
||
|
|
<textarea id="dock-input" rows="1" placeholder="Frag Luna — z.B. „erklär mir die Nephron-Funktion""></textarea>
|
||
|
|
<button type="submit" class="btn-send" aria-label="Senden">→</button>
|
||
|
|
</form>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<button id="dock-open" class="dock-open" type="button" aria-label="Luna-Chat öffnen">
|
||
|
|
<span class="dock-open-dot"></span>Luna fragen
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
Sovereign AI · Deutscher Bunker · <a href="https://qognio.com">Qognio</a> · Deine Daten bleiben bei dir
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
<div id="toast-stack" class="toast-stack" aria-live="polite"></div>
|
||
|
|
<script src="cockpit.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|