190 lines
17 KiB
HTML
190 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#02060a" />
|
||
<meta name="color-scheme" content="dark" />
|
||
<title>JARVIS // Home Command</title>
|
||
<link rel="stylesheet" href="/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="noise"></div><div class="grid-plane"></div><div class="scan-sweep"></div>
|
||
|
||
<aside class="clean-sidebar" id="cleanSidebar" aria-label="Clean Navigation">
|
||
<div class="clean-brand">
|
||
<div class="clean-brand-mark">J</div>
|
||
<div><strong>Jarvis Home</strong><span>Local Intelligence</span></div>
|
||
</div>
|
||
<nav class="clean-nav">
|
||
<button class="clean-nav-item active" data-clean-view="home"><span class="clean-nav-icon">⌂</span><span>Home</span></button>
|
||
<button class="clean-nav-item" data-clean-view="calendar"><span class="clean-nav-icon">◫</span><span>Kalender</span></button>
|
||
<button class="clean-nav-item" data-clean-view="tasks"><span class="clean-nav-icon">✓</span><span>Aufgaben</span></button>
|
||
<button class="clean-nav-item" data-clean-view="kanban"><span class="clean-nav-icon">▦</span><span>Kanban</span></button>
|
||
<button class="clean-nav-item" data-clean-view="food"><span class="clean-nav-icon">◉</span><span>Essen & Einkauf</span></button>
|
||
<button class="clean-nav-item" data-clean-view="knowledge"><span class="clean-nav-icon">◇</span><span>Wissen & System</span></button>
|
||
</nav>
|
||
<div class="clean-sidebar-foot">
|
||
<div class="clean-side-status"><i></i><div><span>Lokaler Core</span><strong id="cleanModelStatus">Online</strong></div></div>
|
||
<div class="theme-switch clean-theme-switch" aria-label="Design auswählen">
|
||
<button type="button" class="theme-option" data-theme="jarvis">HUD</button>
|
||
<button type="button" class="theme-option active" data-theme="apple">CLEAN</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<nav class="clean-mobile-nav" aria-label="Clean Navigation mobil">
|
||
<button class="clean-nav-item active" data-clean-view="home"><span>⌂</span><small>Home</small></button>
|
||
<button class="clean-nav-item" data-clean-view="calendar"><span>◫</span><small>Kalender</small></button>
|
||
<button class="clean-nav-item" data-clean-view="tasks"><span>✓</span><small>Aufgaben</small></button>
|
||
<button class="clean-nav-item" data-clean-view="kanban"><span>▦</span><small>Kanban</small></button>
|
||
<button class="clean-nav-item" data-clean-view="food"><span>◉</span><small>Essen</small></button>
|
||
<button class="clean-nav-item" data-clean-view="knowledge"><span>◇</span><small>System</small></button>
|
||
</nav>
|
||
|
||
<div class="shell">
|
||
<header class="clean-topbar">
|
||
<div class="clean-page-title"><span id="cleanViewEyebrow">Übersicht</span><h1 id="cleanViewTitle">Home</h1><p id="cleanViewSubtitle">Dein Zuhause, Termine und Aufgaben auf einen Blick.</p></div>
|
||
<div class="clean-top-actions">
|
||
<span class="clean-date" id="cleanTopDate">—</span>
|
||
<button type="button" id="cleanQuickMic" class="clean-round-action" title="Spracheingabe">◉</button>
|
||
<button type="button" id="cleanOpenHome" class="clean-round-action" title="Zur Startseite">⌂</button>
|
||
</div>
|
||
</header>
|
||
<header class="hud-top">
|
||
<div class="identity"><div class="sigil">J</div><div><span class="micro-label">LOCAL AUTONOMOUS HOME OS</span><h1>JARVIS <b>// HOME COMMAND</b></h1></div></div>
|
||
<div class="system-strip">
|
||
<div class="status-chip"><i id="coreDot"></i><span>CORE</span><strong id="coreStatus">BOOT</strong></div>
|
||
<div class="status-chip"><i id="ragDot"></i><span>RAG</span><strong id="ragStatus">—</strong></div>
|
||
<div class="status-chip"><i id="sttDot"></i><span>STT</span><strong id="sttStatus">—</strong></div>
|
||
<div class="status-chip"><i id="ttsDot"></i><span>TTS</span><strong id="ttsStatus">—</strong></div>
|
||
</div>
|
||
<div class="clock"><strong id="clock">--:--:--</strong><span id="date">--</span></div>
|
||
</header>
|
||
|
||
<section class="command-deck panel">
|
||
<div class="command-core" id="coreVisual">
|
||
<div class="radar-ring r1"></div><div class="radar-ring r2"></div><div class="radar-ring r3"></div>
|
||
<div class="core-orb"><span>J</span></div>
|
||
<div class="voice-state"><small>NEURAL VOICE CORE</small><strong id="voiceModeLabel">STANDBY</strong></div>
|
||
</div>
|
||
<div class="command-main">
|
||
<div class="panel-head no-border"><div><span class="micro-label">00 // UNIFIED COMMAND CHANNEL</span><h2>Home Intelligence</h2></div><div class="command-tools"><div class="theme-switch" id="themeSwitch" aria-label="Design auswählen"><button type="button" class="theme-option active" data-theme="jarvis">JARVIS</button><button type="button" class="theme-option" data-theme="apple">CLEAN</button></div><button id="debugExportBtn" class="hud-button ghost debug-export" title="Strukturierten JSON-Debug-Trace exportieren">EXPORT DEBUG</button><button id="clearChatBtn" class="hud-button ghost" title="Alten Chatverlauf leeren">CLEAR CHAT</button><div class="live-tag"><i></i><span id="modelTag">LOCAL ONLY</span></div></div></div>
|
||
<div class="conversation" id="conversation"><div class="message assistant"><div class="avatar">J</div><div><small>JARVIS</small><p>Home-System online. Ich kann Kalender, Aufgaben, Einkauf, Rezepte, Essensplan, Erinnerungen und Kanban lokal verwalten.</p></div></div></div>
|
||
<form id="commandForm" class="command-bar"><button type="button" id="inlineMic" class="mic-button" aria-label="Spracheingabe">◉</button><textarea id="commandInput" rows="1" placeholder="z.B. › Jarvis, trage morgen 15 Uhr Zahnarzt ein …"></textarea><button type="submit" class="execute">EXECUTE <span>↗</span></button></form>
|
||
<div id="sourceRail" class="source-rail"></div>
|
||
</div>
|
||
<div class="mission-brief">
|
||
<span class="micro-label">LIVE HOME MATRIX</span>
|
||
<div class="brief-grid"><div><strong id="briefEvents">0</strong><span>TERMINE / 7T</span></div><div><strong id="briefTasks">0</strong><span>OFFENE TASKS</span></div><div><strong id="briefGroceries">0</strong><span>EINKAUF</span></div><div><strong id="briefReminders">0</strong><span>REMINDER</span></div></div>
|
||
<button id="automationBtn" class="hud-button wide">RUN HOME AUTOMATION</button>
|
||
<button id="scoutBtn" class="hud-button wide secondary">SCAN FOR TASKS</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="clean-home-overview" id="cleanHomeOverview">
|
||
<article class="clean-welcome-card">
|
||
<div><span class="clean-eyebrow" id="cleanGreetingLabel">Guten Morgen</span><h2 id="cleanGreeting">Alles im Blick.</h2><p id="cleanHomeSummary">Jarvis synchronisiert gerade deinen lokalen Home-State.</p></div>
|
||
<div class="clean-quick-grid">
|
||
<button data-clean-jump="calendar"><span>◫</span><strong>Kalender</strong><small id="homeCalendarQuick">0 Termine</small></button>
|
||
<button data-clean-jump="tasks"><span>✓</span><strong>Aufgaben</strong><small id="homeTasksQuick">0 offen</small></button>
|
||
<button data-clean-jump="food"><span>◉</span><strong>Essen</strong><small id="homeFoodQuick">Nichts geplant</small></button>
|
||
<button data-clean-jump="kanban"><span>▦</span><strong>Kanban</strong><small id="homeKanbanQuick">0 Karten</small></button>
|
||
</div>
|
||
</article>
|
||
<article class="clean-home-card clean-next-card">
|
||
<header><span>Als Nächstes</span><button data-clean-jump="calendar">Alle anzeigen</button></header>
|
||
<div id="cleanNextEvent" class="clean-home-card-body"><strong>Keine Termine</strong><p>Dein Kalender ist frei.</p></div>
|
||
</article>
|
||
<article class="clean-home-card clean-task-card">
|
||
<header><span>Heute erledigen</span><button data-clean-jump="tasks">Aufgaben öffnen</button></header>
|
||
<div id="cleanNextTask" class="clean-home-card-body"><strong>Keine offenen Aufgaben</strong><p>Du bist auf dem aktuellen Stand.</p></div>
|
||
</article>
|
||
<article class="clean-home-card clean-meal-card">
|
||
<header><span>Essen</span><button data-clean-jump="food">Plan öffnen</button></header>
|
||
<div id="cleanNextMeal" class="clean-home-card-body"><strong>Noch nichts geplant</strong><p>Plane eine Mahlzeit für heute oder morgen.</p></div>
|
||
</article>
|
||
<article class="clean-home-card clean-system-card">
|
||
<header><span>Local AI</span><button data-clean-jump="knowledge">System</button></header>
|
||
<div class="clean-system-grid"><div><span>Core</span><strong id="cleanCoreQuick">—</strong></div><div><span>RAG</span><strong id="cleanRagQuick">—</strong></div><div><span>Voice</span><strong id="cleanVoiceQuick">—</strong></div><div><span>Skills</span><strong id="cleanSkillsQuick">—</strong></div></div>
|
||
</article>
|
||
</section>
|
||
|
||
<main class="dashboard-grid">
|
||
<section class="panel calendar-panel">
|
||
<header class="panel-head"><div><span class="micro-label">01 // TEMPORAL MATRIX</span><h2>Kalender · 7 Tage</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Kalender" title="Kalender per Sprache">◉</button><button class="add-button" data-add="event">＋ TERMIN</button></div></header>
|
||
<div class="week-rail" id="weekRail"></div><div class="agenda" id="agenda"></div>
|
||
</section>
|
||
|
||
<section class="panel tasks-panel">
|
||
<header class="panel-head"><div><span class="micro-label">02 // ACTION QUEUE</span><h2>Aufgaben</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Aufgaben" title="Aufgaben per Sprache">◉</button><button class="add-button" data-add="task">＋ TASK</button></div></header>
|
||
<div class="task-kpis"><div><span>OPEN</span><strong id="taskOpen">0</strong></div><div><span>AI FOUND</span><strong id="taskAI">0</strong></div><div><span>HIGH</span><strong id="taskHigh">0</strong></div></div>
|
||
<div id="taskList" class="task-list"></div>
|
||
</section>
|
||
|
||
<section class="panel kanban-panel full-span">
|
||
<header class="panel-head"><div><span class="micro-label">03 // AUTONOMOUS FLOW ENGINE</span><h2>KI Kanban</h2></div><div class="head-actions"><span class="hint">Drag & Drop · manuelle Karten bleiben geschützt</span><button class="module-mic" data-voice-context="Kanban" title="Kanban per Sprache">◉</button><button id="kanbanAI" class="hud-button">AI ORGANIZE</button><button class="add-button" data-add="kanban">＋ CARD</button></div></header>
|
||
<div class="kanban-board" id="kanbanBoard"></div>
|
||
</section>
|
||
|
||
<section class="panel grocery-panel">
|
||
<header class="panel-head"><div><span class="micro-label">04 // SUPPLY MATRIX</span><h2>Einkaufsliste</h2></div><div class="head-actions"><button id="syncMealGroceriesBtn" class="hud-button ghost" title="Zutaten aus dem Essensplan synchronisieren">↻ AUS PLAN</button><button class="module-mic" data-voice-context="Einkaufsliste" title="Einkauf per Sprache">◉</button><button class="add-button" data-add="grocery">＋ ITEM</button></div></header>
|
||
<div class="mini-meter"><span>OFFEN</span><strong id="groceryOpen">0</strong><i><b id="groceryBar"></b></i></div><div id="groceryList" class="grocery-list"></div>
|
||
</section>
|
||
|
||
<section class="panel meals-panel">
|
||
<header class="panel-head"><div><span class="micro-label">05 // NUTRITION SCHEDULE</span><h2>Essensplanung</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Essensplanung" title="Essensplan per Sprache">◉</button><button class="add-button" data-add="meal">＋ PLAN</button></div></header>
|
||
<div id="mealTimeline" class="meal-timeline"></div>
|
||
</section>
|
||
|
||
<section class="panel recipes-panel">
|
||
<header class="panel-head"><div><span class="micro-label">06 // CULINARY MEMORY</span><h2>Rezepte</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Rezepte" title="Rezepte per Sprache">◉</button><button class="add-button" data-add="recipe">＋ RECIPE</button></div></header>
|
||
<div id="recipeList" class="recipe-grid"></div>
|
||
</section>
|
||
|
||
<section class="panel reminders-panel">
|
||
<header class="panel-head"><div><span class="micro-label">07 // ALERT GRID</span><h2>Erinnerungen</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Erinnerungen" title="Erinnerungen per Sprache">◉</button><button class="add-button" data-add="reminder">＋ REMINDER</button></div></header>
|
||
<div id="reminderList" class="reminder-list"></div>
|
||
</section>
|
||
|
||
<section class="panel knowledge-panel">
|
||
<header class="panel-head"><div><span class="micro-label">08 // KNOWLEDGE VAULT</span><h2>RAG Memory</h2></div><div class="head-actions"><button class="module-mic" data-voice-context="Dokumentwissen" title="Dokumente per Sprache">◉</button><button id="reindexBtn" class="hud-button">REINDEX</button></div></header>
|
||
<label class="dropzone" id="dropzone"><input type="file" id="fileInput" hidden /><div class="hex-upload">＋</div><div><strong>INGEST DOCUMENT</strong><span>drop file / click to select</span></div></label>
|
||
<div class="memory-meter"><span>VECTOR CHUNKS</span><strong id="chunkCount">0</strong><div><i id="memoryBar"></i></div></div><div id="documentList" class="document-list"></div>
|
||
</section>
|
||
|
||
<section class="panel skills-panel">
|
||
<header class="panel-head"><div><span class="micro-label">09 // SKILL REGISTRY</span><h2>Skills</h2></div><div class="head-actions"><span id="skillCountTag" class="live-tag"><i></i> 0 ACTIONS</span><button id="reloadSkillsBtn" class="hud-button">RELOAD</button></div></header>
|
||
<p class="skill-intro">Core-Skills, lokale Entwicklungsplugins und Remote-Worker teilen sich dieselbe JSON-Schnittstelle. JARVIS kann Skill-Aktionen unabhängig vom Provider auswählen und zu Workflows kombinieren.</p>
|
||
<div id="skillList" class="skill-list"></div>
|
||
</section>
|
||
|
||
<section class="panel mesh-panel full-span">
|
||
<header class="panel-head"><div><span class="micro-label">10 // DISTRIBUTED SKILL MESH</span><h2>Skill Worker & Container</h2></div><div class="head-actions"><span id="meshCountTag" class="live-tag"><i></i> 0 WORKERS</span><button id="refreshMeshBtn" class="hud-button">REFRESH</button></div></header>
|
||
<p class="skill-intro">Remote Worker registrieren ihre Skills per HTTP beim Master. Der Docker-Controller zeigt nur Container mit dem freigegebenen JARVIS-Service-Label und kann ausschließlich Start, Stop und Restart ausführen.</p>
|
||
<div class="mesh-layout"><div><h3 class="mesh-subtitle">Enrolled Worker</h3><div id="meshWorkerList" class="mesh-worker-list"></div></div><div><h3 class="mesh-subtitle">Docker Skill Services</h3><div id="dockerSkillList" class="docker-skill-list"></div></div></div>
|
||
</section>
|
||
|
||
<section class="panel voice-panel">
|
||
<header class="panel-head"><div><span class="micro-label">11 // VOICE MATRIX</span><h2>Wake Protocol</h2></div><button class="module-mic" data-voice-context="Systemsteuerung" title="System per Sprache">◉</button></header>
|
||
<div class="wake-row"><div class="wake-word"><span>CODEWORD</span><strong id="wakeWord">JARVIS</strong></div><label class="switch"><input type="checkbox" id="wakeToggle"><span></span></label></div>
|
||
<p id="wakeHelp">Wake-Word aus. Jeder Modul-Button und der globale Voice-Core starten Push-to-talk.</p>
|
||
<div class="voice-diag"><div><span>MIC</span><b id="micDiag">READY</b></div><div><span>WHISPER</span><b id="whisperDiag">CHECK</b></div><div><span>PIPER</span><b id="piperDiag">CHECK</b></div></div>
|
||
</section>
|
||
|
||
<section class="panel telemetry-panel full-span">
|
||
<header class="panel-head"><div><span class="micro-label">12 // SYSTEM TELEMETRY</span><h2>Activity Stream</h2></div><div class="head-actions"><span id="debugTraceStatus" class="live-tag"><i></i> DEBUG TRACE</span><button id="debugClearBtn" class="hud-button ghost" title="Nur Debug-Trace löschen">CLEAR TRACE</button></div></header><div id="activityList" class="activity-list"></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<button id="globalMic" class="global-mic" aria-label="Globaler Sprachkanal" title="Push-to-talk"><span class="mic-halo"></span><span class="mic-icon">◉</span><small>VOICE</small></button>
|
||
<div id="voiceOverlay" class="voice-overlay" aria-live="polite"><div class="voice-overlay-inner"><span class="micro-label">VOICE CHANNEL <b id="voiceContextLabel">GLOBAL</b></span><strong id="overlayStatus">LISTENING</strong><p id="overlayTranscript">Sprich jetzt …</p></div></div>
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<dialog id="entityDialog" class="entity-dialog"><form method="dialog" id="entityForm"><header><div><span class="micro-label" id="dialogCode">NEW ENTITY</span><h2 id="dialogTitle">Eintrag erstellen</h2></div><button type="button" class="dialog-close" id="dialogClose">×</button></header><div id="dialogFields" class="dialog-fields"></div><footer><button type="button" class="hud-button secondary" id="dialogCancel">CANCEL</button><button type="submit" class="execute">SAVE <span>↗</span></button></footer></form></dialog>
|
||
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|