← back to Model Arena
data/artifacts/0b9bb5066c06/grok.html
1476 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Which Design Era? — Designer Wallcoverings</title>
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--surface-2: #1e1e24;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent-dim: #7d6a45;
--hairline: rgba(245, 242, 234, 0.12);
--shadow: 0 24px 64px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
--ease: cubic-bezier(.22,.9,.24,1);
--ease-out: cubic-bezier(.22,1,.36,1);
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── Top bar ── */
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: 56px;
display: flex;
align-items: center;
padding: 0 2rem;
background: rgba(13,13,15,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--hairline);
}
.wordmark {
font-family: var(--serif);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
}
/* ── Layout ── */
.app {
min-height: 100%;
padding: 88px 1.5rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.shell {
width: 100%;
max-width: 720px;
}
/* ── Header meta ── */
.meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1.75rem;
gap: 1rem;
}
.game-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text);
}
.game-title span {
color: var(--accent);
}
.scores {
display: flex;
gap: 1.5rem;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.scores strong {
color: var(--accent);
font-weight: 500;
font-family: var(--serif);
font-size: 16px;
letter-spacing: 0.04em;
margin-left: 0.35em;
}
/* ── Progress ── */
.progress {
display: flex;
gap: 6px;
margin-bottom: 1.75rem;
}
.progress i {
flex: 1;
height: 2px;
background: var(--hairline);
border-radius: 1px;
transition: background 0.4s var(--ease);
}
.progress i.done { background: var(--accent-dim); }
.progress i.now { background: var(--accent); }
/* ── Vignette stage ── */
.stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 2px;
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.75rem;
}
.vignette {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
pointer-events: none;
}
.vignette.active { opacity: 1; }
/* Shared room geometry */
.room {
position: absolute;
inset: 0;
}
.floor {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 32%;
}
.wall {
position: absolute;
left: 0; right: 0; top: 0;
height: 68%;
}
.baseboard {
position: absolute;
left: 0; right: 0;
top: 68%;
height: 3px;
transform: translateY(-100%);
}
.wainscot {
position: absolute;
left: 0; right: 0;
bottom: 32%;
height: 22%;
}
/* ════════ VICTORIAN ════════ */
.vic .wall {
background:
repeating-linear-gradient(
90deg,
#2a1810 0px, #2a1810 28px,
#3d2418 28px, #3d2418 30px
),
linear-gradient(180deg, #3a2014 0%, #2a1810 100%);
background-blend-mode: multiply;
}
.vic .wall::before {
content: '';
position: absolute;
inset: 8% 6% 28% 6%;
background:
radial-gradient(ellipse 40% 50% at 30% 40%, rgba(139,90,43,0.35) 0%, transparent 70%),
radial-gradient(ellipse 35% 45% at 70% 55%, rgba(101,67,33,0.3) 0%, transparent 70%),
repeating-linear-gradient(
0deg,
transparent 0, transparent 18px,
rgba(201,169,97,0.08) 18px, rgba(201,169,97,0.08) 19px
),
repeating-linear-gradient(
90deg,
transparent 0, transparent 18px,
rgba(201,169,97,0.08) 18px, rgba(201,169,97,0.08) 19px
);
border: 1px solid rgba(201,169,97,0.2);
box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
}
/* damask dots */
.vic .wall::after {
content: '';
position: absolute;
inset: 10% 8% 30% 8%;
background-image:
radial-gradient(circle at 50% 50%, rgba(201,169,97,0.18) 1.5px, transparent 1.8px);
background-size: 24px 28px;
opacity: 0.7;
}
.vic .wainscot {
background: linear-gradient(180deg, #1a100c 0%, #120b08 100%);
border-top: 2px solid #c9a961;
box-shadow: inset 0 8px 16px rgba(0,0,0,0.4);
}
.vic .wainscot::before {
content: '';
position: absolute;
inset: 12% 4%;
border: 1px solid rgba(201,169,97,0.25);
box-shadow: inset 0 0 0 4px #1a100c, inset 0 0 0 5px rgba(201,169,97,0.15);
}
.vic .baseboard {
background: #c9a961;
height: 4px;
}
.vic .floor {
background:
repeating-linear-gradient(
90deg,
#1c100a 0px, #1c100a 40px,
#241610 40px, #241610 42px
);
}
.vic .floor::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%);
}
/* chandelier suggestion */
.vic .fixture {
position: absolute;
top: 0; left: 50%;
width: 2px; height: 14%;
background: linear-gradient(180deg, #c9a961, #8a7340);
transform: translateX(-50%);
}
.vic .fixture::before {
content: '';
position: absolute;
bottom: -8px; left: 50%;
transform: translateX(-50%);
width: 48px; height: 20px;
background:
radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.5) 0%, transparent 70%);
border-bottom: 1px solid rgba(201,169,97,0.4);
}
.vic .fixture::after {
content: '';
position: absolute;
bottom: -18px; left: 50%;
transform: translateX(-50%);
width: 8px; height: 8px;
border-radius: 50%;
background: #c9a961;
box-shadow:
-14px -4px 0 -2px #c9a961,
14px -4px 0 -2px #c9a961,
-8px 2px 0 -2.5px #a08850,
8px 2px 0 -2.5px #a08850,
0 0 20px 6px rgba(201,169,97,0.25);
}
/* ornate frame / portrait */
.vic .art {
position: absolute;
top: 14%; left: 50%;
transform: translateX(-50%);
width: 16%; height: 28%;
border: 3px solid #c9a961;
box-shadow:
inset 0 0 0 2px #2a1810,
inset 0 0 0 4px rgba(201,169,97,0.4),
0 8px 24px rgba(0,0,0,0.5);
background:
radial-gradient(ellipse at 40% 35%, #5a3a28 0%, #2a1810 70%);
}
.vic .art::after {
content: '';
position: absolute;
inset: 15%;
border-radius: 50% 50% 45% 45%;
background: radial-gradient(ellipse at 45% 40%, #8a6a50 0%, #3a2418 80%);
opacity: 0.7;
}
/* side tables */
.vic .furn-l, .vic .furn-r {
position: absolute;
bottom: 28%;
width: 12%; height: 18%;
background: linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
border: 1px solid rgba(201,169,97,0.3);
}
.vic .furn-l { left: 10%; }
.vic .furn-r { right: 10%; }
.vic .furn-l::before, .vic .furn-r::before {
content: '';
position: absolute;
top: -22%; left: 10%; right: 10%;
height: 22%;
background: #c9a961;
opacity: 0.7;
}
.vic .lamp {
position: absolute;
bottom: 46%; left: 13%;
width: 6%; height: 14%;
}
.vic .lamp::before {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 3px; height: 60%;
background: #c9a961;
}
.vic .lamp::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100%; height: 50%;
background: linear-gradient(180deg, #d4b878, #a08840);
clip-path: polygon(15% 100%, 85% 100%, 100% 0, 0 0);
box-shadow: 0 0 16px rgba(201,169,97,0.35);
}
/* ════════ ART DECO ════════ */
.deco .wall {
background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
}
.deco .wall::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
90deg,
transparent 0, transparent 47px,
rgba(201,169,97,0.07) 47px, rgba(201,169,97,0.07) 48px
);
}
/* sunburst */
.deco .wall::after {
content: '';
position: absolute;
top: 5%; left: 50%;
transform: translateX(-50%);
width: 55%; height: 70%;
background: conic-gradient(
from 200deg at 50% 100%,
transparent 0deg,
rgba(201,169,97,0.12) 8deg,
transparent 16deg,
rgba(201,169,97,0.08) 24deg,
transparent 32deg,
rgba(201,169,97,0.12) 40deg,
transparent 48deg,
rgba(201,169,97,0.08) 56deg,
transparent 64deg,
rgba(201,169,97,0.1) 72deg,
transparent 80deg,
rgba(201,169,97,0.08) 88deg,
transparent 96deg,
rgba(201,169,97,0.12) 104deg,
transparent 112deg,
rgba(201,169,97,0.08) 120deg,
transparent 128deg,
rgba(201,169,97,0.1) 136deg,
transparent 144deg,
rgba(201,169,97,0.08) 152deg,
transparent 160deg
);
opacity: 0.9;
mask-image: linear-gradient(180deg, black 0%, transparent 85%);
}
.deco .wainscot {
background: linear-gradient(180deg, #0e0e14 0%, #0a0a10 100%);
border-top: 1px solid rgba(201,169,97,0.5);
height: 18%;
}
.deco .wainscot::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(
90deg,
#c9a961 0, #c9a961 8px,
transparent 8px, transparent 16px
);
opacity: 0.5;
}
.deco .baseboard {
background: linear-gradient(90deg, #8a7340, #c9a961, #8a7340);
height: 3px;
}
.deco .floor {
background:
linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%),
repeating-linear-gradient(
90deg,
#14141c 0px, #14141c 60px,
#1a1a24 60px, #1a1a24 120px
);
}
/* geometric mirror */
.deco .art {
position: absolute;
top: 12%; left: 50%;
transform: translateX(-50%);
width: 22%; height: 36%;
background: linear-gradient(135deg, #2a2a38 0%, #1a1a28 50%, #222230 100%);
border: 2px solid #c9a961;
clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
box-shadow: 0 0 40px rgba(201,169,97,0.15), inset 0 0 30px rgba(201,169,97,0.08);
}
.deco .art::before {
content: '';
position: absolute;
inset: 8%;
border: 1px solid rgba(201,169,97,0.35);
clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
}
.deco .art::after {
content: '';
position: absolute;
inset: 20%;
background: linear-gradient(160deg, rgba(245,242,234,0.12) 0%, transparent 50%);
clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
}
/* stepped console */
.deco .furn-l {
position: absolute;
bottom: 28%; left: 8%;
width: 18%; height: 16%;
}
.deco .furn-l::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40%;
background: #1a1a24;
border: 1px solid rgba(201,169,97,0.4);
}
.deco .furn-l::after {
content: '';
position: absolute;
bottom: 40%; left: 15%; right: 15%;
height: 30%;
background: #222230;
border: 1px solid rgba(201,169,97,0.3);
}
.deco .furn-r {
position: absolute;
bottom: 28%; right: 8%;
width: 18%; height: 16%;
}
.deco .furn-r::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40%;
background: #1a1a24;
border: 1px solid rgba(201,169,97,0.4);
}
.deco .furn-r::after {
content: '';
position: absolute;
bottom: 40%; left: 15%; right: 15%;
height: 30%;
background: #222230;
border: 1px solid rgba(201,169,97,0.3);
}
/* tall black lacquer vase */
.deco .fixture {
position: absolute;
bottom: 44%; left: 14%;
width: 5%; height: 20%;
background: linear-gradient(90deg, #0a0a10, #1a1a22, #0a0a10);
border-radius: 40% 40% 10% 10%;
border: 1px solid rgba(201,169,97,0.3);
box-shadow: 0 0 12px rgba(201,169,97,0.1);
}
.deco .fixture::after {
content: '';
position: absolute;
top: -8%; left: 20%; right: 20%;
height: 12%;
background: #c9a961;
border-radius: 2px;
}
.deco .lamp {
position: absolute;
bottom: 44%; right: 14%;
width: 5%; height: 22%;
background: linear-gradient(90deg, #0a0a10, #1a1a22, #0a0a10);
clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
border-top: 2px solid #c9a961;
box-shadow: 0 -4px 20px rgba(201,169,97,0.2);
}
/* ════════ MID-CENTURY MODERN ════════ */
.mcm .wall {
background: linear-gradient(180deg, #d4cfc4 0%, #c8c2b4 100%);
}
.mcm .wall::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 70% 30%, rgba(180,140,90,0.12) 0%, transparent 60%);
}
/* walnut accent wall panel */
.mcm .wall::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28%; height: 100%;
background:
repeating-linear-gradient(
90deg,
#5c4030 0px, #5c4030 14px,
#6b4c38 14px, #6b4c38 15px
);
opacity: 0.85;
}
.mcm .wainscot { display: none; }
.mcm .baseboard {
background: #4a3428;
height: 4px;
}
.mcm .floor {
background:
linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 25%),
repeating-linear-gradient(
90deg,
#b8a890 0px, #b8a890 48px,
#c4b49c 48px, #c4b49c 50px
);
}
/* starburst clock */
.mcm .art {
position: absolute;
top: 18%; left: 32%;
width: 14%; height: 22%;
}
.mcm .art::before {
content: '';
position: absolute;
inset: 25%;
border-radius: 50%;
background: #2a2420;
border: 2px solid #c9a961;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mcm .art::after {
content: '';
position: absolute;
inset: 0;
background:
conic-gradient(from 0deg,
transparent 0deg 8deg, #4a4038 8deg 10deg,
transparent 10deg 28deg, #4a4038 28deg 30deg,
transparent 30deg 48deg, #4a4038 48deg 50deg,
transparent 50deg 68deg, #4a4038 68deg 70deg,
transparent 70deg 88deg, #4a4038 88deg 90deg,
transparent 90deg 108deg, #4a4038 108deg 110deg,
transparent 110deg 128deg, #4a4038 128deg 130deg,
transparent 130deg 148deg, #4a4038 148deg 150deg,
transparent 150deg 168deg, #4a4038 168deg 170deg,
transparent 170deg 188deg, #4a4038 188deg 190deg,
transparent 190deg 208deg, #4a4038 208deg 210deg,
transparent 210deg 228deg, #4a4038 228deg 230deg,
transparent 230deg 248deg, #4a4038 248deg 250deg,
transparent 250deg 268deg, #4a4038 268deg 270deg,
transparent 270deg 288deg, #4a4038 288deg 290deg,
transparent 290deg 308deg, #4a4038 308deg 310deg,
transparent 310deg 328deg, #4a4038 328deg 330deg,
transparent 330deg 348deg, #4a4038 348deg 350deg,
transparent 350deg 360deg
);
border-radius: 50%;
opacity: 0.7;
}
/* Eames-ish lounge */
.mcm .furn-l {
position: absolute;
bottom: 26%; left: 12%;
width: 22%; height: 22%;
}
.mcm .furn-l::before {
/* seat */
content: '';
position: absolute;
bottom: 20%; left: 5%; right: 15%;
height: 35%;
background: #8b4518;
border-radius: 50% 40% 8% 8%;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.mcm .furn-l::after {
/* back */
content: '';
position: absolute;
bottom: 48%; right: 8%;
width: 45%; height: 48%;
background: #6b3410;
border-radius: 40% 50% 8% 20%;
transform: rotate(12deg);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* legs */
.mcm .fixture {
position: absolute;
bottom: 26%; left: 15%;
width: 18%; height: 8%;
background: transparent;
border-bottom: 2px solid #3a3028;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
transform: perspective(40px) rotateX(20deg);
}
.mcm .fixture::before, .mcm .fixture::after {
content: '';
position: absolute;
bottom: -2px;
width: 2px; height: 18px;
background: #3a3028;
}
.mcm .fixture::before { left: 10%; transform: rotate(-15deg); }
.mcm .fixture::after { right: 10%; transform: rotate(15deg); }
/* planter / kidney table */
.mcm .furn-r {
position: absolute;
bottom: 28%; right: 34%;
width: 14%; height: 12%;
}
.mcm .furn-r::before {
content: '';
position: absolute;
bottom: 30%; left: 0; right: 0;
height: 25%;
background: #4a4030;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.mcm .furn-r::after {
content: '';
position: absolute;
bottom: 0; left: 45%;
width: 2px; height: 55%;
background: #3a3028;
box-shadow: -8px 0 0 #3a3028, 8px 0 0 #3a3028;
}
/* boomerang lamp */
.mcm .lamp {
position: absolute;
bottom: 40%; right: 36%;
width: 8%; height: 16%;
}
.mcm .lamp::before {
content: '';
position: absolute;
bottom: 0; left: 40%;
width: 3px; height: 70%;
background: #3a3028;
transform: rotate(-8deg);
}
.mcm .lamp::after {
content: '';
position: absolute;
top: 0; left: 10%;
width: 70%; height: 40%;
background: #f0ebe0;
border-radius: 50% 50% 40% 40%;
box-shadow: 0 0 20px rgba(240,235,224,0.5);
}
/* large window suggestion */
.mcm .window {
position: absolute;
top: 10%; left: 6%;
width: 20%; height: 48%;
background: linear-gradient(180deg, #a8c4c8 0%, #8a greyscale 100%);
background: linear-gradient(160deg, #b8d0d4 0%, #90a8b0 100%);
border: 3px solid #4a4038;
box-shadow: inset 0 0 20px rgba(255,255,255,0.2);
}
.mcm .window::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 3px;
background: #4a4038;
}
.mcm .window::after {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
height: 3px;
background: #4a4038;
}
/* ════════ GRANDMILLENNIAL ════════ */
.gm .wall {
background: #f0e8dc;
}
/* chintz / floral wallpaper suggestion */
.gm .wall::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(180,80,90,0.2) 0%, transparent 8%),
radial-gradient(circle at 50% 20%, rgba(70,120,90,0.18) 0%, transparent 7%),
radial-gradient(circle at 75% 40%, rgba(180,80,90,0.18) 0%, transparent 9%),
radial-gradient(circle at 35% 60%, rgba(70,120,90,0.15) 0%, transparent 8%),
radial-gradient(circle at 60% 70%, rgba(180,80,90,0.16) 0%, transparent 7%),
radial-gradient(circle at 15% 75%, rgba(180,80,90,0.14) 0%, transparent 6%),
radial-gradient(circle at 85% 15%, rgba(70,120,90,0.16) 0%, transparent 7%),
radial-gradient(circle at 90% 65%, rgba(180,80,90,0.15) 0%, transparent 8%),
radial-gradient(circle at 40% 40%, rgba(200,160,80,0.12) 0%, transparent 5%),
radial-gradient(circle at 65% 50%, rgba(200,160,80,0.1) 0%, transparent 5%);
background-size: 100% 100%;
}
.gm .wall::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 35%, rgba(180,80,90,0.25) 0 2px, transparent 2.5px),
radial-gradient(circle at 55% 25%, rgba(70,120,90,0.22) 0 1.5px, transparent 2px),
radial-gradient(circle at 70% 55%, rgba(180,80,90,0.2) 0 2px, transparent 2.5px),
radial-gradient(circle at 40% 70%, rgba(70,120,90,0.2) 0 1.5px, transparent 2px);
background-size: 80px 90px;
opacity: 0.8;
}
.gm .wainscot {
background: linear-gradient(180deg, #f7f2ea 0%, #efe8dc 100%);
border-top: 1px solid rgba(139,105,70,0.3);
height: 24%;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.gm .wainscot::before {
content: '';
position: absolute;
inset: 10% 3%;
border: 1px solid rgba(139,105,70,0.2);
box-shadow: inset 0 0 0 6px #f7f2ea, inset 0 0 0 7px rgba(139,105,70,0.12);
}
.gm .baseboard {
background: #8b6946;
height: 5px;
}
.gm .floor {
background:
linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 30%),
repeating-linear-gradient(
90deg,
#d4c4a8 0px, #d4c4a8 36px,
#cbb896 36px, #cbb896 38px
);
}
/* gallery wall frames */
.gm .art {
position: absolute;
top: 12%; left: 22%;
width: 12%; height: 20%;
background: #e8dcc8;
border: 3px solid #8b6946;
box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
}
.gm .art::before {
content: '';
position: absolute;
top: -8%; right: -120%;
width: 100%; height: 85%;
background: #e0d4c0;
border: 2px solid #8b6946;
box-shadow: 2px 3px 8px rgba(0,0,0,0.1);
}
.gm .art::after {
content: '';
position: absolute;
top: 40%; right: -230%;
width: 90%; height: 110%;
background: #d8ccb8;
border: 4px solid #6b4e32;
box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
}
/* skirted table */
.gm .furn-l {
position: absolute;
bottom: 26%; left: 8%;
width: 16%; height: 24%;
}
.gm .furn-l::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 75%;
background: linear-gradient(180deg, #8b3040 0%, #6b2030 100%);
border-radius: 4px 4px 0 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.gm .furn-l::after {
content: '';
position: absolute;
top: 10%; left: 5%; right: 5%;
height: 20%;
background: #f5f0e6;
border: 1px solid rgba(139,105,70,0.3);
border-radius: 2px;
}
/* wingback chair silhouette */
.gm .furn-r {
position: absolute;
bottom: 26%; right: 12%;
width: 16%; height: 30%;
}
.gm .furn-r::before {
content: '';
position: absolute;
bottom: 0; left: 15%; right: 15%;
height: 55%;
background: #4a6b58;
border-radius: 8px 8px 2px 2px;
}
.gm .furn-r::after {
content: '';
position: absolute;
bottom: 45%; left: 0; right: 0;
height: 50%;
background: #3d5a4a;
border-radius: 40% 40% 8% 8%;
box-shadow: inset 0 -8px 0 #4a6b58;
}
/* ginger jar */
.gm .fixture {
position: absolute;
bottom: 50%; left: 12%;
width: 7%; height: 14%;
background: linear-gradient(90deg, #d0dce4, #e8f0f4, #d0dce4);
border-radius: 40% 40% 15% 15%;
border: 1px solid rgba(100,130,150,0.4);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gm .fixture::before {
content: '';
position: absolute;
top: -12%; left: 25%; right: 25%;
height: 18%;
background: #c8d4dc;
border-radius: 2px;
}
.gm .fixture::after {
content: '';
position: absolute;
inset: 20% 15%;
border: 1px solid rgba(70,110,140,0.35);
border-radius: 30%;
}
/* scalloped lamp shade */
.gm .lamp {
position: absolute;
bottom: 56%; right: 15%;
width: 10%; height: 18%;
}
.gm .lamp::before {
content: '';
position: absolute;
bottom: 0; left: 45%;
width: 2px; height: 45%;
background: #c9a961;
}
.gm .lamp::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 55%;
background: #f8f0e0;
clip-path: polygon(10% 100%, 90% 100%, 100% 15%, 85% 0, 15% 0, 0 15%);
box-shadow: 0 0 16px rgba(248,240,224,0.45);
border-bottom: 2px solid #c9a961;
}
/* ── Prompt + buttons ── */
.prompt {
text-align: center;
margin-bottom: 1.25rem;
}
.prompt p {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 1.5rem;
}
.choice {
appearance: none;
border: 1px solid var(--hairline);
background: var(--surface);
color: var(--text);
font-family: var(--sans);
font-size: 14px;
letter-spacing: 0.04em;
padding: 1rem 1.25rem;
cursor: pointer;
border-radius: 1px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
text-align: center;
}
.choice:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.choice:active:not(:disabled) {
transform: scale(0.98);
}
.choice:disabled {
cursor: default;
opacity: 0.55;
}
.choice.correct {
border-color: var(--accent);
background: rgba(201,169,97,0.12);
color: var(--accent);
opacity: 1;
}
.choice.wrong {
border-color: rgba(180,80,80,0.5);
background: rgba(180,80,80,0.08);
color: #c08080;
opacity: 1;
}
/* ── Reveal card ── */
.reveal {
display: none;
border: 1px solid var(--hairline);
background: var(--surface);
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem;
border-radius: 1px;
animation: fadeUp 0.5s var(--ease-out) both;
}
.reveal.show { display: block; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.5rem;
}
.reveal h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 0.75rem;
}
.reveal h2.miss { color: #c08080; }
.reveal h2.hit { color: var(--accent); }
.reveal .fact {
font-size: 15px;
line-height: 1.65;
color: var(--muted);
max-width: 58ch;
}
.reveal .fact em {
color: var(--text);
font-style: normal;
border-bottom: 1px solid var(--hairline);
}
.next-row {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
.btn {
appearance: none;
border: 1px solid var(--accent);
background: transparent;
color: var(--accent);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.85rem 1.75rem;
cursor: pointer;
border-radius: 1px;
transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover {
background: var(--accent);
color: var(--bg);
}
.btn:active { transform: scale(0.98); }
.btn.primary {
background: var(--accent);
color: var(--bg);
}
.btn.primary:hover {
background: #d4b878;
}
/* ── End screen ── */
.end-screen {
display: none;
text-align: center;
padding: 3rem 1.5rem;
animation: fadeUp 0.6s var(--ease-out) both;
}
.end-screen.show { display: block; }
.end-screen .eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.end-screen h1 {
font-family: var(--serif);
font-size: 50px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 0.75rem;
}
.end-screen .final-score {
font-family: var(--serif);
font-size: 38px;
color: var(--accent);
margin-bottom: 0.5rem;
}
.end-screen .best {
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2rem;
}
.end-screen .best strong {
color: var(--text);
font-weight: 500;
}
.end-screen .blurb {
font-size: 16px;
color: var(--muted);
max-width: 40ch;
margin: 0 auto 2.5rem;
line-height: 1.65;
}
/* ── Intro ── */
.intro {
text-align: center;
padding: 2.5rem 1rem 1rem;
animation: fadeUp 0.6s var(--ease-out) both;
}
.intro .eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}
.intro h1 {
font-family: var(--serif);
font-size: clamp(38px, 6vw, 50px);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.08;
margin-bottom: 1.25rem;
}
.intro h1 em {
font-style: italic;
color: var(--accent);
}
.intro p {
font-size: 16px;
color: var(--muted);
max-width: 42ch;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.intro .hair {
width: 48px;
height: 1px;
background: var(--accent);
margin: 0 auto 2rem;
opacity: 0.6;
}
.play-area { display: none; }
.play-area.show { display: block; }
.hidden { display: none !important; }
/* subtle stage entrance */
.stage.enter {
animation: stageIn 0.7s var(--ease-out) both;
}
@keyframes stageIn {
from { opacity: 0; transform: translateY(16px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 540px) {
.topbar { padding: 0 1.25rem; }
.app { padding: 80px 1rem 2rem; }
.choices { grid-template-columns: 1fr; }
.game-title { font-size: 22px; }
.end-screen h1 { font-size: 36px; }
.meta-row { flex-direction: column; gap: 0.5rem; }
}
</style>
</head>
<body>
<header class="topbar">
<div class="wordmark">Designer Wallcoverings</div>
</header>
<main class="app">
<div class="shell">
<!-- INTRO -->
<section class="intro" id="intro">
<div class="eyebrow">A Connoisseur’s Quiz</div>
<h1>Which <em>Design Era</em><br>is this room?</h1>
<div class="hair"></div>
<p>Eight vignettes. Four eras. Read the room — mouldings, metals, silhouettes — and name the period. A single jewel-box of interior history.</p>
<button class="btn primary" id="startBtn">Begin</button>
</section>
<!-- PLAY -->
<section class="play-area" id="play">
<div class="meta-row">
<h1 class="game-title">Which <span>Era?</span></h1>
<div class="scores">
<div>Round<strong id="roundNum">1</strong>/8</div>
<div>Score<strong id="scoreNum">0</strong></div>
<div>Best<strong id="bestNum">0</strong></div>
</div>
</div>
<div class="progress" id="progress" aria-hidden="true"></div>
<div class="stage" id="stage">
<!-- Victorian -->
<div class="vignette vic" data-era="victorian">
<div class="room">
<div class="wall"></div>
<div class="wainscot"></div>
<div class="baseboard"></div>
<div class="floor"></div>
<div class="fixture"></div>
<div class="art"></div>
<div class="furn-l"></div>
<div class="furn-r"></div>
<div class="lamp"></div>
</div>
</div>
<!-- Art Deco -->
<div class="vignette deco" data-era="artdeco">
<div class="room">
<div class="wall"></div>
<div class="wainscot"></div>
<div class="baseboard"></div>
<div class="floor"></div>
<div class="art"></div>
<div class="furn-l"></div>
<div class="furn-r"></div>
<div class="fixture"></div>
<div class="lamp"></div>
</div>
</div>
<!-- Mid-Century Modern -->
<div class="vignette mcm" data-era="mcm">
<div class="room">
<div class="wall"></div>
<div class="baseboard"></div>
<div class="floor"></div>
<div class="window"></div>
<div class="art"></div>
<div class="furn-l"></div>
<div class="furn-r"></div>
<div class="fixture"></div>
<div class="lamp"></div>
</div>
</div>
<!-- Grandmillennial -->
<div class="vignette gm" data-era="grandmillennial">
<div class="room">
<div class="wall"></div>
<div class="wainscot"></div>
<div class="baseboard"></div>
<div class="floor"></div>
<div class="art"></div>
<div class="furn-l"></div>
<div class="furn-r"></div>
<div class="fixture"></div>
<div class="lamp"></div>
</div>
</div>
</div>
<div class="prompt"><p>Select the design era</p></div>
<div class="choices" id="choices">
<button class="choice" data-guess="victorian">Victorian</button>
<button class="choice" data-guess="artdeco">Art Deco</button>
<button class="choice" data-guess="mcm">Mid-Century Modern</button>
<button class="choice" data-guess="grandmillennial">Grandmillennial</button>
</div>
<div class="reveal" id="reveal">
<div class="reveal-label" id="revealLabel">Correct</div>
<h2 id="revealTitle"></h2>
<p class="fact" id="revealFact"></p>
<div class="next-row">
<button class="btn" id="nextBtn">Next Room</button>
</div>
</div>
</section>
<!-- END -->
<section class="end-screen" id="end">
<div class="eyebrow">Collection Complete</div>
<h1 id="endHeadline">Impeccable eye.</h1>
<div class="final-score" id="endScore">0 / 8</div>
<div class="best">Best<span> — </span><strong id="endBest">0</strong></div>
<p class="blurb" id="endBlurb"></p>
<button class="btn primary" id="restartBtn">Play Again</button>
</section>
</div>
</main>
<script>
(function () {
const ERAS = {
victorian: {
name: 'Victorian',
fact: 'Named for Queen Victoria\'s reign (1837–1901), this era layered <em>damask wallpapers, dark mahogany, and ornamental plaster</em> into rooms that read as richly furnished jewel boxes — more pattern was always more.'
},
artdeco: {
name: 'Art Deco',
fact: 'Born of the 1925 Paris Exposition, Art Deco loved <em>sunbursts, stepped forms, lacquer, and polished brass</em>. Geometry replaced Victorian fuss — glamour with a machine-age edge.'
},
mcm: {
name: 'Mid-Century Modern',
fact: 'From roughly 1945–1969, MCM stripped rooms to <em>clean lines, organic curves, walnut, and starburst motifs</em>. Form followed function — with a cocktail in hand and a picture window open to the yard.'
},
grandmillennial: {
name: 'Grandmillennial',
fact: 'A 21st-century revival of "granny chic": <em>floral chintz, skirted tables, ginger jars, and gallery walls</em>. Nostalgia, needlepoint, and a knowing wink — heritage without the stuffiness.'
}
};
const ERA_KEYS = Object.keys(ERAS);
const TOTAL = 8;
let round = 0;
let score = 0;
let sequence = [];
let answered = false;
let best = 0;
try { best = parseInt(localStorage.getItem('dw_era_best') || '0', 10) || 0; } catch (e) { best = 0; }
const $ = (id) => document.getElementById(id);
const intro = $('intro');
const play = $('play');
const end = $('end');
const stage = $('stage');
const progress = $('progress');
const choicesEl = $('choices');
const reveal = $('reveal');
const nextBtn = $('nextBtn');
function shuffle(arr) {
const a = arr.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() {
// 2 of each era, shuffled
let seq = [];
ERA_KEYS.forEach(k => { seq.push(k, k); });
sequence = shuffle(seq);
}
function buildProgress() {
progress.innerHTML = '';
for (let i = 0; i < TOTAL; i++) {
const d = document.createElement('i');
if (i < round) d.className = 'done';
else if (i === round) d.className = 'now';
progress.appendChild(d);
}
}
function showVignette(era) {
const all = stage.querySelectorAll('.vignette');
all.forEach(v => v.classList.remove('active'));
const target = stage.querySelector('.vignette[data-era="' + era + '"]');
if (target) {
// force reflow for fade
void target.offsetWidth;
target.classList.add('active');
}
stage.classList.remove('enter');
void stage.offsetWidth;
stage.classList.add('enter');
}
function resetChoices() {
const btns = choicesEl.querySelectorAll('.choice');
btns.forEach(b => {
b.disabled = false;
b.classList.remove('correct', 'wrong');
});
// reshuffle button order each round for freshness
const order = shuffle(ERA_KEYS);
btns.forEach((b, i) => {
b.dataset.guess = order[i];
b.textContent = ERAS[order[i]].name;
});
}
function updateMeta() {
$('roundNum').textContent = String(round + 1);
$('scoreNum').textContent = String(score);
$('bestNum').textContent = String(best);
}
function startRound() {
answered = false;
reveal.classList.remove('show');
choicesEl.classList.remove('hidden');
document.querySelector('.prompt').classList.remove('hidden');
buildProgress();
updateMeta();
resetChoices();
showVignette(sequence[round]);
nextBtn.textContent = round === TOTAL - 1 ? 'See Results' : 'Next Room';
}
function onGuess(guess) {
if (answered) return;
answered = true;
const correct = sequence[round];
const hit = guess === correct;
if (hit) score++;
const btns = choicesEl.querySelectorAll('.choice');
btns.forEach(b => {
b.disabled = true;
if (b.dataset.guess === correct) b.classList.add('correct');
else if (b.dataset.guess === guess && !hit) b.classList.add('wrong');
});
$('revealLabel').textContent = hit ? 'Correct' : 'Not quite';
const title = $('revealTitle');
title.textContent = ERAS[correct].name;
title.className = hit ? 'hit' : 'miss';
$('revealFact').innerHTML = ERAS[correct].fact;
updateMeta();
reveal.classList.add('show');
}
function next() {
round++;
if (round >= TOTAL) {
finish();
} else {
startRound();
}
}
function finish() {
play.classList.remove('show');
// persist best
if (score > best) {
best = score;
try { localStorage.setItem('dw_era_best', String(best)); } catch (e) {}
}
$('endScore').textContent = score + ' / ' + TOTAL;
$('endBest').textContent = String(best);
let headline, blurb;
if (score >= 8) {
headline = 'Impeccable eye.';
blurb = 'A perfect eight. You read mouldings and metals like a monographer — the archive would hire you tomorrow.';
} else if (score >= 6) {
headline = 'A refined eye.';
blurb = 'You know your sunbursts from your starbursts. A little more time with the sample books and you\'ll be flawless.';
} else if (score >= 4) {
headline = 'A promising start.';
blurb = 'The eras are beginning to sort themselves. Walk a few more period rooms and the silhouettes will lock in.';
} else {
headline = 'The tour continues.';
blurb = 'Every great decorator began by looking closely. Run it again — the vignettes will teach you their tells.';
}
$('endHeadline').textContent = headline;
$('endBlurb').textContent = blurb;
end.classList.add('show');
}
function startGame() {
intro.classList.add('hidden');
end.classList.remove('show');
play.classList.add('show');
round = 0;
score = 0;
buildSequence();
startRound();
}
// events
$('startBtn').addEventListener('click', startGame);
$('restartBtn').addEventListener('click', startGame);
nextBtn.addEventListener('click', next);
choicesEl.addEventListener('click', function (e) {
const btn = e.target.closest('.choice');
if (!btn || btn.disabled) return;
onGuess(btn.dataset.guess);
});
// init best display on intro path (shown once play starts)
$('bestNum').textContent = String(best);
})();
</script>
</body>
</html>