commit 289b808771a791d105d5fc533a3add7c31d01ef5 Author: Oliver G Date: Sun Feb 22 13:39:25 2026 +0100 Initial StaySense landing page diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..5435ef4 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# StaySense Landingpage (Starter) + +Enthält eine **fertige, responsive Landingpage** als Vanilla **HTML + CSS** inkl. SVG-Illustrationen. + +## Inhalt +- `index.html` – komplette Landingpage inkl. Text +- `styles.css` – Styling (Dark-Theme, responsive) +- `script.js` – mobile Navigation und Interaktionen +- `assets/` – erstellte SVG-Bilder/Icons + +## Lokales Preview +1. Ordner öffnen +2. `index.html` im Browser öffnen + (oder via Live Server/Preview in VS Code) + +## Anpassen +- Links / CTA: in `index.html` nach `staysense.vanityontour.de` suchen +- Branding/Farben: in `styles.css` die `:root` Variablen anpassen +- Text/Sections: direkt in `index.html` + +## Live +- Veröffentlicht unter: `https://landing.staysense.vanityontour.de/` + +Viel Spaß beim Live-Schalten 🚐 diff --git a/assets/hero-van.svg b/assets/hero-van.svg new file mode 100644 index 0000000..63837be --- /dev/null +++ b/assets/hero-van.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + StaySense • Standort-Check im Browser + + diff --git a/assets/icon-browser.svg b/assets/icon-browser.svg new file mode 100644 index 0000000..d72eadc --- /dev/null +++ b/assets/icon-browser.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🌐 + \ No newline at end of file diff --git a/assets/icon-fast.svg b/assets/icon-fast.svg new file mode 100644 index 0000000..b781388 --- /dev/null +++ b/assets/icon-fast.svg @@ -0,0 +1,11 @@ + + + + + + + + + + ⚡ + \ No newline at end of file diff --git a/assets/icon-focus.svg b/assets/icon-focus.svg new file mode 100644 index 0000000..dd92811 --- /dev/null +++ b/assets/icon-focus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🎯 + \ No newline at end of file diff --git a/assets/icon-leaf.svg b/assets/icon-leaf.svg new file mode 100644 index 0000000..d642338 --- /dev/null +++ b/assets/icon-leaf.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🌿 + \ No newline at end of file diff --git a/assets/icon-location.svg b/assets/icon-location.svg new file mode 100644 index 0000000..e8c6671 --- /dev/null +++ b/assets/icon-location.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 📍 + \ No newline at end of file diff --git a/assets/icon-sense.svg b/assets/icon-sense.svg new file mode 100644 index 0000000..82d7030 --- /dev/null +++ b/assets/icon-sense.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🧠 + \ No newline at end of file diff --git a/assets/icon-shield.svg b/assets/icon-shield.svg new file mode 100644 index 0000000..2a9fd1a --- /dev/null +++ b/assets/icon-shield.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🛡 + \ No newline at end of file diff --git a/assets/icon-world.svg b/assets/icon-world.svg new file mode 100644 index 0000000..ee269b0 --- /dev/null +++ b/assets/icon-world.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 🗺 + \ No newline at end of file diff --git a/assets/roadmap.svg b/assets/roadmap.svg new file mode 100644 index 0000000..e4da6ae --- /dev/null +++ b/assets/roadmap.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + Heute + + + + Standort‑Check + + + + 2026 + Spots in der Nähe + + + + + Roadmap + + Fokus bleibt: erst verstehen, dann entscheiden – Nearby‑Spots kommen als Ergänzung. + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..e5bb8a5 --- /dev/null +++ b/index.html @@ -0,0 +1,327 @@ + + + + + + StaySense – Standort-Check fürs Vanlife + + + + + + + + + + + + + + + + + + + +
+
+ + SS + StaySense + + + + + +
+ + +
+ +
+ +
+
+
+

Browser-basiert • überall nutzbar • ohne Download

+

Wissen, bevor du die Handbremse ziehst.

+

+ StaySense liefert dir Informationen zu deinem aktuellen Standort - damit du die Lage besser einschätzen kannst, + ohne Rätselraten, ohne App-Chaos, ohne "wird schon passen". +

+ +
+ StaySense jetzt nutzen + Wie es funktioniert +
+ +
+
+
0
+
Spots-Datenbank (bewusst nicht)
+
+
+
100%
+
Fokus: aktueller Standort
+
+
+
2026
+
"Spots in der Nähe" kommt
+
+
+ +

+ Hinweis: StaySense ist eine Web-Anwendung unter + staysense.vanityontour.de. + Du kannst sie jederzeit im Browser öffnen. +

+
+ + +
+
+ + +
+
+
+
+

Vanlife ist Freiheit - aber Unsicherheit fährt oft mit.

+

+ Du stehst irgendwo, es wird spät, und plötzlich kommen die Fragen: + Darf ich hier? Wie sensibel ist die Umgebung? Konfliktpotenzial? + StaySense ist dein digitaler Lage-Check: schnell, klar, praxisnah. +

+
+
+
+ +

Hier & Jetzt

+

Keine Jagd nach Koordinaten - sondern Einschätzung zum Ort, an dem du gerade bist.

+
+
+ +

Im Browser

+

Öffnen, nutzen, fertig. Kein Store, kein Update-Stress, kein "Welche App war das nochmal?"

+
+
+
+
+
+ + +
+
+
+

Was dir StaySense bringt

+

Konzentriert auf Anwendung und Nutzen - ohne Technik-Blabla.

+
+ +
+
+ +

Weniger Stress

+

Statt Bauchgefühl bekommst du Orientierung - und schläfst am Ende ruhiger.

+
+
+ +

Mehr Einschätzung

+

Du siehst Hinweise, die dir helfen, die Situation vor Ort besser einzuordnen.

+
+
+ +

Respektvoll stehen

+

StaySense unterstützt dich dabei, sensibel zu handeln - für Orte, Anwohner und Community.

+
+ +
+ +

Sofort startklar

+

Link öffnen, Standort checken. Perfekt für "ich brauch jetzt eine Entscheidung".

+
+
+ +

Immer dabei

+

Auf Handy, Tablet oder Laptop nutzbar - überall dort, wo du Browser + Empfang hast.

+
+
+ +

Kein Overload

+

Kein Kommentar-Sumpf. Kein Sternchen-Drama. Nur Informationen, die dir helfen sollen.

+
+
+
+
+ + +
+
+
+

So funktioniert StaySense

+

Drei Schritte, keine Zauberei - nur praktische Hilfe.

+
+ +
    +
  1. +
    1
    +
    +

    Website öffnen

    +

    Ruf staysense.vanityontour.de auf - fertig.

    +
    +
    2. +
  2. +
    2
    +
    +

    Standort prüfen

    +

    StaySense liefert dir Hinweise zur Umgebung und zur Situation am aktuellen Ort.

    +
    +
    3. +
  3. +
    3
    +
    +

    Entscheidung treffen

    +

    Mit klarerem Kopf entscheiden: bleiben, weiterfahren oder Plan B.

    +
    +
    4. +
+ +
+
+

"Spots in der Nähe" kommt noch dieses Jahr

+

+ Aktuell fokussiert StaySense die Standort-Analyse. Eine Nearby-Spot-Funktion ist geplant und wird 2026 ergänzt. + Bis dahin gilt: erst verstehen, dann entscheiden. +

+
+ +
+
+
+ + +
+
+
+

Für wen ist StaySense?

+

Kurzfassung: Für Camper mit gesundem Menschenverstand.

+
+ +
+
+

Einsteiger

+

Wenn du noch nicht jeden Ort "lesen" kannst, hilft dir StaySense beim Einschätzen - ohne Overload.

+
+
+

Erfahrene Vanlifer

+

Wenn du schnell Klarheit willst, statt durch 200 Kommentare zu scrollen.

+
+
+ +
+

"Ich wollte keine Spot-App. Ich wollte weniger Stress beim Stehen. Genau das macht StaySense."

+ - Nutzerstimme (Platzhalter) +
+
+
+ + +
+
+
+

FAQ

+

Die wichtigsten Fragen - kurz und ehrlich.

+
+ +
+
+ Ist StaySense eine App? +
+

Praktisch ja - technisch ist es eine Web-Anwendung. Du nutzt sie direkt im Browser unter staysense.vanityontour.de.

+
+
+ +
+ Zeigt StaySense Stellplätze/Spots? +
+

Aktuell nein. StaySense liefert Informationen zu deinem aktuellen Standort. Spots in der Nähe sind geplant und werden 2026 ergänzt.

+
+
+ +
+ Brauche ich einen Account? +
+

Für den grundlegenden Standort-Check: nein (so bleibt's angenehm unkompliziert).

+
+
+ +
+ Funktioniert das überall? +
+

Ja - überall, wo du einen Browser und eine Verbindung hast. Handy, Tablet oder Laptop.

+
+
+ +
+ Ist das eine rechtliche Beratung? +
+

Nein. StaySense liefert Hinweise zur Einschätzung, ersetzt aber keine verbindliche Rechtsberatung oder Beschilderung vor Ort.

+
+
+
+
+
+ + +
+
+
+

Mach den Lage-Check, bevor du bleibst.

+

Öffne StaySense im Browser - und entscheide entspannter.

+
+
+ Jetzt öffnen + Mehr von Vanity on Tour +
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a81aed9 --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ +const toggle = document.getElementById('navToggle'); +const mobile = document.getElementById('navMobile'); + +function closeMobileMenu() { + if (!toggle || !mobile) return; + toggle.setAttribute('aria-expanded', 'false'); + toggle.setAttribute('aria-label', 'Menü öffnen'); + mobile.hidden = true; +} + +toggle?.addEventListener('click', () => { + const expanded = toggle.getAttribute('aria-expanded') === 'true'; + toggle.setAttribute('aria-expanded', String(!expanded)); + toggle.setAttribute('aria-label', expanded ? 'Menü öffnen' : 'Menü schließen'); + mobile.hidden = expanded; +}); + +document.addEventListener('keydown', (event) => { + if (event.key === 'Escape') closeMobileMenu(); +}); + +document.addEventListener('click', (event) => { + if (!mobile || mobile.hidden) return; + if (!mobile.contains(event.target) && !toggle?.contains(event.target)) closeMobileMenu(); +}); + +mobile?.querySelectorAll('a').forEach((a) => { + a.addEventListener('click', closeMobileMenu); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d588287 --- /dev/null +++ b/styles.css @@ -0,0 +1,268 @@ +/* StaySense Landingpage – Vanilla HTML/CSS + Tipp: Farben/Typo gern an Vanity-on-Tour Branding anpassen. +*/ +:root{ + --bg:#0b1220; + --bg2:#0f1a2f; + --card:#0f1a2f; + --muted:#8ea0bf; + --text:#eaf0ff; + --line:rgba(255,255,255,.10); + --primary:#7c5cff; + --primary2:#5eead4; + --shadow:0 10px 30px rgba(0,0,0,.35); + --radius:18px; + --max:1120px; +} + +*{box-sizing:border-box} +html,body{margin:0;padding:0} +body{ + font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; + background:radial-gradient(1200px 800px at 20% -10%, rgba(124,92,255,.30), transparent 55%), + radial-gradient(900px 700px at 90% 10%, rgba(94,234,212,.20), transparent 60%), + var(--bg); + color:var(--text); + line-height:1.6; +} + +a{color:inherit;text-decoration:none} +a:hover{text-decoration:underline} +a:focus-visible, +button:focus-visible, +summary:focus-visible{ + outline:2px solid var(--primary2); + outline-offset:2px; +} +.container{max-width:var(--max);margin:0 auto;padding:0 20px} + +.skip-link{ + position:absolute; + left:12px; + top:-48px; + z-index:120; + background:#ffffff; + color:#071022; + border-radius:10px; + padding:8px 10px; + font-weight:700; + border:1px solid #d4def7; +} +.skip-link:focus{top:10px} + +.header{ + position:sticky;top:0;z-index:50; + background:rgba(11,18,32,.75); + backdrop-filter: blur(10px); + border-bottom:1px solid var(--line); +} +.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px} + +.brand{display:flex;align-items:center;gap:10px;font-weight:700} +.brand__mark{ + width:36px;height:36px;border-radius:12px; + display:grid;place-items:center; + background:linear-gradient(135deg,var(--primary),rgba(94,234,212,.8)); + color:#071022;font-weight:800; + box-shadow:0 8px 18px rgba(124,92,255,.25); +} +.brand__name{letter-spacing:.2px} + +.nav{display:flex;align-items:center;gap:16px} +.nav a{color:var(--muted);font-weight:600} +.nav a:hover{color:var(--text);text-decoration:none} + +.nav__toggle{ + display:none;border:1px solid var(--line); + background:transparent;color:var(--text); + width:44px;height:40px;border-radius:12px; + align-items:center;justify-content:center;gap:4px;flex-direction:column; +} +.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:99px;opacity:.9} + +.nav__mobile{ + border-bottom:1px solid var(--line); + background:rgba(11,18,32,.92); +} +.nav__mobileInner{display:grid;gap:10px;padding:14px 0} +.nav__mobileInner a{padding:10px 12px;border-radius:12px;border:1px solid var(--line);color:var(--text)} + +.hero{padding:64px 0 24px} +.hero__grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:28px;align-items:center} +.badge{ + display:inline-flex;gap:8px;align-items:center; + padding:8px 12px;border:1px solid var(--line); + border-radius:999px;color:var(--muted); + background:rgba(255,255,255,.03); + font-weight:600;font-size:13px; +} +h1{font-size:46px;line-height:1.08;margin:14px 0 14px} +.lead{color:#d7e2ff;font-size:18px;max-width:58ch} +.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px} +.hero__visual img{ + width:100%;height:auto;display:block; + border-radius:var(--radius); + border:1px solid var(--line); + background:rgba(255,255,255,.02); + box-shadow:var(--shadow); +} + +.hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 0} +.kpi{ + border:1px solid var(--line); + border-radius:16px;padding:12px 12px; + background:rgba(255,255,255,.03); +} +.kpi__value{font-weight:800;font-size:20px} +.kpi__label{color:var(--muted);font-size:12px;margin-top:2px} + +.fineprint{margin-top:12px;color:var(--muted);font-size:13px} + +.section{padding:56px 0} +.section--muted{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} +.section__head{margin-bottom:18px} +.section__head h2{margin:0 0 6px;font-size:30px} +.muted{color:var(--muted)} + +.split{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start} +.cards{display:grid;gap:14px} +.cards--2{grid-template-columns:repeat(2,1fr)} +.cards--3{grid-template-columns:repeat(3,1fr)} +.card{ + border:1px solid var(--line); + border-radius:var(--radius); + padding:16px 16px; + background:rgba(255,255,255,.03); + box-shadow:0 8px 22px rgba(0,0,0,.18); +} +.card h3{margin:8px 0 6px;font-size:18px} +.card p{margin:0;color:#d6e2ff} +.icon{width:34px;height:34px;display:block} + +.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px} +.step{ + display:flex;gap:14px;align-items:flex-start; + border:1px solid var(--line); + border-radius:var(--radius); + padding:14px 14px;background:rgba(255,255,255,.03); +} +.step__num{ + width:34px;height:34px;border-radius:12px;display:grid;place-items:center; + background:rgba(124,92,255,.22); + border:1px solid rgba(124,92,255,.35); + font-weight:800;color:#eaf0ff; +} +.step__body h3{margin:0 0 4px;font-size:18px} +.step__body p{margin:0;color:#d6e2ff} + +.callout{ + margin-top:18px; + border:1px solid rgba(94,234,212,.28); + background:linear-gradient(135deg, rgba(94,234,212,.14), rgba(124,92,255,.10)); + border-radius:24px; + padding:18px; + display:grid; + grid-template-columns:1.2fr .8fr; + gap:16px; + align-items:center; +} +.callout h3{margin:0 0 6px} +.callout p{margin:0;color:#e8f3ff} +.callout__art img{width:100%;height:auto;display:block;opacity:.95} + +.quote{ + margin-top:16px; + border:1px dashed rgba(255,255,255,.18); + border-radius:24px; + padding:18px; + background:rgba(255,255,255,.02); +} +.quote p{margin:0 0 6px;font-size:18px} +.quote span{color:var(--muted);font-size:13px} + +.faq{display:grid;gap:12px} +details{ + border:1px solid var(--line); + border-radius:18px; + padding:12px 14px; + background:rgba(255,255,255,.03); +} +summary{cursor:pointer;font-weight:700} +.faq__body{color:#d6e2ff;margin-top:8px} + +.btn{ + display:inline-flex;align-items:center;justify-content:center; + gap:10px; + padding:12px 14px; + border-radius:14px; + border:1px solid var(--line); + background:rgba(255,255,255,.04); + color:var(--text); + font-weight:800; + text-decoration:none; +} +.btn:hover{text-decoration:none;transform:translateY(-1px)} +.btn--primary{ + border-color:rgba(124,92,255,.55); + background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(94,234,212,.55)); + color:#071022; +} +.btn--ghost{background:transparent} +.btn--sm{padding:9px 11px;border-radius:12px;font-size:14px} +.btn--lg{padding:14px 16px;border-radius:16px;font-size:16px} + +.cta{ + padding:46px 0; + border-top:1px solid var(--line); + background:radial-gradient(700px 400px at 20% 0%, rgba(124,92,255,.18), transparent 55%), + radial-gradient(700px 400px at 80% 0%, rgba(94,234,212,.12), transparent 55%); +} +.cta__inner{ + border:1px solid rgba(255,255,255,.12); + border-radius:28px; + padding:22px; + display:flex; + align-items:center; + justify-content:space-between; + gap:14px; + background:rgba(255,255,255,.03); + box-shadow:var(--shadow); +} +.cta__inner h2{margin:0 0 6px} +.cta__inner p{margin:0;color:#d6e2ff} +.cta__actions{display:flex;gap:10px;flex-wrap:wrap} + +.footer{ + padding:28px 0; + color:var(--muted); +} +.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:18px} +.brand--footer .brand__mark{width:34px;height:34px;border-radius:12px} +.footer a{color:var(--muted)} +.footer a:hover{color:var(--text);text-decoration:none} + +/* Responsive */ +@media (max-width: 980px){ + .hero__grid{grid-template-columns:1fr;gap:18px} + h1{font-size:38px} + .split{grid-template-columns:1fr} + .cards--3{grid-template-columns:repeat(2,1fr)} + .callout{grid-template-columns:1fr} + .cta__inner{flex-direction:column;align-items:flex-start} +} + +@media (max-width: 720px){ + .nav{display:none} + .nav__toggle{display:flex} + .cards--2{grid-template-columns:1fr} + .cards--3{grid-template-columns:1fr} + .hero__meta{grid-template-columns:1fr} +} + +@media (prefers-reduced-motion: reduce){ + *{ + animation:none !important; + transition:none !important; + scroll-behavior:auto !important; + } +}