Lago
237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<!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. Kautionsfrei, transparent, sofort startklar." />
|
||
<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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<script>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="shell">
|
||
<a class="logo" href="/" aria-label="MC Cars Startseite">
|
||
<span class="logo-mark">MC</span>
|
||
<span>MC Cars</span>
|
||
</a>
|
||
|
||
<button class="menu-toggle" aria-label="Menue">☰</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 hoechstem 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>0 €</strong><span data-i18n="statDeposit">Kaution</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 fuer 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);">
|
||
<div class="shell">
|
||
<div class="section-head">
|
||
<div>
|
||
<p class="eyebrow" data-i18n="whyEyebrow">Warum MC Cars</p>
|
||
<h2 data-i18n="whyTitle">Keine Kompromisse zwischen Sicherheit und Fahrspass.</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">Kautionsfrei</h3>
|
||
<p data-i18n="whyDepositText">Sie zahlen nur die Miete.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 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 -->
|
||
<section id="buchen" style="background:var(--bg-elev);">
|
||
<div class="shell">
|
||
<div class="section-head">
|
||
<div>
|
||
<p class="eyebrow" data-i18n="bookingEyebrow">Jetzt buchen</p>
|
||
<h2 data-i18n="bookingTitle">Traumwagen unverbindlich anfragen.</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="booking-form" id="bookingForm" novalidate>
|
||
<label>
|
||
<span data-i18n="fieldName">Name</span>
|
||
<input type="text" name="name" required />
|
||
</label>
|
||
<label>
|
||
<span data-i18n="fieldEmail">E-Mail</span>
|
||
<input type="email" name="email" required />
|
||
</label>
|
||
<label>
|
||
<span data-i18n="fieldPhone">Telefon</span>
|
||
<input type="tel" name="phone" />
|
||
</label>
|
||
<label>
|
||
<span data-i18n="fieldCar">Fahrzeug</span>
|
||
<select name="vehicle" id="bookingCar"></select>
|
||
</label>
|
||
<label>
|
||
<span data-i18n="fieldFrom">Von</span>
|
||
<input type="date" name="from" required />
|
||
</label>
|
||
<label>
|
||
<span data-i18n="fieldTo">Bis</span>
|
||
<input type="date" name="to" required />
|
||
</label>
|
||
<label class="full">
|
||
<span data-i18n="fieldMessage">Nachricht</span>
|
||
<textarea name="message" rows="4" data-i18n-placeholder="messagePlaceholder" placeholder="Wuensche, Uhrzeit, Anlass..."></textarea>
|
||
</label>
|
||
<div class="full" style="display:flex;justify-content:flex-end;">
|
||
<button type="submit" class="btn" data-i18n="sendRequest">Anfrage senden</button>
|
||
</div>
|
||
</form>
|
||
|
||
<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">MC</span>
|
||
<span>MC Cars</span>
|
||
</div>
|
||
<p style="color:var(--muted);font-size:0.9rem;max-width:40ch;" data-i18n="footerTagline">Sportwagenvermietung in Oesterreich. 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.html" data-i18n="imprint">Impressum</a>
|
||
<a href="datenschutz.html" data-i18n="privacy">Datenschutz</a>
|
||
<a href="#" data-i18n="terms">Mietbedingungen</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>
|
||
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|