elpatron
90ffff0da6
Revised the descriptions of offline capabilities and encryption methods in the beta flyer to enhance clarity. The PWA is now described as functioning on any smartphone and tablet, and the encryption method is specified as end-to-end.
292 lines
7.3 KiB
HTML
292 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Kapteins Daagbok — Beta-Flyer</title>
|
|
<style>
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
color: #e2e8f0;
|
|
background: #0f172a;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.page {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
padding: 14mm 16mm 12mm;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background:
|
|
radial-gradient(ellipse 120% 80% at 100% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
|
|
radial-gradient(ellipse 90% 60% at 0% 100%, rgba(134, 59, 255, 0.14) 0%, transparent 50%),
|
|
linear-gradient(165deg, #0f172a 0%, #1e293b 45%, #0f172a 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8mm;
|
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
|
border-radius: 4mm;
|
|
pointer-events: none;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5mm;
|
|
margin-bottom: 6mm;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo {
|
|
width: 14mm;
|
|
height: 14mm;
|
|
flex-shrink: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.title-block h1 {
|
|
font-size: 22pt;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: #f8fafc;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.title-block p {
|
|
font-size: 10.5pt;
|
|
color: #94a3b8;
|
|
margin-top: 1.5mm;
|
|
}
|
|
|
|
.badge {
|
|
margin-left: auto;
|
|
align-self: flex-start;
|
|
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
|
color: #1e293b;
|
|
font-size: 9pt;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
padding: 2mm 4mm;
|
|
border-radius: 2mm;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 10.5pt;
|
|
line-height: 1.55;
|
|
color: #cbd5e1;
|
|
margin-bottom: 6mm;
|
|
max-width: 95%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.intro strong {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3mm 6mm;
|
|
margin-bottom: 6mm;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature {
|
|
display: flex;
|
|
gap: 2.5mm;
|
|
align-items: flex-start;
|
|
font-size: 9.5pt;
|
|
line-height: 1.4;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.feature-icon {
|
|
color: #38bdf8;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
width: 4mm;
|
|
}
|
|
|
|
.beta-box {
|
|
background: rgba(30, 41, 59, 0.85);
|
|
border: 1px solid rgba(251, 191, 36, 0.35);
|
|
border-left: 3px solid #fbbf24;
|
|
border-radius: 3mm;
|
|
padding: 5mm 6mm;
|
|
margin-bottom: 6mm;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.beta-box h2 {
|
|
font-size: 11pt;
|
|
color: #fbbf24;
|
|
margin-bottom: 2mm;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.beta-box p {
|
|
font-size: 9.5pt;
|
|
line-height: 1.5;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8mm;
|
|
background: rgba(15, 23, 42, 0.6);
|
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
border-radius: 4mm;
|
|
padding: 5mm 6mm;
|
|
margin-bottom: auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.qr {
|
|
width: 32mm;
|
|
height: 32mm;
|
|
background: #fff;
|
|
padding: 2mm;
|
|
border-radius: 2mm;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.qr img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.cta-text h3 {
|
|
font-size: 13pt;
|
|
color: #38bdf8;
|
|
font-weight: 700;
|
|
margin-bottom: 2mm;
|
|
}
|
|
|
|
.cta-text p {
|
|
font-size: 9pt;
|
|
color: #94a3b8;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2mm;
|
|
margin-top: 3mm;
|
|
}
|
|
|
|
.tag {
|
|
font-size: 7.5pt;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
border: 1px solid rgba(100, 116, 139, 0.4);
|
|
border-radius: 1.5mm;
|
|
padding: 1mm 2.5mm;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid rgba(148, 163, 184, 0.15);
|
|
padding-top: 3mm;
|
|
margin-top: 5mm;
|
|
font-size: 7.5pt;
|
|
line-height: 1.5;
|
|
color: #64748b;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
footer strong {
|
|
color: #94a3b8;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<article class="page">
|
|
<header>
|
|
<img class="logo" src="../../client/public/logo.png" alt="Kapteins Daagbok" />
|
|
<div class="title-block">
|
|
<h1>Kapteins Daagbok</h1>
|
|
<p>Digitales Yacht-Logbuch — kostenlos & werbefrei</p>
|
|
</div>
|
|
<span class="badge">Beta</span>
|
|
</header>
|
|
|
|
<p class="intro">
|
|
Führe dein Bordlogbuch digital: Reisetage, GPS-Tracks, Crew und Schiffsdaten —
|
|
<strong>End-to-End-verschlüsselt</strong>, als App installierbar und
|
|
<strong>auch offline</strong> auf See nutzbar.
|
|
</p>
|
|
|
|
<section class="features" aria-label="Funktionen">
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Reisetage im nautischen Logbuch-Format (Hafen, Wetter, Tankstände)</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Offline-fähige PWA — läuft auf jedem Smartphone & Tablet</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Passkey-Anmeldung & Ende-zu-Ende Verschlüsselung</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>GPS-Tracks (GPX/KML), Karte & Streckenstatistik</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Foto-Anhänge pro Reisetag</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Crew einladen — gemeinsam am Logbuch arbeiten</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>PDF- & CSV-Export, verschlüsseltes Backup</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Mehrere Logbücher · Deutsch & Englisch</span></div>
|
|
</section>
|
|
|
|
<section class="beta-box">
|
|
<h2>Beta-Phase — Dein Feedback zählt</h2>
|
|
<p>
|
|
Kapteins Daagbok ist ein <strong>privates Hobbyprojekt ohne Gewinnabsicht</strong>.
|
|
Als Beta-Tester hilfst du, die App für Skipper und Crew im Alltag zu verbessern —
|
|
Rückmeldungen sind ausdrücklich willkommen.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="qr">
|
|
<img src="assets/qr-kapteins-daagbok.eu.png" alt="QR-Code: kapteins-daagbok.eu" />
|
|
</div>
|
|
<div class="cta-text">
|
|
<h3>kapteins-daagbok.eu</h3>
|
|
<p>Im Browser öffnen oder als App zum Home-Bildschirm hinzufügen. Registrierung mit Passkey — kein App-Store nötig.</p>
|
|
<div class="tags">
|
|
<span class="tag">Kostenlos</span>
|
|
<span class="tag">Werbefrei</span>
|
|
<span class="tag">E2E-verschlüsselt</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<strong>Impressum</strong><br />
|
|
KnorrLabs · Markus F.J. Busche · Knorrstr. 16 · 24106 Kiel · elpatron+kd@mailbox.org
|
|
</footer>
|
|
</article>
|
|
</body>
|
|
</html>
|