494 lines
13 KiB
HTML
494 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>CABINET Display – 9:16</title>
|
||
<style>
|
||
:root{
|
||
--bg:#ffffff;
|
||
--fg:#111111;
|
||
--muted:#6b6b6b;
|
||
--line:#e9e9e9;
|
||
--card:#f7f7f7;
|
||
--radius:28px;
|
||
--pad:64px; /* Safe-Area */
|
||
--maxw:1080px;
|
||
--maxh:1920px;
|
||
--shadow:0 18px 50px rgba(0,0,0,.08);
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{
|
||
margin:0;
|
||
background:#0f0f10;
|
||
color:var(--fg);
|
||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
padding:24px;
|
||
}
|
||
|
||
/* 9:16 Display-Rahmen */
|
||
.screen{
|
||
width:min(92vw, var(--maxw));
|
||
aspect-ratio: 9 / 16;
|
||
background:var(--bg);
|
||
border-radius:var(--radius);
|
||
box-shadow:var(--shadow);
|
||
overflow:hidden;
|
||
position:relative;
|
||
}
|
||
|
||
/* Slides */
|
||
.slide{
|
||
position:absolute;
|
||
inset:0;
|
||
padding:var(--pad);
|
||
display:grid;
|
||
grid-template-rows: 156px 1fr 360px; /* Header / Hero / Info+Footer */
|
||
gap:24px;
|
||
opacity:0;
|
||
transform:scale(1.01);
|
||
transition:opacity .6s ease, transform .6s ease;
|
||
}
|
||
.slide.active{
|
||
opacity:1;
|
||
transform:scale(1);
|
||
z-index:2;
|
||
}
|
||
|
||
/* Header */
|
||
.header{
|
||
display:flex;
|
||
align-items:flex-end;
|
||
justify-content:space-between;
|
||
padding-bottom:18px;
|
||
border-bottom:1px solid var(--line);
|
||
}
|
||
.brand{
|
||
font-size:34px;
|
||
letter-spacing:.08em;
|
||
text-transform:uppercase;
|
||
font-weight:600;
|
||
}
|
||
.tagline{
|
||
font-size:26px;
|
||
color:var(--muted);
|
||
font-weight:400;
|
||
text-align:right;
|
||
line-height:1.2;
|
||
}
|
||
|
||
/* Hero Bildbereich (Platzhalter, später durch echtes Bild ersetzen) */
|
||
.hero{
|
||
border-radius:24px;
|
||
background:
|
||
radial-gradient(1200px 800px at 20% 15%, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
|
||
linear-gradient(135deg, #f2f2f2, #fbfbfb);
|
||
border:1px solid var(--line);
|
||
overflow:hidden;
|
||
position:relative;
|
||
display:flex;
|
||
align-items:flex-end;
|
||
padding:36px;
|
||
}
|
||
.hero .hero-note{
|
||
font-size:22px;
|
||
color:rgba(0,0,0,.55);
|
||
background:rgba(255,255,255,.75);
|
||
border:1px solid var(--line);
|
||
border-radius:999px;
|
||
padding:10px 16px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
/* Optional: wenn ihr ein echtes Bild nutzen wollt */
|
||
.hero.has-image{
|
||
background-size:cover;
|
||
background-position:center;
|
||
}
|
||
|
||
/* Info + Footer */
|
||
.bottom{
|
||
display:grid;
|
||
grid-template-columns: 1fr 320px; /* Textblock / QR */
|
||
gap:28px;
|
||
align-items:stretch;
|
||
}
|
||
|
||
.info{
|
||
display:flex;
|
||
flex-direction:column;
|
||
justify-content:space-between;
|
||
border-radius:24px;
|
||
border:1px solid var(--line);
|
||
background:linear-gradient(180deg, #ffffff, #fafafa);
|
||
padding:28px;
|
||
min-height:360px;
|
||
}
|
||
|
||
.eyebrow{
|
||
font-size:22px;
|
||
color:var(--muted);
|
||
letter-spacing:.08em;
|
||
text-transform:uppercase;
|
||
margin-bottom:10px;
|
||
}
|
||
.title{
|
||
font-size:58px;
|
||
line-height:1.05;
|
||
font-weight:650;
|
||
margin:0 0 10px 0;
|
||
}
|
||
.subline{
|
||
font-size:28px;
|
||
color:var(--muted);
|
||
margin:0 0 16px 0;
|
||
}
|
||
|
||
.price-row{
|
||
display:flex;
|
||
align-items:baseline;
|
||
justify-content:space-between;
|
||
gap:16px;
|
||
margin-top:10px;
|
||
padding-top:16px;
|
||
border-top:1px solid var(--line);
|
||
}
|
||
.price{
|
||
font-size:86px;
|
||
font-weight:700;
|
||
letter-spacing:-.02em;
|
||
margin:0;
|
||
white-space:nowrap;
|
||
}
|
||
.uvp{
|
||
font-size:24px;
|
||
color:var(--muted);
|
||
text-align:right;
|
||
line-height:1.15;
|
||
}
|
||
|
||
.bullets{
|
||
margin:18px 0 0 0;
|
||
padding:0;
|
||
list-style:none;
|
||
display:grid;
|
||
gap:10px;
|
||
}
|
||
.bullets li{
|
||
font-size:30px;
|
||
line-height:1.25;
|
||
display:flex;
|
||
gap:12px;
|
||
align-items:flex-start;
|
||
}
|
||
.dot{
|
||
width:10px;height:10px;border-radius:50%;
|
||
background:#111;
|
||
margin-top:14px;
|
||
flex:0 0 auto;
|
||
opacity:.8;
|
||
}
|
||
|
||
/* Footer CTA + QR */
|
||
.qr{
|
||
border-radius:24px;
|
||
border:1px solid var(--line);
|
||
background:var(--card);
|
||
padding:18px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
justify-content:space-between;
|
||
gap:14px;
|
||
}
|
||
.qr .cta{
|
||
font-size:26px;
|
||
line-height:1.2;
|
||
color:var(--fg);
|
||
font-weight:600;
|
||
}
|
||
.qr .contact{
|
||
font-size:22px;
|
||
color:var(--muted);
|
||
line-height:1.2;
|
||
}
|
||
.qr .code{
|
||
flex:1;
|
||
border-radius:18px;
|
||
background:#fff;
|
||
border:1px dashed #d8d8d8;
|
||
display:grid;
|
||
place-items:center;
|
||
overflow:hidden;
|
||
}
|
||
/* Einfacher QR-Platzhalter (kein echter QR) */
|
||
.fake-qr{
|
||
width:88%;
|
||
aspect-ratio:1/1;
|
||
background:
|
||
linear-gradient(90deg, #000 10px, transparent 10px) 0 0 / 26px 26px,
|
||
linear-gradient(#000 10px, transparent 10px) 0 0 / 26px 26px;
|
||
opacity:.13;
|
||
position:relative;
|
||
}
|
||
.fake-qr::before,.fake-qr::after{
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
background:
|
||
radial-gradient(circle at 18% 18%, #000 0 28%, transparent 29% 100%),
|
||
radial-gradient(circle at 82% 18%, #000 0 28%, transparent 29% 100%),
|
||
radial-gradient(circle at 18% 82%, #000 0 28%, transparent 29% 100%);
|
||
opacity:.28;
|
||
mix-blend-mode:multiply;
|
||
}
|
||
|
||
.disclaimer{
|
||
font-size:18px;
|
||
color:var(--muted);
|
||
margin-top:10px;
|
||
}
|
||
|
||
/* Kleiner Slide-Indikator (optional) */
|
||
.progress{
|
||
position:absolute;
|
||
left:0; right:0; bottom:0;
|
||
height:6px;
|
||
background:rgba(255,255,255,.0);
|
||
}
|
||
.bar{
|
||
height:100%;
|
||
width:0%;
|
||
background:#111;
|
||
opacity:.22;
|
||
transition:width linear;
|
||
}
|
||
|
||
@media (max-width: 560px){
|
||
:root{ --pad:28px; }
|
||
.slide{ grid-template-rows: 120px 1fr 380px; }
|
||
.bottom{ grid-template-columns: 1fr; }
|
||
.qr{ min-height:240px; }
|
||
.price{ font-size:72px; }
|
||
.title{ font-size:46px; }
|
||
.bullets li{ font-size:24px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<main class="screen" aria-label="9:16 Display">
|
||
<!-- SLIDE 0: Intro -->
|
||
<section class="slide active" data-duration="8000" id="slide-0">
|
||
<header class="header">
|
||
<div class="brand">CABINET Bielefeld</div>
|
||
<div class="tagline">Planung • Beratung<br>Lieferung/Montage</div>
|
||
</header>
|
||
|
||
<div class="hero">
|
||
<div class="hero-note">Einzelstücke & Ausstellungsdeals – nur solange verfügbar</div>
|
||
</div>
|
||
|
||
<div class="bottom">
|
||
<div class="info">
|
||
<div>
|
||
<div class="eyebrow">Heute im Fokus</div>
|
||
<h1 class="title" style="margin-bottom:12px;">Kuratiert. Hochwertig. Sofort.</h1>
|
||
<p class="subline">Scannen Sie den QR-Code für Kontakt & Store-Infos.</p>
|
||
</div>
|
||
<div class="price-row" style="border-top:none; padding-top:0; margin-top:0;">
|
||
<div style="font-size:26px;color:var(--muted);">
|
||
CABINET Bielefeld – im Store ansprechen oder direkt reservieren
|
||
</div>
|
||
<div style="font-size:22px;color:var(--muted);text-align:right;">
|
||
Zwischenverkauf vorbehalten
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="qr">
|
||
<div>
|
||
<div class="cta">Kontakt & Store-Infos</div>
|
||
<div class="contact">QR scannen</div>
|
||
</div>
|
||
<div class="code" aria-label="QR Code Platzhalter">
|
||
<div class="fake-qr"></div>
|
||
</div>
|
||
<div class="contact">WhatsApp: … · Tel.: …</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SLIDE 1: GOYA – Variante B -->
|
||
<section class="slide" data-duration="10000" id="slide-1">
|
||
<header class="header">
|
||
<div class="brand">CABINET</div>
|
||
<div class="tagline">Ausstellungsware<br>Einzelstück</div>
|
||
</header>
|
||
|
||
<div class="hero">
|
||
<div class="hero-note">Bildplatzhalter: GOYA Sideboard (Hero-Foto)</div>
|
||
</div>
|
||
|
||
<div class="bottom">
|
||
<div class="info">
|
||
<div>
|
||
<div class="eyebrow">Ausstellungsware</div>
|
||
<h2 class="title">GOYA Sideboard</h2>
|
||
<p class="subline">Marke: Sudbrock</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="price-row">
|
||
<p class="price">489 €</p>
|
||
<div class="uvp">
|
||
brutto<br>
|
||
UVP neu: 4.744 €*
|
||
</div>
|
||
</div>
|
||
<div class="disclaimer">*UVP nur, sofern belegbar. Zwischenverkauf vorbehalten.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="qr">
|
||
<div>
|
||
<div class="cta">Infos & Reservierung</div>
|
||
<div class="contact">QR scannen</div>
|
||
</div>
|
||
<div class="code">
|
||
<div class="fake-qr"></div>
|
||
</div>
|
||
<div class="contact">WhatsApp: … · Tel.: …</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SLIDE 2: GOYA – Variante B -->
|
||
<section class="slide" data-duration="12000" id="slide-2">
|
||
<header class="header">
|
||
<div class="brand">CABINET</div>
|
||
<div class="tagline">GOYA<br>Konditionen</div>
|
||
</header>
|
||
|
||
<div class="hero">
|
||
<div class="hero-note">Bildplatzhalter: GOYA Detail/2. Ansicht</div>
|
||
</div>
|
||
|
||
<div class="bottom">
|
||
<div class="info">
|
||
<div>
|
||
<div class="eyebrow">GOYA | Konditionen</div>
|
||
<h2 class="title" style="font-size:52px;">Details auf einen Blick</h2>
|
||
<ul class="bullets">
|
||
<li><span class="dot"></span><span>Eingelagertes Einzelstück</span></li>
|
||
<li><span class="dot"></span><span>Abholung: Lager Rheda-Wiedenbrück</span></li>
|
||
<li><span class="dot"></span><span>Lieferung/Montage optional</span></li>
|
||
<li><span class="dot"></span><span>Preis gilt ohne Lieferung/Montage</span></li>
|
||
<li><span class="dot"></span><span>Deckel: Weiß matt (erneuert)</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="price-row">
|
||
<div style="font-size:26px;color:var(--muted);">
|
||
Details & Reservierung
|
||
</div>
|
||
<div style="font-size:26px;font-weight:650;">
|
||
QR scannen
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="qr">
|
||
<div>
|
||
<div class="cta">Details: QR scannen</div>
|
||
<div class="contact">Reservierung & Kontakt</div>
|
||
</div>
|
||
<div class="code">
|
||
<div class="fake-qr"></div>
|
||
</div>
|
||
<div class="contact">Zwischenverkauf vorbehalten</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SLIDE 3: TANDO – Variante C -->
|
||
<section class="slide" data-duration="10000" id="slide-3">
|
||
<header class="header">
|
||
<div class="brand">CABINET</div>
|
||
<div class="tagline">Nur 1× im Store<br>Sofort</div>
|
||
</header>
|
||
|
||
<div class="hero">
|
||
<div class="hero-note">Bildplatzhalter: TANDO Spiegel (Foto im Laden)</div>
|
||
</div>
|
||
|
||
<div class="bottom">
|
||
<div class="info">
|
||
<div>
|
||
<div class="eyebrow">Nur 1× im Store</div>
|
||
<h2 class="title">TANDO Spiegel</h2>
|
||
<p class="subline">Ansehen & mitnehmen – heute</p>
|
||
</div>
|
||
|
||
<div class="price-row">
|
||
<p class="price">199 €</p>
|
||
<div class="uvp">
|
||
brutto<br>
|
||
Jetzt sichern
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="qr">
|
||
<div>
|
||
<div class="cta">Jetzt sichern</div>
|
||
<div class="contact">QR scannen oder Team ansprechen</div>
|
||
</div>
|
||
<div class="code">
|
||
<div class="fake-qr"></div>
|
||
</div>
|
||
<div class="contact">WhatsApp: … · Tel.: …</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Progress bar -->
|
||
<div class="progress" aria-hidden="true">
|
||
<div class="bar" id="bar"></div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// Simple Slide-Rotation
|
||
const slides = Array.from(document.querySelectorAll(".slide"));
|
||
const bar = document.getElementById("bar");
|
||
|
||
let idx = 0;
|
||
let timer = null;
|
||
|
||
function show(i){
|
||
slides.forEach((s, n) => s.classList.toggle("active", n === i));
|
||
const dur = Number(slides[i].dataset.duration || 9000);
|
||
|
||
// progress animation
|
||
bar.style.transition = "none";
|
||
bar.style.width = "0%";
|
||
// force reflow
|
||
void bar.offsetWidth;
|
||
bar.style.transition = `width ${dur}ms linear`;
|
||
bar.style.width = "100%";
|
||
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
idx = (idx + 1) % slides.length;
|
||
show(idx);
|
||
}, dur);
|
||
}
|
||
|
||
show(idx);
|
||
</script>
|
||
</body>
|
||
</html>
|