109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CABINET – TANDO Spiegel</title>
|
||
<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=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="./shared-styles.css">
|
||
<style>
|
||
/* Slide-spezifische Anpassungen */
|
||
.hero {
|
||
background:
|
||
linear-gradient(180deg, rgba(245,245,245,0.9) 0%, rgba(250,250,250,0.95) 100%);
|
||
}
|
||
|
||
.hero.has-image {
|
||
background: url('../assets/tango.jpg') center/cover no-repeat;
|
||
}
|
||
.impulse-tag {
|
||
display: inline-block;
|
||
background: var(--accent);
|
||
color: white;
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
padding: 10px 18px;
|
||
border-radius: 10px;
|
||
margin-top: 12px;
|
||
letter-spacing: 0.03em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero-badge {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
padding: 16px 28px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="screen">
|
||
<article class="slide" data-duration="10000">
|
||
|
||
<!-- HEADER -->
|
||
<header class="header">
|
||
<div class="brand">
|
||
<img src="./logo-cabinet-300.png" alt="CABINET" class="brand-logo">
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero has-image">
|
||
<span class="hero-badge">Ausstellungsstück</span>
|
||
</section>
|
||
|
||
<!-- BOTTOM: Info + QR -->
|
||
<section class="bottom">
|
||
<div class="info">
|
||
<div class="info-content">
|
||
<p class="eyebrow">Nur 1×</p>
|
||
<h1 class="title large">TANDO Spiegel</h1>
|
||
<p class="subline">Heute mitnehmen</p>
|
||
</div>
|
||
|
||
<div class="price-block">
|
||
<div class="price-row">
|
||
<span class="price">199 €</span>
|
||
<div class="price-note">
|
||
<span class="impulse-tag">Im Store verfügbar</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="qr-box">
|
||
<div class="qr-header">
|
||
<p class="qr-title">Sichern</p>
|
||
<p class="qr-subtitle">QR scannen</p>
|
||
</div>
|
||
<div class="qr-code-wrapper">
|
||
<img id="qr-code" src="" alt="QR Code">
|
||
</div>
|
||
<p class="qr-contact">0521 98620100<br>Tel. oder WhatsApp</p>
|
||
</aside>
|
||
</section>
|
||
|
||
</article>
|
||
</main>
|
||
|
||
<script>
|
||
// QR-Code Konfiguration – TANDO Produkt
|
||
const QR_URL = 'https://cabinet-bielefeld.de';
|
||
|
||
function generateQR(targetUrl) {
|
||
const size = '300x300';
|
||
const color = '000000';
|
||
const bg = 'ffffff';
|
||
const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}&color=${color}&bgcolor=${bg}&margin=8&data=${encodeURIComponent(targetUrl)}`;
|
||
|
||
const qrImg = document.getElementById('qr-code');
|
||
if (qrImg) qrImg.src = qrApiUrl;
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => generateQR(QR_URL));
|
||
</script>
|
||
</body>
|
||
</html>
|