@ -1,461 +1,24 @@
{% load static %}
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "PioMint: die einfache, anonyme App für Pioniere, um Dienststunden zu erfassen. Kein Account, keine Cloud – >
< 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=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500;1,9..144,600&display=swap" rel = "stylesheet" >
< title > PioMint – < / title >
< style >
:root {
--teal: #026670;
--teal-deep: #013e45;
--mint: rgb(120, 170, 86);
--mint-soft: #eef3e7;
--paper: #fbf9f4;
--ink: #1c2723;
--ink-soft: #5b6b63;
}
* { box-sizing: border-box; }
html, body {
overflow-x: hidden;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.55;
}
a { color: inherit; }
.display {
font-family: "Fraunces", Georgia, serif;
}
img { max-width: 100%; display: block; }
.wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* --- Top mark --- */
.topbar {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 1.5rem 0 1.5rem;
max-width: 1080px;
margin: 0 auto;
}
.topbar img {
width: 34px;
height: 34px;
border-radius: 9px;
}
.topbar span {
font-weight: 700;
letter-spacing: 0.02em;
}
.topbar span b { color: var(--mint); }
/* --- Hero --- */
.hero {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
padding: 2.5rem 1.5rem 3rem 1.5rem;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 900px) {
.hero {
grid-template-columns: 1.05fr 0.95fr;
padding-top: 4rem;
gap: 3rem;
}
}
.hero-quote {
font-size: clamp(2rem, 6vw, 3.1rem);
font-weight: 500;
font-style: italic;
line-height: 1.12;
margin: 0 0 1.25rem 0;
position: relative;
}
.hero-quote .squiggle {
display: block;
width: 132px;
height: 14px;
margin-top: 0.4rem;
}
.hero-sub {
font-size: 1.08rem;
color: var(--ink-soft);
max-width: 34rem;
margin: 0 0 1.75rem 0;
}
.cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--teal);
color: white;
font-weight: 700;
font-size: 1.05rem;
padding: 0.9rem 1.6rem;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 0.6rem 1.4rem rgba(2, 102, 112, 0.28);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
transform: translateY(-2px);
box-shadow: 0 0.9rem 1.8rem rgba(2, 102, 112, 0.34);
color: white;
}
.cta svg { width: 20px; height: 20px; }
.cta-note {
margin: 0.85rem 0 0 0;
font-size: 0.85rem;
color: var(--ink-soft);
}
/* --- Phone frame --- */
.phone {
justify-self: center;
width: min(280px, 78vw);
border-radius: 2.4rem;
padding: 0.55rem;
background: linear-gradient(160deg, #ffffff, #eef1ee);
box-shadow: 0 1.5rem 3rem rgba(2, 30, 33, 0.18), 0 0 0 1px rgba(2, 30, 33, 0.05);
}
.phone img {
border-radius: 1.9rem;
width: 100%;
}
.phone.float {
animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
.phone.float { animation: none; }
}
/* --- Feature sections --- */
.features {
background: white;
padding: 3.5rem 0 4rem 0;
border-top: 1px solid rgba(2, 30, 33, 0.06);
border-bottom: 1px solid rgba(2, 30, 33, 0.06);
}
.features-head {
text-align: center;
margin-bottom: 2.75rem;
}
.features-head .eyebrow {
color: var(--mint);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.features-head h2 {
font-family: "Fraunces", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.7rem, 4vw, 2.3rem);
margin: 0.4rem 0 0 0;
}
.feature-row {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
padding: 2.5rem 1.5rem;
max-width: 1080px;
margin: 0 auto;
}
.feature-row:not(:last-child) {
border-bottom: 1px dashed rgba(2, 30, 33, 0.12);
}
@media (min-width: 900px) {
.feature-row {
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
}
.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-shot { order: 1; }
}
.feature-row-center {
grid-template-columns: 1fr !important;
text-align: center;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.feature-row-center .feature-text {
max-width: 34rem;
margin: 0 auto;
}
.feature-row-center .feature-callout {
text-align: left;
}
.feature-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--mint-soft);
color: var(--teal);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-text h3 {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 0.6rem 0;
}
.feature-text p {
color: var(--ink-soft);
font-size: 1.02rem;
margin: 0;
}
.feature-callout {
margin-top: 1.1rem;
background: var(--mint-soft);
border-radius: 0.9rem;
padding: 0.9rem 1.1rem;
font-size: 0.92rem;
color: var(--teal-deep);
display: flex;
gap: 0.6rem;
}
.feature-callout svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--mint);
}
.feature-shot {
justify-self: center;
}
.feature-shot .phone {
width: min(230px, 62vw);
}
/* --- Closing CTA --- */
.closing {
background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%);
color: white;
text-align: center;
padding: 4rem 1.5rem;
}
.closing h2 {
font-family: "Fraunces", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 5vw, 2.6rem);
margin: 0 0 0.75rem 0;
}
.closing p {
color: rgba(255, 255, 255, 0.82);
max-width: 30rem;
margin: 0 auto 1.75rem auto;
}
.closing .cta {
background: var(--mint);
box-shadow: 0 0.6rem 1.4rem rgba(120, 170, 86, 0.35);
}
/* --- Footer --- */
footer {
padding: 2.5rem 1.5rem 3rem 1.5rem;
text-align: center;
font-size: 0.85rem;
color: var(--ink-soft);
}
footer a {
color: var(--teal);
font-weight: 600;
text-decoration: none;
}
footer .links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.2rem;
justify-content: center;
margin-bottom: 1rem;
}
footer .fineprint {
max-width: 32rem;
margin: 0 auto;
opacity: 0.85;
}
< / style >
< / head >
< body >
< div class = "topbar" >
< img src = "{% static 'app/images/appleicon_whitebg.png' %}" alt = "" >
< span > PIO< b > MINT< / b > < / span >
< / div >
< section class = "hero" >
< div >
< p class = "hero-quote display" >
Von einem Pio.< br > Für Pios gemacht.
< svg class = "squiggle" viewBox = "0 0 132 14" fill = "none" >
< path d = "M2 10C20 2 34 2 50 8C66 14 80 2 96 6C108 9 118 6 130 2" stroke = "var(--mint)" stroke-width = "3" stroke-linecap = "round" / >
< / svg >
< / p >
< p class = "hero-sub" >
Ich hab PioMint gebaut, weil ich selbst jeden Monat meine Stunden
eintragen musste –
kompliziert, zu englisch, zu viel drumherum. Also hab ich meine
eigene gemacht. Jetzt darfst du sie auch benutzen.
< / p >
< a class = "cta" href = "/app/install/" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M12 15V3M8 7l4-4 4 4" / > < path d = "M4 13v6a2 2 0 002 2h12a2 2 0 002-2v-6" / > < / svg >
Jetzt installieren
< / a >
< p class = "cta-note" > Kostenlos. Ohne Account. In unter einer Minute.< / p >
< / div >
< div class = "phone float" >
< img src = "{% static 'app/images/landing/screen-uebersicht.png' %}" alt = "PioMint Dashboard: Jahr, Monat, Timer und Aktivitäten auf einen Blick" >
< / div >
< / section >
< section class = "features" >
< div class = "features-head" >
< div class = "eyebrow" > Warum PioMint?< / div >
< h2 class = "display" > Nichts, was du nicht brauchst.< / h2 >
< / div >
< section data-cid = "slide-05-7059bc59" class = "slide fade-6 kenBurns" >
< div class = "content" >
< div class = "container" >
< div class = "wrap" >
< div class = "feature-row" >
< div class = "feature-text" >
< div class = "feature-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M9 11l3 3L22 4" / > < path d = "M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" / > < / svg >
< / div >
< h3 > Einfach, nicht kompliziert< / h3 >
< p > Keine Diagramme, keine Statistik-Flut, kein Menü-Dschungel.
Nur deine Stunden – < / p >
< / div >
< div class = "feature-shot" >
< div class = "phone" > < img src = "{% static 'app/images/landing/screen-liste.png' %}" alt = "Übersichtliche Liste aller Aktivitäten in PioMint" > < / div >
< / div >
< / div >
< div class = "feature-row reverse" >
< div class = "feature-text" >
< div class = "feature-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "13" r = "8" / > < path d = "M12 9v4l3 2M9 2h6M12 2v3" / > < / svg >
< / div >
< h3 > Timer eingebaut< / h3 >
< p > Starten, pausieren, fertig. Die Zeit läuft von selbst mit –
du musst am Ende nichts mehr zusammenrechnen.< / p >
< / div >
< div class = "feature-shot" >
< div class = "phone" > < img src = "{% static 'app/images/landing/screen-timer.png' %}" alt = "Laufender Timer in PioMint" > < / div >
< ul class = "flex" >
< li class = "col-12-12" >
< div class = "fix-4-12" >
< h1 > PioMint< / h1 >
< a href = "#" class = "button hollow ae-2 cropLeft" > < img src = "assets/img/appstore.jpg" height = "63" / > < / a > < a href = "#" class = "button hollow ae-3 cropRight" > < img src = "assets/img/googleplay.jpg" height = "63" / > < / a >
< / div >
< / li >
< li class = "col-12-12" >
< div class = "fix-6-12 ae-2 margin-top-3" >
< img class = "iphone-5" width = "380" src = "assets/img/iphone-5.png" alt = "iPhone App" data-action = "zoom" / >
< / div >
< / li >
< / ul >
< div class = "feature-row feature-row-center" >
< div class = "feature-text" >
< div class = "feature-icon" style = "margin-left: auto; margin-right: auto;" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z" / > < / svg >
< / div >
< h3 > 100 % anonym< / h3 >
< p > Kein Account, kein Login, keine Cloud. Deine Daten bleiben
ausschließlich auf deinem Gerät – < / p >
< div class = "feature-callout" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" / > < path d = "M7 10l5 5 5-5" / > < path d = "M12 15V3" / > < / svg >
< span > Und genau weil alles nur lokal liegt, kannst du jederzeit
ein Backup machen und es auf einem neuen Handy wieder
einspielen – < / span >
< / div >
< / div >
< / div >
< / div >
< div class = "background" style = "background-image:url(assets/img/background/img-05.jpg)" > < / div >
< / section >
< section class = "closing" >
< h2 class = "display" > Bereit?< / h2 >
< p > Einmal einrichten, dann liegt PioMint als eigenes Icon auf deinem
Homescreen – < / p >
< a class = "cta" href = "/app/install/" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2.2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M12 15V3M8 7l4-4 4 4" / > < path d = "M4 13v6a2 2 0 002 2h12a2 2 0 002-2v-6" / > < / svg >
PioMint installieren
< / a >
< / section >
< footer >
< div class = "links" >
< a href = "mailto:app-feedback@zielke.studio" > Feedback< / a >
< a href = "https://chat.whatsapp.com/Cy4laGaEdLP1DZbhN04zRQ" target = "_blank" rel = "noopener noreferrer" > WhatsApp-Community< / a >
< a href = "https://www.zielke.studio/" target = "_blank" rel = "noopener noreferrer" > Impressum< / a >
< / div >
< p class = "fineprint" >
PioMint ist ein privates Herzensprojekt, kein kommerzielles Produkt.
Das Impressum stellt zielke.studio (Button unten auf der Seite).
< / p >
< / footer >
< / body >
< / html >
