elpatron
caf6e395cd
Updated the feature descriptions to enhance clarity, including separating passwordless login and end-to-end encryption, and specifying GPS track upload with map representation. Added new feature for photo attachments for skipper and crew. Updated the corresponding PDF to reflect these changes.
299 lines
8.0 KiB
HTML
299 lines
8.0 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>Ende-zu-Ende-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, Besegelung, Crew, Tankstände, etc.)</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>Einfache passwortlose Passkey-Anmeldung</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Ende-zu-Ende Verschlüsselung</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>GPS-Track Upload (GPX/KML) mit Kartendarstellung</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>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>Foto-Anhänge für Skipper und Crew</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</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Verschlüsseltes Backup & Wiederherstellung</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Logbuch mit Freunden teilen</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Beliebig viele Schiffe und Logbücher</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Deutsch & Englisch</span></div>
|
|
<div class="feature"><span class="feature-icon">✦</span><span>Crafted in Kiel.Sailing.City.</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>
|