← back to Model Arena
data/artifacts/0219528ac7d7/grok.html
1545 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;
--ink: #f5f2ea;
--text: #1c1a17;
--muted: #8a8578;
--accent: #c9a961;
--accent-dim: #7d6a45;
--line: rgba(201, 169, 97, 0.28);
--line-subtle: rgba(245, 242, 234, 0.08);
--shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
--ease: cubic-bezier(.22, .9, .24, 1);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-scene: cubic-bezier(.77, 0, .18, 1);
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', Futura, 'Helvetica Neue', sans-serif;
--radius: 2px;
--header-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── Header / Wordmark ── */
header.brand-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--header-h);
background: rgba(245, 242, 234, 0.97);
border-bottom: 1px solid rgba(28, 26, 23, 0.12);
display: flex;
align-items: center;
padding: 0 28px;
backdrop-filter: blur(12px);
}
.wordmark {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
line-height: 1.15;
white-space: normal;
max-width: 280px;
}
/* ── App shell ── */
.app {
min-height: 100vh;
padding: calc(var(--header-h) + 36px) 24px 64px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
margin: 0 auto;
}
/* ── Meta bar (score / round) ── */
.meta-bar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-subtle);
}
.meta-label {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.meta-value {
font-family: var(--serif);
font-size: 28px;
color: var(--ink);
margin-left: 10px;
font-weight: 400;
}
.meta-group { display: flex; align-items: baseline; gap: 28px; }
/* ── Title block ── */
.game-title {
text-align: center;
margin-bottom: 32px;
}
.game-title h1 {
font-family: var(--serif);
font-size: 38px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
margin-bottom: 8px;
}
.game-title p {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
/* ── Vignette stage ── */
.stage {
width: 100%;
max-width: 640px;
aspect-ratio: 16 / 11;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
margin-bottom: 36px;
}
.vignette {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s var(--ease-out);
pointer-events: none;
}
.vignette.active {
opacity: 1;
pointer-events: auto;
}
/* ══════════════════════════════════════
ERA 1 — VICTORIAN
══════════════════════════════════════ */
.era-victorian {
background:
radial-gradient(ellipse at 50% 0%, #2a1810 0%, transparent 55%),
linear-gradient(180deg, #1a0e0a 0%, #0f0806 100%);
}
/* Damask wallpaper */
.era-victorian .wall {
position: absolute;
inset: 0 0 28% 0;
background-color: #3d1f18;
background-image:
radial-gradient(ellipse 18px 22px at 50% 30%, rgba(139, 90, 43, 0.55) 0%, transparent 70%),
radial-gradient(ellipse 10px 14px at 50% 55%, rgba(180, 120, 60, 0.35) 0%, transparent 65%),
radial-gradient(circle 4px at 50% 72%, rgba(201, 169, 97, 0.4) 0%, transparent 100%),
radial-gradient(ellipse 18px 22px at 0% 80%, rgba(139, 90, 43, 0.4) 0%, transparent 70%),
radial-gradient(ellipse 18px 22px at 100% 80%, rgba(139, 90, 43, 0.4) 0%, transparent 70%);
background-size: 48px 72px;
}
.era-victorian .wainscot {
position: absolute;
bottom: 28%;
left: 0; right: 0;
height: 18%;
background: linear-gradient(180deg, #2c1810 0%, #1e100a 100%);
border-top: 3px solid #5c3a20;
box-shadow: inset 0 4px 0 #4a2e18;
}
.era-victorian .wainscot::after {
content: '';
position: absolute;
top: 8px; left: 0; right: 0; bottom: 8px;
border-top: 1px solid rgba(201, 169, 97, 0.25);
border-bottom: 1px solid rgba(201, 169, 97, 0.15);
background:
repeating-linear-gradient(90deg,
transparent 0, transparent 60px,
rgba(92, 58, 32, 0.6) 60px, rgba(92, 58, 32, 0.6) 62px);
}
.era-victorian .floor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 28%;
background:
repeating-linear-gradient(90deg,
#1a1008 0px, #1a1008 40px,
#221408 40px, #221408 80px);
background-image:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%),
repeating-linear-gradient(90deg, #1a1008 0 38px, #0e0a04 38px 40px, #221408 40px 78px, #0e0a04 78px 80px);
}
/* Ornate fireplace */
.era-victorian .fireplace {
position: absolute;
bottom: 28%;
left: 50%;
transform: translateX(-50%);
width: 38%;
height: 42%;
}
.era-victorian .fp-mantel {
position: absolute;
top: 0; left: -8%; right: -8%;
height: 14%;
background: linear-gradient(180deg, #6b4423 0%, #4a2e14 40%, #3d2510 100%);
border: 1px solid #8b5a2b;
box-shadow: 0 2px 0 #c9a96144;
}
.era-victorian .fp-mantel::before {
content: '';
position: absolute;
top: -6px; left: 10%; right: 10%;
height: 6px;
background: #5c3a18;
border: 1px solid #8b5a2b;
}
.era-victorian .fp-body {
position: absolute;
top: 14%; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, #3d2510, #2a180c);
border-left: 8px solid #4a2e14;
border-right: 8px solid #4a2e14;
}
.era-victorian .fp-opening {
position: absolute;
top: 22%; left: 18%; right: 18%; bottom: 8%;
background: radial-gradient(ellipse at 50% 80%, #c45a12 0%, #6b2008 40%, #1a0804 75%);
border: 2px solid #5c3a18;
box-shadow: inset 0 0 20px #000;
}
.era-victorian .fp-opening::after {
content: '';
position: absolute;
bottom: 0; left: 15%; right: 15%;
height: 30%;
background: linear-gradient(0deg, transparent, rgba(255,140,40,0.5));
border-radius: 50% 50% 0 0;
animation: fire-flicker 1.4s ease-in-out infinite alternate;
}
@keyframes fire-flicker {
from { opacity: 0.7; transform: scaleY(1); }
to { opacity: 1; transform: scaleY(1.15); }
}
/* Portrait frame */
.era-victorian .portrait {
position: absolute;
top: 12%;
left: 10%;
width: 14%;
aspect-ratio: 3/4;
background: linear-gradient(160deg, #4a3020, #2a1810);
border: 4px solid #8b5a2b;
box-shadow: 0 0 0 1px #c9a96155, 2px 4px 12px rgba(0,0,0,0.5);
}
.era-victorian .portrait::after {
content: '';
position: absolute;
inset: 6%;
background:
radial-gradient(ellipse at 50% 35%, #6b4a30 0%, transparent 50%),
radial-gradient(ellipse at 50% 70%, #3d2818 0%, #1a1008 100%);
border: 1px solid #5c3a20;
}
/* Candelabra silhouette */
.era-victorian .candelabra {
position: absolute;
top: 18%;
right: 12%;
width: 10%;
height: 28%;
}
.era-victorian .candelabra::before {
content: '';
position: absolute;
bottom: 0; left: 40%;
width: 20%; height: 70%;
background: #c9a961;
border-radius: 1px;
}
.era-victorian .candelabra::after {
content: '';
position: absolute;
top: 20%; left: 10%; right: 10%;
height: 3px;
background: #c9a961;
box-shadow:
-12px 8px 0 -1px #c9a961,
12px 8px 0 -1px #c9a961,
0 -14px 0 2px #c9a961,
-12px -6px 0 1px #e8c878,
12px -6px 0 1px #e8c878,
0 -22px 0 1px #e8c878;
}
/* ══════════════════════════════════════
ERA 2 — ART DECO
══════════════════════════════════════ */
.era-deco {
background: linear-gradient(180deg, #0a0a12 0%, #12121e 60%, #0e0e18 100%);
}
.era-deco .wall {
position: absolute;
inset: 0 0 30% 0;
background:
/* sunburst */
conic-gradient(from 200deg at 50% 100%,
transparent 0deg,
rgba(201, 169, 97, 0.07) 8deg,
transparent 16deg,
rgba(201, 169, 97, 0.07) 24deg,
transparent 32deg,
rgba(201, 169, 97, 0.07) 40deg,
transparent 48deg,
rgba(201, 169, 97, 0.07) 56deg,
transparent 64deg,
rgba(201, 169, 97, 0.07) 72deg,
transparent 80deg,
rgba(201, 169, 97, 0.07) 88deg,
transparent 96deg,
rgba(201, 169, 97, 0.07) 104deg,
transparent 112deg,
rgba(201, 169, 97, 0.07) 120deg,
transparent 180deg),
linear-gradient(180deg, #0e0e1a, #16162a);
}
/* Stepped geometric frieze */
.era-deco .frieze {
position: absolute;
top: 0; left: 0; right: 0;
height: 12%;
background: linear-gradient(180deg, #1a1a2e, #12122a);
border-bottom: 2px solid var(--accent);
overflow: hidden;
}
.era-deco .frieze::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg,
transparent 0 28px,
var(--accent) 28px 29px,
transparent 29px 56px),
repeating-linear-gradient(90deg,
transparent 0 14px,
rgba(201,169,97,0.3) 14px 15px,
transparent 15px 28px);
opacity: 0.7;
}
.era-deco .frieze::after {
content: '';
position: absolute;
bottom: 4px; left: 50%;
transform: translateX(-50%);
width: 80px; height: 18px;
background:
linear-gradient(135deg, transparent 40%, var(--accent) 40% 60%, transparent 60%),
linear-gradient(45deg, transparent 40%, var(--accent) 40% 60%, transparent 60%);
background-size: 20px 18px;
opacity: 0.9;
}
.era-deco .floor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30%;
background:
linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%),
repeating-linear-gradient(90deg, #1a1a28 0 40px, #12121e 40px 41px),
linear-gradient(180deg, #1c1c2e, #141422);
border-top: 1px solid rgba(201,169,97,0.35);
}
/* Chevron floor pattern */
.era-deco .floor::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(105deg,
transparent 0 18px,
rgba(201,169,97,0.06) 18px 19px);
opacity: 0.8;
}
/* Fan / shell motif centerpiece */
.era-deco .fan {
position: absolute;
bottom: 30%;
left: 50%;
transform: translateX(-50%);
width: 42%;
height: 48%;
}
.era-deco .fan-arc {
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 100%; height: 90%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 2px solid var(--accent);
border-bottom: none;
background:
repeating-conic-gradient(from 270deg at 50% 100%,
transparent 0deg 6deg,
rgba(201,169,97,0.12) 6deg 12deg);
box-shadow:
inset 0 0 0 8px transparent,
inset 0 0 0 9px rgba(201,169,97,0.4);
}
.era-deco .fan-arc::before {
content: '';
position: absolute;
bottom: 0; left: 15%; right: 15%;
height: 70%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 1px solid rgba(201,169,97,0.5);
border-bottom: none;
}
.era-deco .fan-arc::after {
content: '';
position: absolute;
bottom: 0; left: 30%; right: 30%;
height: 45%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 1px solid rgba(201,169,97,0.35);
border-bottom: none;
background: radial-gradient(ellipse at 50% 100%, rgba(201,169,97,0.2), transparent 70%);
}
/* Black lacquer console */
.era-deco .console {
position: absolute;
bottom: 30%;
left: 8%;
width: 18%;
height: 22%;
background: linear-gradient(180deg, #1e1e2a, #0a0a12);
border: 1px solid rgba(201,169,97,0.5);
border-bottom: none;
}
.era-deco .console::before {
content: '';
position: absolute;
top: 0; left: -4%; right: -4%;
height: 12%;
background: var(--accent);
}
.era-deco .console::after {
content: '';
position: absolute;
bottom: -20%; left: 10%; right: 10%;
height: 20%;
border-left: 2px solid var(--accent);
border-right: 2px solid var(--accent);
}
/* Skyscraper mirror */
.era-deco .mirror {
position: absolute;
top: 18%;
right: 10%;
width: 12%;
height: 40%;
background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2a 100%);
border: 1px solid var(--accent);
clip-path: polygon(20% 0%, 80% 0%, 100% 12%, 100% 100%, 0% 100%, 0% 12%);
box-shadow: inset 0 0 20px rgba(201,169,97,0.15);
}
.era-deco .mirror::after {
content: '';
position: absolute;
inset: 8%;
background: linear-gradient(160deg, rgba(180,200,255,0.12), transparent 60%);
border: 1px solid rgba(201,169,97,0.25);
clip-path: polygon(18% 0%, 82% 0%, 100% 10%, 100% 100%, 0% 100%, 0% 10%);
}
/* ══════════════════════════════════════
ERA 3 — MID-CENTURY MODERN
══════════════════════════════════════ */
.era-mcm {
background: linear-gradient(180deg, #e8dcc8 0%, #d4c4a8 100%);
}
.era-mcm .wall {
position: absolute;
inset: 0 0 32% 0;
background:
/* atomic / starburst dots */
radial-gradient(circle 2px at 20% 30%, #c45a3a44 0%, transparent 100%),
radial-gradient(circle 2px at 70% 20%, #c45a3a33 0%, transparent 100%),
radial-gradient(circle 1.5px at 45% 55%, #2a5a4a33 0%, transparent 100%),
radial-gradient(circle 2px at 85% 45%, #c45a3a33 0%, transparent 100%),
radial-gradient(circle 1.5px at 15% 70%, #2a5a4a33 0%, transparent 100%),
linear-gradient(180deg, #e8dcc8, #dccdb0);
}
/* Walnut panel accent wall */
.era-mcm .panel-wall {
position: absolute;
top: 0; right: 0;
width: 32%;
bottom: 32%;
background:
repeating-linear-gradient(90deg,
#6b4430 0px, #7a5040 8px, #5c3a28 16px, #6b4430 24px);
border-left: 3px solid #4a2e1c;
}
.era-mcm .floor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 32%;
background:
linear-gradient(180deg, rgba(80,50,30,0.2) 0%, transparent 20%),
repeating-linear-gradient(90deg,
#c4a882 0px, #c4a882 48px,
#b89870 48px, #b89870 50px);
}
/* Boomerang / kidney coffee table */
.era-mcm .table {
position: absolute;
bottom: 28%;
left: 28%;
width: 30%;
height: 12%;
background: #5c3a24;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
box-shadow: 0 6px 0 #3d2414, 0 10px 20px rgba(0,0,0,0.25);
z-index: 2;
}
.era-mcm .table::before {
content: '';
position: absolute;
bottom: -18px; left: 20%;
width: 4px; height: 18px;
background: #3d2414;
box-shadow: 40px 0 0 #3d2414, 70px 0 0 #3d2414;
border-radius: 1px;
}
/* Eames-style lounge */
.era-mcm .lounge {
position: absolute;
bottom: 32%;
left: 8%;
width: 22%;
height: 28%;
z-index: 1;
}
.era-mcm .lounge-seat {
position: absolute;
bottom: 20%; left: 0; right: 10%;
height: 45%;
background: #c45a3a;
border-radius: 8px 8px 4px 4px;
box-shadow: 0 4px 0 #8b3a22;
}
.era-mcm .lounge-back {
position: absolute;
top: 5%; left: 5%; right: 5%;
height: 50%;
background: #c45a3a;
border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
transform: perspective(200px) rotateX(8deg);
box-shadow: inset 0 -8px 0 #a84830;
}
.era-mcm .lounge-leg {
position: absolute;
bottom: 0;
width: 3px; height: 22%;
background: #2a2a2a;
border-radius: 1px;
}
.era-mcm .lounge-leg.l { left: 15%; transform: rotate(-8deg); }
.era-mcm .lounge-leg.r { right: 20%; transform: rotate(8deg); }
/* Sphere / bubble lamp */
.era-mcm .lamp {
position: absolute;
top: 10%;
left: 42%;
width: 14%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 38% 35%, #fff8e8 0%, #f0e0c0 40%, #d4c090 100%);
box-shadow: 0 0 40px rgba(255, 230, 180, 0.5), 0 0 80px rgba(255, 200, 100, 0.2);
z-index: 3;
}
.era-mcm .lamp::after {
content: '';
position: absolute;
top: 100%; left: 47%;
width: 2px; height: 40px;
background: #2a2a2a;
}
/* Plant / organic form */
.era-mcm .plant {
position: absolute;
bottom: 32%;
right: 36%;
width: 10%;
height: 24%;
z-index: 2;
}
.era-mcm .plant-pot {
position: absolute;
bottom: 0; left: 20%; right: 20%;
height: 28%;
background: #2a5a4a;
border-radius: 2px 2px 4px 4px;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.era-mcm .plant-leaf {
position: absolute;
bottom: 25%;
width: 40%; height: 55%;
background: #3a7a5a;
border-radius: 0 80% 0 80%;
}
.era-mcm .plant-leaf.a { left: 10%; transform: rotate(-25deg); }
.era-mcm .plant-leaf.b { left: 35%; transform: rotate(5deg); background: #2a6a4a; height: 65%; }
.era-mcm .plant-leaf.c { right: 10%; transform: rotate(30deg) scaleX(-1); }
/* Starburst clock */
.era-mcm .clock {
position: absolute;
top: 16%;
left: 14%;
width: 11%;
aspect-ratio: 1;
}
.era-mcm .clock-face {
position: absolute;
inset: 28%;
border-radius: 50%;
background: #f5f0e4;
border: 2px solid #2a2a2a;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.era-mcm .clock-rays {
position: absolute;
inset: 0;
background:
conic-gradient(from 0deg,
#2a2a2a 0deg 2deg, transparent 2deg 28deg,
#2a2a2a 28deg 30deg, transparent 30deg 58deg,
#2a2a2a 58deg 60deg, transparent 60deg 88deg,
#2a2a2a 88deg 90deg, transparent 90deg 118deg,
#2a2a2a 118deg 120deg, transparent 120deg 148deg,
#2a2a2a 148deg 150deg, transparent 150deg 178deg,
#2a2a2a 178deg 180deg, transparent 180deg 208deg,
#2a2a2a 208deg 210deg, transparent 210deg 238deg,
#2a2a2a 238deg 240deg, transparent 240deg 268deg,
#2a2a2a 268deg 270deg, transparent 270deg 298deg,
#2a2a2a 298deg 300deg, transparent 300deg 328deg,
#2a2a2a 328deg 330deg, transparent 330deg 358deg,
#2a2a2a 358deg 360deg);
border-radius: 50%;
}
/* ══════════════════════════════════════
ERA 4 — GRANDMILLENNIAL
══════════════════════════════════════ */
.era-grand {
background: linear-gradient(180deg, #f0ebe0 0%, #e6dfd0 100%);
}
.era-grand .wall {
position: absolute;
inset: 0 0 30% 0;
/* Chinoiserie / floral toile suggestion via layered soft motifs */
background-color: #e8e0d0;
background-image:
radial-gradient(ellipse 20px 28px at 25% 30%, rgba(90, 110, 80, 0.18) 0%, transparent 70%),
radial-gradient(ellipse 14px 18px at 28% 42%, rgba(140, 80, 70, 0.12) 0%, transparent 70%),
radial-gradient(ellipse 20px 28px at 75% 25%, rgba(90, 110, 80, 0.16) 0%, transparent 70%),
radial-gradient(ellipse 14px 18px at 72% 38%, rgba(140, 80, 70, 0.1) 0%, transparent 70%),
radial-gradient(ellipse 20px 28px at 50% 60%, rgba(90, 110, 80, 0.14) 0%, transparent 70%),
radial-gradient(ellipse 12px 16px at 15% 70%, rgba(70, 90, 110, 0.1) 0%, transparent 70%),
radial-gradient(ellipse 12px 16px at 88% 65%, rgba(70, 90, 110, 0.1) 0%, transparent 70%),
radial-gradient(circle 3px at 30% 20%, rgba(180, 140, 60, 0.25) 0%, transparent 100%),
radial-gradient(circle 3px at 70% 55%, rgba(180, 140, 60, 0.2) 0%, transparent 100%);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
/* Scalloped valance */
.era-grand .valance {
position: absolute;
top: 0; left: 0; right: 0;
height: 10%;
background: #6b4a5a;
overflow: hidden;
z-index: 4;
}
.era-grand .valance::after {
content: '';
position: absolute;
bottom: -10px; left: 0; right: 0;
height: 20px;
background:
radial-gradient(ellipse 18px 12px at 18px 0px, #6b4a5a 0%, #6b4a5a 70%, transparent 71%),
radial-gradient(ellipse 18px 12px at 54px 0px, #6b4a5a 0%, #6b4a5a 70%, transparent 71%);
background-size: 36px 20px;
background-repeat: repeat-x;
}
.era-grand .floor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30%;
background:
linear-gradient(180deg, rgba(60,40,30,0.12) 0%, transparent 25%),
/* herringbone suggestion */
repeating-linear-gradient(45deg, #d4c8b0 0 10px, #c8bca0 10px 11px, #d4c8b0 11px 21px, #bcb090 21px 22px),
repeating-linear-gradient(-45deg, #d0c4a8 0 10px, #c4b898 10px 11px, #d0c4a8 11px 21px, #b8ac90 21px 22px);
background-blend-mode: multiply;
border-top: 1px solid rgba(100,80,60,0.2);
}
/* Skirted sofa */
.era-grand .sofa {
position: absolute;
bottom: 30%;
left: 18%;
width: 48%;
height: 28%;
z-index: 2;
}
.era-grand .sofa-body {
position: absolute;
bottom: 18%; left: 0; right: 0;
height: 50%;
background: #7a9aaa;
border-radius: 6px 6px 0 0;
box-shadow: inset 0 8px 0 #8aAABB;
}
.era-grand .sofa-back {
position: absolute;
top: 0; left: 4%; right: 4%;
height: 48%;
background: #7a9aaa;
border-radius: 8px 8px 0 0;
box-shadow: inset 0 -4px 0 #6a8a9a;
}
.era-grand .sofa-skirt {
position: absolute;
bottom: 0; left: -2%; right: -2%;
height: 22%;
background:
repeating-linear-gradient(90deg,
#7a9aaa 0 12px,
#6a8a9a 12px 13px,
#7a9aaa 13px 25px,
#8aAABB 25px 26px);
border-radius: 0 0 3px 3px;
}
.era-grand .sofa-arm {
position: absolute;
bottom: 18%;
width: 12%; height: 55%;
background: #6a8a9a;
border-radius: 50% 50% 2px 2px;
}
.era-grand .sofa-arm.l { left: -4%; }
.era-grand .sofa-arm.r { right: -4%; }
/* Throw pillows */
.era-grand .pillow {
position: absolute;
bottom: 48%;
width: 12%; height: 22%;
border-radius: 4px;
z-index: 3;
}
.era-grand .pillow.p1 {
left: 22%;
background: #c45a5a;
transform: rotate(-6deg);
box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
}
.era-grand .pillow.p2 {
left: 38%;
background:
repeating-linear-gradient(45deg, #d4a840 0 3px, #e8c860 3px 6px);
transform: rotate(4deg);
}
.era-grand .pillow.p3 {
left: 52%;
background: #5a7a6a;
transform: rotate(-3deg);
}
/* Rattan / cane side table */
.era-grand .side-table {
position: absolute;
bottom: 30%;
right: 12%;
width: 14%;
height: 20%;
z-index: 2;
}
.era-grand .st-top {
position: absolute;
top: 0; left: 0; right: 0;
height: 12%;
background: #c4a870;
border-radius: 2px;
box-shadow: 0 2px 0 #a88850;
}
.era-grand .st-body {
position: absolute;
top: 12%; left: 8%; right: 8%; bottom: 0;
background:
repeating-linear-gradient(0deg, transparent 0 4px, rgba(160,130,80,0.35) 4px 5px),
repeating-linear-gradient(90deg, transparent 0 4px, rgba(160,130,80,0.35) 4px 5px),
#e0d0b0;
border: 1px solid #c4a870;
border-radius: 0 0 3px 3px;
}
/* Ginger jar */
.era-grand .jar {
position: absolute;
bottom: 50%;
right: 14%;
width: 8%;
height: 18%;
z-index: 3;
background:
radial-gradient(ellipse at 40% 30%, #e8f0f4 0%, #6a9aaa 40%, #4a7a8a 100%);
border-radius: 40% 40% 35% 35% / 30% 30% 50% 50%;
box-shadow: inset -3px -3px 8px rgba(0,0,0,0.15);
}
.era-grand .jar::before {
content: '';
position: absolute;
top: -12%; left: 25%; right: 25%;
height: 16%;
background: #4a7a8a;
border-radius: 2px;
}
.era-grand .jar::after {
content: '';
position: absolute;
top: 20%; left: 15%; right: 15%;
height: 25%;
border-top: 2px solid rgba(255,255,255,0.35);
border-bottom: 2px solid rgba(255,255,255,0.25);
}
/* Gallery wall frames */
.era-grand .frame {
position: absolute;
background: #f5f0e4;
border: 3px solid #8b6a3a;
box-shadow: 1px 2px 6px rgba(0,0,0,0.12);
z-index: 1;
}
.era-grand .frame.f1 {
top: 16%; left: 8%;
width: 11%; aspect-ratio: 1;
background: linear-gradient(160deg, #d4c8a0, #b8a880);
}
.era-grand .frame.f2 {
top: 18%; left: 22%;
width: 9%; aspect-ratio: 3/4;
border-color: #5a6a5a;
background: linear-gradient(180deg, #8aaa9a, #6a8a7a);
}
.era-grand .frame.f3 {
top: 14%; right: 30%;
width: 10%; aspect-ratio: 4/3;
border-color: #8b4a4a;
background: linear-gradient(140deg, #c4a0a0, #a88080);
}
/* ── Guess buttons ── */
.guesses {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
max-width: 640px;
margin-bottom: 24px;
}
.guess-btn {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
background: transparent;
border: 1px solid var(--line);
padding: 16px 20px;
cursor: pointer;
transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
position: relative;
overflow: hidden;
}
.guess-btn:hover:not(:disabled) {
background: rgba(201, 169, 97, 0.1);
border-color: var(--accent);
color: var(--accent);
}
.guess-btn:active:not(:disabled) {
transform: scale(0.98);
}
.guess-btn:disabled {
cursor: default;
opacity: 0.45;
}
.guess-btn.correct {
background: rgba(201, 169, 97, 0.18);
border-color: var(--accent);
color: var(--accent);
opacity: 1;
}
.guess-btn.wrong {
background: rgba(180, 60, 60, 0.12);
border-color: rgba(180, 60, 60, 0.5);
color: #c07070;
opacity: 1;
}
/* ── Fact reveal panel ── */
.fact-panel {
width: 100%;
max-width: 640px;
min-height: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.6s var(--ease-scene), opacity 0.5s var(--ease), margin 0.5s var(--ease);
margin-bottom: 0;
border: 1px solid transparent;
}
.fact-panel.show {
max-height: 220px;
opacity: 1;
margin-bottom: 24px;
border-color: var(--line);
background: var(--surface);
padding: 24px 28px;
box-shadow: var(--shadow-soft);
}
.fact-panel .fact-era {
font-family: var(--serif);
font-size: 24px;
color: var(--accent);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.fact-panel .fact-text {
font-size: 15px;
line-height: 1.65;
color: var(--ink);
opacity: 0.85;
max-width: 60ch;
}
.fact-panel .next-row {
margin-top: 18px;
display: flex;
justify-content: flex-end;
}
.btn-next {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bg);
background: var(--accent);
border: none;
padding: 12px 28px;
cursor: pointer;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-next:hover {
background: #d4b870;
transform: translateY(-1px);
}
/* ── Overlays ── */
.overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(13, 13, 15, 0.88);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--ease);
backdrop-filter: blur(8px);
}
.overlay.show {
opacity: 1;
pointer-events: auto;
}
.overlay-card {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 48px 52px;
max-width: 440px;
width: 90%;
text-align: center;
transform: translateY(16px);
transition: transform 0.55s var(--ease-out);
}
.overlay.show .overlay-card {
transform: translateY(0);
}
.overlay-card .eyebrow {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.overlay-card h2 {
font-family: var(--serif);
font-size: 38px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
margin-bottom: 12px;
}
.overlay-card .score-big {
font-family: var(--serif);
font-size: 50px;
color: var(--accent);
line-height: 1;
margin: 20px 0 8px;
}
.overlay-card .score-sub {
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 28px;
}
.overlay-card p.blurb {
font-size: 15px;
color: var(--ink);
opacity: 0.8;
line-height: 1.65;
margin-bottom: 32px;
}
.btn-primary {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bg);
background: var(--accent);
border: none;
padding: 14px 36px;
cursor: pointer;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-primary:hover {
background: #d4b870;
transform: translateY(-1px);
}
.best-badge {
display: inline-block;
margin-top: 16px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
border-top: 1px solid var(--line-subtle);
padding-top: 16px;
width: 100%;
}
/* ── Progress dots ── */
.progress {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 28px;
}
.progress .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--line-subtle);
border: 1px solid var(--line);
transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.progress .dot.done {
background: var(--accent-dim);
border-color: var(--accent-dim);
}
.progress .dot.current {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(201,169,97,0.45);
}
/* ── Responsive ── */
@media (max-width: 560px) {
.wordmark { font-size: 16px; max-width: 200px; letter-spacing: 0.14em; }
header.brand-bar { padding: 0 16px; height: 64px; }
:root { --header-h: 64px; }
.game-title h1 { font-size: 28px; }
.guesses { grid-template-columns: 1fr; }
.overlay-card { padding: 36px 28px; }
.overlay-card h2 { font-size: 28px; }
.meta-value { font-size: 22px; }
}
</style>
</head>
<body>
<header class="brand-bar">
<div class="wordmark">Designer Wallcoverings</div>
</header>
<div class="app">
<div class="meta-bar">
<div class="meta-group">
<div><span class="meta-label">Round</span><span class="meta-value" id="roundNum">1</span><span class="meta-label"> / 8</span></div>
</div>
<div class="meta-group">
<div><span class="meta-label">Score</span><span class="meta-value" id="scoreNum">0</span></div>
<div><span class="meta-label">Best</span><span class="meta-value" id="bestNum">0</span></div>
</div>
</div>
<div class="progress" id="progress"></div>
<div class="game-title">
<h1>Which Design Era?</h1>
<p>Study the room · Trust your eye</p>
</div>
<div class="stage" id="stage">
<!-- Victorian -->
<div class="vignette era-victorian" data-era="victorian">
<div class="wall"></div>
<div class="wainscot"></div>
<div class="floor"></div>
<div class="fireplace">
<div class="fp-mantel"></div>
<div class="fp-body">
<div class="fp-opening"></div>
</div>
</div>
<div class="portrait"></div>
<div class="candelabra"></div>
</div>
<!-- Art Deco -->
<div class="vignette era-deco" data-era="deco">
<div class="wall"></div>
<div class="frieze"></div>
<div class="floor"></div>
<div class="fan"><div class="fan-arc"></div></div>
<div class="console"></div>
<div class="mirror"></div>
</div>
<!-- Mid-Century Modern -->
<div class="vignette era-mcm" data-era="mcm">
<div class="wall"></div>
<div class="panel-wall"></div>
<div class="floor"></div>
<div class="lounge">
<div class="lounge-back"></div>
<div class="lounge-seat"></div>
<div class="lounge-leg l"></div>
<div class="lounge-leg r"></div>
</div>
<div class="table"></div>
<div class="lamp"></div>
<div class="plant">
<div class="plant-leaf a"></div>
<div class="plant-leaf b"></div>
<div class="plant-leaf c"></div>
<div class="plant-pot"></div>
</div>
<div class="clock">
<div class="clock-rays"></div>
<div class="clock-face"></div>
</div>
</div>
<!-- Grandmillennial -->
<div class="vignette era-grand" data-era="grand">
<div class="wall"></div>
<div class="valance"></div>
<div class="floor"></div>
<div class="frame f1"></div>
<div class="frame f2"></div>
<div class="frame f3"></div>
<div class="sofa">
<div class="sofa-back"></div>
<div class="sofa-body"></div>
<div class="sofa-arm l"></div>
<div class="sofa-arm r"></div>
<div class="sofa-skirt"></div>
</div>
<div class="pillow p1"></div>
<div class="pillow p2"></div>
<div class="pillow p3"></div>
<div class="side-table">
<div class="st-top"></div>
<div class="st-body"></div>
</div>
<div class="jar"></div>
</div>
</div>
<div class="guesses" id="guesses">
<button class="guess-btn" data-guess="victorian">Victorian</button>
<button class="guess-btn" data-guess="deco">Art Deco</button>
<button class="guess-btn" data-guess="mcm">Mid-Century Modern</button>
<button class="guess-btn" data-guess="grand">Grandmillennial</button>
</div>
<div class="fact-panel" id="factPanel">
<div class="fact-era" id="factEra"></div>
<div class="fact-text" id="factText"></div>
<div class="next-row">
<button class="btn-next" id="btnNext">Next Round</button>
</div>
</div>
</div>
<!-- Start overlay -->
<div class="overlay show" id="startOverlay">
<div class="overlay-card">
<div class="eyebrow">Designer Wallcoverings</div>
<h2>Which Design Era?</h2>
<p class="blurb">Eight rooms. Four eras. Read the silhouettes, the motifs, the mood — then name the period. A cultivated eye is the only tool required.</p>
<button class="btn-primary" id="btnStart">Begin</button>
<div class="best-badge" id="startBest"></div>
</div>
</div>
<!-- End overlay -->
<div class="overlay" id="endOverlay">
<div class="overlay-card">
<div class="eyebrow" id="endEyebrow">Session Complete</div>
<h2 id="endTitle">Well Seen</h2>
<div class="score-big" id="endScore">0</div>
<div class="score-sub">of 8 correct</div>
<p class="blurb" id="endBlurb"></p>
<button class="btn-primary" id="btnRestart">Play Again</button>
<div class="best-badge" id="endBest"></div>
</div>
</div>
<script>
(function () {
const ERAS = {
victorian: {
name: 'Victorian',
fact: 'Victorian interiors reveled in ornament: damask wallpapers, dark carved woods, and layered textiles signaled prosperity. The industrial age made elaborate pattern newly affordable — and maximalism became a moral virtue.'
},
deco: {
name: 'Art Deco',
fact: 'Born of the 1925 Paris Exposition, Art Deco married machine-age geometry with luxe materials — lacquer, brass, sunburst motifs. It was glamour engineered for the skyscraper century.'
},
mcm: {
name: 'Mid-Century Modern',
fact: 'Post-war optimism shaped MCM: organic curves, tapered legs, open plans, and honest materials. Designers like Eames and Nelson made modernism warm, democratic, and quietly radical.'
},
grand: {
name: 'Grandmillennial',
fact: 'A 21st-century revival of heirloom comfort — chinoiserie, skirted sofas, scallops, and collected clutter. Grandmillennial style says tradition is not nostalgia; it is curation with a wink.'
}
};
const ERA_KEYS = Object.keys(ERAS);
const TOTAL = 8;
let round = 0;
let score = 0;
let sequence = [];
let answered = false;
let best = parseInt(localStorage.getItem('dw-era-best') || '0', 10);
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);
const roundNum = $('#roundNum');
const scoreNum = $('#scoreNum');
const bestNum = $('#bestNum');
const factPanel = $('#factPanel');
const factEra = $('#factEra');
const factText = $('#factText');
const btnNext = $('#btnNext');
const progress = $('#progress');
const startOverlay = $('#startOverlay');
const endOverlay = $('#endOverlay');
bestNum.textContent = best;
$('#startBest').textContent = best > 0 ? 'Best score · ' + best + ' / 8' : 'No best score yet';
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('div');
d.className = 'dot' + (i === 0 ? ' current' : '');
progress.appendChild(d);
}
}
function updateProgress() {
const dots = progress.querySelectorAll('.dot');
dots.forEach((d, i) => {
d.className = 'dot';
if (i < round) d.classList.add('done');
if (i === round) d.classList.add('current');
});
}
function showVignette(eraKey) {
$$('.vignette').forEach(v => v.classList.remove('active'));
const el = document.querySelector('.vignette[data-era="' + eraKey + '"]');
if (el) {
// Force reflow for transition
void el.offsetWidth;
el.classList.add('active');
}
}
function resetButtons() {
$$('.guess-btn').forEach(b => {
b.disabled = false;
b.classList.remove('correct', 'wrong');
});
}
function startRound() {
answered = false;
factPanel.classList.remove('show');
resetButtons();
roundNum.textContent = round + 1;
updateProgress();
showVignette(sequence[round]);
btnNext.textContent = round === TOTAL - 1 ? 'See Results' : 'Next Round';
}
function handleGuess(guess) {
if (answered) return;
answered = true;
const correct = sequence[round];
const buttons = $$('.guess-btn');
buttons.forEach(b => {
b.disabled = true;
const g = b.getAttribute('data-guess');
if (g === correct) b.classList.add('correct');
else if (g === guess && g !== correct) b.classList.add('wrong');
});
if (guess === correct) {
score++;
scoreNum.textContent = score;
}
factEra.textContent = ERAS[correct].name;
factText.textContent = ERAS[correct].fact;
factPanel.classList.add('show');
}
function nextRound() {
round++;
if (round >= TOTAL) {
endGame();
} else {
startRound();
}
}
function endGame() {
if (score > best) {
best = score;
localStorage.setItem('dw-era-best', String(best));
bestNum.textContent = best;
}
const titles = [
'A Fresh Eye',
'Getting Warmer',
'Cultivated Taste',
'Discerning',
'Impeccable'
];
const blurbs = [
'Every connoisseur begins somewhere. Walk the rooms again — the details will start to speak.',
'You caught more than a few signatures. Another pass will sharpen the instinct.',
'A solid reading of form and period. The decorative arts reward exactly this kind of attention.',
'You have the eye. Motif, silhouette, and palette rarely fool you.',
'Flawless. You move through eras the way a curator moves through a gallery.'
];
let idx = score <= 2 ? 0 : score <= 4 ? 1 : score <= 6 ? 2 : score === 7 ? 3 : 4;
$('#endTitle').textContent = titles[idx];
$('#endScore').textContent = score;
$('#endBlurb').textContent = blurbs[idx];
$('#endBest').textContent = 'Best score · ' + best + ' / 8';
$('#endEyebrow').textContent = score === 8 ? 'Perfect Session' : 'Session Complete';
endOverlay.classList.add('show');
}
function startGame() {
round = 0;
score = 0;
scoreNum.textContent = '0';
buildSequence();
buildProgress();
startOverlay.classList.remove('show');
endOverlay.classList.remove('show');
startRound();
}
// Events
$('#btnStart').addEventListener('click', startGame);
$('#btnRestart').addEventListener('click', startGame);
btnNext.addEventListener('click', nextRound);
$$('.guess-btn').forEach(btn => {
btn.addEventListener('click', () => handleGuess(btn.getAttribute('data-guess')));
});
})();
</script>
</body>
</html>