20-02-2026
This commit is contained in:
parent
854ce02bf6
commit
4d6b4930b2
128 changed files with 18247 additions and 2093 deletions
494
public/_cabinet/offer.html
Normal file
494
public/_cabinet/offer.html
Normal file
|
|
@ -0,0 +1,494 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue