Landingpage (site/) mit Screenshots und Vorschau

site/index.html

@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ByteClaw – selbst gehosteter, schlanker KI-Assistent</title>
+<meta name="description" content="ByteClaw ist ein selbst gehosteter, schlanker KI-Assistent: Go-Backend plus native Android-App. OpenAI-kompatible Anbieter, Live-Streaming, Tools, sichere Defaults.">
+<meta name="theme-color" content="#14202E">
+<meta property="og:type" content="website">
+<meta property="og:title" content="ByteClaw – selbst gehosteter KI-Assistent">
+<meta property="og:description" content="Go-Backend + Android-App. OpenAI, OpenRouter, Ollama, Dahl, GonkaRouter oder eigener Endpunkt.">
+<meta property="og:image" content="assets/og.png">
+<meta property="og:locale" content="de_DE">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="icon" href="assets/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="assets/icon-180.png">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header class="nav">
+  <a class="brand" href="#top"><img src="assets/icon.svg" alt="" width="32" height="32">ByteClaw</a>
+  <nav aria-label="Hauptnavigation">
+    <a href="#features">Features</a><a href="#screens">Screenshots</a><a href="#quickstart">Quickstart</a>
+  </nav>
+</header>
+
+<main id="top">
+<section class="hero">
+  <div class="hero-text">
+    <img class="hero-icon" src="assets/icon.svg" alt="ByteClaw-Logo: drei Krallenspuren und Byte-Bits" width="112" height="112">
+    <h1>ByteClaw</h1>
+    <p class="claim">Selbst gehosteter, schlanker KI-Assistent – <span>Go-Backend</span> + <span>Android-App</span>.</p>
+    <p class="lead">Ein einzelnes Go-Binary mit SQLite spricht mit jedem OpenAI-kompatiblen Anbieter, nutzt Tools und streamt Antworten live in die native Android-App. Deine Schlüssel bleiben auf deinem Server.</p>
+    <div class="cta">
+      <span class="btn btn-primary" aria-disabled="true">Bald verfügbar</span>
+      <a class="btn btn-ghost" href="#quickstart">Quickstart ansehen</a>
+    </div>
+  </div>
+  <div class="hero-phones" aria-hidden="true">
+    <div class="phone tilt-l"><picture><source srcset="assets/chat_dark.webp" type="image/webp"><img src="assets/chat_dark.png" alt="" width="450" height="1000"></picture></div>
+    <div class="phone tilt-r"><picture><source srcset="assets/providers_light.webp" type="image/webp"><img src="assets/providers_light.png" alt="" width="450" height="1000"></picture></div>
+  </div>
+</section>
+
+<section id="features" class="section">
+  <h2>Was ByteClaw kann</h2>
+  <div class="grid">
+    <article class="card"><h3>Viele Anbieter</h3><p>Presets für OpenAI, OpenRouter, Ollama, Dahl und GonkaRouter – oder ein eigener OpenAI-kompatibler Endpunkt.</p></article>
+    <article class="card"><h3>Live-Streaming</h3><p>Antworten erscheinen Wort für Wort per WebSocket in der App.</p></article>
+    <article class="card"><h3>Tools</h3><p>Uhrzeit, Web-Abruf mit SSRF-Schutz, Datei-Tools im Workspace und ein optionales, streng begrenztes Shell-Tool.</p></article>
+    <article class="card"><h3>Abbrechen</h3><p>Stopp-Button in der App: Der Abbruch reicht bis zum Anbieter, die Teilantwort bleibt gespeichert.</p></article>
+    <article class="card"><h3>Session-Zusammenfassung</h3><p>Lange Chats werden automatisch per LLM zusammengefasst – die Originalnachrichten bleiben erhalten.</p></article>
+    <article class="card"><h3>Anbieter pro Session</h3><p>Global umschalten oder für einzelne Chats ein anderes Modell wählen – direkt aus der App.</p></article>
+    <article class="card"><h3>Sichere Defaults</h3><p>Token-Pflicht, nur localhost, Origin-Prüfung, TLS immer an, Keys nie in der App, Release nur HTTPS.</p></article>
+    <article class="card"><h3>ARM &amp; Termux</h3><p>Statische Builds für Linux amd64, arm64 und armv7 sowie Termux auf Android.</p></article>
+  </div>
+</section>
+
+<section id="screens" class="section">
+  <h2>Screenshots</h2>
+  <p class="sub">Android-App mit Demo-Daten, hell und dunkel.</p>
+  <div class="gallery">
+    <figure><div class="phone"><picture><source srcset="assets/chat_light.webp" type="image/webp"><img loading="lazy" src="assets/chat_light.png" alt="Chat mit Tool-Aufrufen und Stopp-Button, helles Design" width="450" height="1000"></picture></div><figcaption>Chat mit Tools &amp; Stopp</figcaption></figure>
+    <figure><div class="phone"><picture><source srcset="assets/chat_provider_dark.webp" type="image/webp"><img loading="lazy" src="assets/chat_provider_dark.png" alt="Chat mit Anbieter-Auswahl pro Session im Header, dunkles Design" width="450" height="1000"></picture></div><figcaption>Anbieter pro Session</figcaption></figure>
+    <figure><div class="phone"><picture><source srcset="assets/providers_dark.webp" type="image/webp"><img loading="lazy" src="assets/providers_dark.png" alt="Einstellungen mit Anbieter- und Modellauswahl, dunkles Design" width="450" height="1000"></picture></div><figcaption>Anbieter &amp; Modell</figcaption></figure>
+    <figure><div class="phone"><picture><source srcset="assets/sessions_light.webp" type="image/webp"><img loading="lazy" src="assets/sessions_light.png" alt="Liste der Sessions, helles Design" width="450" height="1000"></picture></div><figcaption>Sessions</figcaption></figure>
+    <figure><div class="phone"><picture><source srcset="assets/settings_light.webp" type="image/webp"><img loading="lazy" src="assets/settings_light.png" alt="Einstellungen mit Server-URL und Token, helles Design" width="450" height="1000"></picture></div><figcaption>Verbindung</figcaption></figure>
+    <figure><div class="phone"><picture><source srcset="assets/chat_dark.webp" type="image/webp"><img loading="lazy" src="assets/chat_dark.png" alt="Chat, dunkles Design" width="450" height="1000"></picture></div><figcaption>Dunkles Design</figcaption></figure>
+  </div>
+</section>
+
+<section id="quickstart" class="section">
+  <h2>Quickstart</h2>
+  <p class="sub">Backend starten (Go 1.25), dann in der App Server-URL und Token eintragen.</p>
+  <div class="code">
+    <button class="copy" type="button" data-copy="qs">Kopieren</button>
+<pre id="qs"><code>cp config.example.yaml config.yaml
+export BYTECLAW_AUTH_TOKEN=$(openssl rand -hex 32)
+export BYTECLAW_LLM_PROVIDER=dahl     # openai | openrouter | ollama | dahl | gonkarouter | custom
+export DAHL_API_KEY=...               # Key bleibt auf dem Server
+make run
+
+curl -H "Authorization: Bearer $BYTECLAW_AUTH_TOKEN" \
+  -d '{"text":"Wie spät ist es in Berlin?"}' localhost:8787/api/chat</code></pre>
+  </div>
+</section>
+</main>
+
+<footer class="footer">
+  <p><img src="assets/icon.svg" alt="" width="20" height="20"> ByteClaw · selbst gehostet, Go + Android</p>
+  <p class="muted">Screenshots zeigen Demo-Daten. Download folgt.</p>
+</footer>
+<script>
+document.querySelectorAll('[data-copy]').forEach(b=>b.addEventListener('click',()=>{
+  navigator.clipboard?.writeText(document.getElementById(b.dataset.copy).innerText).then(()=>{b.textContent='Kopiert';setTimeout(()=>b.textContent='Kopieren',1500)});
+}));
+</script>
+</body>
+</html>