← back to Model Arena
data/artifacts/0b9bb5066c06/gpt.html
1472 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Which Design Era? – Designer Wallcoverings</title>
<style>
:root {
/* Palette from luxe-noir */
--bg: #0d0d0f;
--surface: #17171c;
--surface-soft: #14141a;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* single metallic gold */
--accent-deep: #7d6a45;
--border-subtle: rgba(201,169,97,0.24);
--border-strong: rgba(245,242,234,0.08);
/* Typography */
--font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
--font-body: "Avenir Next", "Century Gothic", Futura, "Segoe UI", sans-serif;
--fs-caption: 12px;
--fs-label: 11px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--radius-card: 18px;
--radius-pill: 999px;
--shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.55);
--shadow-subtle: 0 10px 30px rgba(0,0,0,0.45);
--easing-swift-out: cubic-bezier(.22,.9,.24,1);
--vignette-size: 320px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background: radial-gradient(circle at top, #181820 0, #050507 55%, #000000 100%);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Top bar */
.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
backdrop-filter: blur(18px);
background: linear-gradient(to right, rgba(13,13,15,0.95), rgba(23,23,28,0.94));
border-bottom: 1px solid rgba(201,169,97,0.3);
z-index: 20;
}
.app-header-left {
display: flex;
align-items: center;
gap: 18px;
}
.wordmark {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
.wordmark::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 999px;
margin-right: 12px;
background: radial-gradient(circle at 30% 15%, #fff7d9 0, var(--accent) 35%, #7d5c37 72%, #2b1b0c 100%);
box-shadow: 0 0 18px rgba(201,169,97,0.75);
vertical-align: middle;
}
.app-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.14);
background: linear-gradient(135deg, rgba(23,23,28,0.9), rgba(13,13,15,0.95));
color: var(--muted);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.app-pill span {
font-size: 10px;
}
.app-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle at 30% 15%, #fff 0, var(--accent) 45%, var(--accent-deep) 100%);
}
/* Main layout */
.app-shell {
flex: 1;
display: flex;
justify-content: center;
padding: 96px 24px 32px; /* leave space for header */
}
.main-card {
width: 100%;
max-width: 1120px;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 32px;
padding: 28px 28px 26px;
background: radial-gradient(circle at top left, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.02) 42%, transparent 70%), rgba(13,13,15,0.94);
border-radius: 26px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
@media (max-width: 900px) {
.main-card {
grid-template-columns: minmax(0, 1fr);
padding: 22px 18px 20px;
}
:root {
--vignette-size: 260px;
}
}
.main-card::before {
content: "";
position: absolute;
inset: -80%;
background:
radial-gradient(circle at 10% 0, rgba(201,169,97,0.16) 0, transparent 52%),
radial-gradient(circle at 95% 20%, rgba(255,255,255,0.06) 0, transparent 50%);
opacity: 0.85;
pointer-events: none;
}
/* Left column: vignette */
.vignette-panel {
position: relative;
z-index: 1;
padding: 24px 22px;
border-radius: 20px;
background: radial-gradient(circle at top, #22222b 0, #121219 45%, #09090d 100%);
border: 1px solid rgba(245,242,234,0.06);
box-shadow: var(--shadow-subtle);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.vignette-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.vignette-label {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.round-pill {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.12);
padding: 5px 12px;
}
/* Scene container */
.vignette-scene-shell {
display: flex;
justify-content: center;
padding: 6px 0 4px;
}
.vignette-scene {
width: var(--vignette-size);
height: calc(var(--vignette-size) * 0.78);
border-radius: 18px;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #201f26 0, #14131b 40%, #08070a 100%);
border: 1px solid rgba(245,242,234,0.1);
box-shadow: 0 26px 60px rgba(0,0,0,0.75);
transform-origin: center;
transition: transform 260ms var(--easing-swift-out), box-shadow 260ms var(--easing-swift-out), border-color 260ms var(--easing-swift-out);
}
.vignette-scene.is-revealed {
transform: translateY(-2px) scale(1.012);
border-color: rgba(201,169,97,0.5);
box-shadow: 0 32px 70px rgba(0,0,0,0.9);
}
/* Shared scene primitives */
.scene-wall {
position: absolute;
inset: 0 0 28%;
background: linear-gradient(to bottom, #27242e 0, #18171f 46%, #121019 100%);
}
.scene-floor {
position: absolute;
left: -8%;
right: -8%;
bottom: -20%;
height: 55%;
background:
linear-gradient(135deg, rgba(245,242,234,0.04) 0, transparent 35%),
linear-gradient(to right, #473629, #2d2018 30%, #1b1511 80%);
transform: skewY(-6deg);
transform-origin: top left;
box-shadow: 0 -8px 22px rgba(0,0,0,0.8);
}
/* era-specific structural overrides and details, toggled via body data attribute */
.vignette-scene .piece {
position: absolute;
box-sizing: border-box;
}
/* Lighting aura */
.scene-glow {
position: absolute;
inset: 12% 8% 28%;
background: radial-gradient(circle at 50% 0, rgba(250,247,235,0.34) 0, rgba(201,169,97,0.06) 35%, transparent 68%);
mix-blend-mode: screen;
opacity: 0.9;
}
/* Victorian */
body[data-era="Victorian"] .scene-wall {
background:
repeating-linear-gradient(-45deg, #1b171b 0, #1b171b 6px, #151017 6px, #151017 12px),
radial-gradient(circle at top, #2e2832 0, #141019 60%);
}
body[data-era="Victorian"] .scene-wall::before {
content: "";
position: absolute;
inset: 18px 22px 38%;
border-radius: 18px;
border: 1px solid rgba(201,169,97,0.6);
box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
}
body[data-era="Victorian"] .scene-wall::after {
content: "";
position: absolute;
inset: 26px 30px 41%;
border-radius: 14px;
border: 1px solid rgba(201,169,97,0.25);
}
body[data-era="Victorian"] .scene-floor {
background:
linear-gradient(120deg, rgba(201,169,97,0.18) 0, transparent 30%),
repeating-linear-gradient(90deg, #3c2920 0, #3c2920 9px, #2a1b14 9px, #2a1b14 18px);
}
/* Victorian Settee */
body[data-era="Victorian"] .sofa {
left: 14%;
right: 14%;
bottom: 6%;
height: 32%;
border-radius: 60px 60px 26px 26px;
background:
radial-gradient(circle at 20% 0, #f3e1b1 0, #cfa665 32%, #8e5832 75%, #3b1e14 100%);
box-shadow: 0 12px 24px rgba(0,0,0,0.75);
}
body[data-era="Victorian"] .sofa::before {
content: "";
position: absolute;
inset: 18% 16% 40%;
border-radius: 44px;
background:
repeating-linear-gradient(45deg, rgba(53,21,18,0.92) 0, rgba(53,21,18,0.92) 8px, rgba(28,10,9,0.96) 8px, rgba(28,10,9,0.96) 16px);
box-shadow: inset 0 0 0 2px rgba(243,222,178,0.25);
}
body[data-era="Victorian"] .sofa::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: -14%;
height: 28%;
border-radius: 26px;
background: linear-gradient(to bottom, #2c1b11, #0b0604);
box-shadow: 0 18px 26px rgba(0,0,0,0.9);
}
/* Victorian tufting hints */
body[data-era="Victorian"] .tuft {
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #fbe4ba 0, #c18b49 50%, #5a3116 100%);
box-shadow: 0 0 3px rgba(0,0,0,0.7);
}
body[data-era="Victorian"] .tuft:nth-child(1) { top: 34%; left: 32%; }
body[data-era="Victorian"] .tuft:nth-child(2) { top: 34%; left: 50%; }
body[data-era="Victorian"] .tuft:nth-child(3) { top: 34%; left: 68%; }
/* Victorian Lamp */
body[data-era="Victorian"] .lamp {
left: 72%;
bottom: 28%;
width: 9%;
height: 48%;
}
body[data-era="Victorian"] .lamp::before {
content: "";
position: absolute;
top: 0;
left: -40%;
right: -15%;
height: 40%;
border-radius: 50% 50% 35% 35%;
background:
radial-gradient(circle at 50% 0, #fffbea 0, #e6c46d 35%, #b5843e 80%);
box-shadow: 0 12px 24px rgba(0,0,0,0.8);
}
body[data-era="Victorian"] .lamp::after {
content: "";
position: absolute;
top: 42%;
left: 26%;
width: 19%;
height: 34%;
background: linear-gradient(to bottom, #f9f1d5, #b58b48);
box-shadow: 0 6px 6px rgba(0,0,0,0.7);
}
/* Victorian frame art */
body[data-era="Victorian"] .art-frame {
top: 18%;
left: 16%;
width: 22%;
height: 28%;
border-radius: 14px;
border: 3px solid rgba(201,169,97,0.85);
box-shadow: 0 4px 10px rgba(0,0,0,0.9);
background:
linear-gradient(135deg, #39211a, #1b0b08);
}
body[data-era="Victorian"] .art-frame::before {
content: "";
position: absolute;
inset: 11%;
border-radius: 10px;
background: radial-gradient(circle at 10% 10%, #f9e3c5 0, #84502d 40%, #2b1210 100%);
}
/* Art Deco */
body[data-era="Art Deco"] .scene-wall {
background:
radial-gradient(circle at top, #302832 0, #141019 60%);
}
body[data-era="Art Deco"] .scene-wall::before {
content: "";
position: absolute;
inset: 12% 16% 42%;
background-image:
conic-gradient(from 0deg, rgba(201,169,97,0.6) 0 3deg, transparent 3deg 15deg),
conic-gradient(from 18deg, rgba(201,169,97,0.35) 0 2deg, transparent 2deg 16deg);
mask-image: radial-gradient(circle at bottom, #000 0, #000 68%, transparent 69%);
opacity: 0.9;
}
/* Deco Chair */
body[data-era="Art Deco"] .chair {
left: 18%;
bottom: 8%;
width: 32%;
height: 38%;
}
body[data-era="Art Deco"] .chair::before {
content: "";
position: absolute;
inset: 10% 4% 42%;
border-radius: 40px 40px 18px 18px;
background:
linear-gradient(135deg, #f4f0df, #d3c19b 40%, #b19162 100%);
box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}
body[data-era="Art Deco"] .chair::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: 0;
height: 36%;
border-radius: 26px 26px 18px 18px;
background:
linear-gradient(to right, #f5f0de, #c9a865 50%, #f5f0de 100%);
}
/* Deco legs */
body[data-era="Art Deco"] .chair-leg {
bottom: -12%;
width: 10%;
height: 40%;
background: linear-gradient(to bottom, #caa962, #7a5a3b);
border-radius: 0 0 40px 40px;
box-shadow: 0 6px 8px rgba(0,0,0,0.75);
}
body[data-era="Art Deco"] .chair-leg.left { left: 22%; }
body[data-era="Art Deco"] .chair-leg.right { right: 22%; }
/* Deco Console */
body[data-era="Art Deco"] .console {
right: 14%;
bottom: 10%;
width: 30%;
height: 32%;
border-radius: 14px;
background:
linear-gradient(120deg, #252029, #151018);
border: 1px solid rgba(245,242,234,0.08);
box-shadow: 0 10px 20px rgba(0,0,0,0.85);
}
body[data-era="Art Deco"] .console::before {
content: "";
position: absolute;
inset: 10% 10% 46%;
border-radius: 10px;
background:
linear-gradient(to right, rgba(201,169,97,0.7), rgba(201,169,97,0.3));
}
body[data-era="Art Deco"] .console::after {
content: "";
position: absolute;
left: 50%;
bottom: -22%;
transform: translateX(-50%);
width: 36%;
height: 32%;
border-radius: 0 0 40px 40px;
background: linear-gradient(to bottom, #c7a763, #7e5c36);
box-shadow: 0 8px 14px rgba(0,0,0,0.9);
}
/* Deco Sunburst Mirror */
body[data-era="Art Deco"] .sunburst {
top: 18%;
left: 50%;
transform: translateX(-50%);
width: 28%;
height: 36%;
}
body[data-era="Art Deco"] .sunburst::before {
content: "";
position: absolute;
inset: 18%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, #fff 0, #f9f5e5 22%, #c7a763 60%, #4f351d 100%);
box-shadow: 0 0 24px rgba(201,169,97,0.6);
}
body[data-era="Art Deco"] .sunburst::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(201,169,97,0.4);
background-image:
conic-gradient(from 0deg, rgba(201,169,97,0.8) 0 6deg, transparent 6deg 12deg);
mask-image: radial-gradient(circle, transparent 0 52%, #000 54%);
}
/* Mid-Century Modern */
body[data-era="Mid-Century Modern"] .scene-wall {
background:
radial-gradient(circle at top left, #323842 0, #1b2026 45%, #14151c 60%, #0c0d13 100%);
}
body[data-era="Mid-Century Modern"] .scene-floor {
background:
linear-gradient(120deg, rgba(201,169,97,0.2) 0, transparent 40%),
repeating-linear-gradient(90deg, #3e2f25 0, #3e2f25 12px, #241b14 12px, #241b14 24px);
}
/* MCM Sofa */
body[data-era="Mid-Century Modern"] .sofa {
left: 12%;
right: 12%;
bottom: 12%;
height: 30%;
border-radius: 18px;
background:
linear-gradient(135deg, #f3f2e6, #d0c9b0 55%, #9c8360 100%);
box-shadow: 0 10px 20px rgba(0,0,0,0.85);
}
body[data-era="Mid-Century Modern"] .sofa::before {
content: "";
position: absolute;
inset: 12% 8% 40%;
background:
repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 4px, transparent 4px, transparent 14px);
opacity: 0.75;
}
body[data-era="Mid-Century Modern"] .sofa::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -22%;
height: 34%;
border-radius: 18px;
background: linear-gradient(to bottom, #e4ddca, #90734f);
}
/* tapered legs */
body[data-era="Mid-Century Modern"] .mcm-leg {
bottom: -28%;
width: 8%;
height: 46%;
background: linear-gradient(to bottom, #d5c9ae, #815f3a);
border-radius: 0 0 999px 999px;
box-shadow: 0 6px 10px rgba(0,0,0,0.85);
}
body[data-era="Mid-Century Modern"] .mcm-leg.left { left: 20%; }
body[data-era="Mid-Century Modern"] .mcm-leg.right { right: 20%; }
/* MCM sideboard & art */
body[data-era="Mid-Century Modern"] .sideboard {
right: 12%;
bottom: 18%;
width: 26%;
height: 22%;
border-radius: 4px;
background:
linear-gradient(135deg, #3d2b1f, #1c130f);
box-shadow: 0 10px 16px rgba(0,0,0,0.85);
}
body[data-era="Mid-Century Modern"] .sideboard::before {
content: "";
position: absolute;
inset: 18% 14% 40%;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 6px, transparent 6px, transparent 12px);
}
body[data-era="Mid-Century Modern"] .sideboard::after {
content: "";
position: absolute;
left: 20%;
bottom: -40%;
width: 60%;
height: 50%;
background: linear-gradient(to bottom, #d4c8b1, #7a5733);
border-radius: 0 0 999px 999px;
}
/* MCM art */
body[data-era="Mid-Century Modern"] .mcm-art {
top: 18%;
left: 16%;
width: 24%;
height: 34%;
border-radius: 10px;
background: #121219;
box-shadow: 0 6px 14px rgba(0,0,0,0.85);
}
body[data-era="Mid-Century Modern"] .mcm-art::before {
content: "";
position: absolute;
inset: 12%;
border-radius: 8px;
background:
radial-gradient(circle at 25% 25%, #f0e6cf 0, #d29a54 34%, transparent 38%),
radial-gradient(circle at 75% 65%, #f6f1dd 0, #acc9ba 30%, transparent 40%),
linear-gradient(135deg, rgba(201,169,97,0.35), transparent 50%),
linear-gradient(200deg, rgba(236,116,73,0.7) 0, transparent 50%);
}
/* MCM pendant */
body[data-era="Mid-Century Modern"] .pendant {
top: 14%;
left: 60%;
width: 12%;
height: 38%;
}
body[data-era="Mid-Century Modern"] .pendant::before {
content: "";
position: absolute;
top: 0;
left: 48%;
width: 2px;
height: 22%;
background: linear-gradient(to bottom, #555, #222);
}
body[data-era="Mid-Century Modern"] .pendant::after {
content: "";
position: absolute;
top: 24%;
left: 0;
right: 0;
height: 44%;
border-radius: 50% 50% 40% 40%;
background:
radial-gradient(circle at 30% 15%, #fff 0, #f7f1df 30%, #d3a95d 70%, #71532e 100%);
box-shadow: 0 10px 18px rgba(0,0,0,0.8);
}
/* Grandmillennial */
body[data-era="Grandmillennial"] .scene-wall {
background:
radial-gradient(circle at top left, #424052 0, #252638 50%, #151521 80%),
repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 3px, transparent 3px, transparent 8px);
}
body[data-era="Grandmillennial"] .scene-wall::before {
content: "";
position: absolute;
inset: 16% 18% 38%;
border-radius: 20px;
border: 1px solid rgba(245,242,234,0.32);
box-shadow: 0 0 0 1px rgba(0,0,0,0.75);
background:
radial-gradient(circle at 20% 20%, rgba(245,242,234,0.18) 0, transparent 30%),
radial-gradient(circle at 80% 50%, rgba(245,242,234,0.14) 0, transparent 34%);
}
/* floral hint */
body[data-era="Grandmillennial"] .scene-wall::after {
content: "";
position: absolute;
inset: 22% 22% 42%;
background-image:
radial-gradient(circle, rgba(245,242,234,0.24) 0, transparent 42%),
radial-gradient(circle at 70% 30%, rgba(245,242,234,0.18) 0, transparent 40%);
mix-blend-mode: screen;
opacity: 0.45;
}
/* skirted sofa */
body[data-era="Grandmillennial"] .sofa {
left: 12%;
right: 12%;
bottom: 12%;
height: 34%;
border-radius: 28px 28px 10px 10px;
background:
linear-gradient(135deg, #f6f3ea, #dad0c4 45%, #b99a7b 100%);
box-shadow: 0 12px 22px rgba(0,0,0,0.85);
}
body[data-era="Grandmillennial"] .sofa::before {
content: "";
position: absolute;
inset: 12% 8% 40%;
border-radius: 20px 20px 0 0;
background:
repeating-linear-gradient(45deg, rgba(141,113,154,0.85) 0, rgba(141,113,154,0.85) 6px, rgba(210,185,196,0.95) 6px, rgba(210,185,196,0.95) 12px);
opacity: 0.8;
}
body[data-era="Grandmillennial"] .sofa::after {
content: "";
position: absolute;
left: -2%;
right: -2%;
bottom: -26%;
height: 46%;
border-radius: 0 0 20px 20px;
background:
repeating-linear-gradient(90deg, #f5f0e8 0, #f5f0e8 9px, #dfd3c4 9px, #dfd3c4 18px);
}
/* side table + lamp */
body[data-era="Grandmillennial"] .side-table {
right: 16%;
bottom: 20%;
width: 18%;
height: 24%;
border-radius: 40px;
background:
linear-gradient(to bottom, #f5f0e8, #d6c6b7);
box-shadow: 0 10px 20px rgba(0,0,0,0.85);
}
body[data-era="Grandmillennial"] .side-table::before {
content: "";
position: absolute;
top: -42%;
left: 18%;
right: 18%;
height: 58%;
border-radius: 999px 999px 70px 70px;
background:
radial-gradient(circle at 30% 18%, #fff 0, #f6f2e8 32%, #d6c2af 70%, #9a7351 100%);
box-shadow: 0 12px 22px rgba(0,0,0,0.85);
}
/* framed art pair */
body[data-era="Grandmillennial"] .gm-art-left,
body[data-era="Grandmillennial"] .gm-art-right {
top: 18%;
width: 18%;
height: 30%;
border-radius: 14px;
background: #121219;
box-shadow: 0 6px 14px rgba(0,0,0,0.85);
}
body[data-era="Grandmillennial"] .gm-art-left { left: 18%; }
body[data-era="Grandmillennial"] .gm-art-right { left: 40%; }
body[data-era="Grandmillennial"] .gm-art-left::before,
body[data-era="Grandmillennial"] .gm-art-right::before {
content: "";
position: absolute;
inset: 10%;
border-radius: 10px;
background:
radial-gradient(circle at 30% 20%, #fefaf4 0, #f1c6c1 26%, transparent 40%),
radial-gradient(circle at 70% 80%, #fefaf4 0, #b2c7e8 30%, transparent 44%),
linear-gradient(145deg, rgba(166,133,189,0.7), transparent 55%);
}
/* vignette caption */
.vignette-caption {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
color: var(--muted);
font-size: 12px;
}
.vignette-caption span.emphasis {
color: var(--accent);
}
/* Right column: controls */
.control-panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 20px;
padding: 6px 2px 2px;
}
/* Game meta */
.meta-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.meta-label {
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
.meta-stats {
display: inline-flex;
gap: 8px;
}
.stat-pill {
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.12);
padding: 4px 10px 5px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.stat-pill strong {
color: var(--accent);
font-weight: 600;
}
/* Headline */
h1 {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: var(--fs-h2);
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.05;
}
.lead {
margin: 0 0 10px;
font-size: var(--fs-lead);
color: rgba(245,242,234,0.92);
}
/* Score line */
.score-line {
font-size: 13px;
color: var(--muted);
margin-bottom: 12px;
}
.score-line strong {
color: var(--accent);
}
/* Buttons */
.button-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 8px 0 8px;
}
button {
font-family: var(--font-body);
background: none;
border: none;
cursor: pointer;
}
.guess-btn {
position: relative;
padding: 12px 12px 11px;
border-radius: 14px;
border: 1px solid rgba(245,242,234,0.12);
background: linear-gradient(135deg, rgba(24,24,30,0.96), rgba(15,15,19,0.96));
color: var(--text);
text-align: left;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
overflow: hidden;
transition:
border-color 200ms var(--easing-swift-out),
background 200ms var(--easing-swift-out),
transform 200ms var(--easing-swift-out),
box-shadow 200ms var(--easing-swift-out),
color 200ms var(--easing-swift-out),
opacity 130ms var(--easing-swift-out);
}
.guess-btn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(201,169,97,0.24) 0, transparent 40%);
opacity: 0;
transition: opacity 220ms var(--easing-swift-out);
}
.guess-btn span {
position: relative;
z-index: 1;
}
.guess-btn:hover {
border-color: rgba(201,169,97,0.55);
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(31,29,35,0.98), rgba(10,10,12,0.98));
box-shadow: 0 12px 26px rgba(0,0,0,0.75);
}
.guess-btn:hover::before {
opacity: 1;
}
.guess-btn.correct {
border-color: rgba(201,169,97,0.9);
background: linear-gradient(135deg, rgba(201,169,97,0.18), rgba(18,17,19,0.98));
box-shadow: 0 14px 28px rgba(0,0,0,0.85);
}
.guess-btn.wrong {
border-color: rgba(189,88,73,0.8);
background: linear-gradient(135deg, rgba(80,22,22,0.86), rgba(12,7,9,0.98));
color: #fbeae2;
}
/* disabled state */
button:disabled {
cursor: default;
opacity: 0.78;
}
/* Feedback + fact */
.feedback {
min-height: 48px;
font-size: 13px;
color: var(--muted);
margin: 4px 0 0;
}
.feedback span.label {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
display: inline-block;
margin-bottom: 3px;
}
.feedback span.correct-label {
color: var(--accent);
}
.feedback span.wrong-label {
color: #f5a08b;
}
.fun-fact {
margin-top: 4px;
color: rgba(245,242,234,0.92);
}
/* Progress bar */
.progress-shell {
margin-top: 10px;
}
.progress-track {
position: relative;
width: 100%;
height: 3px;
border-radius: 999px;
background: rgba(245,242,234,0.13);
overflow: hidden;
}
.progress-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: linear-gradient(90deg, #f8e9c5, var(--accent));
border-radius: 999px;
transition: width 260ms var(--easing-swift-out);
}
/* Footer controls */
.footer-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--border-strong);
font-size: 12px;
color: var(--muted);
}
.footer-row strong {
color: var(--accent);
}
.subtle-label {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
}
.restart-btn {
padding: 7px 16px 8px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.16);
background: radial-gradient(circle at top left, rgba(201,169,97,0.26) 0, rgba(24,22,26,0.98) 48%);
color: var(--text);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
background 220ms var(--easing-swift-out),
border-color 220ms var(--easing-swift-out),
transform 220ms var(--easing-swift-out),
box-shadow 220ms var(--easing-swift-out);
}
.restart-btn:hover {
border-color: rgba(201,169,97,0.9);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,0.8);
}
.restart-btn .circle {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(245,242,234,0.36);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
}
/* End overlay */
.end-overlay {
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at top, rgba(0,0,0,0.55), rgba(0,0,0,0.95));
backdrop-filter: blur(14px);
display: none;
align-items: center;
justify-content: center;
z-index: 5;
}
.end-overlay.visible {
display: flex;
}
.end-card {
padding: 18px 22px 18px;
border-radius: 18px;
border: 1px solid rgba(245,242,234,0.18);
background: radial-gradient(circle at top left, rgba(201,169,97,0.26) 0, rgba(18,17,20,0.98) 48%);
box-shadow: var(--shadow-subtle);
max-width: 320px;
text-align: left;
}
.end-card h2 {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: 24px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.end-card p {
margin: 0 0 6px;
font-size: 13px;
}
.end-card p span {
color: var(--accent);
}
/* Accessibility focus */
button:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
/* Small devices tweak */
@media (max-width: 640px) {
.app-header {
padding: 0 18px;
}
.wordmark {
font-size: 11px;
letter-spacing: 0.2em;
}
h1 {
font-size: 26px;
}
.lead {
font-size: 17px;
}
.button-group {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body data-era="Victorian">
<header class="app-header">
<div class="app-header-left">
<div class="wordmark">Designer Wallcoverings</div>
</div>
<div class="app-pill">
<span class="app-pill-dot"></span>
<span>Which Design Era?</span>
</div>
</header>
<main class="app-shell">
<section class="main-card" aria-label="Which Design Era guessing game">
<!-- Left: vignette -->
<div class="vignette-panel">
<div class="vignette-header">
<div class="vignette-label">Interior Vignette</div>
<div class="round-pill" id="roundLabel">Round 1 of 8</div>
</div>
<div class="vignette-scene-shell">
<div class="vignette-scene" aria-hidden="true">
<div class="scene-wall"></div>
<div class="scene-glow"></div>
<div class="scene-floor"></div>
<!-- shared sofa placeholder, decorated per-era -->
<div class="piece sofa"></div>
<!-- Victorian tuft markers -->
<div class="piece tuft"></div>
<div class="piece tuft"></div>
<div class="piece tuft"></div>
<!-- Victorian lamp & art -->
<div class="piece lamp"></div>
<div class="piece art-frame"></div>
<!-- Art Deco pieces -->
<div class="piece chair"></div>
<div class="piece chair-leg left"></div>
<div class="piece chair-leg right"></div>
<div class="piece console"></div>
<div class="piece sunburst"></div>
<!-- Mid-century pieces -->
<div class="piece mcm-leg left"></div>
<div class="piece mcm-leg right"></div>
<div class="piece sideboard"></div>
<div class="piece mcm-art"></div>
<div class="piece pendant"></div>
<!-- Grandmillennial pieces -->
<div class="piece side-table"></div>
<div class="piece gm-art-left"></div>
<div class="piece gm-art-right"></div>
</div>
</div>
<div class="vignette-caption">
<span>Can you read the room?</span>
<span class="emphasis" id="vignetteEraHint">Era concealed</span>
</div>
</div>
<!-- Right: controls -->
<div class="control-panel">
<div class="meta-row">
<div class="meta-label">Design Era Guessing Game</div>
<div class="meta-stats">
<div class="stat-pill" id="bestScorePill">Best <strong>0</strong>/8</div>
</div>
</div>
<h1>Which Design Era?</h1>
<p class="lead">Study the vignette, then choose the era that feels right.</p>
<p class="score-line">
Score: <strong><span id="scoreDisplay">0</span></strong> / <span id="totalRoundsDisplay">8</span>
· Attempt <span id="roundDisplay">1</span>
</p>
<div class="button-group" aria-label="Era choices">
<button class="guess-btn" data-era-choice="Victorian">
<span>Victorian</span>
</button>
<button class="guess-btn" data-era-choice="Art Deco">
<span>Art Deco</span>
</button>
<button class="guess-btn" data-era-choice="Mid-Century Modern">
<span>Mid-Century Modern</span>
</button>
<button class="guess-btn" data-era-choice="Grandmillennial">
<span>Grandmillennial</span>
</button>
</div>
<div class="feedback" id="feedback">
<span class="label">Awaiting your eye.</span>
</div>
<div class="progress-shell">
<div class="progress-track" aria-hidden="true">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>
<div class="footer-row">
<div>
<div class="subtle-label">Rounds</div>
<div>Eight curated vignettes, one per era, reshuffled each game.</div>
</div>
<button class="restart-btn" id="restartBtn" type="button">
<span class="circle">↻</span>
<span>Restart</span>
</button>
</div>
<!-- End overlay on top of right panel -->
<div class="end-overlay" id="endOverlay" aria-hidden="true">
<div class="end-card">
<h2>Set Complete</h2>
<p>You scored <span id="finalScoreText">0</span> out of <span id="finalTotalText">8</span>.</p>
<p id="finalBestText">Your best so far: <span>0</span>.</p>
<p style="margin-top:8px;">Ready for another pass through the eras?</p>
<button class="restart-btn" id="playAgainBtn" type="button" style="margin-top:10px;">
<span class="circle">↻</span>
<span>Play Again</span>
</button>
</div>
</div>
</div>
</section>
</main>
<script>
(function() {
const ERAS = [
{
name: "Victorian",
difficultyTagline: "Look for opulence and ornament.",
fact: "Victorian interiors layered rich jewel tones, carved wood, and ornate upholstery—from fainting couches to fringed lampshades."
},
{
name: "Art Deco",
difficultyTagline: "Look for symmetry and glamour.",
fact: "Art Deco celebrates geometry, sunburst motifs, and luxe materials like lacquer, chrome, and gilded details inspired by 1920s cinema."
},
{
name: "Mid-Century Modern",
difficultyTagline: "Look for clean lines and warm wood.",
fact: "Mid-Century Modern design prized simple silhouettes, tapered legs, and optimistic colors that suited compact post‑war homes."
},
{
name: "Grandmillennial",
difficultyTagline: "Look for florals and nostalgia.",
fact: "Grandmillennial style mixes chintz, pleated lamps, skirted sofas, and heirloom antiques with contemporary art and color."
}
];
const TOTAL_ROUNDS = 8;
const bodyEl = document.body;
const vignetteScene = document.querySelector('.vignette-scene');
const vignetteEraHint = document.getElementById('vignetteEraHint');
const roundLabel = document.getElementById('roundLabel');
const scoreDisplay = document.getElementById('scoreDisplay');
const totalRoundsDisplay = document.getElementById('totalRoundsDisplay');
const roundDisplay = document.getElementById('roundDisplay');
const feedbackEl = document.getElementById('feedback');
const progressFill = document.getElementById('progressFill');
const bestScorePill = document.getElementById('bestScorePill');
const restartBtn = document.getElementById('restartBtn');
const guessButtons = Array.from(document.querySelectorAll('.guess-btn'));
const endOverlay = document.getElementById('endOverlay');
const finalScoreText = document.getElementById('finalScoreText');
const finalTotalText = document.getElementById('finalTotalText');
const finalBestText = document.getElementById('finalBestText');
const playAgainBtn = document.getElementById('playAgainBtn');
let currentEraIndex = 0;
let currentRound = 1;
let score = 0;
let bestScore = 0;
let locked = false;
let sequence = [];
function shuffle(array) {
const a = array.slice();
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function buildSequence() {
const base = shuffle(ERAS);
const seq = [];
while (seq.length < TOTAL_ROUNDS) {
for (let i = 0; i < base.length && seq.length < TOTAL_ROUNDS; i++) {
seq.push(base[i]);
}
}
return shuffle(seq); // reshuffle to avoid predictable blocks
}
function loadBestScore() {
try {
const v = localStorage.getItem('dw_design_era_best');
const parsed = v ? parseInt(v, 10) : 0;
bestScore = isNaN(parsed) ? 0 : parsed;
} catch (e) {
bestScore = 0;
}
updateBestPill();
}
function saveBestScore() {
try {
localStorage.setItem('dw_design_era_best', String(bestScore));
} catch (e) {}
}
function updateBestPill() {
bestScorePill.innerHTML = 'Best <strong>' + bestScore + '</strong>/' + TOTAL_ROUNDS;
}
function updateLayoutForEra(eraName) {
bodyEl.setAttribute('data-era', eraName);
vignetteScene.classList.remove('is-revealed');
vignetteEraHint.textContent = "Era concealed";
}
function updateProgress() {
const pct = ((currentRound - 1) / TOTAL_ROUNDS) * 100;
progressFill.style.width = pct + '%';
}
function updateMeta() {
scoreDisplay.textContent = score;
totalRoundsDisplay.textContent = TOTAL_ROUNDS;
roundDisplay.textContent = currentRound;
roundLabel.textContent = 'Round ' + currentRound + ' of ' + TOTAL_ROUNDS;
}
function setFeedbackIdle() {
feedbackEl.innerHTML = '<span class="label">Awaiting your eye.</span>';
}
function setFeedbackResult(correct, eraObj) {
const labelClass = correct ? 'correct-label' : 'wrong-label';
const verdict = correct ? 'Correct' : 'Not quite';
const lead = '<span class="label ' + labelClass + '">' + verdict + ' · ' + eraObj.name + '</span>';
const copy = '<div class="fun-fact">' + eraObj.fact + '</div>';
feedbackEl.innerHTML = lead + copy;
}
function setButtonsEnabled(enabled) {
guessButtons.forEach(btn => {
btn.disabled = !enabled;
if (!enabled) {
btn.classList.remove('correct', 'wrong');
}
});
}
function revealScene() {
vignetteScene.classList.add('is-revealed');
}
function nextRound() {
currentRound++;
if (currentRound > TOTAL_ROUNDS) {
endGame();
return;
}
const eraObj = sequence[currentRound - 1];
currentEraIndex = ERAS.findIndex(e => e.name === eraObj.name);
updateLayoutForEra(eraObj.name);
updateMeta();
updateProgress();
setFeedbackIdle();
setButtonsEnabled(true);
locked = false;
}
function endGame() {
locked = true;
setButtonsEnabled(false);
const total = TOTAL_ROUNDS;
finalScoreText.textContent = score;
finalTotalText.textContent = total;
if (score > bestScore) {
bestScore = score;
saveBestScore();
}
updateBestPill();
finalBestText.innerHTML = 'Your best so far: <span>' + bestScore + '</span>.';
endOverlay.classList.add('visible');
endOverlay.setAttribute('aria-hidden', 'false');
}
function startGame() {
sequence = buildSequence();
currentRound = 1;
score = 0;
locked = false;
const firstEra = sequence[0];
currentEraIndex = ERAS.findIndex(e => e.name === firstEra.name);
updateLayoutForEra(firstEra.name);
updateMeta();
updateProgress();
setFeedbackIdle();
setButtonsEnabled(true);
endOverlay.classList.remove('visible');
endOverlay.setAttribute('aria-hidden', 'true');
}
function handleGuess(targetEraName, btn) {
if (locked) return;
locked = true;
const correctEra = sequence[currentRound - 1];
const isCorrect = targetEraName === correctEra.name;
if (isCorrect) {
score++;
}
guessButtons.forEach(b => {
const eraChoice = b.getAttribute('data-era-choice');
b.classList.remove('correct', 'wrong');
if (eraChoice === correctEra.name) {
b.classList.add('correct');
} else if (eraChoice === targetEraName) {
b.classList.add('wrong');
}
});
revealScene();
vignetteEraHint.textContent = correctEra.name;
setFeedbackResult(isCorrect, correctEra);
updateMeta();
setTimeout(() => {
nextRound();
}, 950);
}
// Event wiring
guessButtons.forEach(btn => {
btn.addEventListener('click', () => {
const choice = btn.getAttribute('data-era-choice');
handleGuess(choice, btn);
});
});
restartBtn.addEventListener('click', () => {
startGame();
});
playAgainBtn.addEventListener('click', () => {
startGame();
});
// Init
loadBestScore();
startGame();
})();
</script>
</body>
</html>