← back to Model Arena
data/artifacts/145b5d1ed01f/gpt.html
1370 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Designer Wallcoverings – Instagram Carousel Lookbook</title>
<style>
:root {
/* Luxe Noir palette from opendesign */
--dw-bg: #0d0d0f;
--dw-surface: #17171c;
--dw-text: #f5f2ea;
--dw-muted: #8a8578;
--dw-accent: #c9a961; /* metallic champagne-gold accent */
--dw-accent-deep: #7d6a45;
/* Typography from opendesign */
--dw-display-serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
--dw-body-sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
--dw-font-caption: 12px;
--dw-font-body: 16px;
--dw-font-lead: 21px;
--dw-font-h3: 28px;
--dw-font-h2: 38px;
--dw-font-h1: 50px;
--dw-radius-lg: 18px;
--dw-radius-md: 12px;
--dw-radius-sm: 999px;
--dw-border-hairline: 1px solid rgba(245, 242, 234, 0.18);
--dw-border-hairline-soft: 1px solid rgba(138, 133, 120, 0.45);
--dw-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
--dw-ease-swift-out: cubic-bezier(.22,.9,.24,1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background: radial-gradient(circle at top, #191920 0, var(--dw-bg) 55%);
color: var(--dw-text);
font-family: var(--dw-body-sans);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 32px 16px;
}
.app-shell {
position: relative;
width: 100%;
max-width: 960px;
height: 560px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(201, 169, 97, 0.16), transparent 60%),
linear-gradient(145deg, #121218, #0b0b0e 55%, #14141a);
box-shadow:
0 0 0 1px rgba(249, 244, 229, 0.04),
var(--dw-shadow-soft);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Fixed top bar */
.top-bar {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px 14px;
border-bottom: 1px solid rgba(245, 242, 234, 0.09);
backdrop-filter: blur(18px);
background: linear-gradient(to bottom, rgba(13, 13, 15, 0.96), rgba(13, 13, 15, 0.82));
}
.wordmark {
font-family: var(--dw-display-serif);
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dw-text);
white-space: nowrap;
}
.wordmark span {
display: inline-block;
padding-bottom: 2px;
border-bottom: 1px solid rgba(201, 169, 97, 0.6);
}
.top-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.65);
}
.pill {
border-radius: var(--dw-radius-sm);
border: 1px solid rgba(201, 169, 97, 0.5);
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.84);
background: radial-gradient(circle at top left, rgba(201, 169, 97, 0.16), transparent 65%);
}
.pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--dw-accent);
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.badge-live {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--dw-radius-sm);
border: 1px solid rgba(245, 242, 234, 0.22);
background: rgba(19, 19, 23, 0.9);
display: inline-flex;
align-items: center;
gap: 6px;
}
.badge-live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%, #fff, var(--dw-accent));
box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.45);
}
.main {
flex: 1;
display: flex;
padding: 18px 24px 20px;
gap: 18px;
}
.carousel-shell {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
gap: 14px;
}
.carousel-viewport {
position: relative;
flex: 1;
border-radius: 24px;
border: 1px solid rgba(245, 242, 234, 0.08);
background: radial-gradient(circle at top, #1b1b24 0, #101015 55%);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.9),
0 22px 60px rgba(0, 0, 0, 0.8);
}
.slides {
display: flex;
height: 100%;
width: 500%;
transform: translateX(0);
transition: transform 520ms var(--dw-ease-swift-out);
}
.slide {
width: 20%;
padding: 26px 30px 22px;
display: flex;
flex-direction: column;
gap: 18px;
color: var(--dw-text);
}
.slide-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.slide-kicker {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dw-muted);
}
.slide-index {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.7);
}
.slide-title {
font-family: var(--dw-display-serif);
font-size: var(--dw-font-h2);
letter-spacing: -0.02em;
line-height: 1.04;
}
.slide-subtitle {
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.7);
margin-top: 4px;
}
.slide-lede {
font-size: var(--dw-font-lead);
line-height: 1.45;
color: rgba(245, 242, 234, 0.9);
max-width: 32rem;
}
/* Pattern + room grid */
.slide-grid {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr);
gap: 20px;
align-items: stretch;
}
.pattern-card, .room-card {
position: relative;
border-radius: 18px;
border: var(--dw-border-hairline);
background: radial-gradient(circle at top, #202029 0, #15151c 55%);
overflow: hidden;
display: flex;
flex-direction: column;
}
.pattern-label, .room-label {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: var(--dw-radius-sm);
border: 1px solid rgba(245, 242, 234, 0.24);
background: rgba(9, 9, 12, 0.82);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.82);
}
.pattern-surface {
flex: 1;
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(40px, 1fr);
background-color: #111118;
isolation: isolate;
}
.pattern-surface::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.14) 0, transparent 52%),
radial-gradient(circle at 100% 100%, rgba(125, 106, 69, 0.2) 0, transparent 55%);
mix-blend-mode: screen;
opacity: 0.9;
pointer-events: none;
}
.pattern-swatch {
border: 1px solid rgba(201, 169, 97, 0.16);
background:
radial-gradient(circle at 25% 20%, rgba(201, 169, 97, 0.25), transparent 65%),
repeating-linear-gradient(
45deg,
rgba(201, 169, 97, 0.3) 0,
rgba(201, 169, 97, 0.3) 1px,
transparent 1px,
transparent 9px
);
position: relative;
}
.pattern-swatch:nth-child(odd) {
background:
radial-gradient(circle at 75% 80%, rgba(201, 169, 97, 0.4), transparent 60%),
linear-gradient(135deg, #111118 0, #181823 60%),
repeating-linear-gradient(
135deg,
rgba(201, 169, 97, 0.22) 0,
rgba(201, 169, 97, 0.22) 1px,
transparent 1px,
transparent 7px
);
}
.pattern-swatch::after {
content: "";
position: absolute;
inset: 0;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
mix-blend-mode: multiply;
}
.pattern-footer {
padding: 8px 12px 10px;
border-top: var(--dw-border-hairline-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
background: linear-gradient(to bottom, rgba(15, 15, 20, 0.95), rgba(10, 10, 15, 0.98));
}
.pattern-caption {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.7);
}
.pattern-chip-row {
display: flex;
align-items: center;
gap: 6px;
}
.chip {
width: 16px;
height: 16px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0 0 1px rgba(245, 242, 234, 0.06);
}
.chip--bg { background: var(--dw-bg); }
.chip--ivory { background: #f5f2ea; }
.chip--accent { background: linear-gradient(135deg, var(--dw-accent), #f3e3b5); }
.chip-label {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.64);
}
/* Room vignette */
.room-card {
background:
radial-gradient(circle at top left, rgba(201, 169, 97, 0.12), transparent 55%),
radial-gradient(circle at bottom right, rgba(57, 52, 40, 0.7), #14141b 55%);
}
.room-viewport {
position: relative;
flex: 1;
padding: 18px 18px 14px;
display: flex;
gap: 14px;
}
.room-wall {
flex: 1.3;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(245, 242, 234, 0.16);
background:
linear-gradient(135deg, #181822 0, #101018 60%),
repeating-linear-gradient(
135deg,
rgba(201, 169, 97, 0.18) 0,
rgba(201, 169, 97, 0.18) 2px,
transparent 2px,
transparent 14px
);
position: relative;
}
.room-wall::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%),
radial-gradient(circle at top right, rgba(201, 169, 97, 0.55), transparent 60%);
mix-blend-mode: soft-light;
}
.room-floor {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
}
.sofa {
position: relative;
height: 54%;
border-radius: 16px;
background:
linear-gradient(145deg, #26252b, #121217);
border: 1px solid rgba(245, 242, 234, 0.1);
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(0, 0, 0, 0.9);
overflow: hidden;
}
.sofa::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 25% 0, rgba(245, 242, 234, 0.1), transparent 55%),
radial-gradient(circle at 80% 90%, rgba(201, 169, 97, 0.4), transparent 60%);
mix-blend-mode: soft-light;
}
.sofa-pillows {
position: absolute;
bottom: 18%;
left: 10%;
display: flex;
gap: 6px;
}
.pillow {
width: 22px;
height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, #f5f2ea, #c1b9a5);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 0, 0, 0.7);
}
.pillow--accent {
background: linear-gradient(135deg, #d7b973, #f5e3b4);
}
.side-table {
position: absolute;
right: 12%;
bottom: 12%;
width: 38px;
height: 38px;
border-radius: 50% 50% 18% 18%;
background: linear-gradient(145deg, #2b2927, #111012);
border: 1px solid rgba(245, 242, 234, 0.22);
box-shadow:
0 10px 18px rgba(0, 0, 0, 0.8);
}
.lamp {
position: absolute;
right: 19%;
bottom: 56%;
width: 18px;
height: 36px;
}
.lamp-shade {
width: 100%;
height: 20px;
border-radius: 50% 50% 35% 35%;
background: radial-gradient(circle at 50% 0, #fefbf0, #d4c5a2);
box-shadow:
0 0 6px rgba(255, 248, 214, 0.6),
0 8px 18px rgba(0, 0, 0, 0.8);
border: 1px solid rgba(201, 169, 97, 0.75);
}
.lamp-stem {
width: 4px;
height: 16px;
margin: 0 auto;
margin-top: -2px;
border-radius: 999px;
background: linear-gradient(to bottom, #c9a961, #816841);
}
.room-note {
font-size: 13px;
color: rgba(245, 242, 234, 0.9);
line-height: 1.5;
}
.room-note strong {
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 11px;
color: rgba(245, 242, 234, 0.8);
}
.room-note em {
font-style: normal;
color: var(--dw-accent);
}
.room-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.6);
}
.room-meta span:nth-child(2) {
color: rgba(245, 242, 234, 0.85);
}
/* CTA slide styles */
.cta-center {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.cta-title {
font-family: var(--dw-display-serif);
font-size: var(--dw-font-h1);
letter-spacing: -0.03em;
line-height: 1.02;
}
.cta-subtitle {
font-size: var(--dw-font-lead);
max-width: 30rem;
color: rgba(245, 242, 234, 0.9);
line-height: 1.5;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(201, 169, 97, 0.8);
background:
radial-gradient(circle at 10% 0, rgba(249, 246, 231, 0.32), transparent 55%),
linear-gradient(135deg, #d4b773, #9f7c3b);
color: #1b140a;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow:
0 12px 25px rgba(0, 0, 0, 0.85),
0 0 0 1px rgba(0, 0, 0, 0.8);
overflow: hidden;
transition:
transform 220ms var(--dw-ease-swift-out),
box-shadow 220ms var(--dw-ease-swift-out),
background 220ms var(--dw-ease-swift-out);
}
.btn::after {
content: "";
position: absolute;
inset: -30%;
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.4), transparent 65%);
opacity: 0;
transition: opacity 260ms var(--dw-ease-swift-out), transform 260ms var(--dw-ease-swift-out);
transform: translate3d(-40%, -40%, 0);
pointer-events: none;
mix-blend-mode: screen;
}
.btn:hover {
transform: translateY(-1px);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(0, 0, 0, 0.9);
background:
radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.4), transparent 55%),
linear-gradient(135deg, #e2c684, #b18a47);
}
.btn:hover::after {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.btn-outline {
background: transparent;
border-color: rgba(245, 242, 234, 0.5);
color: rgba(245, 242, 234, 0.9);
box-shadow: none;
}
.btn-outline:hover {
background: rgba(245, 242, 234, 0.04);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(0, 0, 0, 0.9);
}
.btn-outline::after {
display: none;
}
.cta-note {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.6);
}
.cta-note span {
color: var(--dw-accent);
}
/* Carousel controls */
.carousel-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 2px 0;
}
.dots {
display: flex;
align-items: center;
gap: 8px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: 1px solid rgba(245, 242, 234, 0.6);
background: transparent;
opacity: 0.45;
cursor: pointer;
transition:
width 200ms var(--dw-ease-swift-out),
background 200ms var(--dw-ease-swift-out),
opacity 200ms var(--dw-ease-swift-out),
border-color 200ms var(--dw-ease-swift-out);
}
.dot.is-active {
width: 20px;
background: linear-gradient(135deg, var(--dw-accent), #f3e3b5);
border-color: transparent;
opacity: 1;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
}
.pager-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.72);
}
.pager-label span {
color: var(--dw-accent);
}
.arrows {
display: flex;
align-items: center;
gap: 6px;
}
.arrow-btn {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(245, 242, 234, 0.4);
background: radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.1), transparent 60%);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(245, 242, 234, 0.9);
transition:
background 200ms var(--dw-ease-swift-out),
transform 160ms var(--dw-ease-swift-out),
box-shadow 200ms var(--dw-ease-swift-out),
border-color 200ms var(--dw-ease-swift-out),
color 200ms var(--dw-ease-swift-out);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
}
.arrow-btn svg {
width: 12px;
height: 12px;
}
.arrow-btn:hover {
background: radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.18), transparent 60%);
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
border-color: rgba(201, 169, 97, 0.9);
color: var(--dw-accent);
}
.arrow-btn:active {
transform: translateY(0);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.9);
}
/* Right side style meta panel */
.side-panel {
width: 260px;
border-radius: 20px;
border: 1px solid rgba(245, 242, 234, 0.08);
background:
radial-gradient(circle at top left, rgba(201, 169, 97, 0.16), transparent 55%),
linear-gradient(145deg, #191920, #101016);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.9),
0 16px 40px rgba(0, 0, 0, 0.85);
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.side-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.6);
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.side-label span {
color: var(--dw-accent);
}
.style-name-editable {
margin-top: 4px;
font-family: var(--dw-display-serif);
font-size: 20px;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.3;
color: var(--dw-text);
border-radius: 10px;
border: 1px dashed rgba(245, 242, 234, 0.2);
padding: 10px 10px 9px;
background: rgba(10, 10, 14, 0.7);
outline: none;
cursor: text;
}
.style-name-editable:focus {
border-style: solid;
border-color: rgba(201, 169, 97, 0.9);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95);
}
.style-note {
font-size: 13px;
color: rgba(245, 242, 234, 0.78);
line-height: 1.6;
margin-top: 4px;
}
.palette-row {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 6px;
}
.palette-chips {
display: flex;
align-items: center;
gap: 6px;
}
.palette-chip {
flex: 1;
height: 26px;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.85);
box-shadow: 0 0 0 1px rgba(245, 242, 234, 0.06);
}
.palette-chip.bg { background: var(--dw-bg); }
.palette-chip.surface { background: var(--dw-surface); }
.palette-chip.ivory { background: #f5f2ea; }
.palette-chip.accent {
background: linear-gradient(135deg, var(--dw-accent), #f3e3b5);
}
.palette-legend {
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.6);
}
.style-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.style-tag {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(245, 242, 234, 0.25);
color: rgba(245, 242, 234, 0.82);
background: rgba(10, 10, 14, 0.9);
}
.style-tag.accent {
border-color: rgba(201, 169, 97, 0.7);
color: var(--dw-accent);
background: rgba(19, 15, 8, 0.95);
}
.side-footer {
margin-top: auto;
padding-top: 6px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(245, 242, 234, 0.08);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.6);
}
.side-footer span {
color: rgba(245, 242, 234, 0.82);
}
/* Simplified responsiveness */
@media (max-width: 880px) {
body {
padding: 10px;
}
.app-shell {
height: 620px;
}
.main {
flex-direction: column;
}
.side-panel {
width: 100%;
order: -1;
flex-direction: row;
align-items: flex-start;
gap: 10px;
height: auto;
}
.style-name-editable {
flex: 1;
}
.side-footer {
display: none;
}
}
@media (max-width: 640px) {
.app-shell {
height: 640px;
}
.slide-grid {
grid-template-columns: 1fr;
grid-template-rows: minmax(140px, 1fr) minmax(160px, 1.3fr);
}
.slide {
padding-inline: 20px;
}
.slide-title {
font-size: 32px;
}
.cta-title {
font-size: 38px;
}
}
</style>
</head>
<body>
<div class="app-shell">
<header class="top-bar">
<div class="wordmark">
<span>DESIGNER WALLCOVERINGS</span>
</div>
<div class="top-meta">
<div class="pill">
<span class="pill-dot"></span>
LOOKBOOK / SERIES 01
</div>
<div class="badge-live">
<span class="badge-live-dot"></span>
carousel preview
</div>
</div>
</header>
<main class="main">
<section class="carousel-shell" aria-label="Instagram carousel preview">
<div class="carousel-viewport">
<div class="slides" id="slides">
<!-- Slide 1: Cover -->
<article class="slide" aria-label="Cover slide">
<header class="slide-header">
<div>
<div class="slide-kicker">Wallcovering Lookbook</div>
<h1 class="slide-title" id="cover-style-title">Parisian Deco Noir</h1>
<div class="slide-subtitle">Velvet shadows. Gilded geometry. Candlelit gloss.</div>
</div>
<div class="slide-index">01 — Cover</div>
</header>
<p class="slide-lede">
A five-frame study in <em>quiet glamour</em>: crisp geometrics, burnished metal, and rooms that feel like a midnight piano bar.
</p>
<div class="slide-grid">
<div class="pattern-card">
<div class="pattern-label">Signature Pattern</div>
<div class="pattern-surface">
<!-- 4xN pattern swatches -->
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
</div>
<footer class="pattern-footer">
<div class="pattern-caption">Ivory on Noir / Brass Linework</div>
<div class="pattern-chip-row">
<div class="chip chip--bg"></div>
<div class="chip chip--ivory"></div>
<div class="chip chip--accent"></div>
</div>
</footer>
</div>
<div class="room-card">
<div class="room-label">Mood Vignette</div>
<div class="room-viewport">
<div class="room-wall">
<!-- implied wall pattern -->
</div>
<div class="room-floor">
<div class="sofa">
<div class="sofa-pillows">
<div class="pillow"></div>
<div class="pillow pillow--accent"></div>
</div>
<div class="side-table"></div>
<div class="lamp">
<div class="lamp-shade"></div>
<div class="lamp-stem"></div>
</div>
</div>
<p class="room-note">
<strong>Styling note</strong><br>
Keep upholstery matte and <em>low-profile</em> so the wall can take the spotlight.
</p>
<div class="room-meta">
<span>Entry salon</span>
<span>Slide 01 of 05</span>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Slide 2 -->
<article class="slide" aria-label="Slide 2">
<header class="slide-header">
<div>
<div class="slide-kicker">Slide 02 / Pattern + Living Room</div>
<h2 class="slide-title">Gilded Grid</h2>
</div>
<div class="slide-index">02 — Salon</div>
</header>
<p class="slide-lede">
A crisp, luminous grid sharpens classic millwork and makes deep velvet seating feel tailored rather than heavy.
</p>
<div class="slide-grid">
<div class="pattern-card">
<div class="pattern-label">Wall Pattern</div>
<div class="pattern-surface">
<!-- denser diagonals -->
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
</div>
<footer class="pattern-footer">
<div class="pattern-caption">Champagne Grid on Ink</div>
<div class="pattern-chip-row">
<div class="chip chip--bg"></div>
<div class="chip chip--ivory"></div>
<div class="chip chip--accent"></div>
</div>
</footer>
</div>
<div class="room-card">
<div class="room-label">Living Room Vignette</div>
<div class="room-viewport">
<div class="room-wall"></div>
<div class="room-floor">
<div class="sofa">
<div class="sofa-pillows">
<div class="pillow pillow--accent"></div>
<div class="pillow"></div>
</div>
<div class="side-table"></div>
<div class="lamp">
<div class="lamp-shade"></div>
<div class="lamp-stem"></div>
</div>
</div>
<p class="room-note">
<strong>Styling note</strong><br>
Float the sofa off the wall and echo the <em>grid</em> with slim brass legs and framed art in tight series.
</p>
<div class="room-meta">
<span>Living room</span>
<span>Evening light</span>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Slide 3 -->
<article class="slide" aria-label="Slide 3">
<header class="slide-header">
<div>
<div class="slide-kicker">Slide 03 / Pattern + Dining</div>
<h2 class="slide-title">Midnight Panels</h2>
</div>
<div class="slide-index">03 — Dining</div>
</header>
<p class="slide-lede">
Overscaled paneling in inky black wraps the room, while a narrow metallic stripe traces the architecture by candlelight.
</p>
<div class="slide-grid">
<div class="pattern-card">
<div class="pattern-label">Wall Pattern</div>
<div class="pattern-surface">
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
</div>
<footer class="pattern-footer">
<div class="pattern-caption">Noir Panel with Brass Fillet</div>
<div class="pattern-chip-row">
<div class="chip chip--bg"></div>
<div class="chip chip--ivory"></div>
<div class="chip chip--accent"></div>
</div>
</footer>
</div>
<div class="room-card">
<div class="room-label">Dining Room Vignette</div>
<div class="room-viewport">
<div class="room-wall"></div>
<div class="room-floor">
<div class="sofa">
<div class="sofa-pillows">
<div class="pillow"></div>
<div class="pillow pillow--accent"></div>
</div>
<div class="side-table"></div>
<div class="lamp">
<div class="lamp-shade"></div>
<div class="lamp-stem"></div>
</div>
</div>
<p class="room-note">
<strong>Styling note</strong><br>
Keep the table silhouette slender and use <em>smoked glass</em> or ebonized wood to avoid competing with the walls.
</p>
<div class="room-meta">
<span>Dining room</span>
<span>After dark</span>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Slide 4 -->
<article class="slide" aria-label="Slide 4">
<header class="slide-header">
<div>
<div class="slide-kicker">Slide 04 / Pattern + Bedroom</div>
<h2 class="slide-title">Velvet Curtain</h2>
</div>
<div class="slide-index">04 — Bedroom</div>
</header>
<p class="slide-lede">
A soft, vertical motif wraps the headboard wall, reading like tailored drapery and throwing delicate shadows at dawn.
</p>
<div class="slide-grid">
<div class="pattern-card">
<div class="pattern-label">Wall Pattern</div>
<div class="pattern-surface">
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
<div class="pattern-swatch"></div>
</div>
<footer class="pattern-footer">
<div class="pattern-caption">Ivory Strié on Charcoal</div>
<div class="pattern-chip-row">
<div class="chip chip--bg"></div>
<div class="chip chip--ivory"></div>
<div class="chip chip--accent"></div>
</div>
</footer>
</div>
<div class="room-card">
<div class="room-label">Bedroom Vignette</div>
<div class="room-viewport">
<div class="room-wall"></div>
<div class="room-floor">
<div class="sofa">
<div class="sofa-pillows">
<div class="pillow pillow--accent"></div>
<div class="pillow"></div>
</div>
<div class="side-table"></div>
<div class="lamp">
<div class="lamp-shade"></div>
<div class="lamp-stem"></div>
</div>
</div>
<p class="room-note">
<strong>Styling note</strong><br>
Layer <em>cream linens</em> and one metallic accent lamp; let the wall be the only dark plane in the room.
</p>
<div class="room-meta">
<span>Principal suite</span>
<span>Soft light</span>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Slide 5: CTA -->
<article class="slide" aria-label="Slide 5">
<header class="slide-header">
<div>
<div class="slide-kicker">Slide 05 / Call to Action</div>
<h2 class="slide-title">Commission Your Own <span style="white-space: nowrap;">Deco Noir</span></h2>
</div>
<div class="slide-index">05 — CTA</div>
</header>
<div class="cta-center">
<div>
<h3 class="cta-title">Walls that glow like jewellery after dark.</h3>
<p class="cta-subtitle">
Share this carousel with your designer, then request a bespoke colourway — from cool platinum grids to deep garnet lacquer.
</p>
</div>
<div class="cta-actions">
<button class="btn" type="button">
<span>Save Lookbook</span>
</button>
<button class="btn btn-outline" type="button">
<span>Book a Palette Call</span>
</button>
</div>
<div class="cta-note">
SERIES — <span>PARISIAN DECO NOIR</span> · EDITION 01
</div>
</div>
</article>
</div>
</div>
<footer class="carousel-footer">
<div class="dots" aria-label="Slide pagination" role="tablist">
<button class="dot is-active" data-index="0" aria-label="Go to slide 1" aria-current="true"></button>
<button class="dot" data-index="1" aria-label="Go to slide 2"></button>
<button class="dot" data-index="2" aria-label="Go to slide 3"></button>
<button class="dot" data-index="3" aria-label="Go to slide 4"></button>
<button class="dot" data-index="4" aria-label="Go to slide 5"></button>
</div>
<div class="pager-label">
<span id="pager-current">01</span> — 05
</div>
<div class="arrows" aria-label="Slide navigation">
<button class="arrow-btn" id="prev" type="button" aria-label="Previous slide">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.41 11l4.3 4.3a1 1 0 0 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.41 0Z" fill="currentColor"/>
</svg>
</button>
<button class="arrow-btn" id="next" type="button" aria-label="Next slide">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9.3 18.7a1 1 0 0 1 0-1.4L13.59 13l-4.3-4.3a1 1 0 0 1 1.42-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.41 0Z" fill="currentColor"/>
</svg>
</button>
</div>
</footer>
</section>
<aside class="side-panel" aria-label="Style details">
<div style="flex:1;min-width:0;">
<div class="side-label">
Style / Series
<span>01</span>
</div>
<div class="style-name-editable" contenteditable="true" spellcheck="false">
PARISIAN DECO NOIR
</div>
<p class="style-note">
A restrained luxury story built on <strong>near-black grounds</strong>, ivory highlights, and a single champagne-metallic accent for tailored, hotel-bar quiet.
</p>
</div>
<div style="flex:1;min-width:0;">
<div class="palette-row">
<div class="side-label">
Palette
<span>#LUXE-NOIR</span>
</div>
<div class="palette-chips">
<div class="palette-chip bg"></div>
<div class="palette-chip surface"></div>
<div class="palette-chip ivory"></div>
<div class="palette-chip accent"></div>
</div>
<div class="palette-legend">
<span>Ground</span>
<span>Shadow</span>
<span>Highlight</span>
<span>Metallic</span>
</div>
</div>
<div class="style-tags">
<div class="style-tag accent">Deco noir</div>
<div class="style-tag">Gallery-ready</div>
<div class="style-tag">Low light</div>
</div>
</div>
<div class="side-footer">
<div>Swipe · <span>5 frames</span></div>
<div>For interiors — <span>Evening first</span></div>
</div>
</aside>
</main>
</div>
<script>
(function () {
const slides = document.getElementById('slides');
const dots = Array.from(document.querySelectorAll('.dot'));
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const pagerCurrent = document.getElementById('pager-current');
const TOTAL = dots.length;
let index = 0;
function goTo(newIndex) {
index = (newIndex + TOTAL) % TOTAL;
const offset = -(index * 100 / TOTAL) * TOTAL / 100; // -index * 100%
slides.style.transform = 'translateX(' + (-index * 100) + '%)';
dots.forEach((dot, i) => {
const active = i === index;
dot.classList.toggle('is-active', active);
dot.setAttribute('aria-current', active ? 'true' : 'false');
});
pagerCurrent.textContent = String(index + 1).padStart(2, '0');
}
prev.addEventListener('click', () => goTo(index - 1));
next.addEventListener('click', () => goTo(index + 1));
dots.forEach(dot => {
dot.addEventListener('click', () => {
const i = parseInt(dot.getAttribute('data-index'), 10);
if (!Number.isNaN(i)) goTo(i);
});
});
// Basic keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
goTo(index + 1);
} else if (e.key === 'ArrowLeft') {
goTo(index - 1);
}
});
})();
</script>
</body>
</html>