Till Heidrich
eca5dbd866
- Rebrand zu 'Fredi24' (named after Frieda 🐾) - Passwort-Gate: frediurlaub26 - Abstimmungs-System: Till + Lea stimmen unabhängig ab (❤️🤔❌) - Vote-Ergebnis-Tab mit Match-Anzeige (💚💛❌) - JSON-Export der Abstimmung für Codex - Eigene Ideen einreichen (FAB-Button, Modal, localStorage) - 18 Destinationen (vorher 9): +Fuerteventura, Menorca, Côte d'Azur, Schweiz (Lea würde sofort!), Frankreich, Kapverden, Malta, Lanzarote, Costa del Sol, MSC Kreuzfahrt - Schweiz + Frankreich jetzt OK (nicht mehr raus!) - De Reeuwijkse Plassen: 2026 korrekt - Vollständige Airbnb-Historie 2015-2020 - Felix-Alterskurve im Info-Tab - Mobile-first mit Bottom-Navigation - Preis-Badges (Budget-Tipp 💚 / Im Budget / Knapp) - 'Unsere Empfehlung' Hero-Banner (Sardinien)
1439 lines
88 KiB
HTML
1439 lines
88 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
||
<title>Fredi24 – Reise-Planer</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
:root{
|
||
--bg:#F7F3ED;--bg2:#EDE8DF;--card:#FFFFFF;--border:#E4DDD4;
|
||
--coral:#E55A35;--coral-dark:#C4482A;--coral-light:#FCEAE4;
|
||
--gold:#D4A020;--gold-light:#FDF4DC;
|
||
--teal:#1F6B5E;--teal-light:#D4EDE8;
|
||
--blue:#3B7EC8;--blue-light:#DAEAF8;
|
||
--purple:#7B4DBA;--purple-light:#EDE0FA;
|
||
--text:#18181B;--muted:#78716C;--subtle:#A8A29E;
|
||
--navy:#0D1B2A;
|
||
--tag-h: 22px;
|
||
--r:12px;--r-sm:8px;--r-lg:16px;
|
||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
}
|
||
html{-webkit-text-size-adjust:100%;}
|
||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;min-height:100vh;padding-bottom:calc(64px + var(--safe-bottom));}
|
||
|
||
/* GATE */
|
||
#gate{position:fixed;inset:0;background:var(--navy);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
|
||
.gate-box{background:#fff;border-radius:20px;padding:36px 28px;text-align:center;max-width:320px;width:100%;}
|
||
.gate-paw{font-size:52px;margin-bottom:8px;}
|
||
.gate-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:var(--coral);letter-spacing:-0.04em;}
|
||
.gate-sub{font-size:13px;color:var(--muted);margin:4px 0 24px;}
|
||
.gate-input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--r);font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border .2s;margin-bottom:10px;background:var(--bg);}
|
||
.gate-input:focus{border-color:var(--coral);}
|
||
.gate-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;transition:background .2s;letter-spacing:.01em;}
|
||
.gate-btn:hover{background:var(--coral-dark);}
|
||
.gate-err{color:var(--coral);font-size:12px;margin-top:8px;display:none;font-weight:500;}
|
||
|
||
/* HEADER */
|
||
.header{background:var(--navy);color:#fff;padding:14px 16px 12px;position:sticky;top:0;z-index:100;}
|
||
.header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
||
.brand{display:flex;align-items:center;gap:6px;}
|
||
.brand-logo{font-size:20px;}
|
||
.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.04em;}
|
||
.brand-name span{color:var(--coral);}
|
||
.header-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;}
|
||
.hp{background:rgba(255,255,255,0.1);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.75);white-space:nowrap;}
|
||
.hp.budget{background:rgba(212,160,32,0.3);color:#FFD966;}
|
||
.hp.alert{background:rgba(229,90,53,0.3);color:#FF9B80;}
|
||
|
||
/* BUDGET BAR */
|
||
.budget-indicator{margin-top:8px;display:flex;align-items:center;gap:8px;}
|
||
.budget-track{flex:1;height:3px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden;}
|
||
.budget-fill{height:100%;background:linear-gradient(90deg,#2D7A6A,#D4A020);border-radius:2px;}
|
||
.budget-label{font-size:10px;color:rgba(255,255,255,0.5);}
|
||
|
||
/* BOTTOM NAV (mobile first) */
|
||
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#fff;border-top:1px solid var(--border);display:flex;padding-bottom:var(--safe-bottom);box-shadow:0 -4px 24px rgba(0,0,0,0.08);}
|
||
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;cursor:pointer;border:none;background:none;color:var(--muted);transition:color .15s;font-size:9px;font-weight:600;font-family:'Outfit',sans-serif;letter-spacing:.03em;}
|
||
.bnav-item .icon{font-size:20px;line-height:1;}
|
||
.bnav-item.active{color:var(--coral);}
|
||
.bnav-item .badge{position:absolute;top:-2px;right:-4px;background:var(--coral);color:#fff;border-radius:10px;padding:1px 5px;font-size:9px;font-weight:700;}
|
||
.bnav-icon-wrap{position:relative;}
|
||
|
||
/* CONTENT */
|
||
.tab-content{display:none;padding:12px 12px 0;}
|
||
.tab-content.active{display:block;}
|
||
|
||
/* RECOMMENDATION HERO */
|
||
.reco-hero{background:linear-gradient(135deg,var(--teal),#1A4B3F);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;}
|
||
.reco-hero::before{content:'⭐';position:absolute;right:-10px;top:-10px;font-size:80px;opacity:0.08;}
|
||
.reco-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:4px;}
|
||
.reco-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;line-height:1.1;margin-bottom:6px;letter-spacing:-0.02em;}
|
||
.reco-why{font-size:12px;color:rgba(255,255,255,0.75);margin-bottom:12px;line-height:1.5;}
|
||
.reco-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
|
||
.reco-price{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:#FFD966;}
|
||
.reco-tag{background:rgba(255,255,255,0.15);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;}
|
||
.reco-btn{margin-left:auto;background:#fff;color:var(--teal);border:none;border-radius:var(--r);padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;}
|
||
|
||
/* SECTION HEADER */
|
||
.section-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;}
|
||
.section-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.02em;}
|
||
.section-count{font-size:11px;color:var(--muted);background:var(--bg2);padding:2px 8px;border-radius:10px;}
|
||
|
||
/* FILTER CHIPS */
|
||
.filter-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;scrollbar-width:none;}
|
||
.filter-row::-webkit-scrollbar{display:none;}
|
||
.chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--muted);transition:all .15s;flex-shrink:0;}
|
||
.chip.active{background:var(--coral);border-color:var(--coral);color:#fff;}
|
||
|
||
/* DESTINATION CARDS */
|
||
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
|
||
|
||
@media(max-width:660px){.dest-grid{grid-template-columns:1fr;}}
|
||
|
||
.dest-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border);transition:transform .15s,box-shadow .15s;}
|
||
.dest-card:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,0.1);}
|
||
.dest-card.dim{opacity:.65;}
|
||
|
||
/* CARD HEADER BAR */
|
||
.card-hdr{padding:12px 14px 8px;display:flex;align-items:flex-start;gap:10px;}
|
||
.dest-em{font-size:30px;flex-shrink:0;line-height:1;}
|
||
.dest-meta{flex:1;min-width:0;}
|
||
.dest-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;}
|
||
.dest-sub{font-size:11px;color:var(--muted);margin-top:1px;}
|
||
.status-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
|
||
.sbadge{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff;white-space:nowrap;text-transform:uppercase;}
|
||
.s-TOP{background:var(--teal);}
|
||
.s-OK{background:var(--gold);}
|
||
.s-NEW{background:var(--purple);}
|
||
.s-SPÄTER{background:var(--blue);}
|
||
.s-MAYBE{background:var(--muted);}
|
||
.s-NEIN{background:#DC2626;}
|
||
.s-RECO{background:var(--coral);font-size:8px;}
|
||
|
||
/* PRICE ROW */
|
||
.card-price{padding:8px 14px;background:linear-gradient(90deg,var(--bg),var(--card));display:flex;align-items:center;gap:8px;}
|
||
.price-main{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--text);}
|
||
.price-range{font-size:10px;color:var(--muted);}
|
||
.price-badge{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700;}
|
||
.pb-cheap{background:var(--teal-light);color:var(--teal);}
|
||
.pb-mid{background:var(--gold-light);color:var(--gold);}
|
||
.pb-pricey{background:var(--coral-light);color:var(--coral);}
|
||
|
||
/* CARD SCORES */
|
||
.card-scores{display:flex;gap:8px;padding:6px 14px;background:var(--bg);}
|
||
.sc{flex:1;}
|
||
.sc-lbl{font-size:9px;color:var(--muted);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:.05em;}
|
||
.sc-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
|
||
.sc-fill{height:100%;border-radius:2px;}
|
||
.sc-f{background:var(--teal);}
|
||
.sc-l{background:var(--coral);}
|
||
.sc-m{background:var(--gold);}
|
||
|
||
/* CARD STATS */
|
||
.card-stats{display:flex;gap:0;border-top:1px solid var(--bg);border-bottom:1px solid var(--bg);}
|
||
.cstat{flex:1;text-align:center;padding:7px 4px;border-right:1px solid var(--bg);}
|
||
.cstat:last-child{border-right:none;}
|
||
.cstat-val{font-size:11px;font-weight:700;color:var(--text);display:block;}
|
||
.cstat-key{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
|
||
|
||
/* CARD BODY */
|
||
.card-body{padding:10px 14px 12px;}
|
||
.card-highlight{font-size:12px;color:var(--teal);font-weight:600;margin-bottom:7px;font-style:italic;}
|
||
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
|
||
.pro-list li,.con-list li{list-style:none;font-size:11px;line-height:1.6;padding-left:13px;position:relative;}
|
||
.pro-list li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700;}
|
||
.con-list li::before{content:"✗";position:absolute;left:0;color:var(--coral);font-weight:700;}
|
||
.card-note{margin-top:8px;padding:6px 9px;background:var(--bg);border-radius:6px;font-size:11px;color:var(--muted);border-left:2px solid var(--gold);}
|
||
|
||
/* VOTE STRIP */
|
||
.vote-strip{display:flex;align-items:center;padding:8px 14px;border-top:1px solid var(--bg);gap:8px;}
|
||
.vote-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;}
|
||
.vote-group{display:flex;gap:4px;flex:1;}
|
||
.vote-person{font-size:10px;font-weight:600;color:var(--muted);margin-right:2px;}
|
||
.vote-btn{padding:3px 8px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);font-size:13px;cursor:pointer;transition:all .15s;line-height:1;}
|
||
.vote-btn.active-love{background:#FCEAE4;border-color:var(--coral);}
|
||
.vote-btn.active-maybe{background:var(--gold-light);border-color:var(--gold);}
|
||
.vote-btn.active-no{background:#FEE2E2;border-color:#DC2626;}
|
||
.vote-result{font-size:16px;margin-left:auto;}
|
||
|
||
/* FELIX AGE BADGE */
|
||
.felix-age{display:inline-block;margin-top:5px;background:var(--teal-light);color:var(--teal);font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;}
|
||
|
||
/* SUBMIT MODAL */
|
||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0;}
|
||
.modal-overlay.open{display:flex;}
|
||
.modal{background:#fff;border-radius:20px 20px 0 0;padding:20px;max-height:85vh;overflow-y:auto;width:100%;max-width:540px;}
|
||
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px;}
|
||
.modal-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;margin-bottom:14px;letter-spacing:-0.02em;}
|
||
.form-group{margin-bottom:12px;}
|
||
.form-label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
|
||
.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:'Outfit',sans-serif;outline:none;background:var(--bg);transition:border .2s;color:var(--text);}
|
||
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--coral);}
|
||
.form-textarea{resize:none;min-height:70px;}
|
||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
|
||
.modal-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;margin-top:4px;}
|
||
.modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:0 4px;}
|
||
|
||
/* ABSTIMMUNG TAB */
|
||
.vote-table{background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border);}
|
||
.vote-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--bg);}
|
||
.vote-row:last-child{border-bottom:none;}
|
||
.vote-row.header{background:var(--bg);font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:8px 14px;}
|
||
.vote-dest-name{font-size:13px;font-weight:600;}
|
||
.vote-dest-country{font-size:11px;color:var(--muted);}
|
||
.vote-emoji{font-size:18px;text-align:center;}
|
||
.vote-summary{font-size:12px;font-weight:600;text-align:center;}
|
||
.export-btn{background:var(--navy);color:#fff;border:none;border-radius:var(--r);padding:10px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;margin-top:12px;width:100%;}
|
||
|
||
/* HISTORY */
|
||
.hist-year{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:var(--coral);margin:16px 0 8px;letter-spacing:-0.03em;}
|
||
.hist-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--card);border-radius:var(--r-sm);margin-bottom:5px;border:1px solid var(--border);}
|
||
.hist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;}
|
||
.hotel .hist-dot{background:var(--teal);}
|
||
.cruise .hist-dot{background:var(--coral);}
|
||
.ferienhaus .hist-dot{background:var(--gold);}
|
||
.airbnb .hist-dot{background:var(--purple);}
|
||
.family .hist-dot{background:var(--blue);}
|
||
.storno .hist-dot{background:var(--subtle);}
|
||
.hist-em{font-size:18px;flex-shrink:0;}
|
||
.hist-body{flex:1;}
|
||
.hist-dest-name{font-weight:700;font-size:13px;}
|
||
.hist-loc{font-size:11px;color:var(--muted);}
|
||
.hist-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
|
||
.htag{font-size:9px;padding:1px 7px;border-radius:10px;font-weight:700;}
|
||
.htag-hotel{background:var(--teal-light);color:var(--teal);}
|
||
.htag-cruise{background:var(--coral-light);color:var(--coral);}
|
||
.htag-fh{background:var(--gold-light);color:var(--gold);}
|
||
.htag-airbnb{background:var(--purple-light);color:var(--purple);}
|
||
.htag-family{background:var(--blue-light);color:var(--blue);}
|
||
.htag-storno{background:var(--bg2);color:var(--muted);}
|
||
.hist-pers{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap;flex-shrink:0;}
|
||
|
||
/* INFO TAB */
|
||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
|
||
@media(max-width:540px){.info-grid{grid-template-columns:1fr;}}
|
||
.info-card{background:var(--card);border-radius:var(--r-lg);padding:14px;border:1.5px solid var(--border);}
|
||
.info-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;margin-bottom:8px;letter-spacing:-0.02em;}
|
||
.info-list li{list-style:none;font-size:11px;line-height:1.8;padding-left:13px;position:relative;}
|
||
.info-list li::before{content:"→";position:absolute;left:0;color:var(--coral);}
|
||
.info-list li.excl::before{content:"✗";color:#DC2626;}
|
||
.info-full{grid-column:1/-1;}
|
||
.step-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--bg);}
|
||
.step-row:last-child{border-bottom:none;}
|
||
.step-num{width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||
.step-text{font-size:11px;line-height:1.6;}
|
||
.step-text strong{color:var(--teal);}
|
||
.age-card{grid-column:1/-1;background:var(--navy);border-radius:var(--r-lg);padding:16px;color:#fff;}
|
||
.age-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;margin-bottom:10px;color:rgba(255,255,255,0.9);}
|
||
.age-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
|
||
.age-badge{background:var(--coral);color:#fff;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap;flex-shrink:0;}
|
||
.age-body{font-size:11px;color:rgba(255,255,255,0.65);line-height:1.65;}
|
||
.age-body strong{color:#fff;}
|
||
|
||
/* SUBMISSION CARDS */
|
||
.sub-card{background:var(--card);border:2px dashed var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:8px;}
|
||
.sub-card-name{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;}
|
||
.sub-card-meta{font-size:11px;color:var(--muted);margin-top:2px;}
|
||
.sub-card-why{font-size:12px;color:var(--text);margin-top:6px;font-style:italic;}
|
||
.sub-who{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-top:6px;}
|
||
.sub-till{background:var(--teal-light);color:var(--teal);}
|
||
.sub-lea{background:var(--coral-light);color:var(--coral);}
|
||
.sub-both{background:var(--gold-light);color:var(--gold);}
|
||
|
||
/* FAB */
|
||
.fab{position:fixed;right:16px;bottom:calc(72px + var(--safe-bottom));background:var(--coral);color:#fff;border:none;border-radius:50%;width:52px;height:52px;font-size:24px;cursor:pointer;box-shadow:0 4px 20px rgba(229,90,53,0.4);z-index:150;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
|
||
.fab:hover{transform:scale(1.05);}
|
||
|
||
/* TOAST */
|
||
.toast{position:fixed;bottom:calc(76px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:30px;font-size:12px;font-weight:600;opacity:0;transition:all .3s;z-index:400;pointer-events:none;}
|
||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||
|
||
/* EMPTY STATE */
|
||
.empty{text-align:center;padding:40px 20px;}
|
||
.empty-icon{font-size:48px;margin-bottom:12px;}
|
||
.empty-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;margin-bottom:4px;}
|
||
.empty-sub{font-size:12px;color:var(--muted);}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- GATE -->
|
||
<div id="gate">
|
||
<div class="gate-box">
|
||
<div class="gate-paw">🐾</div>
|
||
<div class="gate-brand">Fredi24</div>
|
||
<div class="gate-sub">Unser privater Reise-Planer · Till & Lea</div>
|
||
<input class="gate-input" type="password" id="pw" placeholder="Passwort" onkeydown="if(event.key==='Enter')auth()">
|
||
<button class="gate-btn" onclick="auth()">Einloggen</button>
|
||
<div class="gate-err" id="pw-err">Nicht korrekt – versuch's nochmal 🙅</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HEADER -->
|
||
<div class="header">
|
||
<div class="header-row">
|
||
<div class="brand">
|
||
<span class="brand-logo">🐾</span>
|
||
<span class="brand-name">Fredi<span>24</span></span>
|
||
</div>
|
||
<div style="font-size:10px;color:rgba(255,255,255,0.5);text-align:right;">Till · Lea · Felix<br>Stand Mai 2026</div>
|
||
</div>
|
||
<div class="header-pills">
|
||
<span class="hp">✈️ HAM / HAJ · Direktflug</span>
|
||
<span class="hp">⭐⭐⭐⭐ Mind. 4★</span>
|
||
<span class="hp budget">💶 Max. 3.600 €</span>
|
||
<span class="hp">📅 ab 13. Juli 2026</span>
|
||
</div>
|
||
<div class="budget-indicator">
|
||
<div class="budget-track"><div class="budget-fill" style="width:78%"></div></div>
|
||
<span class="budget-label">2.800–3.600 € Range</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FAB -->
|
||
<button class="fab" onclick="openModal()" title="Idee einreichen">✚</button>
|
||
|
||
<!-- TOAST -->
|
||
<div class="toast" id="toast">✓ Gespeichert</div>
|
||
|
||
<!-- SUBMIT MODAL -->
|
||
<div class="modal-overlay" id="modal-overlay" onclick="if(event.target===this)closeModal()">
|
||
<div class="modal">
|
||
<div class="modal-handle"></div>
|
||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||
<div class="modal-title">💡 Neue Idee einreichen</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Destination *</label>
|
||
<input class="form-input" id="s-dest" placeholder="z.B. Ibiza Nordküste" type="text">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Land</label>
|
||
<input class="form-input" id="s-land" placeholder="Spanien" type="text">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Budget (€)</label>
|
||
<input class="form-input" id="s-budget" placeholder="3.000" type="number">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Warum das?</label>
|
||
<textarea class="form-textarea" id="s-why" placeholder="Wieso findest du das interessant?"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Vorgeschlagen von</label>
|
||
<select class="form-select" id="s-who">
|
||
<option>Till</option>
|
||
<option>Lea</option>
|
||
<option>Beide</option>
|
||
<option>Felix 😄</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status-Idee</label>
|
||
<select class="form-select" id="s-status">
|
||
<option>TOP</option>
|
||
<option>MAYBE</option>
|
||
<option>SPÄTER</option>
|
||
<option>Traumziel</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button class="modal-btn" onclick="submitIdea()">Idee einreichen 🚀</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IDEEN TAB -->
|
||
<div id="tab-ideen" class="tab-content active">
|
||
<!-- RECOMMENDATION HERO -->
|
||
<div class="reco-hero">
|
||
<div class="reco-label">🎯 Unsere Empfehlung für Juli 2026</div>
|
||
<div class="reco-title">Sardinien direkt –<br>sofort buchbar</div>
|
||
<div class="reco-why">Direktflug Hamburg 2:20h · EU-Kindersitz-Standard · Neuland für euch · Lea sagt ja · Felix liebt Sandstrände · Im Budget.</div>
|
||
<div class="reco-row">
|
||
<span class="reco-price">~3.150 €</span>
|
||
<span class="reco-tag">✈️ Direkt 2h 20</span>
|
||
<span class="reco-tag">🏖️ 4★ Hotel</span>
|
||
<button class="reco-btn" onclick="searchDest('sardinien')">Details ansehen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-row" id="filter-chips">
|
||
<button class="chip active" onclick="fc('ALL',this)">Alle</button>
|
||
<button class="chip" onclick="fc('TOP',this)">⭐ TOP</button>
|
||
<button class="chip" onclick="fc('OK',this)">👍 OK</button>
|
||
<button class="chip" onclick="fc('NEW',this)">🆕 Neu</button>
|
||
<button class="chip" onclick="fc('LATER',this)">⏳ Später</button>
|
||
<button class="chip" onclick="fc('NEIN',this)">✗ Raus</button>
|
||
</div>
|
||
|
||
<div class="dest-grid" id="dg">
|
||
|
||
<!-- ===================== TOP PICKS ===================== -->
|
||
|
||
<div class="dest-card" data-status="TOP" data-id="sardinien">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🏖️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Sardinien</div>
|
||
<div class="dest-sub">Nordsardinien · Hotel 4★ · Mietwagen</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-TOP">TOP</span><span class="sbadge s-RECO">Empfehlung</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.150 €</span><span class="price-range">für 3 Pers. 7N</span><span class="price-badge pb-mid">Im Budget ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:100%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h 20</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→OLB</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">30–35°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Karibik-Strände · EU-Kindersitz-Standard · Neuland für die Familie</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Direktflug HAM–Olbia 2:20h</li>
|
||
<li>Traumstrände (La Pelosa, Principe)</li>
|
||
<li>Lea hat Sardinien okayed</li>
|
||
<li>Sehr kinderfreundlich</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>30–35°C im Juli heiß</li>
|
||
<li>Kein AI = Eigenplanung</li>
|
||
<li>Hochsaison teuer + voll</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">Hotels: Club Hotel Baja Sardinia (4★), Sporting Beach Hotel. Nordsardinien bevorzugen.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-sardinien"></div><span class="vote-result" id="vr-sardinien"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="TOP" data-id="aida-kreuzfahrt">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🚢</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">AIDAcosma Kreuzfahrt</div>
|
||
<div class="dest-sub">Korsika · Sardinien · Rom · Marseille · Barcelona</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-TOP">TOP</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.320 €</span><span class="price-range">Schiff + Flug HAM→PMI</span><span class="price-badge pb-mid">Im Budget ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:20%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h</span><span class="cstat-key">Flug PMI</span></div>
|
||
<div class="cstat"><span class="cstat-val">7 Häfen</span><span class="cstat-key">in 1 Woche</span></div>
|
||
<div class="cstat"><span class="cstat-val">25–28°C</span><span class="cstat-key">Klima</span></div>
|
||
<div class="cstat"><span class="cstat-val">Prüfen!</span><span class="cstat-key">Termin</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Kreuzfahrt-Wunsch erfüllt · Lea muss nichts planen · Vollpension</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Korsika + Sardinien + Rom kombiniert</li>
|
||
<li>Felix Kids-Club 3–6J + Rutschen</li>
|
||
<li>AIDA kennt ihr seit 2 Reisen</li>
|
||
<li>Kinder 35% Rabatt</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Korsika-Route: 4.Juli oder 15.Aug</li>
|
||
<li>18.Juli = Gibraltar (weniger gut)</li>
|
||
<li>Kein echtes Mietwagen-Feeling</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">⚠️ aida.de Route PMI07307 direkt prüfen: Sardinien-Route 13.–16. Juli verfügbar?</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-aida-kreuzfahrt"></div><span class="vote-result" id="vr-aida-kreuzfahrt"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="TOP" data-id="algarve">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌊</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Algarve, Portugal</div>
|
||
<div class="dest-sub">Carvoeiro · Lagos · Atlantik-Klippenküste</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-TOP">TOP</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.950 €</span><span class="price-range">günstigste TOP-Option</span><span class="price-badge pb-cheap">Budget-Tipp 💚</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:65%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:100%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">3h 30</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→FAO</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">25–28°C</span><span class="cstat-key">Atlantik</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Mildestes Klima für Felix · Spektakuläre Mietwagen-Touren</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>25–28°C ideal für Kleinkind</li>
|
||
<li>Cabo de São Vicente, Lagos, Sagres</li>
|
||
<li>Carvoeiro, Praia da Luz – ruhig</li>
|
||
<li>Günstigstes Budget aller TOPs</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Lea etwas zögerlich (neu)</li>
|
||
<li>Weniger AI-Auswahl als Kanaren</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">HP statt AI sinnvoller – ihr esst täglich unterwegs bei Mietwagen-Touren.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-algarve"></div><span class="vote-result" id="vr-algarve"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="NEW" data-id="glamping">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🏕️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Glamping · Camping-Village IT</div>
|
||
<div class="dest-sub">Bungalow direkt am Meer · Pool · Kinderanimation</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-NEW">Neu</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.500 €</span><span class="price-range">günstigste Option!</span><span class="price-badge pb-cheap">Preis-Tipp 💚</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:70%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:80%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h</span><span class="cstat-key">HAM→VCE</span></div>
|
||
<div class="cstat"><span class="cstat-val">Pool+Meer</span><span class="cstat-key">direkt</span></div>
|
||
<div class="cstat"><span class="cstat-val">28–33°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">ASAP!</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Tipp vom Meister: Bungalow am Meer mit Pool – unterschätzt!</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Direkter Meerzugang + eigener Pool</li>
|
||
<li>Kinderclub, Animation, Strand</li>
|
||
<li>30–50% günstiger als Hotel</li>
|
||
<li>Absolutes Neuland</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kein 4★-Hotelkomfort</li>
|
||
<li>Qualität je nach Anlage stark variabel</li>
|
||
<li>Juli-Plätze schnell weg</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">Top: Union Lido/Cavallino (Venetien), Punta Lunga/Vieste (Gargano). Buchung: acsi.eu · pitchup.com</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-glamping"></div><span class="vote-result" id="vr-glamping"></span></div>
|
||
</div>
|
||
|
||
<!-- ===================== OK ===================== -->
|
||
|
||
<div class="dest-card" data-status="OK" data-id="taurito">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌴</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Taurito Princess</div>
|
||
<div class="dest-sub">TUI KIDS CLUB · Gran Canaria · All Inclusive</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">Lea ♥</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.100 €</span><span class="price-range">AI Pauschal inkl. Flug</span><span class="price-badge pb-mid">Im Budget ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:100%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:60%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">5h 00</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→LPA</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">25–28°C</span><span class="cstat-key">Passat</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Lea's ausdrücklicher Favorit · Felix Mini-Club ab 3J · Bewährt</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Lea will es</li>
|
||
<li>Felix Mini-Club + Kinderpool</li>
|
||
<li>AI-Vollversorgung</li>
|
||
<li>Wasserpark 5 Min entfernt</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>4. Kanaren-Reise in 4 Jahren</li>
|
||
<li>Till will was anderes</li>
|
||
<li>AI-Bunker ohne echte Touren</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">Link: c.24.de/pr/F8F2FX · Kinderfestpreis (2–12J) Mai–Sep 2026.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-taurito"></div><span class="vote-result" id="vr-taurito"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="fuerteventura">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🏜️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Fuerteventura</div>
|
||
<div class="dest-sub">Aldiana / Robinson · Ruhiger als Gran Canaria</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.200 €</span><span class="price-range">AI-Clubhotel</span><span class="price-badge pb-mid">Im Budget ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:90%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:60%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">4h 30</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→FUE</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">24–28°C</span><span class="cstat-key">Passat</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Ruhigste Kanareninseln · Riesige Sandstrände · Windsurf-Paradies</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Weniger touristisch als GC</li>
|
||
<li>Aldiana/Robinson: Club-Konzept</li>
|
||
<li>Riesige flache Strände für Felix</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kanaren = nochmal dasselbe</li>
|
||
<li>Windig (Kitesurf-Destination)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-fuerteventura"></div><span class="vote-result" id="vr-fuerteventura"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="menorca">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🏝️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Menorca</div>
|
||
<div class="dest-sub">Ruhigste Baleareninsel · Cala Galdana · 4★</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.900 €</span><span class="price-range">HP 4★ + Flug</span><span class="price-badge pb-cheap">Günstig ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:85%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:75%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:90%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h 30</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→MAH</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">28–33°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Ruhiger als Mallorca · Türkises Wasser · Wenig Massentourismus</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Ruhiger als Mallorca + Ibiza</li>
|
||
<li>Biosphärenreservat – sauber</li>
|
||
<li>Schöne Buchten mit Mietwagen</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Weniger Kinderclub-Angebot</li>
|
||
<li>Sehr heiß im Juli</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-menorca"></div><span class="vote-result" id="vr-menorca"></span></div>
|
||
</div>
|
||
|
||
<!-- FRANKREICH – POSITIV! -->
|
||
<div class="dest-card" data-status="OK" data-id="cote-azur">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🇫🇷</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Côte d'Azur</div>
|
||
<div class="dest-sub">Nizza · Antibes · Familien-Feriendorf</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">Lea mag FR</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.000 €</span><span class="price-range">Flug + Hotel/Feriendorf</span><span class="price-badge pb-mid">Im Budget ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:85%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:90%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→NCE</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">28–33°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Lea würde sofort Frankreich machen · Mittelmeer-Frankreich · Charmant</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Lea mag Frankreich</li>
|
||
<li>Nizza direkt ab Hamburg 2h</li>
|
||
<li>Traumküste + Mietwagen-Touren (Monaco, Cannes)</li>
|
||
<li>Sehr familienfreundliche Feriendörfer</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Juli sehr teuer an der Côte d'Azur</li>
|
||
<li>Wenig AI-Hotels – eher HP oder Feriendorf</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">Feriendorf-Tipp: Center Parcs Les Lacs de l'Escapade (Var) oder Antibes direkt.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-cote-azur"></div><span class="vote-result" id="vr-cote-azur"></span></div>
|
||
</div>
|
||
|
||
<!-- SCHWEIZ – POSITIV! -->
|
||
<div class="dest-card" data-status="OK" data-id="schweiz">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🏔️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Schweiz + Norditalien</div>
|
||
<div class="dest-sub">Fribourg · Gruyères · Lago Maggiore</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">Lea würde sofort</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.000 €</span><span class="price-range">günstigster Kurztrip</span><span class="price-badge pb-cheap">Budget-Winner 💚</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix (4J+)</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:60%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:90%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:80%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">860 km</span><span class="cstat-key">Caddy*</span></div>
|
||
<div class="cstat"><span class="cstat-val">Freunde</span><span class="cstat-key">Fribourg</span></div>
|
||
<div class="cstat"><span class="cstat-val">22–28°C</span><span class="cstat-key">Sommer</span></div>
|
||
<div class="cstat"><span class="cstat-val">Flexibel</span><span class="cstat-key">Termin</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Lea würde es sofort machen · Freunde besuchen · Château de Gruyères</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Lea will Schweiz ausdrücklich</li>
|
||
<li>Château de Gruyères – Felix findet Burgen spannend!</li>
|
||
<li>Tagestour Lago Maggiore (2,5h)</li>
|
||
<li>Freunde bei Fribourg = ggf. günstig</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>860 km Caddy (Dienstwagen, kein Kostenproblem)</li>
|
||
<li>Schweizer Hotels teuer</li>
|
||
<li>Kein klassischer Strandurlaub</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">*Caddy ist Dienstwagen der HHGmbH – keine persönlichen Kosten. Alternativ: Flug HAM→GVA + Mietwagen.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-schweiz"></div><span class="vote-result" id="vr-schweiz"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="kapverden">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌍</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Kapverden</div>
|
||
<div class="dest-sub">Sal · Boa Vista · AI-Resort · Exotisch</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">Exotisch OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.400 €</span><span class="price-range">AI Direktflug</span><span class="price-badge pb-pricey">Knapp am Budget</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:75%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:40%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">6h</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→SID</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">27–30°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">Verfügbar</span><span class="cstat-key">OK</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Exotisch ohne langen Flug · Kilometer-Strände · AI-Resorts</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Direktflug 6h – kein Umsteigen</li>
|
||
<li>Riesige flache Strände (Felix-Gold)</li>
|
||
<li>RIU/Iberostar All Inclusive</li>
|
||
<li>Echtes Neuland für die Familie</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Knapp am Budget</li>
|
||
<li>Wenig Mietwagen-Sightseeing</li>
|
||
<li>Windige Insel</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-kapverden"></div><span class="vote-result" id="vr-kapverden"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="malta">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">⛪</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Malta</div>
|
||
<div class="dest-sub">Gozo · St. Julian's · Familienhotel 4★</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.400 €</span><span class="price-range">günstig für Europa</span><span class="price-badge pb-cheap">Preis-Tipp ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:75%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:70%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:75%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">3h</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→MLA</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">30–34°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Kleinste Insel Europas · EU-Standard · Günstig · Englisch überall</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Direktflug 3h, sehr günstig</li>
|
||
<li>EU-Standards, kein Visum</li>
|
||
<li>Gozo für Mietwagen-Touren</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kaum Sandstrand (Felsküste)</li>
|
||
<li>Sehr heiß + touristisch im Juli</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-malta"></div><span class="vote-result" id="vr-malta"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="lanzarote">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌋</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Lanzarote</div>
|
||
<div class="dest-sub">Vulkaninsel · Puerto del Carmen · Direktflug</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.800 €</span><span class="price-range">HP + Flug</span><span class="price-badge pb-cheap">Günstig ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:70%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:80%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">4h 45</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→ACE</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">25–28°C</span><span class="cstat-key">Passat</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Ruhigste Kanareninseln · Vulkan-Landschaft · César Manrique Design</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Ruhiger als GC/Teneriffa</li>
|
||
<li>Timanfaya Vulkan per Mietwagen</li>
|
||
<li>Passat-Klima: 25–28°C</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kanaren = schon dreimal</li>
|
||
<li>Weniger Kinderclub-Auswahl</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-lanzarote"></div><span class="vote-result" id="vr-lanzarote"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="OK" data-id="costa-sol">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌞</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Costa del Sol / Málaga</div>
|
||
<div class="dest-sub">Nerja · Marbella · Direktflug HAM</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-OK">OK</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.700 €</span><span class="price-range">HP + Direktflug</span><span class="price-badge pb-cheap">Günstig ✓</span></div>
|
||
<div class="card-scores">
|
||
<div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:80%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:70%"></div></div></div>
|
||
<div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:90%"></div></div></div>
|
||
</div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">3h 20</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→AGP</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">32–38°C</span><span class="cstat-key">Juli heiß!</span></div>
|
||
<div class="cstat"><span class="cstat-val">ab 13.Jul</span><span class="cstat-key">Verfügbar</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Günstig · Andalusien Mietwagen-Touren · Granada, Ronda, Sevilla</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Direktflug HAM→Málaga 3h20</li>
|
||
<li>Nerja (schön + ruhig)</li>
|
||
<li>Mietwagen: Granada, Alhambra, Ronda</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>32–38°C im Juli = sehr heiß für Felix</li>
|
||
<li>Viele Touristenstädte</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-costa-sol"></div><span class="vote-result" id="vr-costa-sol"></span></div>
|
||
</div>
|
||
|
||
<!-- MSC KREUZFAHRT -->
|
||
<div class="dest-card" data-status="MAYBE" data-id="msc-kreuzfahrt">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🛳️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">MSC / TUI Cruises</div>
|
||
<div class="dest-sub">Alternative zu AIDA · Mittelmeer</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-MAYBE">Vielleicht</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.000 €</span><span class="price-range">inkl. Flug nach Civitavecchia/Venedig</span><span class="price-badge pb-mid">Im Budget</span></div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">2h</span><span class="cstat-key">Flug FCO/VCE</span></div>
|
||
<div class="cstat"><span class="cstat-val">7 Häfen</span><span class="cstat-key">Woche</span></div>
|
||
<div class="cstat"><span class="cstat-val">25–30°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">Prüfen</span><span class="cstat-key">Termin</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Alternative Reederei · Evtl. günstigere Routen als AIDA</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>MSC Grandiosa: sehr familienfreundlich</li>
|
||
<li>Evtl. günstigere Kabinen</li>
|
||
<li>Mein Schiff: deutschsprachig wie AIDA</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kein AIDA-Erfahrungsvorteil</li>
|
||
<li>Kinderprogramm variiert</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-msc-kreuzfahrt"></div><span class="vote-result" id="vr-msc-kreuzfahrt"></span></div>
|
||
</div>
|
||
|
||
<!-- KORSIKA DIREKT -->
|
||
<div class="dest-card" data-status="MAYBE" data-id="korsika">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">⛰️</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Korsika direkt</div>
|
||
<div class="dest-sub">Palombaggia · Porto-Vecchio · Bonifacio</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-MAYBE">Vielleicht</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.200 €</span><span class="price-range">Ferienwohnung + Flug (Stopp)</span><span class="price-badge pb-mid">Im Budget</span></div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">Kein Direkt</span><span class="cstat-key">Flug</span></div>
|
||
<div class="cstat"><span class="cstat-val">via Paris</span><span class="cstat-key">Umstieg</span></div>
|
||
<div class="cstat"><span class="cstat-val">28–32°C</span><span class="cstat-key">Juli</span></div>
|
||
<div class="cstat"><span class="cstat-val">Hochpreis</span><span class="cstat-key">Insel</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Schönste Strände Europas · Lea hat Korsika okayed</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>Palombaggia: traumhaft</li>
|
||
<li>Lea okay für Korsika</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kein Direktflug ab HAM/HAJ</li>
|
||
<li>Hochpreisinsel im Sommer</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-note">Besser als AIDA-Stopp in Ajaccio als Kreuzfahrt-Erlebnis.</div>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-korsika"></div><span class="vote-result" id="vr-korsika"></span></div>
|
||
</div>
|
||
|
||
<!-- LATER -->
|
||
<div class="dest-card" data-status="LATER" data-id="madeira">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌺</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Madeira</div>
|
||
<div class="dest-sub">Dritter Anlauf · Levadas · Porto Moniz</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-SPÄTER">Lea: wenn Felix älter</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~3.000 €</span><span class="price-range">Flug + Hotel HP</span><span class="price-badge pb-mid">Im Budget</span></div>
|
||
<div class="card-stats">
|
||
<div class="cstat"><span class="cstat-val">4h 30</span><span class="cstat-key">Direktflug</span></div>
|
||
<div class="cstat"><span class="cstat-val">HAM→FNC</span><span class="cstat-key">Flughafen</span></div>
|
||
<div class="cstat"><span class="cstat-val">22–25°C</span><span class="cstat-key">Ideal!</span></div>
|
||
<div class="cstat"><span class="cstat-val">2028?</span><span class="cstat-key">Zeitraum</span></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Lea: "wenn Felix älter ist" · 2× Corona-Storno · 3. Anlauf!</div>
|
||
<div class="pros-cons">
|
||
<ul class="pro-list">
|
||
<li>22–25°C – mildestes Klima</li>
|
||
<li>Mietwagen-Paradies (Levadas)</li>
|
||
<li>Till kennt Funchal gut (2017, 8N)</li>
|
||
</ul>
|
||
<ul class="con-list">
|
||
<li>Kaum Sandstrand für Felix</li>
|
||
<li>Lea: explizit "warten bis Felix größer"</li>
|
||
</ul>
|
||
</div>
|
||
<span class="felix-age">📅 Ab Felix 5J+ (ca. 2028/29)</span>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-madeira"></div><span class="vote-result" id="vr-madeira"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="LATER" data-id="schweden">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🦌</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Schweden</div>
|
||
<div class="dest-sub">Bohuslän · Astrid Lindgrens Welt · Tills Herzensthema</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-SPÄTER">2027</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~2.800 €</span><span class="price-range">Ferienhäuser + Mietwagen</span><span class="price-badge pb-cheap">Günstig ✓</span></div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Till war 2018 zur Hochzeit seiner Cousine in Sunne – schwärmt seitdem</div>
|
||
<ul class="pro-list">
|
||
<li>Astrid Lindgrens Welt (Felix mit 4J+)</li>
|
||
<li>Direktflug HAM→GOT 1:20h</li>
|
||
<li>Natur pur: Seen, Wälder, Schären</li>
|
||
</ul>
|
||
<span class="felix-age">📅 Ab Felix 4J (ca. 2027) – AstridLindgrens Welt!</span>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-schweden"></div><span class="vote-result" id="vr-schweden"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card" data-status="LATER" data-id="bali">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🌴</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">Bali, Indonesien</div>
|
||
<div class="dest-sub">Jenny's Verbindung · Ubud · Seminyak</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-SPÄTER">2030+</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">~6.000 €</span><span class="price-range">Flug (Umstieg!) + Villa</span><span class="price-badge pb-pricey">Über Budget</span></div>
|
||
<div class="card-body">
|
||
<div class="card-highlight">Leas Freundin Jenny hat Mann aus Bali – persönliche Verbindung</div>
|
||
<ul class="pro-list">
|
||
<li>Traumziel für beide</li>
|
||
<li>Günstige Luxusvillen mit Pool</li>
|
||
<li>Jenny als Insider-Kontakt</li>
|
||
</ul>
|
||
<span class="felix-age">📅 Ab Felix 7–8J (ca. 2030)</span>
|
||
</div>
|
||
<div class="vote-strip"><span class="vote-label">Abstimmung</span><div class="vote-group" id="votes-bali"></div><span class="vote-result" id="vr-bali"></span></div>
|
||
</div>
|
||
|
||
<div class="dest-card dim" data-status="NEIN" data-id="pv-nein">
|
||
<div class="card-hdr">
|
||
<span class="dest-em">🚫</span>
|
||
<div class="dest-meta">
|
||
<div class="dest-name">P&V Cap d'Agde / Houlgate</div>
|
||
<div class="dest-sub">Leas frühere Ideen</div>
|
||
</div>
|
||
<div class="status-wrap"><span class="sbadge s-NEIN">Raus</span></div>
|
||
</div>
|
||
<div class="card-price"><span class="price-main">–</span><span class="price-range">Anreise/Klima ungeeignet</span><span class="price-badge pb-pricey">Nicht buchbar</span></div>
|
||
<div class="card-body">
|
||
<ul class="con-list">
|
||
<li>Cap d'Agde: 1.500km Anreise + Party-Region</li>
|
||
<li>Houlgate: Atlantik 17°C – kein Strand für Felix</li>
|
||
<li>Kein Direktflug ab HAM/HAJ</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUBMISSIONS PLACEHOLDER -->
|
||
<div id="submissions-section" style="display:none;grid-column:1/-1;">
|
||
<div class="section-head"><span class="section-title">💡 Eigene Ideen</span></div>
|
||
<div id="sub-list"></div>
|
||
</div>
|
||
|
||
</div><!-- end dest-grid -->
|
||
</div><!-- end tab-ideen -->
|
||
|
||
<!-- ABSTIMMUNG TAB -->
|
||
<div id="tab-abstimmung" class="tab-content">
|
||
<div class="section-head"><span class="section-title">📊 Abstimmungsergebnis</span></div>
|
||
<p style="font-size:12px;color:var(--muted);margin-bottom:12px;">Gebt jedem Ziel eine Reaktion. Ihr könnt unabhängig voneinander abstimmen (Till / Lea).</p>
|
||
|
||
<div class="vote-table" id="vote-summary-table">
|
||
<div class="vote-row header">
|
||
<div>Destination</div>
|
||
<div style="text-align:center">Till</div>
|
||
<div style="text-align:center">Lea</div>
|
||
<div style="text-align:center">Match</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="export-btn" onclick="exportVotes()">📋 Abstimmung als JSON kopieren (für Codex)</button>
|
||
|
||
<div style="margin-top:12px;padding:10px 12px;background:var(--card);border-radius:var(--r);border:1px solid var(--border);font-size:11px;color:var(--muted);">
|
||
<strong style="color:var(--text);">Legende:</strong> ❤️ = Will ich! 🤔 = Vielleicht ❌ = Nein danke • Match: 💚 Beide lieben · 💛 Einer liebt, einer vielleicht · ❓ Noch nicht abgestimmt
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ARCHIV TAB -->
|
||
<div id="tab-archiv" class="tab-content">
|
||
<div class="filter-row">
|
||
<button class="chip active" onclick="fh('ALL',this)">Alle</button>
|
||
<button class="chip" onclick="fh('hotel',this)">🏨 Hotel</button>
|
||
<button class="chip" onclick="fh('cruise',this)">🚢 Kreuzfahrt</button>
|
||
<button class="chip" onclick="fh('ferienhaus',this)">🏡 Ferienhaus</button>
|
||
<button class="chip" onclick="fh('airbnb',this)">🏠 Airbnb</button>
|
||
<button class="chip" onclick="fh('family',this)">👨👩👦 Familienreise</button>
|
||
</div>
|
||
<div id="hl">
|
||
<div class="hist-year">2015</div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇬🇧</span><div class="hist-body"><div class="hist-dest-name">Zimmer in London (Bermondsey)</div><div class="hist-loc">London, UK · Airbnb bei Gordon</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">26.–31. Aug. · 5N</span></div></div><span class="hist-pers">Till + Bruder Jasper</span></div>
|
||
|
||
<div class="hist-year">2016</div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🌲</span><div class="hist-body"><div class="hist-dest-name">A-Frame Cabin in Sulzfeld</div><div class="hist-loc">Feriendorf Sulzfeld, Deutschland</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">5.–10. Sept. · 5N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇵🇹</span><div class="hist-body"><div class="hist-dest-name">Porto – Zimmer in Baixa</div><div class="hist-loc">Porto, Portugal</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">26.–29. Sept. · 3N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇳🇱</span><div class="hist-body"><div class="hist-dest-name">Kortenhoef (Niederlande)</div><div class="hist-loc">Kortenhoef, Niederlande</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">1.–3. Okt. · 2N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
|
||
<div class="hist-year">2017</div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇵🇹</span><div class="hist-body"><div class="hist-dest-name">Lissabon (Anjos-Viertel)</div><div class="hist-loc">Lisboa, Portugal</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">26.–28. Sept. · 2N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🌺</span><div class="hist-body"><div class="hist-dest-name">Funchal, Madeira (8 Nächte!)</div><div class="hist-loc">Funchal, Madeira</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">28. Sept.–6. Okt. · 8N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🍷</span><div class="hist-body"><div class="hist-dest-name">Vila Nova de Gaia / Porto</div><div class="hist-loc">Porto / Douro, Portugal</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">6.–10. Okt. · 4N</span></div></div><span class="hist-pers">Till solo</span></div>
|
||
|
||
<div class="hist-year">2018</div>
|
||
<div class="hist-item family" data-type="family"><span class="hist-em">🇸🇪</span><div class="hist-body"><div class="hist-dest-name">Sunne, Värmland – Hochzeit der Cousine</div><div class="hist-loc">Sunne, Schweden · Till schwärmt seitdem davon</div><div class="hist-tags"><span class="htag htag-family">Familienreise</span></div></div><span class="hist-pers">Till + Familie</span></div>
|
||
|
||
<div class="hist-year">2019</div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇬🇧</span><div class="hist-body"><div class="hist-dest-name">Greater London (Battersea)</div><div class="hist-loc">London, UK · Airbnb bei Jilly</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">22.–25. März · 3N</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
<div class="hist-item hotel" data-type="hotel"><span class="hist-em">🌴</span><div class="hist-body"><div class="hist-dest-name">Vanilla Garden · Teneriffa</div><div class="hist-loc">Playa de las Americas · 4★ HP</div><div class="hist-tags"><span class="htag htag-hotel">Hotel 4★</span><span class="htag" style="background:var(--bg2);color:var(--muted)">31.07–07.08 · 7N · #41629995</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🇩🇰</span><div class="hist-body"><div class="hist-dest-name">Oksbøl Ferienhaus</div><div class="hist-loc">Oksbøl, Dänemark</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">29.Okt.–2.Nov. · 4N</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
|
||
<div class="hist-year">2020</div>
|
||
<div class="hist-item airbnb" data-type="airbnb"><span class="hist-em">🚤</span><div class="hist-body"><div class="hist-dest-name">Waterside Cabin Vinkeveen</div><div class="hist-loc">Vinkeveen (nahe Amsterdam), NL</div><div class="hist-tags"><span class="htag htag-airbnb">Airbnb</span><span class="htag" style="background:var(--bg2);color:var(--muted)">22.–29. Aug. · 7N</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
|
||
<div class="hist-year">2021</div>
|
||
<div class="hist-item hotel" data-type="hotel"><span class="hist-em">🌴</span><div class="hist-body"><div class="hist-dest-name">Radisson Blu Resort Gran Canaria</div><div class="hist-loc">Patalavaca · 5★ HP</div><div class="hist-tags"><span class="htag htag-hotel">Hotel 5★</span><span class="htag" style="background:var(--bg2);color:var(--muted)">21.–28.07 · 7N · #47201487</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
|
||
<div class="hist-year">2022</div>
|
||
<div class="hist-item hotel" data-type="hotel"><span class="hist-em">🌴</span><div class="hist-body"><div class="hist-dest-name">Dreams Jardin Tropical Resort & Spa</div><div class="hist-loc">Costa Adeje · Teneriffa · 4★ HP · 3.276 €</div><div class="hist-tags"><span class="htag htag-hotel">Hotel 4★</span><span class="htag" style="background:var(--bg2);color:var(--muted)">08.–15.07 · 7N · #12852050</span></div></div><span class="hist-pers">Till + Lea</span></div>
|
||
|
||
<div class="hist-year">2023 – ab hier mit Felix 👶</div>
|
||
<div class="hist-item cruise" data-type="cruise"><span class="hist-em">🚢</span><div class="hist-body"><div class="hist-dest-name">AIDAblu Adria-Kreuzfahrt</div><div class="hist-loc">Korfu · Triest · Zadar · Kotor · Dubrovnik · Bari · Korfu</div><div class="hist-tags"><span class="htag htag-cruise">Kreuzfahrt</span><span class="htag" style="background:var(--bg2);color:var(--muted)">13.–20.08 · 7N · 5.557 € · #14997795</span></div></div><span class="hist-pers">Till+Lea+Felix+Astrid J.</span></div>
|
||
<div class="hist-item hotel" data-type="hotel"><span class="hist-em">🏨</span><div class="hist-body"><div class="hist-dest-name">Acharavi Beach Hotel · Korfu</div><div class="hist-loc">Acharavi · Griechenland · 546 €</div><div class="hist-tags"><span class="htag htag-hotel">Hotel</span><span class="htag" style="background:var(--bg2);color:var(--muted)">20.–22.08 · 2N · #410637840</span></div></div><span class="hist-pers">Till+Lea+Felix</span></div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">MarinaPark Bad Nederrijn, Maurik</div><div class="hist-loc">Niederlande</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">01.–05.10 · 4N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
|
||
<div class="hist-year">2024</div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">EuroParcs De Utrechtse Heuvelrug</div><div class="hist-loc">Maarn, NL · 422 €</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">23.–28.03 · 5N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
<div class="hist-item cruise" data-type="cruise"><span class="hist-em">🚢</span><div class="hist-body"><div class="hist-dest-name">AIDAprima Norwegen</div><div class="hist-loc">Hamburg→Ålesund→Geiranger→Bergen→Hamburg</div><div class="hist-tags"><span class="htag htag-cruise">Kreuzfahrt</span><span class="htag" style="background:var(--bg2);color:var(--muted)">15.–22.06 · 7N · 1.998 € · #15808257</span></div></div><span class="hist-pers">Familie</span></div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">Sonne und Strand, Følle Strand</div><div class="hist-loc">Rønde, Dänemark</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">14.–21.09 · 7N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
|
||
<div class="hist-year">2025</div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">Residence Berger Duinen</div><div class="hist-loc">Bergen aan Zee, NL</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">24.–28.03 · 4N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">De Strabrechtse Vennen</div><div class="hist-loc">Niederlande</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">14.–21.07 · 7N · Haus E8</span></div></div><span class="hist-pers">Familie</span></div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🏡</span><div class="hist-body"><div class="hist-dest-name">EuroParcs Esonstad</div><div class="hist-loc">Niederlande</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">27.–31.10 · 4N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
|
||
<div class="hist-year">2026</div>
|
||
<div class="hist-item ferienhaus" data-type="ferienhaus"><span class="hist-em">🚤</span><div class="hist-body"><div class="hist-dest-name">De Reeuwijkse Plassen</div><div class="hist-loc">Niederlande · 4-Pers.-Wasserhaus #191</div><div class="hist-tags"><span class="htag htag-fh">Ferienhaus</span><span class="htag" style="background:var(--bg2);color:var(--muted)">30.03–03.04 · 4N</span></div></div><span class="hist-pers">Familie</span></div>
|
||
<div class="hist-item" style="border:2px dashed var(--gold);background:var(--gold-light);" data-type="hotel"><span class="hist-em">❓</span><div class="hist-body"><div class="hist-dest-name" style="color:var(--gold)">Sommerurlaub 2026 – noch offen!</div><div class="hist-loc">Noch nicht gebucht · ab 13. Juli · max. 3.600 €</div><div class="hist-tags"><span class="htag" style="background:var(--gold);color:#fff">OFFEN</span></div></div><span class="hist-pers">Familie</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INFO TAB -->
|
||
<div id="tab-info" class="tab-content">
|
||
<div class="info-grid">
|
||
<div class="info-card">
|
||
<div class="info-card-title">❌ Ausschlussliste</div>
|
||
<ul class="info-list">
|
||
<li class="excl">Türkei (Lea: definitiv raus)</li>
|
||
<li class="excl">Ägypten (Lea: definitiv raus)</li>
|
||
<li class="excl">Dänemark im Sommer (Lea: raus)</li>
|
||
<li class="excl">Kroatien (aktuell überfüllt)</li>
|
||
<li class="excl">Griechenland (Korfu: Kindersitz-Problem)</li>
|
||
<li class="excl">AIDA Norwegen (2024 gemacht, Lea: kein Wdh.)</li>
|
||
<li class="excl">Kein Umsteigeflug (nur Direktflug)</li>
|
||
<li class="excl">Kein anderer Flughafen als HAM oder HAJ</li>
|
||
<li class="excl">Unter 4 Sterne (außer Glamping-Village)</li>
|
||
<li class="excl">P&V Cap d'Agde / Houlgate</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-card-title">✅ Reiseprofil 2026</div>
|
||
<ul class="info-list">
|
||
<li>Direktflug nur HAM oder HAJ</li>
|
||
<li>Mind. 4 Sterne Hotel oder gleichwert. Resort</li>
|
||
<li>Pool als Basis · täglich Mietwagen</li>
|
||
<li>Felix 3,5J: Kinderclub, Strand, Pool</li>
|
||
<li>EU-Kindersitz bei Mietwagen Pflicht</li>
|
||
<li>Lea: HP/AI bevorzugt, wenig Überraschungen</li>
|
||
<li>Till: Abwechslung, Fotografie-Wert</li>
|
||
<li>Caddy 2012 = Dienstwagen HHGmbH (keine pers. Kosten)</li>
|
||
<li>Frieda (Hund) bleibt zuhause</li>
|
||
</ul>
|
||
</div>
|
||
<div class="age-card">
|
||
<div class="age-card-title">📅 Felix-Alterskurve</div>
|
||
<div class="age-row"><div class="age-badge">2026<br>3,5J</div><div class="age-body"><strong>Jetzt:</strong> Strand, Pool, Kinderclub ab 3J, Wasserpark, kurze Bootstouren. Max. 6h Flug.</div></div>
|
||
<div class="age-row"><div class="age-badge">2027<br>4J</div><div class="age-body"><strong>Bald:</strong> + Burgen (Gruyères!), Astrid Lindgrens Welt Schweden, Tierparks.</div></div>
|
||
<div class="age-row"><div class="age-badge">2028-29<br>5-6J</div><div class="age-body"><strong>Madeira-Fenster:</strong> + Levadas, Lavapools. Schweden Schären. Norwegen Natur.</div></div>
|
||
<div class="age-row"><div class="age-badge">2030+<br>7J+</div><div class="age-body"><strong>Träume:</strong> + Bali, Japan, Lappland Nordlichter, Neuseeland.</div></div>
|
||
</div>
|
||
<div class="info-card info-full">
|
||
<div class="info-card-title">⚡ Nächste Schritte</div>
|
||
<div class="step-row"><div class="step-num">1</div><div class="step-text"><strong>AIDA prüfen:</strong> aida.de Route PMI07307 – Sardinien-Route 13.–16. Juli? Korsika: 4.Juli oder 15.Aug. Kinder 35% Rabatt.</div></div>
|
||
<div class="step-row"><div class="step-num">2</div><div class="step-text"><strong>Glamping ASAP:</strong> Union Lido/Cavallino, Punta Lunga/Vieste. acsi.eu + pitchup.com. Juli-Plätze laufen ab!</div></div>
|
||
<div class="step-row"><div class="step-num">3</div><div class="step-text"><strong>Zusammen abstimmen:</strong> Jeder tippt seine Reaktion im Abstimmungs-Tab. Dann sieht man schnell was beide wollen.</div></div>
|
||
<div class="step-row"><div class="step-num">4</div><div class="step-text"><strong>Sardinien buchen:</strong> Eurowings/Ryanair HAM→OLB ab 13.Juli + Club Hotel Baja Sardinia oder Sporting Beach (booking.com).</div></div>
|
||
<div class="step-row"><div class="step-num">5</div><div class="step-text"><strong>Falls Kanaren:</strong> Taurito Princess c.24.de/pr/F8F2FX → 13.–20.Juli, 2 Erw + 1 Kind 3J. Kinderfestpreis aktiv.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTTOM NAV -->
|
||
<div class="bottom-nav">
|
||
<button class="bnav-item active" onclick="navTo('ideen',this)">
|
||
<div class="bnav-icon-wrap"><span class="icon">🗺️</span></div>
|
||
<span>Ideen</span>
|
||
</button>
|
||
<button class="bnav-item" onclick="navTo('abstimmung',this)">
|
||
<div class="bnav-icon-wrap"><span class="icon">📊</span><span class="badge" id="vote-badge" style="display:none">!</span></div>
|
||
<span>Abstimmung</span>
|
||
</button>
|
||
<button class="bnav-item" onclick="navTo('archiv',this)">
|
||
<div class="bnav-icon-wrap"><span class="icon">📖</span></div>
|
||
<span>Archiv</span>
|
||
</button>
|
||
<button class="bnav-item" onclick="navTo('info',this)">
|
||
<div class="bnav-icon-wrap"><span class="icon">⚡</span></div>
|
||
<span>Info</span>
|
||
</button>
|
||
</div>
|
||
|
||
<script>
|
||
// ======= AUTH =======
|
||
(function(){if(sessionStorage.getItem('f24')==='1')document.getElementById('gate').style.display='none';})();
|
||
function auth(){
|
||
if(document.getElementById('pw').value==='frediurlaub26'){
|
||
document.getElementById('gate').style.display='none';
|
||
sessionStorage.setItem('f24','1');
|
||
renderVotes();buildVoteTable();renderSubmissions();
|
||
} else {
|
||
document.getElementById('pw-err').style.display='block';
|
||
document.getElementById('pw').style.borderColor='var(--coral)';
|
||
setTimeout(()=>document.getElementById('pw').style.borderColor='',1500);
|
||
}
|
||
}
|
||
|
||
// ======= NAV =======
|
||
function navTo(tab,btn){
|
||
document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
|
||
document.querySelectorAll('.bnav-item').forEach(b=>b.classList.remove('active'));
|
||
document.getElementById('tab-'+tab).classList.add('active');
|
||
btn.classList.add('active');
|
||
if(tab==='abstimmung')buildVoteTable();
|
||
}
|
||
|
||
// ======= CARD FILTER =======
|
||
function fc(status,btn){
|
||
document.querySelectorAll('.filter-row .chip').forEach(p=>p.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const map={'LATER':'SPÄTER'};
|
||
const s=map[status]||status;
|
||
document.querySelectorAll('#dg .dest-card').forEach(card=>{
|
||
card.style.display=(s==='ALL'||card.dataset.status===s)?'':'none';
|
||
});
|
||
}
|
||
|
||
// ======= HISTORY FILTER =======
|
||
function fh(type,btn){
|
||
document.querySelectorAll('.filter-row .chip').forEach(p=>p.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.querySelectorAll('#hl .hist-item').forEach(item=>{
|
||
item.style.display=(type==='ALL'||item.dataset.type===type)?'':'none';
|
||
});
|
||
document.querySelectorAll('#hl .hist-year').forEach(yr=>{
|
||
const sib=yr.nextElementSibling;
|
||
let found=false;
|
||
let el=sib;
|
||
while(el&&el.classList&&el.classList.contains('hist-item')){
|
||
if(el.style.display!=='none')found=true;
|
||
el=el.nextElementSibling;
|
||
}
|
||
yr.style.display=found?'':'none';
|
||
});
|
||
}
|
||
|
||
// ======= DESTINATIONS MAP =======
|
||
const DESTS=[
|
||
{id:'sardinien',name:'Sardinien',country:'🇮🇹 Italien'},
|
||
{id:'aida-kreuzfahrt',name:'AIDAcosma Kreuzfahrt',country:'🚢 Mittelmeer'},
|
||
{id:'algarve',name:'Algarve',country:'🇵🇹 Portugal'},
|
||
{id:'glamping',name:'Glamping Village IT',country:'🇮🇹 Italien'},
|
||
{id:'taurito',name:'Taurito Princess',country:'🇪🇸 Gran Canaria'},
|
||
{id:'fuerteventura',name:'Fuerteventura',country:'🇪🇸 Kanaren'},
|
||
{id:'menorca',name:'Menorca',country:'🇪🇸 Balearen'},
|
||
{id:'cote-azur',name:'Côte d\'Azur',country:'🇫🇷 Frankreich'},
|
||
{id:'schweiz',name:'Schweiz + Norditalien',country:'🇨🇭 / 🇮🇹'},
|
||
{id:'kapverden',name:'Kapverden',country:'🌍 Atlantik'},
|
||
{id:'malta',name:'Malta',country:'🇲🇹 Malta'},
|
||
{id:'lanzarote',name:'Lanzarote',country:'🇪🇸 Kanaren'},
|
||
{id:'costa-sol',name:'Costa del Sol',country:'🇪🇸 Andalusien'},
|
||
{id:'msc-kreuzfahrt',name:'MSC / TUI Cruises',country:'🚢 Mittelmeer'},
|
||
{id:'korsika',name:'Korsika',country:'🇫🇷 Frankreich'},
|
||
{id:'madeira',name:'Madeira',country:'🇵🇹 Portugal'},
|
||
{id:'schweden',name:'Schweden',country:'🇸🇪 Schweden'},
|
||
{id:'bali',name:'Bali',country:'🇮🇩 Indonesien'},
|
||
];
|
||
|
||
// ======= VOTING =======
|
||
function getVotes(){return JSON.parse(localStorage.getItem('f24_votes')||'{}');}
|
||
function saveVotes(v){localStorage.setItem('f24_votes',JSON.stringify(v));}
|
||
|
||
function setVote(destId,person,val){
|
||
const v=getVotes();
|
||
if(!v[destId])v[destId]={};
|
||
v[destId][person]=v[destId][person]===val?null:val;
|
||
saveVotes(v);
|
||
renderVoteFor(destId);
|
||
buildVoteTable();
|
||
showToast(val==='love'?'❤️ Abgestimmt!':val==='maybe'?'🤔 Vielleicht':'❌ Nein danke');
|
||
}
|
||
|
||
function renderVoteFor(destId){
|
||
const el=document.getElementById('votes-'+destId);
|
||
const rv=document.getElementById('vr-'+destId);
|
||
if(!el||!rv)return;
|
||
const v=getVotes()[destId]||{};
|
||
el.innerHTML=['Till','Lea'].map(p=>`
|
||
<span style="font-size:10px;font-weight:600;color:var(--muted)">${p}:</span>
|
||
<button class="vote-btn${v[p]==='love'?' active-love':''}" onclick="setVote('${destId}','${p}','love')" title="${p}: Will ich!">❤️</button>
|
||
<button class="vote-btn${v[p]==='maybe'?' active-maybe':''}" onclick="setVote('${destId}','${p}','maybe')" title="${p}: Vielleicht">🤔</button>
|
||
<button class="vote-btn${v[p]==='no'?' active-no':''}" onclick="setVote('${destId}','${p}','no')" title="${p}: Nein">❌</button>
|
||
`).join('<span style="width:8px;display:inline-block"></span>');
|
||
const match=getMatch(v.Till,v.Lea);
|
||
rv.textContent=match;
|
||
}
|
||
|
||
function getMatch(till,lea){
|
||
if(!till&&!lea)return'';
|
||
if(till==='love'&&lea==='love')return'💚';
|
||
if((till==='love'||till==='maybe')&&(lea==='love'||lea==='maybe'))return'💛';
|
||
if(till==='no'||lea==='no')return'❌';
|
||
return'❓';
|
||
}
|
||
|
||
function renderVotes(){DESTS.forEach(d=>renderVoteFor(d.id));}
|
||
|
||
function buildVoteTable(){
|
||
const tbl=document.getElementById('vote-summary-table');
|
||
if(!tbl)return;
|
||
const v=getVotes();
|
||
const rows=DESTS.map(d=>{
|
||
const dv=v[d.id]||{};
|
||
const te=dv.Till==='love'?'❤️':dv.Till==='maybe'?'🤔':dv.Till==='no'?'❌':'–';
|
||
const le=dv.Lea==='love'?'❤️':dv.Lea==='maybe'?'🤔':dv.Lea==='no'?'❌':'–';
|
||
const match=getMatch(dv.Till,dv.Lea)||'❓';
|
||
return`<div class="vote-row">
|
||
<div><div class="vote-dest-name">${d.name}</div><div class="vote-dest-country">${d.country}</div></div>
|
||
<div class="vote-emoji">${te}</div>
|
||
<div class="vote-emoji">${le}</div>
|
||
<div class="vote-summary">${match}</div>
|
||
</div>`;
|
||
}).join('');
|
||
tbl.innerHTML=`<div class="vote-row header"><div>Destination</div><div style="text-align:center">Till</div><div style="text-align:center">Lea</div><div style="text-align:center">Match</div></div>`+rows;
|
||
}
|
||
|
||
function exportVotes(){
|
||
const v=getVotes();
|
||
navigator.clipboard.writeText(JSON.stringify(v,null,2)).then(()=>showToast('📋 In Zwischenablage kopiert!'));
|
||
}
|
||
|
||
// ======= SUBMIT IDEA =======
|
||
function openModal(){document.getElementById('modal-overlay').classList.add('open');}
|
||
function closeModal(){document.getElementById('modal-overlay').classList.remove('open');}
|
||
|
||
function submitIdea(){
|
||
const dest=document.getElementById('s-dest').value.trim();
|
||
if(!dest){document.getElementById('s-dest').style.borderColor='var(--coral)';return;}
|
||
const idea={
|
||
dest,
|
||
land:document.getElementById('s-land').value||'',
|
||
budget:document.getElementById('s-budget').value||'',
|
||
why:document.getElementById('s-why').value||'',
|
||
who:document.getElementById('s-who').value,
|
||
status:document.getElementById('s-status').value,
|
||
ts:new Date().toLocaleDateString('de')
|
||
};
|
||
const subs=JSON.parse(localStorage.getItem('f24_submissions')||'[]');
|
||
subs.push(idea);
|
||
localStorage.setItem('f24_submissions',JSON.stringify(subs));
|
||
closeModal();
|
||
showToast('💡 Idee eingereicht!');
|
||
renderSubmissions();
|
||
['s-dest','s-land','s-budget','s-why'].forEach(id=>document.getElementById(id).value='');
|
||
}
|
||
|
||
function renderSubmissions(){
|
||
const subs=JSON.parse(localStorage.getItem('f24_submissions')||'[]');
|
||
const sec=document.getElementById('submissions-section');
|
||
const list=document.getElementById('sub-list');
|
||
if(!subs.length){sec.style.display='none';return;}
|
||
sec.style.display='block';
|
||
list.innerHTML=subs.map((s,i)=>`
|
||
<div class="sub-card">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
||
<div>
|
||
<div class="sub-card-name">${s.dest} ${s.land?'– '+s.land:''}</div>
|
||
<div class="sub-card-meta">${s.ts} · ${s.status}${s.budget?' · ~'+s.budget+' €':''}</div>
|
||
</div>
|
||
<button onclick="deleteSubmission(${i})" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:0">✕</button>
|
||
</div>
|
||
${s.why?`<div class="sub-card-why">"${s.why}"</div>`:''}
|
||
<span class="sub-who sub-${s.who.toLowerCase().includes('till')&&s.who.toLowerCase().includes('lea')?'both':s.who.toLowerCase().includes('lea')?'lea':'till'}">${s.who}</span>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function deleteSubmission(i){
|
||
const subs=JSON.parse(localStorage.getItem('f24_submissions')||'[]');
|
||
subs.splice(i,1);
|
||
localStorage.setItem('f24_submissions',JSON.stringify(subs));
|
||
renderSubmissions();
|
||
}
|
||
|
||
// ======= SEARCH DEST =======
|
||
function searchDest(id){
|
||
fc('ALL',document.querySelector('.filter-row .chip'));
|
||
const card=document.querySelector(`[data-id="${id}"]`);
|
||
if(card){setTimeout(()=>card.scrollIntoView({behavior:'smooth',block:'start'}),100);}
|
||
}
|
||
|
||
// ======= TOAST =======
|
||
function showToast(msg){
|
||
const t=document.getElementById('toast');
|
||
t.textContent=msg;t.classList.add('show');
|
||
setTimeout(()=>t.classList.remove('show'),2500);
|
||
}
|
||
|
||
// ======= INIT =======
|
||
window.addEventListener('load',()=>{
|
||
if(sessionStorage.getItem('f24')==='1'){
|
||
renderVotes();buildVoteTable();renderSubmissions();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|