gott/wwwroot/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gott</title>
  <link rel="stylesheet" href="css/theme.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/nav.css">
  <link rel="stylesheet" href="css/form.css">
  <link rel="stylesheet" href="css/dashboard.css">
  <link rel="stylesheet" href="css/chat.css">
  <link rel="stylesheet" href="css/placeholder.css">
</head>
<body>

<nav id="nav">
  <div class="nav-brand">// gott</div>
  <div class="nav-links">
    <a href="#" data-page="dashboard" class="nav-link active">Dashboard</a>
    <a href="#" data-page="settings" class="nav-link">Einstellungen</a>
  </div>
</nav>

<div id="app"></div>

<!-- Templates -->

<template id="tpl-dashboard">
  <div class="page dashboard">
    <section>
      <div class="section-header">
        <h2>Sessions</h2>
      </div>
      <div class="card-grid" id="sessionCards"></div>
    </section>

    <section>
      <div class="section-header">
        <h2>Agents</h2>
      </div>
      <div class="card-grid" id="agentCards"></div>
    </section>
  </div>
</template>

<template id="tpl-session">
  <div class="page form-page">
    <header>
      <button class="back-btn" data-page="dashboard">←</button>
      <h1 id="sessionPageTitle">Neue Session</h1>
      <button id="openChatBtn" disabled>Chat öffnen</button>
    </header>
    <div class="form">
      <div class="avatar-section">
        <div class="avatar-preview" id="sessionImagePreview">?</div>
        <input type="file" id="sessionImageInput" accept="image/*" hidden>
        <button id="sessionImageBtn">Bild ändern</button>
        <button id="sessionImageClearBtn">Entfernen</button>
      </div>
      <label>Name</label>
      <input type="text" id="sessionName" placeholder="Name der Session">
      <label>Beschreibung</label>
      <textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
      <label>Agent</label>
      <select id="agentSelect"></select>
      <label>Kontext</label>
      <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
      <label>Workspace</label>
      <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
      <div class="form-actions">
        <button id="sessionSaveBtn">Speichern</button>
        <button id="sessionCancelBtn">Abbrechen</button>
        <button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
      </div>
    </div>
  </div>
</template>

<template id="tpl-agent">
  <div class="page form-page">
    <header>
      <button class="back-btn" data-page="dashboard">←</button>
      <h1 id="agentPageTitle">Neuer Agent</h1>
    </header>
    <div class="form">
      <div class="avatar-section">
        <div class="avatar-preview" id="avatarPreview">?</div>
        <input type="file" id="avatarInput" accept="image/*" hidden>
        <button id="avatarBtn">Avatar ändern</button>
        <button id="avatarClearBtn">Entfernen</button>
      </div>
      <label>Name</label>
      <input type="text" id="agentName" placeholder="Name des Agents">
      <label>Beschreibung</label>
      <input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
      <label>Model</label>
      <select id="agentModel">
        <option value="sonnet">Sonnet 4.6</option>
        <option value="opus">Opus 4.6</option>
      </select>
      <label>Persona</label>
      <textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
      <label>Instructions</label>
      <textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
      <div class="form-actions">
        <button id="agentSaveBtn">Speichern</button>
        <button id="agentCancelBtn">Abbrechen</button>
        <button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
      </div>
    </div>
  </div>
</template>

<template id="tpl-chat">
  <div class="page chat-page">
    <header>
      <button class="back-btn" id="chatBackBtn">←</button>
      <h1 id="sessionTitle">-</h1>
      <button class="header-btn" id="archiveBtn">Archivieren</button>
    </header>
    <div class="meta-bar" id="meta"></div>
    <div id="chat"></div>
    <div id="filePreview" class="file-preview" hidden></div>
    <div class="input-area">
      <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" hidden>
      <button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
      <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
      <button id="send">Senden</button>
    </div>
  </div>
</template>

<template id="tpl-settings">
  <div class="page settings-page">
    <header>
      <button class="back-btn" data-page="dashboard">←</button>
      <h1>Einstellungen</h1>
    </header>
    <div class="placeholder-content">
      <div class="placeholder-icon">⚙️</div>
      <h2>Einstellungen</h2>
      <p>Hier können diverse Einstellungen getroffen werden.</p>
    </div>
  </div>
</template>

<script src="js/ui.js"></script>
<script src="js/api.js"></script>
<script src="js/session.js"></script>
<script src="js/chat.js"></script>
<script src="js/history.js"></script>
<script src="js/router.js"></script>
<script src="js/pages/dashboard.js"></script>
<script src="js/pages/agent-page.js"></script>
<script src="js/pages/session-page.js"></script>
<script src="js/pages/chat-page.js"></script>
<script src="js/app.js"></script>
</body>
</html>