Ihor_Zhekov/DEKRA_sponsor_seite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-26 09:09:56 +01:00
commit 7862273342
6 changed files with 1335 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
WebApp/index.html Normal file
View File

@@ -0,0 +1,234 @@
<!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",
"logo_path": "Dekra_Lausitzring_Logo.png",
"sponsor_name": "LT24",
"sponsor_logo_path": "LT24_Markenlogo.png",
"hero_truck_image": "assets/hero_truck.jpg",
"hero_family_image": "assets/hero_family.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.meinedomain.de/webhook",
"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 &amp; Action</div>
<h2 class="half-title">Trucks &amp;<br>Offroad</h2>
<ul class="half-highlights">
<li>Truck Trial Europameisterschaft</li>
<li>Show &amp; 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 &amp; Atmosphäre</div>
<h2 class="half-title">Country &amp;<br>Familie</h2>
<ul class="half-highlights">
<li>Country Village &amp; Live-Musik</li>
<li>Line-Dance &amp; 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 · KI-gestützt</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>