266 lines
12 KiB
HTML
266 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<title>Festival Guide</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;600&family=Barlow+Condensed:wght@300;600&display=swap" rel="stylesheet" />
|
||
<script>
|
||
// Embedded config to bypass CORS issue when opening file://
|
||
window.EMBEDDED_CONFIG = {
|
||
"event_name": "Truck & Country Festival",
|
||
"event_dates": "8. – 9. August 2026",
|
||
"event_location": "DEKRA Lausitzring, Klettwitz",
|
||
|
||
"primary_color": "#1A1208",
|
||
"secondary_color": "#2C2010",
|
||
"accent_color": "#D4820A",
|
||
"accent_light": "#F5A623",
|
||
"text_light": "#F5F0E8",
|
||
"text_muted": "#A89880",
|
||
|
||
"truck_bg_color": "#0A1F09",
|
||
"truck_bg_gradient": "linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%)",
|
||
"truck_overlay_gradient": "linear-gradient(160deg, rgba(0,0,0,0.42) 0%, rgba(10,31,9,0.38) 50%, rgba(0,0,0,0.52) 100%)",
|
||
"truck_tag_bg": "rgba(74,138,66,0.22)",
|
||
"truck_tag_border": "rgba(74,138,66,0.4)",
|
||
"truck_tag_color": "#A8E0A0",
|
||
"truck_title_color": "#C8F0C0",
|
||
"truck_cta_bg": "#5AAA50",
|
||
"truck_cta_color": "#061206",
|
||
"truck_bullet_color": "#5AAA50",
|
||
|
||
"family_bg_color": "#2A1200",
|
||
"family_bg_gradient": "linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%)",
|
||
"family_overlay_gradient": "linear-gradient(200deg, rgba(0,0,0,0.42) 0%, rgba(42,18,0,0.38) 50%, rgba(0,0,0,0.52) 100%)",
|
||
"family_tag_bg": "rgba(196,122,30,0.22)",
|
||
"family_tag_border": "rgba(196,122,30,0.45)",
|
||
"family_tag_color": "#F5C878",
|
||
"family_title_color": "#FFE4B0",
|
||
"family_cta_bg": "#D4820A",
|
||
"family_cta_color": "#1F1005",
|
||
"family_bullet_color": "#D4820A",
|
||
|
||
"font_heading": "'Bebas Neue', sans-serif",
|
||
"font_body": "'Barlow', 'Segoe UI', sans-serif",
|
||
"font_condensed": "'Barlow Condensed', sans-serif",
|
||
|
||
"border_radius": "4px",
|
||
"border_radius_lg": "10px",
|
||
|
||
"logo_path": "Dekra_Lausitzring_Logo.png",
|
||
"sponsor_name": "LT24",
|
||
"sponsor_logo_path": "LT24_Markenlogo.png",
|
||
"hero_truck_image": "truck.jpg",
|
||
"hero_family_image": "country.jpg",
|
||
"ticket_link": "https://shop.dekra-lausitzring.de/?ref=meinsponsor",
|
||
"official_event_url": "https://dekra-lausitzring.de/event/truck-country-wochenende/",
|
||
"official_highlights_url": "https://dekra-lausitzring.de/highlights/truck-country-festival/",
|
||
"legal_imprint_url": "https://dekra-lausitzring.de/impressum/",
|
||
"legal_privacy_url": "https://dekra-lausitzring.de/datenschutz/",
|
||
"page_headline": "Trucks. Country. Lausitzring.",
|
||
"page_subheadline": "8. & 9. August 2026 – Truck Trial Europameisterschaft, Country Village, Show & Shine und Offroad-Action auf dem DEKRA Lausitzring.",
|
||
"page_question": "Wie möchtest du dein Wochenende erleben?",
|
||
"cta_primary_label": "Ich komme wegen Trucks",
|
||
"cta_secondary_label": "Ich komme wegen Country & Familie",
|
||
"cta_entry_truck": "truck",
|
||
"cta_entry_family": "family",
|
||
"benefits": [
|
||
{
|
||
"icon": "🚛",
|
||
"title": "Truck Trial EM 2026",
|
||
"text": "Internationale Teams steuern tonnenschwere LKW, Oldtimer und Zugmaschinen durch extremes Offroad-Gelände – Präzision & Power aus nächster Nähe."
|
||
},
|
||
{
|
||
"icon": "🎸",
|
||
"title": "Country Village",
|
||
"text": "Live-Musik, Line-Dance, Western-Spiele, Kettensägenkunst, Falknerei & Marktstände – echte Country-Atmosphäre den ganzen Tag."
|
||
},
|
||
{
|
||
"icon": "👨👩👧",
|
||
"title": "Camping & Familie",
|
||
"text": "Truck- & Country-Camp direkt vor Ort, Show & Shine Truck Contest, Händlerbereich und Erlebnisbereiche für alle Altersgruppen."
|
||
}
|
||
],
|
||
"official_section_headline": "Mehr Infos & Tickets",
|
||
"official_section_text": "Alles zum Programm, Rahmenprogramm und Tickets direkt beim Veranstalter DEKRA Lausitzring.",
|
||
"official_event_button_label": "Zur Eventseite",
|
||
"official_highlights_button_label": "Highlights & Programm",
|
||
"footer_disclaimer": "",
|
||
"whatsapp_optin_text": "Ja, ich möchte Infos & Updates zum Truck & Country Festival 2026 per WhatsApp erhalten.",
|
||
"webhook_base": "https://n8n.support-space.de/webhook/a8754fe3-ecba-4d0c-b58d-6321c50fbe6e",
|
||
"chat_welcome_truck": "Hey! Bereit für Truck Trial Europameisterschaft, Show & Shine und Offroad-Power? 🚛 Was möchtest du über das Truck & Country Festival 2026 wissen?",
|
||
"chat_welcome_family": "Hey! Auf Country Village, Live-Musik, Falknerei und ein entspanntes Wochenende mit der Familie? 🎸 Was möchtest du über das Festival wissen?",
|
||
"chat_fallback_message": "Unser Guide ist gerade nicht erreichbar. Alle Infos findest du direkt auf der offiziellen Eventseite des DEKRA Lausitzrings.",
|
||
"chat_input_placeholder": "Deine Frage ans Festival...",
|
||
"chat_send_label": "Senden",
|
||
"chat_ticket_label": "Tickets ansehen",
|
||
"chat_info_label": "Offizielle Infos ↗"
|
||
};
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══ HEADER ══ -->
|
||
<header id="site-header" class="site-header" role="banner">
|
||
<div class="header-inner">
|
||
<div class="header-brand">
|
||
<img id="hdr-logo" class="hdr-logo" src="" alt="Event Logo" loading="eager" />
|
||
<div class="hdr-event-meta">
|
||
<span id="hdr-event-name" class="hdr-event-name"></span>
|
||
<span id="hdr-event-dates" class="hdr-event-dates"></span>
|
||
</div>
|
||
</div>
|
||
<!-- #4: center hook -->
|
||
<p id="hdr-hook" class="hdr-hook"></p>
|
||
<div class="header-sponsor">
|
||
<span id="hdr-presented-by" class="hdr-presented"></span>
|
||
<img id="hdr-sponsor-logo" class="hdr-sponsor-logo" src="" alt="Sponsor Logo" loading="eager" />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ══ HERO SPLIT ══ -->
|
||
<section id="hero" class="hero" aria-label="Wochenende wählen">
|
||
|
||
<button id="cta-truck" class="hero-half hero-half--truck" type="button"
|
||
aria-label="Festival Guide für Trucks & Offroad starten">
|
||
<div class="half-img" id="half-img-truck"></div>
|
||
<div class="half-overlay half-overlay--truck"></div>
|
||
<div class="half-content">
|
||
<div class="half-tag">🚛 Offroad & Action</div>
|
||
<h2 class="half-title">Trucks &<br>Offroad</h2>
|
||
<ul class="half-highlights">
|
||
<li>Truck Trial Europameisterschaft</li>
|
||
<li>Show & Shine Contest</li>
|
||
<li>Offroad-Parcours live</li>
|
||
</ul>
|
||
<div class="half-cta">
|
||
<span class="half-cta-label" id="cta-truck-label"></span>
|
||
<span class="half-arrow">→</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
<!-- #3: schlanker Seam -->
|
||
<div class="hero-seam" aria-hidden="true">
|
||
<div class="seam-line"></div>
|
||
<div class="seam-or-pill">Was passt<br>zu dir?</div>
|
||
<div class="seam-line"></div>
|
||
</div>
|
||
|
||
<button id="cta-family" class="hero-half hero-half--family" type="button"
|
||
aria-label="Festival Guide für Country & Familie starten">
|
||
<div class="half-img" id="half-img-family"></div>
|
||
<div class="half-overlay half-overlay--family"></div>
|
||
<div class="half-content">
|
||
<div class="half-tag">🎸 Musik & Atmosphäre</div>
|
||
<h2 class="half-title">Country &<br>Familie</h2>
|
||
<ul class="half-highlights">
|
||
<li>Country Village & Live-Musik</li>
|
||
<li>Line-Dance & Falknerei</li>
|
||
<li>Camping direkt vor Ort</li>
|
||
</ul>
|
||
<div class="half-cta">
|
||
<span class="half-cta-label" id="cta-family-label"></span>
|
||
<span class="half-arrow">→</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
</section>
|
||
|
||
<!-- ══ EVENT STRIP ══ -->
|
||
<div class="event-strip">
|
||
<span class="event-strip-name" id="strip-event-name"></span>
|
||
<span class="event-strip-sep" aria-hidden="true">·</span>
|
||
<span class="event-strip-dates" id="strip-dates"></span>
|
||
<span class="event-strip-sep" aria-hidden="true">·</span>
|
||
<span class="event-strip-loc" id="strip-location"></span>
|
||
</div>
|
||
|
||
<!-- ══ GUIDE PREVIEW (#8) ══ -->
|
||
<section class="guide-preview" aria-label="So funktioniert der Guide">
|
||
<div class="guide-preview-inner">
|
||
<div class="guide-preview-header">
|
||
<p class="guide-preview-eyebrow">Festival Guide</p>
|
||
<h2 class="guide-preview-title">So nutzen Besucher den Guide</h2>
|
||
</div>
|
||
<div class="guide-preview-grid" id="guide-preview-grid">
|
||
<!-- wird per JS befüllt -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ BENEFITS ══ -->
|
||
<section id="benefits" class="benefits-section" aria-label="Highlights">
|
||
<div class="benefits-inner">
|
||
<ul id="benefits-list" class="benefits-list" role="list"></ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ OFFICIAL INFO ══ -->
|
||
<section id="official-info" class="official-section" aria-label="Infos & Tickets">
|
||
<div class="official-inner">
|
||
<h2 id="official-headline" class="official-headline"></h2>
|
||
<p id="official-text" class="official-text"></p>
|
||
<div class="official-btns">
|
||
<a id="official-event-btn" class="official-btn official-btn--primary" href="#" target="_blank" rel="noopener noreferrer"></a>
|
||
<a id="official-highlights-btn" class="official-btn official-btn--secondary" href="#" target="_blank" rel="noopener noreferrer" style="display:none"></a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ FOOTER ══ -->
|
||
<footer id="site-footer" class="site-footer" role="contentinfo">
|
||
<div class="footer-inner">
|
||
<nav class="footer-legal" aria-label="Rechtliche Links">
|
||
<a id="footer-imprint" href="#" target="_blank" rel="noopener noreferrer">Impressum</a>
|
||
<span aria-hidden="true">·</span>
|
||
<a id="footer-privacy" href="#" target="_blank" rel="noopener noreferrer">Datenschutz</a>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══ CHAT MODAL ══ -->
|
||
<div id="chat-modal" class="chat-modal" role="dialog" aria-modal="true" aria-labelledby="chat-modal-title" hidden>
|
||
<div class="chat-modal-backdrop" id="chat-backdrop"></div>
|
||
<div class="chat-modal-panel">
|
||
<div class="chat-modal-header">
|
||
<div class="chat-modal-title-row">
|
||
<span class="chat-status-dot" aria-hidden="true"></span>
|
||
<h2 id="chat-modal-title" class="chat-modal-title">Festival Guide</h2>
|
||
</div>
|
||
<div class="chat-modal-header-actions">
|
||
<a id="chat-ticket-btn" class="chat-header-ticket-btn" href="#" target="_blank" rel="noopener noreferrer"></a>
|
||
<button id="chat-close-btn" class="chat-close-btn" type="button" aria-label="Chat schließen">✕</button>
|
||
</div>
|
||
</div>
|
||
<div id="chat-messages" class="chat-messages" role="log" aria-live="polite" aria-relevant="additions"></div>
|
||
<div class="chat-footer-bar">
|
||
<div class="chat-info-row">
|
||
<a id="chat-official-link" class="chat-info-link" href="#" target="_blank" rel="noopener noreferrer"></a>
|
||
</div>
|
||
<div class="chat-input-row">
|
||
<input id="chat-input" class="chat-input" type="text" maxlength="500"
|
||
autocomplete="off" autocorrect="off" spellcheck="true" />
|
||
<button id="chat-send-btn" class="chat-send-btn" type="button" aria-label="Senden">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<line x1="22" y1="2" x2="11" y2="13"/>
|
||
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|