diff --git a/WebApp/app.js b/WebApp/app.js index 34c2d86..ee5b2fb 100644 --- a/WebApp/app.js +++ b/WebApp/app.js @@ -81,6 +81,35 @@ function applyCSSVars(cfg) { '--c-accent-light': cfg.accent_light || '#F5A623', '--c-text': cfg.text_light || '#F5F0E8', '--c-muted': cfg.text_muted || '#A89880', + + '--c-truck-bg': cfg.truck_bg_color || '#0A1F09', + '--truck-bg-gradient': cfg.truck_bg_gradient || 'linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%)', + '--truck-overlay': cfg.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': cfg.truck_tag_bg || 'rgba(74,138,66,0.22)', + '--truck-tag-border': cfg.truck_tag_border || 'rgba(74,138,66,0.4)', + '--truck-tag-color': cfg.truck_tag_color || '#A8E0A0', + '--truck-title-color': cfg.truck_title_color || '#C8F0C0', + '--truck-cta-bg': cfg.truck_cta_bg || '#5AAA50', + '--truck-cta-color': cfg.truck_cta_color || '#061206', + '--truck-bullet-color': cfg.truck_bullet_color || '#5AAA50', + + '--c-family-bg': cfg.family_bg_color || '#2A1200', + '--family-bg-gradient': cfg.family_bg_gradient || 'linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%)', + '--family-overlay': cfg.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': cfg.family_tag_bg || 'rgba(196,122,30,0.22)', + '--family-tag-border': cfg.family_tag_border || 'rgba(196,122,30,0.45)', + '--family-tag-color': cfg.family_tag_color || '#F5C878', + '--family-title-color': cfg.family_title_color || '#FFE4B0', + '--family-cta-bg': cfg.family_cta_bg || '#D4820A', + '--family-cta-color': cfg.family_cta_color || '#1F1005', + '--family-bullet-color': cfg.family_bullet_color || '#D4820A', + + '--font-heading': cfg.font_heading || "'Bebas Neue', sans-serif", + '--font-body': cfg.font_body || "'Barlow', 'Segoe UI', sans-serif", + '--font-condensed': cfg.font_condensed || "'Barlow Condensed', sans-serif", + + '--radius': cfg.border_radius || '4px', + '--radius-lg': cfg.border_radius_lg || '10px', }; for (const [k, v] of Object.entries(map)) r.style.setProperty(k, v); } diff --git a/WebApp/config.json b/WebApp/config.json index 4732106..ed43909 100644 --- a/WebApp/config.json +++ b/WebApp/config.json @@ -2,17 +2,48 @@ "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": "assets/logo.png", - "sponsor_name": "MeinSponsor", - "sponsor_logo_path": "assets/sponsor_logo.png", - "hero_truck_image": "assets/hero_truck.jpg", - "hero_family_image": "assets/hero_family.jpg", + + "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/", diff --git a/WebApp/country.jpg b/WebApp/country.jpg new file mode 100644 index 0000000..a83b1e8 Binary files /dev/null and b/WebApp/country.jpg differ diff --git a/WebApp/index.html b/WebApp/index.html index 259e847..c1f1b31 100644 --- a/WebApp/index.html +++ b/WebApp/index.html @@ -15,17 +15,48 @@ "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": "assets/hero_truck.jpg", - "hero_family_image": "assets/hero_family.jpg", + "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/", diff --git a/WebApp/styles.css b/WebApp/styles.css index 6944ef6..5305ab1 100644 --- a/WebApp/styles.css +++ b/WebApp/styles.css @@ -26,7 +26,7 @@ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { - font-family: 'Barlow', 'Segoe UI', sans-serif; + font-family: var(--font-body, 'Barlow', 'Segoe UI', sans-serif); background: var(--c-bg); color: var(--c-text); min-height: 100dvh; @@ -144,8 +144,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; .hero-half:active { transform: scale(0.985); transition: transform 0.1s; } /* Eigenfarbe ohne Foto */ -.hero-half--truck { background: linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%); } -.hero-half--family { background: linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%); } +.hero-half--truck { background: var(--truck-bg-gradient, linear-gradient(160deg, #0A1F09 0%, #1E4A1A 50%, #2A6E22 100%)); } +.hero-half--family { background: var(--family-bg-gradient, linear-gradient(200deg, #2A1200 0%, #5C2E00 50%, #8B4500 100%)); } /* Bild-Layer */ .half-img { @@ -166,20 +166,10 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; transition: opacity var(--t-med); } .half-overlay--truck { - background: linear-gradient( - 160deg, - rgba(0,0,0,0.42) 0%, - rgba(10,31,9,0.38) 50%, - rgba(0,0,0,0.52) 100% - ); + background: var(--truck-overlay, linear-gradient(160deg, rgba(0,0,0,0.42) 0%, rgba(10,31,9,0.38) 50%, rgba(0,0,0,0.52) 100%)); } .half-overlay--family { - background: linear-gradient( - 200deg, - rgba(0,0,0,0.42) 0%, - rgba(42,18,0,0.38) 50%, - rgba(0,0,0,0.52) 100% - ); + background: var(--family-overlay, linear-gradient(200deg, rgba(0,0,0,0.42) 0%, rgba(42,18,0,0.38) 50%, rgba(0,0,0,0.52) 100%)); } /* #1.2: Card – weniger schwarz, mehr Bildwirkung */ @@ -210,10 +200,10 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; border-radius: 2px; margin-bottom: 10px; } .hero-half--truck .half-tag { - background: rgba(74,138,66,0.22); border: 1px solid rgba(74,138,66,0.4); color: #A8E0A0; + background: var(--truck-tag-bg, rgba(74,138,66,0.22)); border: 1px solid var(--truck-tag-border, rgba(74,138,66,0.4)); color: var(--truck-tag-color, #A8E0A0); } .hero-half--family .half-tag { - background: rgba(196,122,30,0.22); border: 1px solid rgba(196,122,30,0.45); color: #F5C878; + background: var(--family-tag-bg, rgba(196,122,30,0.22)); border: 1px solid var(--family-tag-border, rgba(196,122,30,0.45)); color: var(--family-tag-color, #F5C878); } .half-title { @@ -224,8 +214,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; /* Text-Shadow statt Card-Opacity für Lesbarkeit */ text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.4); } -.hero-half--truck .half-title { color: #C8F0C0; } -.hero-half--family .half-title { color: #FFE4B0; } +.hero-half--truck .half-title { color: var(--truck-title-color, #C8F0C0); } +.hero-half--family .half-title { color: var(--family-title-color, #FFE4B0); } .half-highlights { list-style: none; margin-bottom: 20px; @@ -242,8 +232,8 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; content: '›'; position: absolute; left: 0; font-size: 1rem; line-height: 1; } -.hero-half--truck .half-highlights li::before { color: #5AAA50; } -.hero-half--family .half-highlights li::before { color: #D4820A; } +.hero-half--truck .half-highlights li::before { color: var(--truck-bullet-color, #5AAA50); } +.hero-half--family .half-highlights li::before { color: var(--family-bullet-color, #D4820A); } .half-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; @@ -255,11 +245,11 @@ button { cursor: pointer; font-family: inherit; border: none; background: none; transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); } .hero-half--truck .half-cta { - background: #5AAA50; color: #061206; + background: var(--truck-cta-bg, #5AAA50); color: var(--truck-cta-color, #061206); box-shadow: 0 4px 16px rgba(74,138,66,0.35); } .hero-half--family .half-cta { - background: var(--c-accent); color: #1F1005; + background: var(--family-cta-bg, var(--c-accent)); color: var(--family-cta-color, #1F1005); box-shadow: 0 4px 16px rgba(212,130,10,0.4); } .hero-half:hover .half-cta, diff --git a/WebApp/truck.jpg b/WebApp/truck.jpg new file mode 100644 index 0000000..b863046 Binary files /dev/null and b/WebApp/truck.jpg differ