File size: 4,081 Bytes
5cf774c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>StudyFlow AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-shell">
<aside class="sidebar" id="sidebar" aria-label="Hauptnavigation">
<div class="brand">
<span class="brand-mark" aria-hidden="true"><i class="ph ph-feather"></i></span>
<span class="brand-name">StudyFlow AI</span>
</div>
<div class="profile">
<span class="avatar">JW</span>
<span><strong>Josephine Wendland</strong><small>Lehramt · Mainz</small></span>
<button class="icon-button" aria-label="Profil öffnen"><i class="ph ph-caret-down"></i></button>
</div>
<nav class="nav-list" id="navList">
<button data-route="overview"><i class="ph ph-house"></i>Heute</button>
<button data-route="uploads"><i class="ph ph-folder"></i>Materialien</button>
<button data-route="canvas"><i class="ph ph-chalkboard-teacher"></i>Arbeitsfläche</button>
<button data-route="calendar"><i class="ph ph-calendar-blank"></i>Kalender</button>
<button data-route="learning-plan"><i class="ph ph-book-open"></i>Lernplan</button>
<button data-route="gaps"><i class="ph ph-target"></i>Wissenslücken</button>
<button data-route="flashcards"><i class="ph ph-cards"></i>Karten</button>
<button data-route="quiz"><i class="ph ph-question"></i>Quiz</button>
<button data-route="reminders"><i class="ph ph-heart"></i>Erinnerungen</button>
</nav>
<div class="local-status">
<strong><span class="status-dot"></span>Lokale Verarbeitung aktiv</strong>
<span>Deine Daten bleiben auf diesem Gerät.</span>
</div>
</aside>
<div class="app-main">
<header class="topbar">
<button class="menu-button" id="menuButton" aria-label="Navigation öffnen" aria-expanded="false">☰</button>
<span class="today">Dienstag, 7. Juni · Mainz</span>
<label class="global-search">
<span aria-hidden="true">⌕</span>
<input id="globalSearch" type="search" placeholder="Material, Kurs oder Begriff suchen">
<kbd>⌘ K</kbd>
</label>
<button class="ask-button" id="askButton"><i class="ph ph-sparkle"></i> KI fragen</button>
<button class="icon-button notification" aria-label="Benachrichtigungen"><i class="ph ph-bell"></i><span>3</span></button>
<span class="user-label">Josephine Wendland · Lehramt</span>
</header>
<main id="app" tabindex="-1"></main>
</div>
</div>
<div class="scrim" id="scrim"></div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<dialog id="aiDialog">
<form method="dialog" class="dialog-card">
<div class="dialog-head">
<div><small>Lokaler KI-Copilot</small><h2>Frage an deine Materialien</h2></div>
<button class="icon-button" value="cancel" aria-label="Schließen">×</button>
</div>
<label>Deine Frage<textarea id="aiPrompt" rows="4" placeholder="Zum Beispiel: Erkläre den Unterschied zwischen Translanguaging und Code-Switching."></textarea></label>
<p class="trust-note">Die Antwort wird ausschließlich aus deinen lokalen Quellen erzeugt.</p>
<div class="dialog-actions">
<button class="button secondary" value="cancel">Abbrechen</button>
<button class="button primary" id="aiSubmit" value="cancel">Antwort erzeugen</button>
</div>
</form>
</dialog>
<script src="app.js"></script>
</body>
</html>
|