Equilo landing page (all current app features)
This commit is contained in:
+315
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Equilo · Schwindel- & Menière-Tagebuch</title>
|
||||
<meta name="description" content="Equilo ist ein warmes, privates Tagebuch für Menschen mit Morbus Menière. Anfälle erfassen, Trigger erkennen, Wetter mitdenken, Arztbericht in einem Tipp. iPhone, iPad und Apple Watch. Lokal und in deiner iCloud.">
|
||||
<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:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--cream:#FDFAF4; --cream2:#FAF5EB; --cream3:#EFE8D7;
|
||||
--teal:#1F4848; --teal900:#0E2A2A; --teal-soft:#2C5A56;
|
||||
--coral:#E89B7B; --coral-soft:#FCEBDC; --sage:#6FA086;
|
||||
--ink:#23302E; --ink-soft:#4A5654; --ink-muted:#6B7E7E; --border:#E4DCCB;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth}
|
||||
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
|
||||
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.12;color:var(--teal900);letter-spacing:-0.01em}
|
||||
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
|
||||
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft)}
|
||||
a{color:var(--teal);text-decoration:none}
|
||||
|
||||
/* nav */
|
||||
nav{position:sticky;top:0;z-index:10;background:rgba(253,250,244,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
|
||||
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
|
||||
.brand{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:600;font-size:1.25rem;color:var(--teal900)}
|
||||
.brand svg{width:30px;height:30px}
|
||||
.nav-links{display:flex;gap:26px;font-size:.95rem}
|
||||
.nav-links a{color:var(--ink-soft)}
|
||||
.nav-links a:hover{color:var(--teal)}
|
||||
@media(max-width:720px){.nav-links{display:none}}
|
||||
|
||||
/* hero */
|
||||
.hero{padding:88px 0 72px;text-align:center}
|
||||
.hero h1{font-size:clamp(2.4rem,6vw,4rem);max-width:14ch;margin:18px auto 0}
|
||||
.hero .lede{font-size:1.2rem;color:var(--ink-soft);max-width:60ch;margin:22px auto 0}
|
||||
.hero .accent{color:var(--coral)}
|
||||
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
|
||||
.badge{background:var(--cream2);border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-size:.85rem;color:var(--ink-soft)}
|
||||
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;padding:14px 26px;border-radius:14px;font-weight:600;margin-top:30px}
|
||||
.cta:hover{background:var(--teal900)}
|
||||
.hero-note{font-size:.85rem;color:var(--ink-muted);margin-top:14px}
|
||||
|
||||
/* claim band */
|
||||
.band{background:var(--teal);color:#fff;padding:64px 0;margin-top:24px}
|
||||
.band h2{color:#fff;font-size:clamp(1.6rem,4vw,2.4rem);max-width:24ch}
|
||||
.band p{color:rgba(255,255,255,.82);max-width:60ch;margin-top:14px;font-size:1.08rem}
|
||||
|
||||
/* features */
|
||||
section{padding:72px 0}
|
||||
.section-head{max-width:60ch}
|
||||
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:10px}
|
||||
.section-head p{color:var(--ink-soft);margin-top:14px;font-size:1.08rem}
|
||||
|
||||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
|
||||
.feature{background:var(--cream2);border:1px solid var(--border);border-radius:18px;padding:26px}
|
||||
.feature .ic{width:44px;height:44px;border-radius:12px;background:var(--coral-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
|
||||
.feature .ic svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.7}
|
||||
.feature h3{font-size:1.2rem}
|
||||
.feature p{color:var(--ink-soft);margin-top:8px;font-size:.98rem}
|
||||
|
||||
/* split highlight */
|
||||
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
|
||||
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
|
||||
.split.alt{background:var(--cream2);border-radius:24px;padding:44px}
|
||||
.split h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
|
||||
.split p{color:var(--ink-soft);margin-top:14px}
|
||||
.checklist{list-style:none;margin-top:18px;display:grid;gap:10px}
|
||||
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
|
||||
.checklist li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--sage);margin-top:3px;
|
||||
-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
|
||||
mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat}
|
||||
|
||||
/* compare */
|
||||
.compare{overflow-x:auto;margin-top:36px;border:1px solid var(--border);border-radius:16px}
|
||||
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
|
||||
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
|
||||
thead th{background:var(--cream2);font-weight:600;color:var(--teal900)}
|
||||
td.ok{color:var(--sage);font-weight:600}
|
||||
td.no{color:var(--ink-muted)}
|
||||
tbody tr:last-child td{border-bottom:none}
|
||||
.col-us{background:rgba(31,72,72,.05)}
|
||||
|
||||
/* privacy */
|
||||
.privacy{background:var(--teal900);color:#fff;border-radius:24px;padding:48px}
|
||||
.privacy h2{color:#fff}
|
||||
.privacy p{color:rgba(255,255,255,.82);margin-top:14px;max-width:60ch}
|
||||
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
|
||||
.pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 16px;font-size:.9rem}
|
||||
|
||||
/* closing */
|
||||
.closing{text-align:center}
|
||||
.closing h2{font-size:clamp(1.8rem,4vw,2.6rem);max-width:20ch;margin:0 auto}
|
||||
.closing p{color:var(--ink-soft);max-width:54ch;margin:16px auto 0}
|
||||
|
||||
footer{border-top:1px solid var(--border);padding:40px 0;color:var(--ink-muted);font-size:.9rem}
|
||||
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
|
||||
.disclaimer{max-width:60ch;margin-top:8px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="wrap">
|
||||
<div class="brand">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="30" cy="31" r="11" fill="none" stroke="#1F4848" stroke-width="4.5" stroke-dasharray="50 35" stroke-linecap="round" transform="rotate(60 30 31)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
|
||||
Equilo
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#funktionen">Funktionen</a>
|
||||
<a href="#vergleich">Vergleich</a>
|
||||
<a href="#datenschutz">Datenschutz</a>
|
||||
<a href="#beta">Beta</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="wrap">
|
||||
<div class="eyebrow">Schwindel- & Menière-Tagebuch · iPhone, iPad, Apple Watch</div>
|
||||
<h1>Lerne dich und deinen <span class="accent">Schwindel</span> besser kennen.</h1>
|
||||
<p class="lede">Equilo erfasst Anfälle in Sekunden, denkt Wetter und Luftdruck mit und macht aus unvorhersehbaren Schüben lesbare Muster. Für dich und für deine Ärztin.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">Deutsch von Tag eins</span>
|
||||
<span class="badge">Lokal + private iCloud</span>
|
||||
<span class="badge">Kein Konto, keine Werbung</span>
|
||||
<span class="badge">Kein Paywall auf das Wesentliche</span>
|
||||
</div>
|
||||
<a class="cta" href="#beta">Zur TestFlight-Beta →</a>
|
||||
<p class="hero-note">In Vorbereitung für den App Store. Kein Medizinprodukt, ein Tagebuch mit Auswertung.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="band">
|
||||
<div class="wrap">
|
||||
<div class="eyebrow" style="color:var(--coral)">Warum Equilo</div>
|
||||
<h2>Selbstbewusster durch den Alltag, mit mehr Wissen über dich und deinen Schwindel.</h2>
|
||||
<p>Aus chaotischen Schüben werden lesbare Muster. Equilo erkennt früh, wann ein Anfall wahrscheinlicher wird, ehrlich, mit Wetter und deinen eigenen Daten. Und wenn es dich erwischt, ist Hilfe einen Tipp entfernt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="funktionen">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<div class="eyebrow">Was die App kann</div>
|
||||
<h2>Alles, was ein Schwindeltagebuch braucht. Und mehr.</h2>
|
||||
<p>Erfassen in Sekunden, verstehen mit der Zeit, vorbereitet sein für den Ernstfall und den Arzttermin.</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></div>
|
||||
<h3>Anfall erfassen</h3>
|
||||
<p>Live mit Timer oder nachträglich. Art, Schwere, Seite, Dauer, Symptome, vermutete Auslöser samt eigener Trigger. Wetter wird automatisch mitgespeichert.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M4 14a8 8 0 0 1 16 0"/><path d="M12 14l3-3"/></svg></div>
|
||||
<h3>Ehrliche Prognose</h3>
|
||||
<p>Luftdruck und Wetterumschwung plus deine eigenen Muster ergeben einen Risiko-Hinweis mit Konfidenz. Keine Schein-Sicherheit, nachvollziehbar erklärt.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="3"/><path d="M10 7h4"/></svg></div>
|
||||
<h3>Apple Watch</h3>
|
||||
<p>Anfall direkt am Handgelenk starten und beenden, auch wenn du nicht zum iPhone greifen kannst. Synchron über deine iCloud.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2"/></svg></div>
|
||||
<h3>Akut-Modus</h3>
|
||||
<p>Ruhige Vollbild-Hilfe im Anfall: geführte Atmung, Lagerung in drei Schritten, 1-Tap-Anruf an deine Vertrauensperson und klare 112-Hinweise.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M7 10h10M7 14h7"/><rect x="3" y="4" width="18" height="16" rx="3"/></svg></div>
|
||||
<h3>Notfall- & Erklärkarte</h3>
|
||||
<p>Eine verständliche Karte, die Menière in einfachen Worten erklärt, für Ersthelfer, fachfremde Ärzte und für Familie und Freunde. Als Ansicht und als PDF.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 8c4 0 4 8 7 8s3-8 7-8"/></svg></div>
|
||||
<h3>Salz im Blick</h3>
|
||||
<p>Einfacher Tagestrend oder genaue Lebensmittel aus einer deutschen Datenbank. Kein Wiegen, nur Sichtbarkeit, weil Natrium bei Menière zählt.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M4 19V5M4 19h16M8 16v-4M12 16V8M16 16v-7"/></svg></div>
|
||||
<h3>Auswertung</h3>
|
||||
<p>Kalender-Heatmap, häufigste Auslöser mit Konfidenz und deine Anfälle als Punkte auf der Luftdruckkurve. Muster, die man sonst nie sieht.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h3"/></svg></div>
|
||||
<h3>Medikamente</h3>
|
||||
<p>Einnahme-Erinnerungen, Nachfüll-Alarm und Einnahme-Treue. Alles fließt in den Arztbericht ein.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M6 4h9l3 3v13H6z"/><path d="M9 12h6M9 16h6"/></svg></div>
|
||||
<h3>Arzt-Bericht</h3>
|
||||
<p>Druckfertig im gewohnten klinischen Schwindeltagebuch-Format, als PDF in einem Tipp und als übersichtliche Ansicht auf iPhone und iPad.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/><path d="M4 9h16"/><circle cx="8" cy="7" r="0.6" fill="#1F4848"/></svg></div>
|
||||
<h3>Wissen & Entspannung</h3>
|
||||
<p>Verständliche Texte zur Krankheit mit Quellen, dazu geführte Atemübung, progressive Muskelrelaxation und autogenes Training.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M5 7l7-4 7 4v6c0 5-7 8-7 8s-7-3-7-8z"/></svg></div>
|
||||
<h3>Befunde anhängen</h3>
|
||||
<p>Audiogramme, Arztbriefe oder Hörtest-Fotos direkt an den passenden Anfall hängen, als Bild oder PDF.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3v18"/><circle cx="12" cy="12" r="9"/></svg></div>
|
||||
<h3>Backup & Sync</h3>
|
||||
<p>Vollständiges Backup zum Sichern und Wiedereinspielen beim Gerätewechsel. iCloud-Sync lässt sich bewusst ein- und ausschalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="split alt">
|
||||
<div>
|
||||
<div class="eyebrow">Im Anfall</div>
|
||||
<h2>Hilfe, wenn du sie am wenigsten suchen kannst.</h2>
|
||||
<p>Ein Anfall raubt dir die Orientierung. Equilo nimmt dir in dem Moment die Entscheidungen ab.</p>
|
||||
<ul class="checklist">
|
||||
<li>Geführte Atmung und Lagerung, ohne nachdenken zu müssen.</li>
|
||||
<li>Ein Tipp ruft deine Vertrauensperson an.</li>
|
||||
<li>Die Erklärkarte zeigt anderen, was gerade mit dir los ist.</li>
|
||||
<li>Klare Hinweise, wann es doch ein Fall für die 112 ist.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow">Für den Arzttermin</div>
|
||||
<h2>Endlich etwas Belastbares in der Hand.</h2>
|
||||
<p>Die App ist nur dann gut, wenn der HNO-Termin besser läuft. Deshalb der strukturierte Bericht im klinischen Format, den Ärztinnen sofort wiedererkennen.</p>
|
||||
<ul class="checklist">
|
||||
<li>Kennzahlen, Top-Auslöser und Medikamenten-Treue.</li>
|
||||
<li>Anfälle als Punkte auf der Luftdruckkurve.</li>
|
||||
<li>Rohdaten als CSV, Backup als JSON.</li>
|
||||
<li>Frei, ohne Paywall auf Bericht oder Auswertung.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="vergleich" style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<div class="eyebrow">Im Vergleich</div>
|
||||
<h2>Die Kombination, die sonst niemand bietet.</h2>
|
||||
<p>Andere Apps sind englischsprachig, kontogebunden oder featureüberladen. Equilo verbindet Tiefe mit Ruhe und echtem Datenschutz.</p>
|
||||
</div>
|
||||
<div class="compare">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Funktion</th><th>Typische Tracker</th><th class="col-us">Equilo</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Deutsche Oberfläche</td><td class="no">selten</td><td class="ok col-us">ja, von Tag eins</td></tr>
|
||||
<tr><td>Anfall am Apple-Watch-Handgelenk</td><td class="no">nein</td><td class="ok col-us">ja</td></tr>
|
||||
<tr><td>Wetter & Luftdruck automatisch</td><td class="no">teils</td><td class="ok col-us">ja, mit Vorab-Hinweis</td></tr>
|
||||
<tr><td>Akut-Modus & Erklärkarte</td><td class="no">nein</td><td class="ok col-us">ja</td></tr>
|
||||
<tr><td>Klinischer Arzt-PDF</td><td class="no">generisch</td><td class="ok col-us">Schwindeltagebuch-Format</td></tr>
|
||||
<tr><td>Ohne Konto, lokal + iCloud</td><td class="no">Cloud + Pflichtkonto</td><td class="ok col-us">ja</td></tr>
|
||||
<tr><td>Paywall auf Sync / Bericht</td><td class="no">häufig</td><td class="ok col-us">nein</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="datenschutz" style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="privacy">
|
||||
<div class="eyebrow" style="color:var(--coral)">Datenschutz</div>
|
||||
<h2>Deine Gesundheitsdaten bleiben bei dir.</h2>
|
||||
<p>Equilo ist local-first. Deine Einträge liegen auf deinem Gerät und synchronisieren über deine private iCloud zwischen iPhone, iPad und Apple Watch. Kein Konto, kein fremder Server, kein Tracking. Aus Apple Health gelesene Werte bleiben ausschließlich auf dem Gerät.</p>
|
||||
<div class="pill-row">
|
||||
<span class="pill">Kein Account</span>
|
||||
<span class="pill">Private iCloud</span>
|
||||
<span class="pill">Kein Tracking</span>
|
||||
<span class="pill">iCloud-Sync abschaltbar</span>
|
||||
<span class="pill">App-Sperre mit Face ID</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="beta" class="closing">
|
||||
<div class="wrap">
|
||||
<div class="eyebrow">Beta</div>
|
||||
<h2>Sei in der ersten Runde dabei.</h2>
|
||||
<p>Equilo startet als geschlossene TestFlight-Beta und kommt danach in den App Store. Schreib uns, wenn du als Betroffene oder Angehöriger früh testen möchtest.</p>
|
||||
<a class="cta" href="mailto:hallo@equilo.app">Für die Beta melden →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="wrap">
|
||||
<div>
|
||||
<div class="brand" style="font-size:1.1rem">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true" style="width:24px;height:24px"><circle cx="32" cy="33" r="22" fill="none" stroke="#1F4848" stroke-width="5" stroke-dasharray="105 60" stroke-linecap="round" transform="rotate(40 32 33)"/><circle cx="36" cy="40" r="4.4" fill="#E89B7B"/></svg>
|
||||
Equilo
|
||||
</div>
|
||||
<p class="disclaimer">Equilo ist ein digitales Tagebuch und kein Medizinprodukt nach MDR. Es ersetzt keine ärztliche Diagnose oder Therapie. Korrelation ist nicht gleich Ursache.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>© 2026 Equilo</p>
|
||||
<p><a href="#">Datenschutz</a> · <a href="#">Impressum</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user