Initial web presence: bilingual landing page + push-to-deploy pipeline

2026-06-22 12:27:29 +02:00
commit 177d5859e1
4 changed files with 445 additions and 0 deletions
@@ -0,0 +1,73 @@
+name: Deploy to plate-software.de
+
+# Push to main -> this self-hosted runner (cannamanage-act-runner on TrueNAS)
+# rsyncs the static contents of site/ to the IONOS Apache DocumentRoot
+# (/var/www/html on 82.165.206.45). No --delete is used, so unrelated
+# content already on the server (downloads/, owncloud/, .well-known/,
+# index.html.bak.*, etc.) is left untouched.
+#
+# Requires one repo secret (Settings -> Actions -> Secrets):
+#   IONOS_DEPLOY_KEY : private ed25519 key whose public half is in
+#                      root@82.165.206.45:~/.ssh/authorized_keys
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+concurrency:
+  group: ionos-web-deploy
+  cancel-in-progress: false
+
+env:
+  DEPLOY_HOST: 82.165.206.45
+  DEPLOY_USER: root
+  DEPLOY_PATH: /var/www/html/
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out pushed commit
+        uses: actions/checkout@v4
+
+      - name: Ensure rsync + ssh present
+        run: |
+          set -euo pipefail
+          if ! command -v rsync >/dev/null 2>&1; then
+            apt-get update -y && apt-get install -y rsync openssh-client
+          fi
+          rsync --version | head -1
+
+      - name: Load deploy key
+        run: |
+          set -euo pipefail
+          mkdir -p ~/.ssh
+          printf '%s\n' "${{ secrets.IONOS_DEPLOY_KEY }}" > ~/.ssh/id_deploy
+          chmod 600 ~/.ssh/id_deploy
+          ssh-keyscan -H "$DEPLOY_HOST" >> ~/.ssh/known_hosts 2>/dev/null
+          chmod 600 ~/.ssh/known_hosts
+
+      - name: Rsync site/ to IONOS DocumentRoot
+        run: |
+          set -euo pipefail
+          rsync -az --no-perms --no-owner --no-group --omit-dir-times \
+            -e "ssh -i ~/.ssh/id_deploy -o IdentitiesOnly=yes" \
+            site/ "${DEPLOY_USER}@${DEPLOY_HOST}:${DEPLOY_PATH}"
+          echo "✅ Synced site/ -> ${DEPLOY_HOST}:${DEPLOY_PATH}"
+
+      - name: Verify live
+        run: |
+          set -euo pipefail
+          code=$(ssh -i ~/.ssh/id_deploy -o IdentitiesOnly=yes \
+            "${DEPLOY_USER}@${DEPLOY_HOST}" \
+            "curl -s -o /dev/null -w '%{http_code}' http://localhost/ -H 'Host: plate-software.de'")
+          echo "Local origin HTTP $code"
+          [ "$code" = "200" ] || { echo "❌ unexpected status"; exit 1; }
+          echo "✅ plate-software.de serving HTTP 200"
+
+      - name: Summary
+        run: |
+          echo "=== plate-software.de deployed ==="
+          echo "Commit: ${GITHUB_SHA}"
+          echo "Live:   https://plate-software.de"
@@ -0,0 +1,3 @@
+*.swp
+.DS_Store
+*.bak
@@ -0,0 +1,68 @@
+# plate-software.de — Web Presence
+
+Static website for **https://plate-software.de** (the Apache landing page +
+any additional static pages/assets). This repo is the single source of truth
+for the public web presence.
+
+## How deployment works (push-to-deploy, zero SSH)
+
+```
+edit site/  →  git push origin main
+                     │
+                     ▼
+        Gitea Actions (self-hosted runner on TrueNAS)
+                     │  rsync over SSH (dedicated deploy key)
+                     ▼
+        IONOS Apache  /var/www/html/   (82.165.206.45)
+                     │
+                     ▼
+            https://plate-software.de  (TLS via Let's Encrypt)
+```
+
+Just edit files under [`site/`](site/), commit, and push to `main`.
+The [`.gitea/workflows/deploy.yml`](.gitea/workflows/deploy.yml) workflow
+`rsync`s the contents of `site/` to the Apache DocumentRoot. **No SSH access
+to the server is needed** — the runner holds a dedicated deploy key.
+
+`workflow_dispatch` is also enabled, so you can re-deploy manually from the
+Gitea Actions tab without a new commit.
+
+## Repo layout
+
+```
+site/              ← everything in here is published to the web root
+  index.html       ← the bilingual (DE/EN) landing page
+.gitea/workflows/
+  deploy.yml       ← the push-to-deploy pipeline
+```
+
+Add more pages by dropping files into `site/` (e.g. `site/impressum.html`
+→ `https://plate-software.de/impressum.html`). Subfolders work too.
+
+## Safety notes
+
+- **Non-destructive sync.** The workflow uses `rsync` **without** `--delete`,
+  so other content already living on the server (`downloads/`, `owncloud/`,
+  `.well-known/`, ACME challenges, old `index.html.bak.*`) is never removed.
+  If you ever want exact mirroring, add `--delete` — but only after confirming
+  `site/` is the complete intended web root.
+- **Subdomains are separate.** `cannamanage.`, `inspectflow.` and `git.` are
+  their own apps/proxies (frp → TrueNAS). This repo only owns the root domain's
+  static files.
+
+## Required secret
+
+`Settings → Actions → Secrets`:
+
+| Secret | Value |
+|---|---|
+| `IONOS_DEPLOY_KEY` | private ed25519 key whose public half is in `root@82.165.206.45:~/.ssh/authorized_keys` (comment `gitea-actions-plate-software-web`) |
+
+## Local preview
+
+```bash
+cd site && python3 -m http.server 8000   # http://localhost:8000
+```
+
+The language toggle defaults to German; English shows automatically for
+`en-*` browsers, and the choice is remembered in `localStorage`.
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>plate-software.de — Software aus dem Homelab</title>
+  <meta name="description" content="plate-software.de — individuelle Softwarelösungen von Patrick Plate. CannaManage, InspectFlow und mehr, entwickelt und gehostet im eigenen Homelab." />
+  <meta name="author" content="Patrick Plate" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:title" content="plate-software.de — Software aus dem Homelab" />
+  <meta property="og:description" content="Individuelle Softwarelösungen, entwickelt und betrieben im eigenen Homelab." />
+  <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;" />
+  <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>
+</head>
+<body>
+  <header>
+    <div class="wrap nav">
+      <div class="brand"><span class="mark">⬡</span> plate-software.de</div>
+      <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>
+    <!-- HERO -->
+    <section class="hero">
+      <div class="wrap">
+        <span class="pill"><span class="dot"></span>
+          <span data-lang-de>Live aus dem Homelab betrieben</span>
+          <span data-lang-en>Running live from the homelab</span>
+        </span>
+        <h1>
+          <span data-lang-de>Software, die ich <span class="grad">selbst baue</span> und <span class="grad">selbst hoste</span>.</span>
+          <span data-lang-en>Software I <span class="grad">build myself</span> and <span class="grad">host myself</span>.</span>
+        </h1>
+        <p class="lead">
+          <span data-lang-de>Ich bin Patrick Plate — Softwareentwickler. Hier entstehen praxisnahe Webanwendungen für reale Probleme: von der Verwaltung von Cannabis-Anbauvereinigungen bis zur Maschinensicherheit. Entwickelt, getestet und betrieben auf eigener Infrastruktur.</span>
+          <span data-lang-en>I'm Patrick Plate — software engineer. This is where practical web applications for real-world problems take shape: from cannabis club management to machine-safety inspections. Built, tested and operated on my own infrastructure.</span>
+        </p>
+        <div class="cta-row">
+          <a class="btn btn-primary" href="#produkte">
+            <span data-lang-de>Produkte ansehen →</span>
+            <span data-lang-en>Explore products →</span>
+          </a>
+          <a class="btn btn-ghost" href="#kontakt">
+            <span data-lang-de>Kontakt</span>
+            <span data-lang-en>Get in touch</span>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRODUCTS -->
+    <section id="produkte">
+      <div class="wrap">
+        <div class="section-head">
+          <span class="eyebrow" data-lang-de>Produkte &amp; Projekte</span>
+          <span class="eyebrow" data-lang-en>Products &amp; Projects</span>
+          <h2 data-lang-de>Was hier läuft</h2>
+          <h2 data-lang-en>What's running here</h2>
+          <p data-lang-de>Jedes Projekt wird im Homelab gebaut und über eine eigene, abgesicherte Infrastruktur öffentlich bereitgestellt.</p>
+          <p data-lang-en>Each project is built in the homelab and published publicly through a dedicated, secured infrastructure chain.</p>
+        </div>
+
+        <div class="grid">
+          <!-- CannaManage -->
+          <div class="card">
+            <div class="icon">🌿</div>
+            <h3>CannaManage <span class="badge alpha">Alpha</span></h3>
+            <div class="sub" data-lang-de>Vereinsverwaltung für Cannabis-Clubs</div>
+            <div class="sub" data-lang-en>Club management for cannabis associations</div>
+            <p data-lang-de>Komplette Verwaltungsplattform für Cannabis-Anbauvereinigungen nach dem deutschen KCanG: Mitglieder, Anbau-Tracking, Abgabe-Dokumentation, Beitragsverwaltung und DSGVO-konforme Compliance — alles an einem Ort.</p>
+            <p data-lang-en>A complete management platform for German cannabis cultivation associations under the KCanG: members, grow tracking, distribution records, fee management and GDPR-compliant reporting — all in one place.</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>Maschinensicherheit &amp; Prüfungen</div>
+            <div class="sub" data-lang-en>Machine safety &amp; inspections</div>
+            <p data-lang-de>Digitale Erfassung und Nachverfolgung von Maschinensicherheits-Prüfungen: konfigurierbare Fragebögen und Checklisten, Sicherheitsbereiche und Gefahrenstellen, lückenlose Audit-Historie und PDF-Berichte.</p>
+            <p data-lang-en>Digital capture and tracking of machine-safety inspections: configurable questionnaires and checklists, safety areas and danger points, full audit history and PDF reporting.</p>
+            <a class="link" href="https://inspectflow.plate-software.de" target="_blank" rel="noopener">inspectflow.plate-software.de ↗</a>
+          </div>
+
+          <!-- Gitea -->
+          <div class="card">
+            <div class="icon">🧬</div>
+            <h3>Git Hosting <span class="badge tool">Tool</span></h3>
+            <div class="sub" data-lang-de>Selbstgehostete Quellcode-Verwaltung</div>
+            <div class="sub" data-lang-en>Self-hosted source control</div>
+            <p data-lang-de>Eigene Gitea-Instanz als zentrale Quelle der Wahrheit für sämtlichen Code. Mit integrierter CI/CD über Gitea Actions, die jede Anwendung automatisch baut und ausrollt.</p>
+            <p data-lang-en>A private Gitea instance acting as the single source of truth for all code — with integrated CI/CD via Gitea Actions that automatically builds and deploys every application.</p>
+            <a class="link" href="https://git.plate-software.de" target="_blank" rel="noopener">git.plate-software.de ↗</a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ABOUT / STACK -->
+    <section id="ueber">
+      <div class="wrap two-col">
+        <div class="about">
+          <div class="section-head" style="margin-bottom:20px;">
+            <span class="eyebrow" data-lang-de>Über</span>
+            <span class="eyebrow" data-lang-en>About</span>
+            <h2 data-lang-de>Vom Code bis zum Server — alles aus einer Hand</h2>
+            <h2 data-lang-en>From code to server — end to end</h2>
+          </div>
+          <p data-lang-de>Ich entwickle vollständige Anwendungen: robuste Java/Spring-Boot-Backends, moderne Next.js-Frontends und die komplette Infrastruktur, auf der sie laufen. Kein Cloud-Anbieter dazwischen — der Code wird im eigenen Homelab gebaut, in Containern verpackt und über eine selbst aufgebaute, verschlüsselte Veröffentlichungskette ins Netz gebracht.</p>
+          <p data-lang-en>I build complete applications: robust Java/Spring Boot backends, modern Next.js frontends, and the entire infrastructure they run on. No cloud middleman — code is built in my own homelab, packaged into containers, and shipped to the web through a self-built, encrypted publishing chain.</p>
+          <div class="chips">
+            <span class="chip">Java · Spring Boot</span>
+            <span class="chip">Next.js · React</span>
+            <span class="chip">PostgreSQL</span>
+            <span class="chip">Docker</span>
+            <span class="chip">Gitea CI/CD</span>
+            <span class="chip">TrueNAS</span>
+            <span class="chip">Linux</span>
+          </div>
+        </div>
+        <div class="panel">
+          <h4 data-lang-de>Infrastruktur</h4>
+          <h4 data-lang-en>Infrastructure</h4>
+          <div class="stat"><span class="k" data-lang-de>Betrieb</span><span class="k" data-lang-en>Operations</span><span class="v" data-lang-de>Eigenes Homelab</span><span class="v" data-lang-en>Own homelab</span></div>
+          <div class="stat"><span class="k" data-lang-de>Auslieferung</span><span class="k" data-lang-en>Delivery</span><span class="v">CI/CD · Docker</span></div>
+          <div class="stat"><span class="k" data-lang-de>Verschlüsselung</span><span class="k" data-lang-en>Encryption</span><span class="v">HTTPS · Let's Encrypt</span></div>
+          <div class="stat"><span class="k" data-lang-de>Datenschutz</span><span class="k" data-lang-en>Privacy</span><span class="v" data-lang-de>DSGVO-konform</span><span class="v" data-lang-en>GDPR-compliant</span></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CONTACT -->
+    <section id="kontakt">
+      <div class="wrap">
+        <div class="section-head">
+          <span class="eyebrow" data-lang-de>Kontakt</span>
+          <span class="eyebrow" data-lang-en>Contact</span>
+          <h2 data-lang-de>Interesse oder Fragen?</h2>
+          <h2 data-lang-en>Interested or got questions?</h2>
+          <p data-lang-de>Schreib mir gerne — ob zu einem der Produkte oder zu einem eigenen Software-Vorhaben.</p>
+          <p data-lang-en>Feel free to reach out — about any of the products or your own software project.</p>
+        </div>
+        <a class="btn btn-primary" href="mailto:patrick@plate-software.de">
+          <span data-lang-de>✉ patrick@plate-software.de</span>
+          <span data-lang-en>✉ patrick@plate-software.de</span>
+        </a>
+      </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="https://cannamanage.plate-software.de" target="_blank" rel="noopener">CannaManage</a>
+        <a href="https://inspectflow.plate-software.de" target="_blank" rel="noopener">InspectFlow</a>
+        <a href="https://git.plate-software.de" target="_blank" rel="noopener">Git</a>
+      </div>
+    </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');
+      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'));
+      document.getElementById('year').textContent = new Date().getFullYear();
+    })();
+  </script>
+</body>
+</html>