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
This commit is contained in:
Jens Reinemann
parent
46bfaa0367
commit
f1abc2cd23
1 changed files with 186 additions and 42 deletions
|
|
@ -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("\"", """)}" class="download-link">APK herunterladen</a>
|
||||
<a href="${apkUrl.replace("\"", """)}" 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue