191 lines
9.8 KiB
HTML
191 lines
9.8 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="code-kumpel" content="1">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="theme-color" content="#5ee6a8">
|
||
<meta name="description" content="Code-Kumpel – interaktiver KI-Coding-Buddy">
|
||
<title>Code-Kumpel</title>
|
||
<link rel="icon" href="favicon-pixel.svg" type="image/svg+xml">
|
||
<link rel="manifest" href="pwa/manifest.json">
|
||
<link rel="apple-touch-icon" href="assets/icons/icon-pixel128.png">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;600&display=swap">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="pixel-ui.css">
|
||
<link rel="stylesheet" href="themes.css">
|
||
<link rel="stylesheet" href="ui-extras.css">
|
||
<link rel="stylesheet" href="round2.css">
|
||
<link rel="stylesheet" href="round3.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Code-Kumpel</h1>
|
||
<div id="levelbox"><span id="bitslot"></span><span id="energyslot"></span><span id="streakslot"></span><span id="lvl">Lvl 1</span><div class="bar"><div id="xpbar"></div></div><span id="xptxt">0 / 100 XP</span></div>
|
||
</header>
|
||
<main>
|
||
<section id="buddy">
|
||
<div id="stage"><svg id="avatar" viewBox="0 0 200 200"></svg></div>
|
||
<div id="name-row"><input id="buddyname" maxlength="20"><span id="stagename"></span></div>
|
||
<div id="mood"></div>
|
||
<div id="bubble"></div>
|
||
<form id="chatform"><input id="chatin" placeholder="Sag deinem Kumpel was oder frag ihn..." autocomplete="off"><button type="submit">Senden</button></form>
|
||
<div id="chat-hist"></div>
|
||
</section>
|
||
<section id="panel">
|
||
<nav>
|
||
<button data-tab="teach" class="active">Beibringen</button>
|
||
<button data-tab="observe">Beobachten</button>
|
||
<button data-tab="practice">Üben</button>
|
||
<button data-tab="quests">Quests</button>
|
||
<button data-tab="play">Spiele</button>
|
||
<button data-tab="shop">Shop</button>
|
||
<button data-tab="skills">Skills</button>
|
||
<button data-tab="memory">Gedächtnis</button>
|
||
<button data-tab="settings">Einstellungen</button>
|
||
</nav>
|
||
<div class="tab" id="tab-teach">
|
||
<h2>Bring ihm was bei</h2>
|
||
<label>Art<select id="t-type"><option value="regel">Regel</option><option value="code">Code-Beispiel</option><option value="lektion">Lektion</option></select></label>
|
||
<label>Titel<input id="t-title" placeholder="z. B. Immer TypeScript strict nutzen"></label>
|
||
<label>Inhalt<textarea id="t-body" rows="6" placeholder="Was soll er wissen? Code geht auch."></textarea></label>
|
||
<label>Themen (Komma)<input id="t-tags" placeholder="z. B. react, tailwind (leer = automatisch)"></label>
|
||
<button id="t-save">Beibringen</button>
|
||
<p id="t-confirm" class="confirm"></p>
|
||
</div>
|
||
<div class="tab hidden" id="tab-observe">
|
||
<h2>Lernquellen</h2>
|
||
<p class="drop-hint hint">Dateien hier ablegen (JSON/TXT/MD)</p>
|
||
<h3>GitHub</h3>
|
||
<div class="row"><input id="gh-user" placeholder="GitHub-Benutzername"><button id="gh-go">Repos lernen</button></div>
|
||
<p class="hint">Einmal eintragen, danach gleicht Byte alle 6 Stunden automatisch neue Repos und Commits ab.</p>
|
||
<h3>Browser-Erweiterung</h3>
|
||
<p class="hint" id="ext-status">Erweiterung nicht erkannt. Installiere den Ordner <code>extension/</code> in Chrome (chrome://extensions, Entwicklermodus, Entpackte Erweiterung laden). Dann lernt Byte auf ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Mistral, bolt.new, v0 und Lovable mit.</p>
|
||
<h3>Chat-Export von KI-Plattformen</h3>
|
||
<p class="hint">ChatGPT-Export (conversations.json), Claude-Export oder einfach Text/Markdown. Wird nur lokal ausgewertet.</p>
|
||
<input type="file" id="chat-file" accept=".json,.txt,.md,.ipynb">
|
||
<textarea id="chat-paste" rows="4" placeholder="...oder Chatverlauf hier einfügen"></textarea>
|
||
<button id="chat-go">Chat auswerten</button>
|
||
<h3>Vorschläge zum Bestätigen</h3>
|
||
<div id="proposals"></div>
|
||
<p id="obs-log" class="hint"></p>
|
||
</div>
|
||
<div class="tab hidden" id="tab-practice">
|
||
<h2>Üben <span id="due-count"></span></h2>
|
||
<p class="hint">Lernkarten mit Spaced Repetition: fällige und unsichere Erinnerungen zuerst. Bewerte Byte, damit sich Wissen festigt.</p>
|
||
<button id="p-new">Neue Karte</button>
|
||
<div id="p-card"></div>
|
||
<div id="learn-insights"></div>
|
||
</div>
|
||
<div class="tab hidden" id="tab-quests">
|
||
<h2>Tagesquests</h2>
|
||
<div id="questlist"></div>
|
||
<h2>Abzeichen</h2>
|
||
<div id="achlist"></div>
|
||
</div>
|
||
<div class="tab hidden" id="tab-play">
|
||
<h2>Spiele & Fortschritt</h2>
|
||
<div id="playlist"></div>
|
||
</div>
|
||
<div class="tab hidden" id="tab-shop">
|
||
<h2>Bits-Shop</h2>
|
||
<div id="shoplist"></div>
|
||
</div>
|
||
<div class="tab hidden" id="tab-skills"><h2>Skill-Baum</h2><div id="buffs" class="buff-list"></div><div id="skilltree"></div></div>
|
||
<div class="tab hidden" id="tab-memory">
|
||
<h2>Gedächtnis</h2>
|
||
<p class="drop-hint hint">JSON-Spielstand oder Chat-Export hier ablegen</p>
|
||
<div id="m-spark"></div>
|
||
<input id="m-search" placeholder="Durchsuchen...">
|
||
<div class="row mem-filters">
|
||
<label>Typ<select id="m-type"><option value="all">Alle</option><option value="regel">Regel</option><option value="code">Code</option><option value="lektion">Lektion</option></select></label>
|
||
<label>Tag<select id="m-tag"><option value="all">Alle Tags</option></select></label>
|
||
<label>Trust<select id="m-trust"><option value="all">Alle</option><option value="sicher">Sicher</option><option value="unsicher">Unsicher</option></select></label>
|
||
</div>
|
||
<div id="memlist"></div>
|
||
<div class="row"><button id="m-undo" class="ghost">Rückgängig</button><button id="m-export">Exportieren</button><label class="filebtn">Importieren<input type="file" id="m-import" accept=".json" hidden></label><button id="m-reset" class="danger">Alles löschen</button></div>
|
||
</div>
|
||
<div class="tab hidden" id="tab-settings">
|
||
<h2>Darstellung</h2>
|
||
<label>Pixel-Theme
|
||
<select id="s-theme">
|
||
<option value="default">Standard</option>
|
||
<option value="light">Hell</option>
|
||
<option value="gameboy">Game Boy</option>
|
||
<option value="nes">NES</option>
|
||
<option value="crt">CRT Grün</option>
|
||
<option value="synthwave">Synthwave</option>
|
||
<option value="sunset">Sunset</option>
|
||
<option value="ice">Ice</option>
|
||
</select>
|
||
</label>
|
||
<label>Avatar-Stil
|
||
<select id="s-style">
|
||
<option value="pixel">Pixel</option>
|
||
<option value="cartoon">Cartoon</option>
|
||
</select>
|
||
</label>
|
||
<label>Raum
|
||
<select id="s-room">
|
||
<option value="space">Weltall</option>
|
||
<option value="werkstatt">Werkstatt</option>
|
||
<option value="bibliothek">Bibliothek</option>
|
||
<option value="labor">Labor</option>
|
||
</select>
|
||
</label>
|
||
<h2>Sound</h2>
|
||
<label class="row-inline"><input type="checkbox" id="s-mute"> Stumm</label>
|
||
<label>SFX-Lautstärke <input type="range" id="s-sfx" min="0" max="1" step="0.05"></label>
|
||
<label>Musik-Lautstärke <input type="range" id="s-music" min="0" max="1" step="0.05"></label>
|
||
<label class="row-inline"><input type="checkbox" id="s-bgm"> Hintergrundmusik (Chiptune)</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-speak"> Byte piept beim Sprechen</label>
|
||
<div class="row"><button type="button" id="s-test-sfx" class="ghost">SFX testen</button></div>
|
||
|
||
<h2>Barrierefreiheit & Extra</h2>
|
||
<label>Sprache
|
||
<select id="s-lang">
|
||
<option value="de">Deutsch</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-contrast"> Hoher Kontrast</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-bigfont"> Große Schrift</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-iso"> Isometrie-Raum</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-widget"> Widget-Modus</label>
|
||
<label class="row-inline"><input type="checkbox" id="s-notify"> Benachrichtigungen</label>
|
||
<div class="row"><button type="button" id="s-onboard" class="ghost">Tutorial erneut</button>
|
||
<button type="button" id="s-ollama" class="ghost">Ollama-URL setzen</button></div>
|
||
<h2>KI-Gehirn (optional)</h2>
|
||
<p class="hint">Ohne Server antwortet der Kumpel aus seinem Gedächtnis. Mit Backend-URL (Brain-Server) nutzt er ein LLM. Offline: klarer Fallback.</p>
|
||
<label>Backend-URL<input id="s-url" placeholder="http://localhost:8787/chat"></label>
|
||
<p class="hint">Ollama lokal: <code>http://localhost:11434/api/generate</code> – braucht Proxy/Brain-Server (CORS). Preset setzt <code>http://localhost:8787/chat</code>.</p>
|
||
<button id="s-save">Speichern</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<script src="config.js"></script>
|
||
<script src="native.js"></script>
|
||
<script src="round2-core.js"></script>
|
||
<script src="storage.js"></script>
|
||
<script src="privacy.js"></script>
|
||
<script src="community.js"></script>
|
||
<script src="plugins.js"></script>
|
||
<script src="observe-extras.js"></script>
|
||
<script src="avatar.js"></script>
|
||
<script src="avatar-pixel.js"></script>
|
||
<script src="fx.js"></script>
|
||
<script src="sound.js"></script>
|
||
<script src="quests.js"></script>
|
||
<script src="cosmetics.js"></script>
|
||
<script src="shop.js"></script>
|
||
<script src="gameplay.js"></script>
|
||
<script src="learn.js"></script>
|
||
<script src="ui-extras.js"></script>
|
||
<script src="ef-bridge.js"></script>
|
||
<script src="account.js"></script>
|
||
<script src="round3.js"></script>
|
||
<script src="round2.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|