Files
mc_cars_gmbh_infraestructure/frontend/index.html
T

453 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MC Cars · Sportwagenvermietung Steiermark</title>
<meta name="description" content="MC Cars · Premium Sportwagen- und Luxusvermietung in der Steiermark. Faire Kaution, transparent, sofort startklar." />
<link rel="icon" type="image/svg+xml" href="/images/mc-cars-mark.svg" />
<link rel="apple-touch-icon" href="/images/mc-cars-mark.svg" />
<link rel="preload" as="image" href="/images/ferrari-main-car-mobile.jpg" fetchpriority="high" />
<link rel="preconnect" href="https://esm.sh" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="preload" as="style" href="styles.css" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="styles.css" /></noscript>
<!-- SEO & Social Meta Tags -->
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<meta name="keywords" content="Sportwagenvermietung Steiermark, Luxusauto mieten, Sportwagenverleih, Ferraris mieten Graz, Porsche mieten Österreich" />
<meta name="theme-color" content="#1a1a1a" />
<meta name="language" content="German" />
<link rel="canonical" href="https://demo.lago.dev/" />
<link rel="alternate" hreflang="en" href="https://demo.lago.dev/en/" />
<link rel="alternate" hreflang="de" href="https://demo.lago.dev/" />
<link rel="alternate" hreflang="x-default" href="https://demo.lago.dev/" />
<!-- Open Graph Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="MC Cars Premium Sportwagen & Luxusvermietung" />
<meta property="og:description" content="Fahren Sie Premium-Sportwagen und Luxusklasse-Fahrzeuge in der Steiermark. Faire Kaution, transparent, sofort startklar." />
<meta property="og:url" content="https://demo.lago.dev/" />
<meta property="og:site_name" content="MC Cars" />
<meta property="og:locale" content="de_AT" />
<meta property="og:image" content="https://demo.lago.dev/images/mc-cars-og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="MC Cars Premium Sportwagen & Luxusvermietung" />
<meta name="twitter:description" content="Fahren Sie Premium-Sportwagen in der Steiermark. Faire Kaution, transparent, sofort startklar." />
<meta name="twitter:image" content="https://demo.lago.dev/images/mc-cars-og-image.png" />
<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"@id": "https://demo.lago.dev/#organization",
"name": "MC Cars GmbH",
"alternateName": "MC Cars",
"description": "Premium Sportwagen- und Luxusvermietung in der Steiermark",
"url": "https://demo.lago.dev",
"logo": "https://demo.lago.dev/images/mc-cars-logo.png",
"image": "https://demo.lago.dev/images/mc-cars-og-image.png",
"areaServed": {
"@type": "Place",
"name": "Steiermark, Österreich",
"geo": {
"@type": "GeoShape",
"box": "47.2 13.0 48.5 16.0"
}
},
"priceRange": "€€€",
"serviceType": "Sportwagenvermietung",
"sameAs": [
"https://www.facebook.com/mccars",
"https://www.instagram.com/mccars"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "MC Cars GmbH",
"url": "https://demo.lago.dev",
"logo": "https://demo.lago.dev/images/mc-cars-logo.png",
"description": "Premium Sportwagen- und Luxusvermietung in Steiermark, Österreich",
"foundingDate": "2024",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "Customer Support",
"availableLanguage": ["de", "en"]
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "https://demo.lago.dev/"
}
]
}
</script>
</head>
<body>
<header class="site-header">
<div class="shell">
<a class="logo" href="/" aria-label="MC Cars Startseite">
<span class="logo-mark" aria-hidden="true">MC</span>
<span>MC Cars</span>
</a>
<button class="menu-toggle" aria-label="Menü"></button>
<nav class="main-nav" aria-label="Hauptnavigation">
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
<a href="#warum" data-i18n="navWhy">Warum wir</a>
<a href="#stimmen" data-i18n="navReviews">Stimmen</a>
<a href="#buchen" data-i18n="navBook">Buchen</a>
<a class="btn small" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
<button class="lang-toggle" type="button" aria-label="Sprache wechseln">EN</button>
</nav>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero" id="home">
<div class="shell">
<p class="eyebrow" data-i18n="heroEyebrow">MC Cars · Sportwagenvermietung</p>
<h1 data-i18n="heroTitle">Fahren auf höchstem Niveau.</h1>
<p class="lead" data-i18n="heroLead">Premium-Sportwagen und Luxusklasse in der Steiermark. Kautionsfrei, transparent, sofort startklar.</p>
<div class="hero-cta">
<a class="btn" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
<a class="btn ghost" href="#fahrzeuge" data-i18n="viewFleet">Flotte ansehen</a>
</div>
<div class="hero-stats">
<div><strong data-i18n="statDeposit">Faire Kaution</strong><span>Fair Deposit</span></div>
<div><strong id="statCarsCount"></strong><span data-i18n="statCars">Fahrzeuge</span></div>
<div><strong>24/7</strong><span data-i18n="statSupport">Support</span></div>
</div>
</div>
</section>
<!-- Fleet -->
<section id="fahrzeuge">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="fleetEyebrow">Unsere Flotte</p>
<h2 data-i18n="fleetTitle">Handverlesen. Gepflegt. Startklar.</h2>
<p class="sub" data-i18n="fleetSub">Filtern Sie nach Marke und Preis. Klicken Sie für Details oder buchen Sie direkt.</p>
</div>
</div>
<form class="filters" id="filters" onsubmit="return false;">
<label>
<span data-i18n="filterBrand">Marke</span>
<select id="brandFilter"><option value="all" data-i18n="all">Alle</option></select>
</label>
<label>
<span data-i18n="filterSort">Sortierung</span>
<select id="sortFilter">
<option value="sort_order">Empfehlung</option>
<option value="priceAsc" data-i18n="sortPriceAsc">Preis aufsteigend</option>
<option value="priceDesc" data-i18n="sortPriceDesc">Preis absteigend</option>
<option value="powerDesc" data-i18n="sortPowerDesc">Leistung absteigend</option>
</select>
</label>
<label>
<span data-i18n="filterPrice">Max. Preis / Tag</span>
<input type="number" id="priceFilter" min="0" step="50" placeholder="1000" />
</label>
</form>
<div class="vehicle-grid" id="vehicleGrid"></div>
<p id="emptyState" style="display:none;color:var(--muted);text-align:center;padding:2rem 0;" data-i18n="noMatches">Keine Fahrzeuge gefunden.</p>
</div>
</section>
<!-- Why -->
<section id="warum" style="background:var(--bg-elev);">
<a href="/impressum" data-i18n="imprint">Impressum</a>
<a href="/agb" data-i18n="terms">AGB</a>
<a href="/mietbedingungen" data-i18n="rentalTerms">Mietbedingungen</a>
<a href="/datenschutz" data-i18n="privacy">Datenschutz</a>
<p class="eyebrow" data-i18n="whyEyebrow">Warum MC Cars</p>
<h2 data-i18n="whyTitle">Keine Kompromisse zwischen Sicherheit und Fahrspaß.</h2>
</div>
</div>
<div class="why-grid">
<article class="why-card">
<div class="icon">🛡</div>
<h3 data-i18n="whyInsurance">Versicherungsschutz</h3>
<p data-i18n="whyInsuranceText">Vollkasko mit klarem Selbstbehalt.</p>
</article>
<article class="why-card">
<div class="icon"></div>
<h3 data-i18n="whyFleet">Premium Flotte</h3>
<p data-i18n="whyFleetText">Handverlesene Performance-Modelle.</p>
</article>
<article class="why-card">
<div class="icon"></div>
<h3 data-i18n="whyDeposit">Faire Kaution</h3>
<p data-i18n="whyDepositText">Kein Überziehen. Transparente, faire Kaution ohne unnötige Belastung.</p>
</article>
</div>
</div>
</section>
<!-- Toast Notification -->
<div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>
<!-- Reviews -->
<section id="stimmen">
<div class="shell">
<div class="section-head">
<div>
<p class="eyebrow" data-i18n="reviewsEyebrow">Kundenmeinungen</p>
<h2 data-i18n="reviewsTitle">Erlebnisse, die bleiben.</h2>
</div>
</div>
<div class="reviews-strip" id="reviewStrip" aria-live="polite"></div>
<div class="review-dots" id="reviewDots"></div>
</div>
</section>
<!-- Booking BPF -->
<section id="buchen" style="background:var(--bg-elev);">
<div class="shell">
<div class="bpf-header">
<h2 data-i18n="bpfTitle">Jetzt buchen</h2>
<p class="sub" data-i18n="bpfSubtitle">Wähle dein Wunschfahrzeug, den Zeitraum und konfiguriere deine Buchung nach Wunsch.</p>
</div>
<!-- Step indicators -->
<div class="bpf-steps" id="bpfSteps">
<button class="bpf-step active" data-step="1"><span class="bpf-step-num">1</span> <span data-i18n="stepVehicleTime">Fahrzeug & Zeitraum</span></button>
<span class="bpf-step-arrow"></span>
<button class="bpf-step" data-step="2"><span class="bpf-step-num">2</span> <span data-i18n="stepContact">Kontaktdaten</span></button>
<span class="bpf-step-arrow"></span>
<button class="bpf-step" data-step="3"><span class="bpf-step-num">3</span> <span data-i18n="stepVerification">ID-Verifizierung</span></button>
</div>
<div class="bpf-layout">
<!-- Main form area -->
<div class="bpf-main">
<!-- Step 1: Vehicle & Time -->
<div class="bpf-panel" id="bpfStep1">
<h3 class="bpf-panel-title">🚗 <span data-i18n="stepVehicleTime">Fahrzeug & Zeitraum</span></h3>
<div class="bpf-field">
<label for="bpfCar" id="bpfCarLabel" data-i18n="bpfVehicle">Fahrzeug</label>
<select id="bpfCar" aria-labelledby="bpfCarLabel">
<option value="" data-i18n="bpfSelectVehicle">Fahrzeug wählen</option>
</select>
</div>
<div class="bpf-field">
<label data-i18n="bpfDuration">Mietdauer</label>
<div class="bpf-duration-presets" id="bpfDurationPresets">
<button type="button" class="bpf-preset" data-preset="day">
<span class="bpf-preset-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M12 14h.01"></path><path d="M12 16h.01"></path></svg>
</span>
<span data-i18n="bpfPresetDay">1 Tag</span>
</button>
<button type="button" class="bpf-preset" data-preset="weekend">
<span class="bpf-preset-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M14 14h4v4h-4z"></path></svg>
</span>
<span data-i18n="bpfPresetWeekend">Wochenende</span>
</button>
<button type="button" class="bpf-preset" data-preset="custom">
<span class="bpf-preset-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M8 14h8"></path><path d="M8 18h8"></path></svg>
</span>
<span data-i18n="bpfPresetCustom">Individuell</span>
</button>
</div>
</div>
<!-- Day mode: single date picker -->
<div class="bpf-field bpf-date-day" id="bpfDateDay" style="display:none;">
<label data-i18n="bpfPickDate">Datum wählen</label>
<input type="date" id="bpfDayDate" />
</div>
<!-- Weekend mode: pick the Saturday -->
<div class="bpf-field bpf-date-weekend" id="bpfDateWeekend" style="display: none;">
<label data-i18n="bpfPickWeekend">Wochenende wählen (Samstag)</label>
<input type="date" id="bpfWeekendDate" />
<p class="bpf-weekend-def" data-i18n="bpfWeekendDef">Wochenende: Samstag 9:00 Sonntag 20:00</p>
</div>
<!-- Custom mode: from/to date pickers -->
<div class="bpf-date-custom" id="bpfDateCustom" style="display:none;">
<div class="bpf-field-row">
<div class="bpf-field">
<label data-i18n="bpfStartDate">Startdatum</label>
<input type="date" id="bpfFrom" />
</div>
<div class="bpf-field">
<label data-i18n="bpfEndDate">Enddatum</label>
<input type="date" id="bpfTo" />
</div>
</div>
</div>
<div class="bpf-nav">
<div></div>
<button class="btn" type="button" id="bpfNext1" data-i18n="bpfNext">Weiter</button>
</div>
</div>
<!-- Step 2: Contact -->
<div class="bpf-panel" id="bpfStep2" style="display:none;">
<h3 class="bpf-panel-title">📋 <span data-i18n="stepContact">Kontaktdaten</span></h3>
<div class="bpf-field">
<label data-i18n="fieldName">Name</label>
<input type="text" id="bpfName" required />
</div>
<div class="bpf-field-row">
<div class="bpf-field">
<label data-i18n="fieldEmail">E-Mail</label>
<input type="email" id="bpfEmail" required />
</div>
<div class="bpf-field">
<label data-i18n="fieldPhone">Telefon</label>
<input type="tel" id="bpfPhone" />
</div>
</div>
<div class="bpf-field">
<label data-i18n="fieldMessage">Nachricht</label>
<textarea id="bpfMessage" rows="3" data-i18n-placeholder="messagePlaceholder" placeholder="Wünsche, Uhrzeit, Anlass..."></textarea>
</div>
<div class="bpf-nav">
<button class="btn ghost" type="button" id="bpfBack2" data-i18n="bpfBack">Zurück</button>
<button class="btn" type="button" id="bpfNext2" data-i18n="bpfNext">Weiter</button>
</div>
</div>
<!-- Step 3: ID Verification -->
<div class="bpf-panel" id="bpfStep3" style="display:none;">
<h3 class="bpf-panel-title">🔐 <span data-i18n="stepVerification">ID-Verifizierung</span></h3>
<p class="muted" style="margin-bottom:1.5rem;">Bitte laden Sie einen gültigen Ausweis sowie einen aktuellen Lohnzettel / Gehaltsnachweis hoch.</p>
<div class="bpf-field">
<label data-i18n="bpfIdUpload">Ausweis / Führerschein *</label>
<div class="bpf-upload-box" id="uploadId">
<span class="bpf-upload-icon"></span>
<span data-i18n="bpfClickUpload">Klicken zum Hochladen</span>
<span class="muted" data-i18n="bpfUploadHint">PDF, JPG, PNG (max. 10 MB)</span>
<input type="file" accept="image/*,.pdf" class="bpf-file-input" id="bpfFileId" />
</div>
<p class="bpf-file-name" id="bpfFileIdName"></p>
</div>
<div class="bpf-field">
<label data-i18n="bpfIncomeUpload">Lohnzettel / Gehaltsnachweis (optional)</label>
<div class="bpf-upload-box" id="uploadIncome">
<span class="bpf-upload-icon"></span>
<span data-i18n="bpfClickUpload">Klicken zum Hochladen</span>
<span class="muted" data-i18n="bpfUploadHint">PDF, JPG, PNG (max. 10 MB)</span>
<input type="file" accept="image/*,.pdf" class="bpf-file-input" id="bpfFileIncome" />
</div>
<p class="bpf-file-name" id="bpfFileIncomeName"></p>
</div>
<div class="bpf-notice">
<span></span>
<p data-i18n="bpfIdNotice">Ihre Dokumente werden vertraulich behandelt und dienen ausschließlich der Identitätsverifizierung.</p>
</div>
<div class="bpf-nav">
<button class="btn ghost" type="button" id="bpfBack3" data-i18n="bpfBack">Zurück</button>
<button class="btn" type="button" id="bpfSubmit" data-i18n="bpfSubmit">Anfrage absenden</button>
</div>
</div>
</div>
<!-- Price sidebar -->
<aside class="bpf-sidebar" id="bpfSidebar">
<p class="bpf-sidebar-placeholder" data-i18n="bpfSelectForPrice">Wähle Fahrzeug und Datum für eine Preisübersicht</p>
<div class="bpf-sidebar-content" id="bpfSidebarContent" style="display:none;"></div>
</aside>
</div>
<p id="bookingFeedback" class="form-feedback" role="status"></p>
</div>
</section>
</main>
<footer class="site-footer" id="kontakt">
<div class="shell">
<div class="footer-grid">
<div>
<div class="logo" style="margin-bottom:0.8rem;">
<span class="logo-mark" aria-hidden="true">MC</span>
<span>MC Cars</span>
</div>
<p style="color:var(--muted);font-size:0.9rem;max-width:40ch;" data-i18n="footerTagline">Sportwagenvermietung in Österreich. Standort: Steiermark (TBD).</p>
</div>
<div>
<h4 data-i18n="footerNav">Navigation</h4>
<a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
<a href="#warum" data-i18n="navWhy">Warum wir</a>
<a href="#buchen" data-i18n="navBook">Buchen</a>
</div>
<div>
<h4 data-i18n="footerLegal">Rechtliches</h4>
<a href="/impressum" data-i18n="imprint">Impressum</a>
<a href="/agb" data-i18n="terms">AGB</a>
<a href="/mietbedingungen" data-i18n="rentalTerms">Mietbedingungen</a>
<a href="/datenschutz" data-i18n="privacy">Datenschutz</a>
</div>
<div>
<h4 data-i18n="footerContact">Kontakt</h4>
<a href="mailto:hello@mccars.at">hello@mccars.at</a>
<a href="tel:+43316880000">+43 316 880000</a>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year"></span> MC Cars. <span data-i18n="copyright">Alle Rechte vorbehalten.</span></span>
<span>Made in Steiermark</span>
</div>
</div>
</footer>
<!-- Vehicle details dialog -->
<dialog id="carDialog" aria-labelledby="dialogTitle">
<div class="dialog-head">
<h3 id="dialogTitle" style="margin:0;"></h3>
<button class="dialog-close" id="dialogClose" aria-label="Close">×</button>
</div>
<div class="dialog-body" id="dialogBody"></div>
</dialog>
<div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>
<script src="config.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>