244 lines
14 KiB
HTML
244 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0ea5b7">
|
||
<title>Urlaub 2026 – Familie Heidrich · Vergleich & Abstimmung</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||
<style>
|
||
:root{
|
||
--bg:#f7f9fc; --surf:#ffffff; --surf2:#f1f5f9; --line:#e6ebf2; --line2:#dbe3ee;
|
||
--ink:#0f172a; --ink2:#475569; --mut:#7c8aa0;
|
||
--accent:#0ea5b7; --accent-d:#0b7e8c; --hr:#e8643c; --gold:#f6b73c; --green:#16a36b;
|
||
--kro:#e8643c; --kan:#f1a23b; --mad:#19a37a; --cruise:#2f7fd6;
|
||
--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);
|
||
--r:18px;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{margin:0;background:var(--bg);color:var(--ink);
|
||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
||
line-height:1.55;-webkit-text-size-adjust:100%}
|
||
a{color:var(--accent-d)}
|
||
img{max-width:100%}
|
||
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
|
||
|
||
/* ---------- Voter bar ---------- */
|
||
.voterbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);
|
||
backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
|
||
.voterbar .in{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||
.voterbar b{font-size:13px;color:var(--ink2);white-space:nowrap}
|
||
.who{display:flex;gap:6px;flex-wrap:wrap}
|
||
.who button{border:1px solid var(--line2);background:#fff;color:var(--ink2);
|
||
padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
|
||
.who button .av{width:18px;height:18px;border-radius:50%;display:inline-block}
|
||
.who button.on{color:#fff;border-color:transparent}
|
||
.who button.on.till{background:#2f7fd6}.who button.on.lea{background:#e8643c}.who button.on.astrid{background:#19a37a}
|
||
.av.till{background:#2f7fd6}.av.lea{background:#e8643c}.av.astrid{background:#19a37a}
|
||
.voterbar .sp{flex:1}
|
||
.linkbtn{font-size:12.5px;color:var(--ink2);text-decoration:none;border:1px solid var(--line2);padding:5px 10px;border-radius:999px}
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero{position:relative;border-radius:0 0 24px 24px;overflow:hidden;margin-bottom:8px}
|
||
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
|
||
.hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,55,.34),rgba(8,40,55,.66))}
|
||
.hero .ct{position:relative;max-width:1180px;margin:0 auto;padding:54px 18px 30px;color:#fff}
|
||
.hero h1{font-size:clamp(26px,5.4vw,42px);margin:0 0 8px;letter-spacing:-.02em;line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.25)}
|
||
.hero p{margin:0;max-width:680px;font-size:clamp(14px,2.4vw,16.5px);color:#eaf3f6;text-shadow:0 1px 10px rgba(0,0,0,.3)}
|
||
.hero .facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
|
||
.hero .facts span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
|
||
padding:5px 11px;border-radius:999px;font-size:12.5px;backdrop-filter:blur(4px)}
|
||
|
||
section{padding:26px 0}
|
||
h2.sec{font-size:clamp(19px,3.6vw,24px);letter-spacing:-.02em;margin:0 0 4px;display:flex;align-items:center;gap:9px}
|
||
.sub{color:var(--ink2);margin:0 0 16px;font-size:14.5px;max-width:720px}
|
||
|
||
/* ---------- Recommendation cards ---------- */
|
||
.recos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||
.reco{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
|
||
.reco .top{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
|
||
.reco .rank{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-d)}
|
||
.reco h3{margin:4px 0 2px;font-size:17.5px;letter-spacing:-.01em}
|
||
.reco .place{color:var(--mut);font-size:12.5px}
|
||
.reco .body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
|
||
.reco p{margin:0;font-size:13.5px;color:var(--ink2)}
|
||
.pricebox{background:var(--surf2);border-radius:12px;padding:11px 12px;font-size:13px}
|
||
.pricebox .big{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
|
||
.pricebox .li{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:var(--ink2)}
|
||
.pricebox .li b{color:var(--ink);font-weight:700}
|
||
.reco .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
|
||
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
|
||
font-size:12.5px;padding:9px 13px;border-radius:10px;text-align:center}
|
||
.btn.ghost{background:#fff;color:var(--accent-d);border:1px solid var(--line2)}
|
||
.btn:active{transform:scale(.97)}
|
||
|
||
/* ---------- Map ---------- */
|
||
#map{height:430px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
|
||
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 2px 0;font-size:12.5px;color:var(--ink2)}
|
||
.legend span{display:inline-flex;align-items:center;gap:6px}
|
||
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
|
||
|
||
/* ---------- Region + hotel cards ---------- */
|
||
.region-h{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
|
||
.region-h .flag{font-size:22px}
|
||
.region-h h2{font-size:20px;margin:0;letter-spacing:-.01em}
|
||
.region-h .cnt{color:var(--mut);font-size:13px}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
|
||
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
|
||
.card.fav{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold) inset,var(--shadow)}
|
||
.ph{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#dfeaf2,#eef3f8);overflow:hidden}
|
||
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
|
||
.ph img.on{opacity:1}
|
||
.ph .nav{position:absolute;top:0;bottom:0;width:42%;cursor:pointer;z-index:2}
|
||
.ph .nav.l{left:0}.ph .nav.r{right:0}
|
||
.ph .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:3}
|
||
.ph .dot{width:6px;height:6px;border-radius:50%;background:#ffffff90;box-shadow:0 0 2px rgba(0,0,0,.3)}
|
||
.ph .dot.on{background:#fff}
|
||
.rtag{position:absolute;top:10px;left:10px;z-index:3;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff}
|
||
.favtag{position:absolute;top:10px;right:10px;z-index:3;background:var(--gold);color:#4a3000;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px}
|
||
.card .bd{padding:13px 14px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
|
||
.card h3{margin:0;font-size:16px;letter-spacing:-.01em}
|
||
.loc{color:var(--mut);font-size:12.5px;margin-top:-3px}
|
||
.stars-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
||
.crate{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2)}
|
||
.crate b{background:#e7f6f4;color:#0b6f6b;padding:2px 7px;border-radius:6px;font-weight:800}
|
||
.chips{display:flex;flex-wrap:wrap;gap:6px}
|
||
.chip{font-size:11.5px;background:var(--surf2);border:1px solid var(--line);color:var(--ink2);padding:3px 8px;border-radius:7px}
|
||
.why{font-size:12.5px;color:var(--ink2);display:flex;flex-direction:column;gap:3px;background:#fbfdff;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
|
||
.why .ok{color:var(--green);font-weight:700}.why .no{color:var(--hr);font-weight:700}
|
||
.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:2px}
|
||
.price{font-size:12.5px;color:var(--mut)}.price b{color:var(--ink);font-size:15px}
|
||
|
||
/* ---------- Voting widget ---------- */
|
||
.vote{border-top:1px dashed var(--line2);padding-top:10px;margin-top:2px}
|
||
.vote .lead{font-size:11.5px;color:var(--mut);margin-bottom:5px}
|
||
.starpick{display:flex;gap:3px}
|
||
.starpick .s{font-size:22px;line-height:1;cursor:pointer;color:#d7dee8;transition:transform .08s}
|
||
.starpick .s.fill{color:var(--gold)}
|
||
.starpick .s:active{transform:scale(1.2)}
|
||
.voteinfo{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
|
||
.avg{font-size:12.5px;color:var(--ink2)}
|
||
.avg b{color:var(--ink);font-weight:800}
|
||
.voters-mini{display:flex;gap:4px}
|
||
.vm{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative}
|
||
.vm .n{position:absolute;-bottom:-2px;right:-3px;background:#fff;color:#0f172a;border-radius:6px;font-size:8.5px;padding:0 2px;border:1px solid var(--line)}
|
||
.vm.dim{opacity:.28}
|
||
|
||
/* ---------- Results ---------- */
|
||
.resultbox{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
|
||
.rank-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
|
||
.rrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surf2)}
|
||
.rrow .pos{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line2);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
|
||
.rrow.top1{background:#fff7e6;border:1px solid #f6cf7a}
|
||
.rrow .nm{font-weight:600;font-size:14px;flex:1;min-width:0}
|
||
.rrow .nm small{display:block;color:var(--mut);font-weight:400;font-size:11.5px}
|
||
.rrow .bar{flex:1.2;height:8px;background:#e7edf4;border-radius:6px;overflow:hidden;max-width:160px}
|
||
.rrow .bar i{display:block;height:100%;background:linear-gradient(90deg,#f6b73c,#e8643c)}
|
||
.rrow .sc{font-weight:800;font-size:14px;white-space:nowrap}
|
||
.rrow .sc small{color:var(--mut);font-weight:500;font-size:11px}
|
||
.resethint{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
|
||
.reset{background:#fff;border:1px solid #f0c2c2;color:#c0392b;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:10px;cursor:pointer}
|
||
.reset:active{transform:scale(.97)}
|
||
.saved{font-size:12px;color:var(--green);opacity:0;transition:opacity .3s}
|
||
.saved.on{opacity:1}
|
||
|
||
.note{font-size:12px;color:var(--mut);margin-top:8px}
|
||
footer{padding:30px 0 50px;color:var(--mut);font-size:12px}
|
||
footer a{color:var(--ink2)}
|
||
|
||
/* ---------- Mobile ---------- */
|
||
@media(max-width:860px){ .recos{grid-template-columns:1fr} #map{height:360px} }
|
||
@media(max-width:560px){
|
||
.wrap{padding:0 12px}
|
||
.hero .ct{padding:40px 14px 24px}
|
||
.grid{grid-template-columns:1fr;gap:13px}
|
||
section{padding:20px 0}
|
||
.voterbar .in{padding:7px 12px;gap:8px}
|
||
.voterbar b{flex-basis:100%;margin-bottom:-2px}
|
||
.linkbtn{display:none}
|
||
.rrow .bar{display:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Voter bar -->
|
||
<div class="voterbar">
|
||
<div class="in">
|
||
<b>Wer bist du?</b>
|
||
<div class="who" id="who"></div>
|
||
<span class="sp"></span>
|
||
<a class="linkbtn" href="#ergebnis">🏆 Ergebnis</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero -->
|
||
<div class="hero">
|
||
<div class="bg" id="herobg"></div>
|
||
<div class="ov"></div>
|
||
<div class="ct">
|
||
<h1>Wohin im Sommer 2026? 🌅</h1>
|
||
<p>Hotels & AIDA-Kreuzfahrt im Vergleich – mit Fotos, Karte, Preisen und Mietwagen-Schätzung. Till, Lea und Astrid geben jeweils Sterne ab, unten seht ihr das Familien-Ergebnis.</p>
|
||
<div class="facts">
|
||
<span>👨👩👦 4 Personen (Till, Lea, Felix 3 J., Astrid)</span>
|
||
<span>📅 ~11.–21. Juli 2026</span>
|
||
<span>🧳 3 große Koffer</span>
|
||
<span>🚗 max. 2 h Fahrt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
|
||
<!-- 3 Empfehlungen -->
|
||
<section id="empfehlungen">
|
||
<h2 class="sec">🎯 Unsere 3 Empfehlungen</h2>
|
||
<p class="sub">Familien-gewichtet (kleiner Felix, entspannt für Astrid, kurze Wege). Preise als Orientierung für 4 Personen – Hotelpreise auf Check24 mit eurer Belegung gegenprüfen.</p>
|
||
<div class="recos" id="recos"></div>
|
||
<div class="note">💡 Mietwagen für 4 Pers. + 3 große Koffer = mind. Kombi (z. B. VW Passat Variant) oder Kompakt-SUV/Van (Touran, Qashqai) – kein Kleinwagen. Hochsaison Juli: Kroatien ab Split ~60–80 €/Tag, Kanaren ~45–60 €/Tag.</div>
|
||
</section>
|
||
|
||
<!-- Karte -->
|
||
<section id="karte">
|
||
<h2 class="sec">🗺️ Alles auf einer Karte</h2>
|
||
<p class="sub">Hotels als Punkte, die AIDA-Route als Linie. Tippe auf einen Marker für Details & Link.</p>
|
||
<div id="map"></div>
|
||
<div class="legend">
|
||
<span><i style="background:var(--kro)"></i> Kroatien</span>
|
||
<span><i style="background:var(--kan)"></i> Kanaren</span>
|
||
<span><i style="background:var(--mad)"></i> Madeira</span>
|
||
<span><i style="background:var(--cruise)"></i> AIDA-Route</span>
|
||
<span>⭐ = unsere Empfehlung</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Regions render here -->
|
||
<div id="regions"></div>
|
||
|
||
<!-- Ergebnis -->
|
||
<section id="ergebnis">
|
||
<h2 class="sec">🏆 Familien-Ergebnis</h2>
|
||
<p class="sub">Durchschnitt aller abgegebenen Sterne. Aktualisiert sich live, sobald jemand abstimmt.</p>
|
||
<div class="resultbox">
|
||
<div class="rank-list" id="ranklist"></div>
|
||
<div class="resethint">
|
||
<span class="note">Stand wird auf dem Server gespeichert – alle drei sehen dasselbe.</span>
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span class="saved" id="saved">✓ gespeichert</span>
|
||
<button class="reset" id="resetBtn">↺ Alle Bewertungen zurücksetzen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
Fotos & Hoteldaten: Check24 · Kreuzfahrt: AIDA / Ahoi-Schiff.de · Karten: OpenStreetMap.
|
||
Preise & Verfügbarkeit ändern sich laufend – bitte vor Buchung prüfen. Erstellt für Familie Heidrich.
|
||
</footer>
|
||
</div>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="app.js" defer></script>
|
||
</body>
|
||
</html>
|