Merge pull request 'Feature/multipage and deploy badge' (#1 ) from feature/multipage-and-deploy-badge into main

Reviewed-on: #1
feat(site): add robots.txt and sitemap.xml
2026-06-22 17:38:07 +02:00 · 2026-06-22 17:28:22 +02:00 · 2026-06-22 17:28:13 +02:00 · 2026-06-22 17:26:56 +02:00
7 changed files with 407 additions and 118 deletions
@@ -51,6 +51,18 @@ jobs:
          ssh-keyscan -H "$DEPLOY_HOST" >> ~/.ssh/known_hosts 2>/dev/null
          chmod 600 ~/.ssh/known_hosts

+      - name: Inject deploy info
+        run: |
+          set -euo pipefail
+          SHA_SHORT=$(echo "${GITHUB_SHA}" | cut -c1-7)
+          DEPLOY_TS=$(date -u +"%Y-%m-%d %H:%M UTC")
+          DEPLOY_INFO="${SHA_SHORT} · ${DEPLOY_TS}"
+          # In-place substitute the <!--DEPLOY_INFO--> placeholder in all HTML files.
+          # Pipe `|` is used as the sed delimiter to avoid clashing with `/` in the timestamp.
+          # GNU sed on the Ubuntu runner accepts `-i` without a backup arg.
+          find site -name "*.html" -exec sed -i "s|<!--DEPLOY_INFO-->|${DEPLOY_INFO}|g" {} +
+          echo "Injected deploy info: ${DEPLOY_INFO}"
+
      - name: Rsync site/ to IONOS DocumentRoot
        run: |
          set -euo pipefail
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Apps — plate-software.de</title>
+  <meta name="description" content="Die Anwendungen, die aus dem plate-software-Homelab live laufen: CannaManage, InspectFlow und mehr." />
+  <meta name="author" content="Patrick Plate" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:title" content="Apps — plate-software.de" />
+  <meta property="og:description" content="Die Anwendungen, die aus dem plate-software-Homelab live laufen." />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="de_DE" />
+  <meta property="og:locale:alternate" content="en_US" />
+  <link rel="icon" href="data:image/svg+xml,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;⬡&lt;/text&gt;&lt;/svg&gt;" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+<body>
+  <header>
+    <div class="wrap nav">
+      <a class="brand" href="/"><span class="mark">⬡</span> plate-software.de</a>
+      <nav class="nav-links">
+        <a href="/">
+          <span data-lang-de>Start</span>
+          <span data-lang-en>Home</span>
+        </a>
+        <a href="/apps/" class="active">Apps</a>
+        <a href="/homelab/">Homelab</a>
+      </nav>
+      <div class="lang-toggle" role="group" aria-label="Language">
+        <button id="btn-de" class="active" onclick="setLang('de')">DE</button>
+        <button id="btn-en" onclick="setLang('en')">EN</button>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero" style="padding: 56px 0 24px;">
+      <div class="wrap">
+        <a class="back-link" href="/">
+          <span data-lang-de>← Zurück</span>
+          <span data-lang-en>← Back</span>
+        </a>
+        <h1>
+          <span data-lang-de>Apps aus dem <span class="grad">Homelab</span></span>
+          <span data-lang-en>Apps from the <span class="grad">homelab</span></span>
+        </h1>
+        <p class="lead">
+          <span data-lang-de>Built in the homelab, served from IONOS — same continuous-deploy story as this page itself.</span>
+          <span data-lang-en>Built in the homelab, served from IONOS — same continuous-deploy story as this page itself.</span>
+        </p>
+      </div>
+    </section>
+
+    <section style="padding: 24px 0 56px;">
+      <div class="wrap">
+        <div class="grid">
+          <!-- CannaManage -->
+          <div class="card">
+            <div class="icon">🌿</div>
+            <h3>CannaManage <span class="badge live">🟢 Live</span></h3>
+            <div class="sub" data-lang-de>Mitgliederverwaltung für Cannabis-Anbauvereinigungen</div>
+            <div class="sub" data-lang-en>Member management for German Cannabis Cultivation Associations</div>
+            <p data-lang-de>Mitgliederverwaltung für Cannabis-Anbauvereinigungen nach KCanG. Mitglieder, Beitragszahlungen, Abgabemengen-Tracking, gerichtsfeste Audit-Logs.</p>
+            <p data-lang-en>Member management for German Cannabis Cultivation Associations (CSCs) per KCanG. Members, dues, distribution tracking, court-proof audit logs.</p>
+            <a class="link" href="https://cannamanage.plate-software.de" target="_blank" rel="noopener">cannamanage.plate-software.de ↗</a>
+          </div>
+
+          <!-- InspectFlow -->
+          <div class="card">
+            <div class="icon">🛡️</div>
+            <h3>InspectFlow <span class="badge live">🟢 Live</span></h3>
+            <div class="sub" data-lang-de>Maschinen- und Sicherheitsinspektionen</div>
+            <div class="sub" data-lang-en>Machine and safety inspections</div>
+            <p data-lang-de>Maschinen- und Sicherheitsinspektionen für Produktionsbetriebe. Fragebogen-Engine, Tickets, Archiv, Audit-Trail mit Hibernate Envers.</p>
+            <p data-lang-en>Machine and safety inspections for production facilities. Questionnaire engine, tickets, archive, audit trail via Hibernate Envers.</p>
+            <a class="link" href="https://inspectflow.plate-software.de" target="_blank" rel="noopener">inspectflow.plate-software.de ↗</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="wrap foot-row">
+      <div>© <span id="year"></span> Patrick Plate · plate-software.de</div>
+      <div class="foot-links">
+        <a href="/">
+          <span data-lang-de>Start</span>
+          <span data-lang-en>Home</span>
+        </a>
+        <a href="/apps/">Apps</a>
+        <a href="/homelab/">Homelab</a>
+      </div>
+    </div>
+    <div class="wrap">
+      <p class="deploy-badge" data-de="Letzter Deploy: <!--DEPLOY_INFO-->" data-en="Last deploy: <!--DEPLOY_INFO-->"></p>
+    </div>
+  </footer>
+
+  <script>
+    function setLang(lang) {
+      document.documentElement.lang = lang;
+      document.getElementById('btn-de').classList.toggle('active', lang === 'de');
+      document.getElementById('btn-en').classList.toggle('active', lang === 'en');
+      document.querySelectorAll('[data-de][data-en]').forEach(function (el) {
+        el.textContent = el.getAttribute(lang === 'en' ? 'data-en' : 'data-de');
+      });
+      try { localStorage.setItem('ps-lang', lang); } catch (e) {}
+    }
+    (function () {
+      var saved;
+      try { saved = localStorage.getItem('ps-lang'); } catch (e) {}
+      var nav = (navigator.language || 'de').slice(0, 2);
+      setLang(saved || (nav === 'en' ? 'en' : 'de'));
+      var y = document.getElementById('year');
+      if (y) y.textContent = new Date().getFullYear();
+    })();
+  </script>
+</body>
+</html>
@@ -0,0 +1,132 @@
+:root {
+  --bg: #0c0f17;
+  --bg-soft: #131826;
+  --card: #161c2d;
+  --card-hover: #1d2438;
+  --border: #232b40;
+  --text: #e6eaf3;
+  --text-dim: #9aa4bd;
+  --accent: #4f8cff;
+  --accent-soft: #6ea0ff;
+  --green: #36d399;
+  --amber: #fbbd23;
+  --radius: 16px;
+  --maxw: 1080px;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  background: radial-gradient(1200px 600px at 70% -10%, #1a2238 0%, var(--bg) 55%) no-repeat, var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+a { color: inherit; text-decoration: none; }
+.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
+
+/* Top bar */
+header {
+  position: sticky; top: 0; z-index: 50;
+  backdrop-filter: blur(12px);
+  background: rgba(12,15,23,0.72);
+  border-bottom: 1px solid var(--border);
+}
+.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; }
+.brand .mark { color: var(--accent); font-size: 1.4rem; line-height: 1; }
+.lang-toggle { display: flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
+.lang-toggle button {
+  cursor: pointer; border: none; background: transparent; color: var(--text-dim);
+  font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; transition: all .18s;
+}
+.lang-toggle button.active { background: var(--accent); color: #fff; }
+
+/* Primary nav links (multi-page) */
+.nav-links { display: flex; gap: 22px; align-items: center; }
+.nav-links a { color: var(--text-dim); font-size: 0.92rem; font-weight: 600; transition: color .18s; }
+.nav-links a:hover, .nav-links a.active { color: var(--text); }
+
+/* Back link */
+.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.9rem; font-weight: 600; margin-bottom: 24px; transition: color .18s; }
+.back-link:hover { color: var(--accent-soft); }
+
+/* Hero */
+.hero { padding: 84px 0 56px; }
+.pill {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: var(--bg-soft); border: 1px solid var(--border);
+  color: var(--text-dim); font-size: 0.8rem; font-weight: 600;
+  padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
+}
+.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
+.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 20px; }
+.hero h1 .grad { background: linear-gradient(90deg, var(--accent-soft), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-dim); max-width: 640px; margin-bottom: 32px; }
+.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
+  border: 1px solid var(--border); transition: all .18s;
+}
+.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn-primary:hover { background: var(--accent-soft); transform: translateY(-1px); }
+.btn-ghost:hover { background: var(--card-hover); transform: translateY(-1px); }
+
+/* Sections */
+section { padding: 56px 0; }
+.section-head { margin-bottom: 36px; }
+.section-head .eyebrow { color: var(--accent); font-weight: 700; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; }
+.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.3px; margin-top: 8px; }
+.section-head p { color: var(--text-dim); max-width: 620px; margin-top: 10px; }
+
+/* Product grid */
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
+.card {
+  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 26px; transition: all .2s; display: flex; flex-direction: column;
+}
+.card:hover { background: var(--card-hover); border-color: #2e3954; transform: translateY(-3px); }
+.card .icon { font-size: 1.9rem; margin-bottom: 14px; }
+.card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.badge { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; text-transform: uppercase; }
+.badge.live { background: rgba(54,211,153,0.15); color: var(--green); border: 1px solid rgba(54,211,153,0.35); }
+.badge.alpha { background: rgba(251,189,35,0.13); color: var(--amber); border: 1px solid rgba(251,189,35,0.32); }
+.badge.tool { background: rgba(79,140,255,0.13); color: var(--accent-soft); border: 1px solid rgba(79,140,255,0.32); }
+.card .sub { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 14px; }
+.card p { color: var(--text-dim); font-size: 0.95rem; flex-grow: 1; }
+.card .link { margin-top: 18px; color: var(--accent-soft); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
+.card .link.disabled { color: var(--text-dim); opacity: 0.7; }
+
+/* Stack / about */
+.two-col { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
+@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
+.about p { color: var(--text-dim); margin-bottom: 16px; }
+.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
+.chip { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; padding: 7px 13px; border-radius: 8px; }
+.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
+.panel h4 { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
+.stat { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; }
+.stat:last-child { border-bottom: none; }
+.stat .k { color: var(--text-dim); }
+.stat .v { font-weight: 700; }
+
+/* Prose (article body for /apps and /homelab) */
+.prose { max-width: 720px; }
+.prose p { color: var(--text-dim); margin-bottom: 18px; font-size: 1.02rem; }
+.prose h3 { color: var(--text); font-size: 1.35rem; font-weight: 700; margin-top: 36px; margin-bottom: 12px; letter-spacing: -0.2px; }
+.prose strong { color: var(--text); font-weight: 700; }
+.prose a { color: var(--accent-soft); border-bottom: 1px dashed var(--accent-soft); }
+.prose a:hover { color: var(--accent); }
+
+/* Footer */
+footer { border-top: 1px solid var(--border); padding: 36px 0; color: var(--text-dim); font-size: 0.88rem; }
+.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
+.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
+.foot-links a:hover { color: var(--text); }
+.deploy-badge { font-size: 0.75rem; opacity: 0.5; margin-top: 1rem; }
+
+[data-lang-en] { display: none; }
+html[lang="en"] [data-lang-de] { display: none; }
+html[lang="en"] [data-lang-en] { display: revert; }
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Homelab — plate-software.de</title>
+  <meta name="description" content="Wie alles auf *.plate-software.de aus einem TrueNAS zu Hause, einem winzigen VPS und einem IONOS-Reverse-Proxy ins Netz kommt." />
+  <meta name="author" content="Patrick Plate" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:title" content="Homelab — plate-software.de" />
+  <meta property="og:description" content="TrueNAS + frps + IONOS-Reverse-Proxy: wie aus „push to Gitea" in unter einer Minute öffentliches HTTPS wird." />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="de_DE" />
+  <meta property="og:locale:alternate" content="en_US" />
+  <link rel="icon" href="data:image/svg+xml,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;⬡&lt;/text&gt;&lt;/svg&gt;" />
+  <link rel="stylesheet" href="/assets/style.css" />
+</head>
+<body>
+  <header>
+    <div class="wrap nav">
+      <a class="brand" href="/"><span class="mark">⬡</span> plate-software.de</a>
+      <nav class="nav-links">
+        <a href="/">
+          <span data-lang-de>Start</span>
+          <span data-lang-en>Home</span>
+        </a>
+        <a href="/apps/">Apps</a>
+        <a href="/homelab/" class="active">Homelab</a>
+      </nav>
+      <div class="lang-toggle" role="group" aria-label="Language">
+        <button id="btn-de" class="active" onclick="setLang('de')">DE</button>
+        <button id="btn-en" onclick="setLang('en')">EN</button>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero" style="padding: 56px 0 24px;">
+      <div class="wrap">
+        <a class="back-link" href="/">
+          <span data-lang-de>← Zurück</span>
+          <span data-lang-en>← Back</span>
+        </a>
+        <h1>
+          <span data-lang-de>Das <span class="grad">Homelab</span></span>
+          <span data-lang-en>The <span class="grad">Homelab</span></span>
+        </h1>
+      </div>
+    </section>
+
+    <section style="padding: 0 0 56px;">
+      <div class="wrap">
+        <div class="prose">
+          <p data-lang-de>Alles, was unter *.plate-software.de erreichbar ist, läuft auf einem TrueNAS bei mir zu Hause. Öffentlich wird das Ganze über einen winzigen VPS, der nichts anderes tut, als einen frps-Tunnel zu halten — davor steht ein IONOS-Reverse-Proxy, der TLS terminiert. Ein <code>git push</code> nach Gitea, der Runner baut das Docker-Image, und in unter einer Minute steht die neue Version öffentlich unter HTTPS.</p>
+          <p data-lang-en>Everything you can reach under *.plate-software.de runs on a TrueNAS at home. The whole thing is exposed publicly through a tiny VPS whose only job is to hold an frps tunnel — fronted by an IONOS reverse-proxy that terminates TLS. A <code>git push</code> to Gitea, the runner builds the Docker image, and in under a minute the new version is live on public HTTPS.</p>
+
+          <h3 data-lang-de>Der Stack</h3>
+          <h3 data-lang-en>The stack</h3>
+          <p data-lang-de>TrueNAS SCALE hostet Gitea, den act_runner und pro App einen Docker-Stack. Der VPS fährt ausschließlich frps (frp-Server) — kein Anwendungs-Code, keine Datenbank, einfach nur Tunnel-Endpunkt. Eingehender Traffic landet zuerst auf IONOS-Apache-vHosts, die per Reverse-Proxy in den frps-Tunnel zeigen. Let's-Encrypt-Zertifikate kommen via acme.sh.</p>
+          <p data-lang-en>TrueNAS SCALE hosts Gitea, the act_runner, and a per-app Docker stack. The VPS runs only frps (the frp server) — no application code, no database, just a tunnel endpoint. Public traffic enters IONOS Apache vhosts that reverse-proxy into the frps tunnel. Let's Encrypt certificates via acme.sh.</p>
+
+          <h3 data-lang-de>Warum so?</h3>
+          <h3 data-lang-en>Why this setup?</h3>
+          <p data-lang-de>Vor allem die Kosten: rund 10 €/Monat für VPS und Domain — bei einer vergleichbar gemanageten Hosting-Lösung wären es eher 80 €. Dazu volle Kontrolle, kein Vendor-Lock-in und ehrlich gesagt: Infrastruktur zu bauen ist die halbe Miete vom Spaß.</p>
+          <p data-lang-en>Mostly cost: about €10/month for VPS plus domain, versus around €80/month for an equivalent managed hosting setup. Add full control, no vendor lock-in, and frankly — building the infrastructure is half of why this is fun.</p>
+
+          <h3 data-lang-de>Was ich gelernt habe</h3>
+          <h3 data-lang-en>Lessons learned</h3>
+          <p data-lang-de>Zwei systemische Stolpersteine sind hängen geblieben: in einer Proxy-Kette muss <code>auth()</code> von NextAuth verwendet werden, <code>getToken()</code> bricht durch die mehrfachen Hops. Und die DNS-A-Records zeigen auf IONOS, nicht auf den VPS — wer das vergisst, wundert sich lange über kaputtes Routing.</p>
+          <p data-lang-en>Two systemic gotchas have stuck with me: in a proxy chain you need NextAuth's <code>auth()</code>, not <code>getToken()</code> — the latter breaks across the multiple hops. And the DNS A-records point to IONOS, not the VPS — forget that and you'll spend a long time wondering why routing is broken.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="wrap foot-row">
+      <div>© <span id="year"></span> Patrick Plate · plate-software.de</div>
+      <div class="foot-links">
+        <a href="/">
+          <span data-lang-de>Start</span>
+          <span data-lang-en>Home</span>
+        </a>
+        <a href="/apps/">Apps</a>
+        <a href="/homelab/">Homelab</a>
+      </div>
+    </div>
+    <div class="wrap">
+      <p class="deploy-badge" data-de="Letzter Deploy: <!--DEPLOY_INFO-->" data-en="Last deploy: <!--DEPLOY_INFO-->"></p>
+    </div>
+  </footer>
+
+  <script>
+    function setLang(lang) {
+      document.documentElement.lang = lang;
+      document.getElementById('btn-de').classList.toggle('active', lang === 'de');
+      document.getElementById('btn-en').classList.toggle('active', lang === 'en');
+      document.querySelectorAll('[data-de][data-en]').forEach(function (el) {
+        el.textContent = el.getAttribute(lang === 'en' ? 'data-en' : 'data-de');
+      });
+      try { localStorage.setItem('ps-lang', lang); } catch (e) {}
+    }
+    (function () {
+      var saved;
+      try { saved = localStorage.getItem('ps-lang'); } catch (e) {}
+      var nav = (navigator.language || 'de').slice(0, 2);
+      setLang(saved || (nav === 'en' ? 'en' : 'de'));
+      var y = document.getElementById('year');
+      if (y) y.textContent = new Date().getFullYear();
+    })();
+  </script>
+</body>
+</html>
@@ -13,127 +13,20 @@
  <meta property="og:locale" content="de_DE" />
  <meta property="og:locale:alternate" content="en_US" />
  <link rel="icon" href="data:image/svg+xml,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;⬡&lt;/text&gt;&lt;/svg&gt;" />
-  <style>
-    :root {
-      --bg: #0c0f17;
-      --bg-soft: #131826;
-      --card: #161c2d;
-      --card-hover: #1d2438;
-      --border: #232b40;
-      --text: #e6eaf3;
-      --text-dim: #9aa4bd;
-      --accent: #4f8cff;
-      --accent-soft: #6ea0ff;
-      --green: #36d399;
-      --amber: #fbbd23;
-      --radius: 16px;
-      --maxw: 1080px;
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html { scroll-behavior: smooth; }
-    body {
-      background: radial-gradient(1200px 600px at 70% -10%, #1a2238 0%, var(--bg) 55%) no-repeat, var(--bg);
-      color: var(--text);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-      min-height: 100vh;
-    }
-    a { color: inherit; text-decoration: none; }
-    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
-
-    /* Top bar */
-    header {
-      position: sticky; top: 0; z-index: 50;
-      backdrop-filter: blur(12px);
-      background: rgba(12,15,23,0.72);
-      border-bottom: 1px solid var(--border);
-    }
-    .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
-    .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; }
-    .brand .mark { color: var(--accent); font-size: 1.4rem; line-height: 1; }
-    .lang-toggle { display: flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
-    .lang-toggle button {
-      cursor: pointer; border: none; background: transparent; color: var(--text-dim);
-      font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; transition: all .18s;
-    }
-    .lang-toggle button.active { background: var(--accent); color: #fff; }
-
-    /* Hero */
-    .hero { padding: 84px 0 56px; }
-    .pill {
-      display: inline-flex; align-items: center; gap: 8px;
-      background: var(--bg-soft); border: 1px solid var(--border);
-      color: var(--text-dim); font-size: 0.8rem; font-weight: 600;
-      padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
-    }
-    .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
-    .hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 20px; }
-    .hero h1 .grad { background: linear-gradient(90deg, var(--accent-soft), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
-    .hero p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-dim); max-width: 640px; margin-bottom: 32px; }
-    .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
-    .btn {
-      display: inline-flex; align-items: center; gap: 8px;
-      padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
-      border: 1px solid var(--border); transition: all .18s;
-    }
-    .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
-    .btn-primary:hover { background: var(--accent-soft); transform: translateY(-1px); }
-    .btn-ghost:hover { background: var(--card-hover); transform: translateY(-1px); }
-
-    /* Sections */
-    section { padding: 56px 0; }
-    .section-head { margin-bottom: 36px; }
-    .section-head .eyebrow { color: var(--accent); font-weight: 700; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; }
-    .section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.3px; margin-top: 8px; }
-    .section-head p { color: var(--text-dim); max-width: 620px; margin-top: 10px; }
-
-    /* Product grid */
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
-    .card {
-      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
-      padding: 26px; transition: all .2s; display: flex; flex-direction: column;
-    }
-    .card:hover { background: var(--card-hover); border-color: #2e3954; transform: translateY(-3px); }
-    .card .icon { font-size: 1.9rem; margin-bottom: 14px; }
-    .card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-    .badge { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; text-transform: uppercase; }
-    .badge.live { background: rgba(54,211,153,0.15); color: var(--green); border: 1px solid rgba(54,211,153,0.35); }
-    .badge.alpha { background: rgba(251,189,35,0.13); color: var(--amber); border: 1px solid rgba(251,189,35,0.32); }
-    .badge.tool { background: rgba(79,140,255,0.13); color: var(--accent-soft); border: 1px solid rgba(79,140,255,0.32); }
-    .card .sub { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 14px; }
-    .card p { color: var(--text-dim); font-size: 0.95rem; flex-grow: 1; }
-    .card .link { margin-top: 18px; color: var(--accent-soft); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
-    .card .link.disabled { color: var(--text-dim); opacity: 0.7; }
-
-    /* Stack / about */
-    .two-col { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
-    @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
-    .about p { color: var(--text-dim); margin-bottom: 16px; }
-    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
-    .chip { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; padding: 7px 13px; border-radius: 8px; }
-    .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
-    .panel h4 { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
-    .stat { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; }
-    .stat:last-child { border-bottom: none; }
-    .stat .k { color: var(--text-dim); }
-    .stat .v { font-weight: 700; }
-
-    /* Footer */
-    footer { border-top: 1px solid var(--border); padding: 36px 0; color: var(--text-dim); font-size: 0.88rem; }
-    .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
-    .foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
-    .foot-links a:hover { color: var(--text); }
-
-    [data-lang-en] { display: none; }
-    html[lang="en"] [data-lang-de] { display: none; }
-    html[lang="en"] [data-lang-en] { display: revert; }
-  </style>
+  <link rel="stylesheet" href="/assets/style.css" />
 </head>
 <body>
  <header>
    <div class="wrap nav">
-      <div class="brand"><span class="mark">⬡</span> plate-software.de</div>
+      <a class="brand" href="/"><span class="mark">⬡</span> plate-software.de</a>
+      <nav class="nav-links">
+        <a href="/" class="active">
+          <span data-lang-de>Start</span>
+          <span data-lang-en>Home</span>
+        </a>
+        <a href="/apps/">Apps</a>
+        <a href="/homelab/">Homelab</a>
+      </nav>
      <div class="lang-toggle" role="group" aria-label="Language">
        <button id="btn-de" class="active" onclick="setLang('de')">DE</button>
        <button id="btn-en" onclick="setLang('en')">EN</button>
@@ -280,6 +173,9 @@
        <a href="https://git.plate-software.de" target="_blank" rel="noopener">Git</a>
      </div>
    </div>
+    <div class="wrap">
+      <p class="deploy-badge" data-de="Letzter Deploy: <!--DEPLOY_INFO-->" data-en="Last deploy: <!--DEPLOY_INFO-->"></p>
+    </div>
  </footer>

  <script>
@@ -287,6 +183,10 @@
      document.documentElement.lang = lang;
      document.getElementById('btn-de').classList.toggle('active', lang === 'de');
      document.getElementById('btn-en').classList.toggle('active', lang === 'en');
+      // Populate elements that use data-de / data-en attribute pattern (e.g. deploy badge)
+      document.querySelectorAll('[data-de][data-en]').forEach(function (el) {
+        el.textContent = el.getAttribute(lang === 'en' ? 'data-en' : 'data-de');
+      });
      try { localStorage.setItem('ps-lang', lang); } catch (e) {}
    }
    (function () {
@@ -294,7 +194,8 @@
      try { saved = localStorage.getItem('ps-lang'); } catch (e) {}
      var nav = (navigator.language || 'de').slice(0, 2);
      setLang(saved || (nav === 'en' ? 'en' : 'de'));
-      document.getElementById('year').textContent = new Date().getFullYear();
+      var y = document.getElementById('year');
+      if (y) y.textContent = new Date().getFullYear();
    })();
  </script>
 </body>
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://plate-software.de/sitemap.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://plate-software.de/</loc></url>
+  <url><loc>https://plate-software.de/apps/</loc></url>
+  <url><loc>https://plate-software.de/homelab/</loc></url>
+</urlset>
Author	SHA1	Message	Date
pplate	7b18759c0b	Merge pull request 'Feature/multipage and deploy badge' (#1 ) from feature/multipage-and-deploy-badge into main Deploy to plate-software.de / deploy (push) Successful in 21s Details Reviewed-on: #1	2026-06-22 17:38:07 +02:00
Patrick Plate	6d724258fc	feat(site): add robots.txt and sitemap.xml	2026-06-22 17:28:22 +02:00
Patrick Plate	29015438e8	feat(site): add /apps and /homelab pages with shared nav	2026-06-22 17:28:13 +02:00
Patrick Plate	508ad9a7f8	refactor(site): extract CSS to assets/style.css and add deploy badge placeholder	2026-06-22 17:26:56 +02:00