From f1abc2cd2394abe08487244ca98f4c09f19748ad Mon Sep 17 00:00:00 2001
From: Jens Reinemann <reinemann@euris.de>
Date: Sun, 17 May 2026 17:24:07 +0200
Subject: [PATCH] style: Homepage Prepper-Redesign (Rost, Stahl, Beton)

- Beton-Textur: staerkerer Noise-Overlay (6 Octaves, opacity 0.12)
- Rost-Flecken: radiale Gradients als zweites Body-Overlay
- Stahl-Panel: metallisches Panel mit Gradient, Inset-Schatten, 4 Nieten
- Hazard-Bar: Warnstreifen am oberen Rand
- Rost-Trennlinie: oxidierter Gradient-Divider unter dem Titel
- Militaer-Typografie: Black Ops One fuer Titel (Stencil-Look)
- QR-Code eingelassen in dunklen Ausschnitt mit Inset-Schatten
- Download-Button: Rost-Gradient mit Glueh-Effekt beim Hover
- Footer-Stahlplatte: Tags (Android, Offline-faehig, Lokal)
- Subtitle: Inventar - Vorsorge - Sicherheit
---
 .../server/routes/VersionRoutes.kt            | 228 ++++++++++++++----
 1 file changed, 186 insertions(+), 42 deletions(-)

diff --git a/server/src/main/kotlin/de/krisenvorrat/server/routes/VersionRoutes.kt b/server/src/main/kotlin/de/krisenvorrat/server/routes/VersionRoutes.kt
index e20b3b2..e122a76 100644
--- a/server/src/main/kotlin/de/krisenvorrat/server/routes/VersionRoutes.kt
+++ b/server/src/main/kotlin/de/krisenvorrat/server/routes/VersionRoutes.kt
@@ -38,85 +38,229 @@ private fun buildHomepageHtml(versionName: String, versionCode: Int, apkUrl: Str
     <title>Krisenvorrat</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Share+Tech+Mono&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: system-ui, sans-serif;
-            background: #16140F;
-            color: #E8D5B0;
+            font-family: 'Share Tech Mono', 'Courier New', monospace;
+            background: #1a1a1a;
+            color: #d4c9b0;
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             position: relative;
+            overflow: hidden;
         }
+        /* Concrete texture background */
         body::before {
             content: '';
             position: fixed;
             inset: 0;
             pointer-events: none;
             z-index: 0;
-            opacity: 0.04;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+            opacity: 0.12;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
             background-repeat: repeat;
-            background-size: 200px 200px;
+            background-size: 300px 300px;
+        }
+        /* Rust stain overlay */
+        body::after {
+            content: '';
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
+            opacity: 0.06;
+            background: radial-gradient(ellipse at 30% 80%, #8B3A0F 0%, transparent 50%),
+                        radial-gradient(ellipse at 75% 20%, #6B2D0A 0%, transparent 40%),
+                        radial-gradient(ellipse at 50% 50%, #4A2508 0%, transparent 60%);
         }
         body > * { position: relative; z-index: 1; }
-        .card {
-            background: #242119;
-            border: 1px solid #4A3F2F;
-            border-left: 3px solid #8B3A0F;
-            border-radius: 3px;
-            padding: 48px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.6);
+
+        /* Hazard stripe top bar */
+        .hazard-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: repeating-linear-gradient(
+                -45deg,
+                #C1440E,
+                #C1440E 10px,
+                #1a1a1a 10px,
+                #1a1a1a 20px
+            );
+            z-index: 10;
+        }
+
+        .panel {
+            background: linear-gradient(145deg, #2a2a28, #1e1e1c);
+            border: 2px solid #3d3d3a;
+            border-radius: 2px;
+            padding: 48px 40px;
             text-align: center;
-            max-width: 420px;
-            width: 90%;
+            max-width: 440px;
+            width: 92%;
+            position: relative;
+            box-shadow:
+                0 0 0 1px #111,
+                0 8px 32px rgba(0,0,0,0.8),
+                inset 0 1px 0 rgba(255,255,255,0.03);
+        }
+        /* Steel rivets */
+        .panel::before,
+        .panel::after {
+            content: '';
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 4px 4px, #5a5a55, #2a2a28);
+            border: 1px solid #444;
+            box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);
+        }
+        .panel::before { top: 14px; left: 14px; }
+        .panel::after { top: 14px; right: 14px; }
+        .rivet-bl, .rivet-br {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 4px 4px, #5a5a55, #2a2a28);
+            border: 1px solid #444;
+            box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);
+        }
+        .rivet-bl { bottom: 14px; left: 14px; }
+        .rivet-br { bottom: 14px; right: 14px; }
+
+        /* Rust accent line */
+        .rust-line {
+            height: 3px;
+            background: linear-gradient(90deg, transparent, #8B3A0F, #C1440E, #8B3A0F, transparent);
+            margin: 0 -40px 28px;
+            opacity: 0.7;
+        }
+
+        .logo {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto 12px;
+            display: block;
+            filter: drop-shadow(0 2px 8px rgba(193,68,14,0.3));
         }
         h1 {
-            font-family: 'Share Tech Mono', 'Courier New', monospace;
-            font-size: 1.6rem;
-            margin-bottom: 8px;
-            color: #E8D5B0;
+            font-family: 'Black Ops One', 'Share Tech Mono', monospace;
+            font-size: 1.8rem;
+            margin-bottom: 4px;
+            color: #e8dcc8;
             text-transform: uppercase;
-            letter-spacing: 0.05em;
+            letter-spacing: 0.08em;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 20px rgba(193,68,14,0.15);
+        }
+        .subtitle {
+            font-size: 0.7rem;
+            color: #6B5B3E;
+            text-transform: uppercase;
+            letter-spacing: 0.3em;
+            margin-bottom: 6px;
         }
         .version {
-            font-family: 'Share Tech Mono', 'Courier New', monospace;
-            color: #A89070;
-            font-size: 0.85rem;
-            margin-bottom: 32px;
+            color: #7a6e58;
+            font-size: 0.75rem;
+            margin-bottom: 28px;
             text-transform: uppercase;
+            letter-spacing: 0.1em;
         }
-        #qrcode { display: flex; justify-content: center; margin-bottom: 24px; }
-        #qrcode canvas { border-radius: 3px; }
+        .version span {
+            color: #C1440E;
+            font-weight: bold;
+        }
+
+        #qrcode {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 24px;
+            padding: 16px;
+            background: #141413;
+            border: 1px solid #3d3d3a;
+            border-radius: 2px;
+            box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
+        }
+        #qrcode canvas { border-radius: 1px; }
+
         .download-link {
             display: inline-block;
-            background: #C1440E;
-            color: #E8D5B0;
+            background: linear-gradient(180deg, #C1440E 0%, #8B3A0F 100%);
+            color: #f0e6d2;
             text-decoration: none;
-            padding: 12px 24px;
-            border-radius: 3px;
-            font-family: 'Share Tech Mono', 'Courier New', monospace;
+            padding: 14px 32px;
+            border-radius: 2px;
+            font-family: 'Share Tech Mono', monospace;
             font-size: 0.9rem;
+            font-weight: bold;
             text-transform: uppercase;
-            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
-            transition: background 0.2s;
+            letter-spacing: 0.1em;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
+            border: 1px solid #D95A20;
+            box-shadow: 0 4px 12px rgba(193,68,14,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
+            transition: all 0.2s;
+        }
+        .download-link:hover {
+            background: linear-gradient(180deg, #D95A20 0%, #C1440E 100%);
+            box-shadow: 0 6px 20px rgba(193,68,14,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
+            transform: translateY(-1px);
+        }
+        .download-link:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 6px rgba(193,68,14,0.3);
+        }
+        .hint {
+            margin-top: 20px;
+            font-size: 0.75rem;
+            color: #5a5040;
+            letter-spacing: 0.02em;
+        }
+
+        /* Bottom steel plate accent */
+        .steel-plate {
+            margin-top: 28px;
+            padding-top: 16px;
+            border-top: 1px solid #3d3d3a;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            font-size: 0.65rem;
+            color: #4a4535;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+        }
+        .steel-plate span::before {
+            content: '■ ';
+            color: #C1440E;
+            font-size: 0.5rem;
         }
-        .download-link:hover { background: #D95A20; }
-        .hint { margin-top: 16px; font-size: 0.8rem; color: #6B5B3E; }
-        .logo { width: 120px; height: 120px; margin: 0 auto 16px; display: block; }
     </style>
 </head>
 <body>
-    <div class="card">
+    <div class="hazard-bar"></div>
+    <div class="panel">
+        <span class="rivet-bl"></span>
+        <span class="rivet-br"></span>
         <img src="/static/logo.png" alt="Krisenvorrat" class="logo">
         <h1>Krisenvorrat</h1>
-        <p class="version">Version $versionName (Build $versionCode)</p>
+        <p class="subtitle">Inventar • Vorsorge • Sicherheit</p>
+        <div class="rust-line"></div>
+        <p class="version">V.<span>$versionName</span> // Build <span>$versionCode</span></p>
         <div id="qrcode"></div>
-        <a href="${apkUrl.replace("\"", "&quot;")}" class="download-link">APK herunterladen</a>
+        <a href="${apkUrl.replace("\"", "&quot;")}" class="download-link">⬇ APK herunterladen</a>
         <p class="hint">QR-Code scannen oder Link antippen, um die App zu installieren.</p>
+        <div class="steel-plate">
+            <span>Android</span>
+            <span>Offline-fähig</span>
+            <span>Lokal</span>
+        </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
     <script>
@@ -124,8 +268,8 @@ private fun buildHomepageHtml(versionName: String, versionCode: Int, apkUrl: Str
             text: ${quoteJsString(apkUrl)},
             width: 200,
             height: 200,
-            colorDark: "#E8D5B0",
-            colorLight: "#242119",
+            colorDark: "#d4c9b0",
+            colorLight: "#141413",
             correctLevel: QRCode.CorrectLevel.M
         });
     </script>