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">
</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 class="card placeholder">
          <div class="card-icon">🤖</div>
          <div class="card-title">Kommt bald</div>
          <div class="card-sub">Agents werden hier aufgelistet</div>
        </div>
      </div>
    </section>
  </div>
</template>

<template id="tpl-session">
  <div class="page session-edit-page">
    <header class="session-header">
      <button class="back-btn" data-page="dashboard">←</button>
      <h1 id="sessionPageTitle">Session</h1>
      <button id="openChatBtn" hidden>Chat öffnen</button>
    </header>
    <div class="agent-form">
      <div class="agent-avatar-section">
        <div class="agent-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>
      <div class="agent-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-chat">
  <div class="page session-page">
    <header class="session-header">
      <button class="back-btn" id="chatBackBtn">←</button>
      <h1 id="sessionTitle">Session</h1>
      <button class="header-btn" id="archiveBtn">Archivieren</button>
      <div class="toggle">
        <input type="checkbox" id="showSystem">
        <label for="showSystem">System Prompt</label>
      </div>
    </header>
    <textarea id="systemPrompt" placeholder="System Prompt (SOUL.md Inhalt etc.)"></textarea>
    <div class="meta-bar" id="meta"></div>
    <div id="chat"></div>
    <div class="input-area">
      <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
      <button id="send">Senden</button>
    </div>
  </div>
</template>

<template id="tpl-agent">
  <div class="page agent-page">
    <header class="session-header">
      <button class="back-btn" data-page="dashboard">←</button>
      <h1 id="agentPageTitle">Neuer Agent</h1>
    </header>
    <div class="agent-form">
      <div class="agent-avatar-section">
        <div class="agent-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="agent-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-settings">
  <div class="page settings-page">
    <header class="session-header">
      <button class="back-btn" data-page="dashboard">←</button>
      <h1>Einstellungen</h1>
    </header>
    <div class="placeholder-page">
      <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>