computerhistory/90_builder/templates/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CORE // MASCHINEN-INSTANZEN_LOG</title>
  <style>
    :root {
      --bg-color: #0d1117;
      --text-color: #c9d1d9;
      --link-color: #58a6ff;
      --accent-color: #ff7b72;
      --border-color: #30363d;
      --code-bg: #161b22;
      --font-main: 'Courier New', Courier, monospace;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: var(--font-main);
      max-width: 900px;
      margin: 0 auto;
      padding: 2rem;
    }

    header {
      border-bottom: 2px solid var(--accent-color);
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }

    .terminal-title {
      color: var(--accent-color);
      font-size: 2em;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin: 0;
    }

    .system-status {
      font-size: 0.9em;
      color: #8b949e;
      margin-top: 0.5rem;
    }

    .status-blink {
      color: #7ee787;
      animation: blink 1.5s infinite;
    }

    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }

    .category-block {
      border: 1px solid var(--border-color);
      background-color: var(--code-bg);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 4px;
    }

    .category-title {
      color: var(--accent-color);
      font-size: 1.2em;
      text-transform: uppercase;
      margin-top: 0;
      margin-bottom: 1rem;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 0.3rem;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      margin-bottom: 0.8rem;
      padding-left: 1.5rem;
      position: relative;
    }

    li::before {
      content: ">>";
      position: absolute;
      left: 0;
      color: var(--accent-color);
    }

    a {
      color: var(--link-color);
      text-decoration: none;
      font-size: 1.1em;
    }

    a:hover {
      text-decoration: underline;
      color: #79c0ff;
    }

    .file-meta {
      font-size: 0.85em;
      color: #8b949e;
      display: block;
      margin-top: 0.2rem;
    }

    footer {
      margin-top: 4rem;
      border-top: 1px solid var(--border-color);
      padding-top: 1rem;
      font-size: 0.8em;
      color: #8b949e;
      text-align: center;
    }
  </style>
</head>
<body>

  <header>
    <h1 class="terminal-title">Maschinen-Instanzen // Datenarchiv</h1>
    <div class="system-status">
      STATUS: <span class="status-blink">ONLINE</span> | REPO: UBERSPACE/GITEA | NODE: ACER_SPIN5_CLIENT
    </div>
  </header>

  <main>
    <section class="category-block">
      <h2 class="category-title">00 // System-Konfiguration</h2>
      <ul>
        <li>
          <a href="README.html">README.html</a>
          <span class="file-meta">System-Handbuch, Keymaps, Sync-Architektur &amp; Befehle</span>
        </li>
      </ul>
    </section>

    <section class="category-block">
      <h2 class="category-title">01 // Datenspeicher (Lore-Bibel)</h2>
      <ul>
        <li>
          <a href="lore.html">lore.html</a>
          <span class="file-meta">Das vollständige Master-Dokument (Kompiliertes Buch-Format)</span>
        </li>
        <li>
          <a href="lore.md">lore.md</a>
          <span class="file-meta">Rohdaten-Export im Markdown-Format (LLM / Gitea kompatibel)</span>
        </li>
      </ul>
    </section>

    <section class="category-block">
      <h2 class="category-title">02 // Chroniken &amp; Vektor-Flüge</h2>
      <ul>
        <li>
          <a href="darkCenter.html">darkCenter.html</a>
          <span class="file-meta">Fließtext / Kurzgeschichte (Kompiliert aus AsciiDoc)</span>
        </li>
      </ul>
    </section>
  </main>

  <footer>
    computerHistory $ terminal --session-closed (8 Threads // 8 GB RAM Ok)
  </footer>

</body>
</html>