← back to Model Arena
data/artifacts/0219528ac7d7/gpt.html
1732 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Which Design Era? – Designer Wallcoverings</title>
<style>
:root {
/* DESIGN TOKENS */
--bg: #0d0d0f;
--surface: #17171c;
--surface-soft: #1f1f26;
--surface-subtle: #111118;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* metallic gold */
--accent-soft: #7d6a45;
--line: rgba(201,169,97,0.24);
--shadow-soft: 0 22px 45px rgba(0,0,0,0.55);
--shadow-subtle: 0 10px 30px rgba(0,0,0,0.4);
--radius-lg: 18px;
--radius-md: 12px;
--radius-pill: 999px;
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--border-hairline: 1px solid var(--line);
--font-display: "Playfair Display", "Bodoni MT", "Didot", "Times New Roman", serif;
--font-serif: "EB Garamond", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
--font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", -apple-system, sans-serif;
--fs-display: 3.8rem;
--fs-h1: 3.1rem;
--fs-h2: 2.4rem;
--fs-body: 1rem;
--fs-small-label: 0.72rem;
}
/* GLOBAL */
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background: radial-gradient(circle at top, #191922 0, var(--bg) 48%, #050506 100%);
color: var(--text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* HEADER / WORDMARK */
.app-shell {
max-width: 1080px;
margin: 0 auto;
padding: 92px 32px 40px;
}
.app-header {
position: fixed;
inset: 0 auto auto 0;
width: 100%;
z-index: 20;
backdrop-filter: blur(16px);
background:
linear-gradient(to bottom, rgba(13,13,15,0.96), rgba(13,13,15,0.88), rgba(13,13,15,0.75));
border-bottom: var(--border-hairline);
}
.header-inner {
max-width: 1080px;
margin: 0 auto;
padding: 18px 32px 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.brand-lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.wordmark {
font-family: var(--font-serif);
font-size: 42px;
line-height: 1.05;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
white-space: normal;
max-width: 280px;
}
.wordmark span {
display: block;
}
.header-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 12px 24px;
font-family: var(--font-sans);
}
.meta-pill {
font-size: var(--fs-small-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.35);
padding: 6px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
background: radial-gradient(circle at top left, rgba(201,169,97,0.16), transparent 55%);
}
.meta-pill strong {
color: var(--accent);
font-weight: 600;
}
.meta-separator {
width: 1px;
height: 22px;
background: linear-gradient(to bottom, transparent, rgba(201,169,97,0.7), transparent);
}
/* MAIN LAYOUT */
main {
flex: 1;
display: flex;
align-items: stretch;
justify-content: center;
}
.game-shell {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
gap: 28px;
align-items: stretch;
}
@media (max-width: 880px) {
.app-shell {
padding-inline: 20px;
padding-top: 88px;
}
.header-inner {
padding-inline: 20px;
}
.wordmark {
font-size: 38px;
}
.game-shell {
grid-template-columns: minmax(0,1fr);
}
}
/* GAME CARD */
.panel {
border-radius: var(--radius-lg);
background:
radial-gradient(circle at top left, rgba(201,169,97,0.12), transparent 55%),
linear-gradient(145deg, var(--surface) 0, var(--surface-soft) 45%, #101017 100%);
border: var(--border-hairline);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.panel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.06), transparent 30%),
radial-gradient(circle at 120% -20%, rgba(201,169,97,0.23), transparent 44%);
opacity: 0.55;
mix-blend-mode: screen;
pointer-events: none;
}
.panel-inner {
position: relative;
padding: 22px 22px 20px;
}
.panel-heading {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 18px;
}
.panel-title {
font-family: var(--font-display);
font-size: var(--fs-h2);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.panel-subtitle {
font-size: 0.85rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* VIGNETTE */
.vignette-shell {
border-radius: 16px;
border: 1px solid rgba(245,242,234,0.08);
background: radial-gradient(circle at top, rgba(201,169,97,0.22), transparent 60%), #101018;
box-shadow: var(--shadow-subtle);
padding: 14px;
position: relative;
overflow: hidden;
}
.vignette-inner {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--bg);
min-height: 260px;
max-height: 360px;
aspect-ratio: 4 / 3;
margin: 0 auto;
}
/* COMMON ROOM STRUCTURE */
.room {
position: relative;
width: 100%;
height: 100%;
color: inherit;
transition: transform 450ms var(--ease-hero), box-shadow 450ms var(--ease-hero);
}
.vignette-shell:hover .room {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.room-wall {
position: absolute;
inset: 0 0 30%;
}
.room-floor {
position: absolute;
height: 34%;
width: 140%;
left: -20%;
bottom: -10%;
background:
linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 28%),
radial-gradient(circle at center, rgba(0,0,0,0.65), transparent 60%);
transform: perspective(900px) rotateX(62deg);
transform-origin: top center;
filter: drop-shadow(0 32px 40px rgba(0,0,0,0.9));
}
/* ERA VARIATIONS */
/* Victorian: deep claret damask, ornate frame, tufted sofa */
.room--victorian .room-wall {
background:
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.16), transparent 40%),
repeating-linear-gradient(45deg,
#3c0714 0,
#3c0714 14px,
#2a040d 14px,
#2a040d 26px
),
radial-gradient(circle at 20% 0, rgba(136,62,72,0.6), rgba(18,4,7,1) 55%);
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 55%, rgba(0,0,0,0.9) 80%, transparent 95%);
}
.room--victorian .room-floor {
background:
repeating-linear-gradient(90deg,
#140607 0,
#140607 14px,
#210608 14px,
#210608 28px
),
radial-gradient(circle at center, rgba(0,0,0,0.7), transparent 65%);
}
/* Ornate frame */
.frame-victorian {
position: absolute;
width: 32%;
height: 38%;
left: 11%;
top: 14%;
border-radius: 18px;
background:
linear-gradient(145deg, #8f6a2e 0, #f3d69b 30%, #8a6327 55%, #f5e4c0 75%, #6b4a1e 100%);
padding: 4px;
box-shadow: 0 16px 32px rgba(0,0,0,0.85);
}
.frame-victorian-inner {
width: 100%;
height: 100%;
border-radius: 14px;
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,0.35), transparent 40%),
repeating-linear-gradient(135deg,
rgba(23,5,9,0.1) 0,
rgba(23,5,9,0.1) 6px,
rgba(80,17,33,0.4) 6px,
rgba(80,17,33,0.4) 12px
);
}
/* Tufted sofa */
.sofa-victorian {
position: absolute;
width: 54%;
height: 32%;
left: 30%;
bottom: 9%;
border-radius: 999px 999px 80px 80px;
background:
radial-gradient(circle at 20% 0, rgba(255,255,255,0.18), transparent 50%),
radial-gradient(circle at 80% 0, rgba(255,255,255,0.1), transparent 50%),
repeating-radial-gradient(circle at 50% 50%,
rgba(0,0,0,0.45) 0,
rgba(0,0,0,0.45) 2px,
rgba(122,45,54,0.45) 2px,
rgba(122,45,54,0.45) 6px
),
linear-gradient(145deg, #5a1d24 0, #8b333e 35%, #3b0f18 90%);
box-shadow: 0 26px 40px rgba(0,0,0,0.95);
}
.sofa-victorian-back {
position: absolute;
inset: -24% 10% 44%;
border-radius: 999px 999px 80px 80px;
background:
radial-gradient(circle at 20% 0, rgba(255,255,255,0.16), transparent 50%),
radial-gradient(circle at 80% 0, rgba(255,255,255,0.1), transparent 55%),
linear-gradient(145deg, #6d222a 0, #b64654 45%, #3a0e16 100%);
}
.sofa-victorian-leg {
position: absolute;
width: 16%;
height: 18%;
bottom: -10%;
border-radius: 999px;
background:
linear-gradient(180deg, #f5d497 0, #8b5f24 52%, #3e260e 100%);
box-shadow: 0 8px 12px rgba(0,0,0,0.9);
}
.sofa-victorian-leg.left { left: 18%; }
.sofa-victorian-leg.right { right: 18%; }
/* Victorian lamp */
.lamp-victorian {
position: absolute;
width: 9%;
height: 46%;
right: 17%;
bottom: 11%;
}
.lamp-victorian-base {
position: absolute;
bottom: 0;
left: 50%;
width: 26%;
height: 14%;
transform: translateX(-50%);
border-radius: 999px;
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.4), transparent 60%),
linear-gradient(145deg, #f2d8a3 0, #8c6732 55%, #3a2714 100%);
box-shadow: 0 10px 18px rgba(0,0,0,0.9);
}
.lamp-victorian-stem {
position: absolute;
bottom: 14%;
left: 50%;
width: 6%;
height: 34%;
transform: translateX(-50%);
background:
linear-gradient(180deg, #f5e7c5 0, #c8a461 40%, #755325 100%);
}
.lamp-victorian-shade {
position: absolute;
bottom: 48%;
left: 50%;
width: 120%;
height: 52%;
transform: translateX(-50%);
border-radius: 999px 999px 40% 40%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.7), transparent 70%),
linear-gradient(180deg, #fff7e0 0, #f0d5a7 55%, #c09d67 100%);
box-shadow: 0 18px 30px rgba(0,0,0,0.75);
}
/* Art Deco: geometric fan wall, stepped console, sunburst mirror */
.room--artdeco .room-wall {
background:
repeating-linear-gradient(135deg,
#06141c 0,
#06141c 10px,
#051118 10px,
#051118 20px
),
radial-gradient(circle at 10% 0, rgba(12,78,93,0.8), transparent 60%),
radial-gradient(circle at 90% 0, rgba(10,32,57,0.9), transparent 70%);
}
.room--artdeco .room-floor {
background:
repeating-linear-gradient(45deg,
#05080b 0,
#05080b 14px,
#14171c 14px,
#14171c 28px
);
}
/* Deco console */
.console-deco {
position: absolute;
width: 54%;
height: 20%;
left: 23%;
bottom: 13%;
background:
linear-gradient(145deg, #10141a 0, #293540 40%, #0a0f14 100%);
clip-path: polygon(0 40%, 10% 0, 90% 0, 100% 40%, 100% 100%, 0 100%);
box-shadow: 0 18px 30px rgba(0,0,0,0.9);
}
.console-deco-inlay {
position: absolute;
inset: 15% 10% 14%;
border: 1px solid rgba(201,169,97,0.7);
background:
repeating-linear-gradient(90deg,
rgba(201,169,97,0.16) 0,
rgba(201,169,97,0.16) 8px,
transparent 8px,
transparent 16px
);
}
/* Deco mirror */
.mirror-deco {
position: absolute;
width: 24%;
height: 32%;
left: 12%;
top: 18%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), rgba(184,214,230,0.2) 50%, rgba(0,0,0,0.7) 100%);
clip-path: polygon(50% 0, 88% 20%, 100% 60%, 73% 100%, 27% 100%, 0 60%, 12% 20%);
box-shadow: 0 20px 30px rgba(0,0,0,0.8);
}
.mirror-deco::before {
content: "";
position: absolute;
inset: 9%;
border-radius: 24px;
border: 3px double rgba(201,169,97,0.85);
background:
linear-gradient(145deg, rgba(255,255,255,0.7), rgba(206,213,220,0.2));
}
/* Deco lamp */
.lamp-deco {
position: absolute;
width: 11%;
height: 40%;
right: 18%;
bottom: 18%;
}
.lamp-deco-base {
position: absolute;
width: 40%;
height: 18%;
left: 50%;
bottom: 0;
transform: translateX(-50%);
background:
linear-gradient(145deg, #f4dfa6 0, #c9a961 40%, #6f5527 100%);
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
box-shadow: 0 12px 22px rgba(0,0,0,0.9);
}
.lamp-deco-stem {
position: absolute;
width: 10%;
height: 36%;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
background:
linear-gradient(180deg, #f8e8c0 0, #c9a961 50%, #84632c 100%);
}
.lamp-deco-shade {
position: absolute;
width: 120%;
height: 46%;
bottom: 52%;
left: 50%;
transform: translateX(-50%);
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
background:
linear-gradient(180deg, #f5f1e6 0, #e2cfaa 60%, #c29b63 100%);
box-shadow: 0 18px 28px rgba(0,0,0,0.8);
}
/* Mid-Century Modern: warm teak panel, low sofa, starburst clock */
.room--midcentury .room-wall {
background:
linear-gradient(180deg,
rgba(0,0,0,0.4) 0,
transparent 40%
),
repeating-linear-gradient(90deg,
#1c120b 0,
#1c120b 18px,
#2a1810 18px,
#2a1810 36px
),
radial-gradient(circle at top right, rgba(235,166,95,0.5), transparent 70%);
}
.room--midcentury .room-floor {
background:
linear-gradient(180deg, #171310 0, #0b0705 100%);
}
/* Mid-century sofa */
.sofa-mid {
position: absolute;
width: 60%;
height: 22%;
left: 22%;
bottom: 16%;
border-radius: 24px 24px 18px 18px;
background:
radial-gradient(circle at 20% 0, rgba(255,255,255,0.25), transparent 48%),
radial-gradient(circle at 80% 0, rgba(255,255,255,0.18), transparent 50%),
linear-gradient(145deg, #f2b88d 0, #d97a4b 38%, #9d4b30 90%);
box-shadow: 0 18px 32px rgba(0,0,0,0.9);
}
.sofa-mid-seat {
position: absolute;
inset: 46% 6% 12%;
border-radius: 18px;
background:
linear-gradient(145deg, #f8c89d 0, #e18a53 40%, #b35532 90%);
}
.sofa-mid-leg {
position: absolute;
width: 8%;
height: 32%;
bottom: -18%;
border-radius: 999px;
background:
linear-gradient(180deg, #f7e5c7 0, #b98844 55%, #4d2c11 100%);
box-shadow: 0 12px 16px rgba(0,0,0,0.9);
}
.sofa-mid-leg.left { left: 18%; }
.sofa-mid-leg.mid { left: 46%; }
.sofa-mid-leg.right { right: 18%; }
/* Plant */
.plant-mid {
position: absolute;
width: 14%;
height: 40%;
right: 10%;
bottom: 17%;
}
.plant-mid-pot {
position: absolute;
width: 52%;
height: 28%;
left: 50%;
bottom: 0;
transform: translateX(-50%);
border-radius: 0 0 18px 18px;
background:
linear-gradient(145deg, #f5f1e6 0, #d0c4aa 40%, #95856e 100%);
box-shadow: 0 16px 22px rgba(0,0,0,0.8);
}
.plant-mid-leaf {
position: absolute;
width: 46%;
height: 46%;
bottom: 20%;
border-radius: 50% 50% 40% 40%;
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,0.3), transparent 60%),
linear-gradient(145deg, #2f6b33 0, #5f9142 40%, #1c3c24 100%);
}
.plant-mid-leaf.left {
left: 2%;
transform: rotate(-16deg);
}
.plant-mid-leaf.right {
right: 2%;
transform: rotate(18deg);
}
.plant-mid-leaf.center {
left: 27%;
bottom: 32%;
height: 52%;
transform: rotate(0deg);
}
/* Starburst clock */
.clock-mid {
position: absolute;
width: 16%;
height: 28%;
left: 14%;
top: 18%;
}
.clock-mid-core {
position: absolute;
width: 42%;
height: 42%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.8), transparent 55%),
linear-gradient(145deg, #f8f4ea 0, #d9cfb9 60%, #9e8f75 100%);
box-shadow: 0 8px 16px rgba(0,0,0,0.7);
}
.clock-mid-ray {
position: absolute;
width: 8%;
height: 52%;
left: 50%;
top: 50%;
transform-origin: 50% 100%;
background:
linear-gradient(180deg, #f2d6a0 0, #c09a5a 65%, #6f4c26 100%);
border-radius: 999px;
box-shadow: 0 8px 10px rgba(0,0,0,0.7);
}
/* Grandmillennial: floral wallpaper, skirted armchair, pleated shade */
.room--grandmillennial .room-wall {
background:
radial-gradient(circle at 12% 0, rgba(255,255,255,0.25), transparent 50%),
radial-gradient(circle at 80% 0, rgba(253,222,230,0.35), transparent 60%),
repeating-linear-gradient(90deg,
#f7f1e8 0,
#f7f1e8 28px,
#f0e5d6 28px,
#f0e5d6 56px
);
mask-image: radial-gradient(circle at 30% -30%, transparent 0, rgba(0,0,0,1) 40%);
}
.room--grandmillennial .room-floor {
background:
repeating-linear-gradient(45deg,
#d6c0aa 0,
#d6c0aa 16px,
#c1a587 16px,
#c1a587 32px
);
}
/* Floral overlay */
.wall-floral {
position: absolute;
inset: 8% 10% 40%;
background-image:
radial-gradient(circle at 10% 20%, #d8849d 0, transparent 45%),
radial-gradient(circle at 34% 60%, #7db281 0, transparent 36%),
radial-gradient(circle at 70% 30%, #e7a79b 0, transparent 40%),
radial-gradient(circle at 90% 70%, #7da7c7 0, transparent 34%);
opacity: 0.6;
}
/* Armchair */
.chair-grand {
position: absolute;
width: 40%;
height: 32%;
left: 20%;
bottom: 16%;
border-radius: 32px 32px 22px 22px;
background:
radial-gradient(circle at 18% 0, rgba(255,255,255,0.7), transparent 50%),
radial-gradient(circle at 80% 10%, rgba(255,255,255,0.5), transparent 55%),
repeating-linear-gradient(135deg,
#f7f1e8 0,
#f7f1e8 10px,
#e3d7c1 10px,
#e3d7c1 20px
);
box-shadow: 0 18px 34px rgba(0,0,0,0.9);
}
.chair-grand-back {
position: absolute;
inset: -28% 6% 40%;
border-radius: 32px 32px 26px 26px;
background:
radial-gradient(circle at 20% 0, rgba(255,255,255,0.8), transparent 55%),
repeating-linear-gradient(135deg,
#f9f4ec 0,
#f9f4ec 12px,
#e4d7c4 12px,
#e4d7c4 24px
);
}
/* Skirt */
.chair-grand-skirt {
position: absolute;
inset: 56% 0 -8%;
border-radius: 0 0 28px 28px;
background:
repeating-linear-gradient(90deg,
#f2e7d8 0,
#f2e7d8 16px,
#e0cfb8 16px,
#e0cfb8 32px
);
}
/* Side table & lamp */
.table-grand {
position: absolute;
width: 18%;
height: 22%;
right: 18%;
bottom: 18%;
border-radius: 50% 50% 40% 40%;
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.7), transparent 60%),
linear-gradient(145deg, #f7efe5 0, #d9c4aa 50%, #a0825f 100%);
box-shadow: 0 18px 28px rgba(0,0,0,0.85);
}
.lamp-grand {
position: absolute;
width: 60%;
height: 80%;
left: 50%;
bottom: 18%;
transform: translateX(-50%);
}
.lamp-grand-stem {
position: absolute;
width: 18%;
height: 38%;
left: 50%;
bottom: 20%;
transform: translateX(-50%);
background:
linear-gradient(180deg, #f6e7cc 0, #c9a961 55%, #8c6a36 100%);
}
.lamp-grand-shade {
position: absolute;
width: 138%;
height: 54%;
left: 50%;
bottom: 52%;
transform: translateX(-50%);
border-radius: 999px 999px 40% 40%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.8), transparent 60%),
repeating-linear-gradient(135deg,
#f9f4ec 0,
#f9f4ec 12px,
#e0d1c4 12px,
#e0d1c4 24px
);
box-shadow: 0 18px 28px rgba(0,0,0,0.7);
}
/* GAME CONTROLS PANEL */
.sidebar {
border-radius: var(--radius-lg);
background:
radial-gradient(circle at top right, rgba(201,169,97,0.12), transparent 60%),
linear-gradient(145deg, #14141b 0, #17171f 40%, #101018 100%);
border: var(--border-hairline);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.sidebar::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 40%),
radial-gradient(circle at top left, rgba(201,169,97,0.18), transparent 55%);
opacity: 0.75;
mix-blend-mode: screen;
pointer-events: none;
}
.sidebar-inner {
position: relative;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
height: 100%;
}
.stats-row {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin-bottom: 18px;
}
.stat-chip {
font-family: var(--font-sans);
font-size: var(--fs-small-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 10px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.1);
background: radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 60%);
display: inline-flex;
align-items: center;
gap: 6px;
}
.stat-value {
color: var(--accent);
font-weight: 600;
}
.progress-bar {
height: 4px;
border-radius: 999px;
background: rgba(245,242,234,0.08);
overflow: hidden;
margin-bottom: 18px;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #f5f2ea 0, var(--accent) 45%, #f5f2ea 100%);
transition: width 320ms var(--ease-swift);
}
.question-copy {
margin-bottom: 18px;
}
.question-title {
font-family: var(--font-display);
font-size: 1.2rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 6px;
}
.question-lead {
font-size: 0.95rem;
color: var(--muted);
}
/* BUTTONS */
.options-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 14px;
}
.option-btn {
position: relative;
border-radius: 999px;
padding: 10px 16px 11px;
border: 1px solid rgba(245,242,234,0.14);
background:
radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 55%),
linear-gradient(145deg, rgba(23,23,28,0.96) 0, rgba(16,16,22,0.96) 60%, rgba(9,9,14,0.98) 100%);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition:
background 260ms var(--ease-swift),
transform 260ms var(--ease-swift),
box-shadow 260ms var(--ease-swift),
border-color 260ms var(--ease-swift),
color 260ms var(--ease-swift);
}
.option-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.option-main {
font-weight: 600;
}
.option-sub {
text-transform: none;
letter-spacing: 0.08em;
font-size: 0.72rem;
color: var(--muted);
}
.option-indicator {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(245,242,234,0.16);
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.65), transparent 75%),
linear-gradient(145deg, #25252f 0, #14141a 70%, #050508 100%);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
color: var(--muted);
flex-shrink: 0;
}
.option-btn:hover:not([disabled]) {
border-color: rgba(201,169,97,0.65);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0,0,0,0.7);
}
.option-btn:active:not([disabled]) {
transform: translateY(0);
box-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
/* States */
.option-btn.correct {
border-color: rgba(120,199,129,0.75);
background:
radial-gradient(circle at top left, rgba(157,230,151,0.26), transparent 60%),
linear-gradient(145deg, #253626 0, #1a261d 70%, #080c09 100%);
}
.option-btn.incorrect {
border-color: rgba(235,132,132,0.8);
background:
radial-gradient(circle at top left, rgba(245,198,198,0.2), transparent 55%),
linear-gradient(145deg, #3a1f1f 0, #251215 70%, #090507 100%);
}
.option-btn.correct .option-indicator {
border-color: rgba(157,230,151,0.9);
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.8), transparent 70%),
linear-gradient(145deg, #60b96b 0, #295934 70%, #122017 100%);
color: #ecf8ee;
}
.option-btn.incorrect .option-indicator {
border-color: rgba(245,180,180,0.85);
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.8), transparent 70%),
linear-gradient(145deg, #c55955 0, #6b2423 70%, #160707 100%);
color: #f9ecec;
}
/* Footer row */
.sidebar-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(245,242,234,0.06);
}
.status-pill {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.primary-btn {
border-radius: var(--radius-pill);
padding: 9px 18px 10px;
border: 1px solid rgba(201,169,97,0.7);
background:
radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 65%),
linear-gradient(145deg, #f5f2ea 0, #d4c6a7 44%, #b89a5f 100%);
color: #16120b;
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition:
transform 200ms var(--ease-swift),
box-shadow 200ms var(--ease-swift),
background 220ms var(--ease-swift),
border-color 220ms var(--ease-swift);
box-shadow: 0 14px 28px rgba(0,0,0,0.8);
}
.primary-btn:hover:not([disabled]) {
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(0,0,0,0.9);
}
.primary-btn:active:not([disabled]) {
transform: translateY(0);
box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}
.primary-btn[disabled],
.option-btn[disabled] {
cursor: default;
opacity: 0.7;
}
/* Fun fact */
.fact-box {
margin-top: 12px;
padding: 12px 14px 11px;
border-radius: 12px;
border: 1px dashed rgba(245,242,234,0.22);
background:
radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 55%),
linear-gradient(145deg, rgba(11,11,16,0.95), rgba(17,17,23,0.96));
font-size: 0.83rem;
color: var(--muted);
display: none;
}
.fact-era {
font-family: var(--font-serif);
font-size: 0.9rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.fact-text {
font-size: 0.85rem;
}
/* OVERLAY */
.overlay {
position: fixed;
inset: 0;
background: radial-gradient(circle at top, rgba(10,10,14,0.96), rgba(3,3,6,0.98));
display: none;
align-items: center;
justify-content: center;
z-index: 40;
}
.overlay.active {
display: flex;
}
.overlay-panel {
max-width: 460px;
margin: 0 20px;
border-radius: 20px;
border: 1px solid rgba(201,169,97,0.7);
background:
radial-gradient(circle at top left, rgba(201,169,97,0.24), transparent 60%),
linear-gradient(145deg, #14141b 0, #1b1b23 50%, #09090e 100%);
box-shadow: 0 28px 70px rgba(0,0,0,0.95);
padding: 22px 22px 18px;
position: relative;
overflow: hidden;
}
.overlay-panel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom right, rgba(255,255,255,0.12), transparent 55%);
opacity: 0.7;
mix-blend-mode: screen;
pointer-events: none;
}
.overlay-body {
position: relative;
}
.overlay-label {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.overlay-title {
font-family: var(--font-display);
font-size: 1.7rem;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 8px;
}
.overlay-score {
font-size: 0.98rem;
color: var(--muted);
margin-bottom: 12px;
}
.overlay-score strong {
color: var(--accent);
}
.overlay-fact {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(245,242,234,0.16);
background:
radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 60%),
linear-gradient(145deg, rgba(16,16,22,0.96), rgba(9,9,14,0.98));
font-size: 0.86rem;
color: var(--muted);
}
.overlay-actions {
margin-top: 16px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.secondary-btn {
border-radius: var(--radius-pill);
padding: 8px 16px 9px;
border: 1px solid rgba(245,242,234,0.22);
background:
radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 55%),
linear-gradient(145deg, #14141b 0, #09090e 85%);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition:
transform 200ms var(--ease-swift),
box-shadow 200ms var(--ease-swift),
border-color 220ms var(--ease-swift),
background 220ms var(--ease-swift);
}
.secondary-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(0,0,0,0.8);
border-color: rgba(245,242,234,0.34);
}
/* Utility */
.hidden {
display: none !important;
}
</style>
</head>
<body>
<header class="app-header">
<div class="header-inner">
<div class="brand-lockup">
<div class="wordmark" aria-label="Designer Wallcoverings">
<span>DESIGNER</span>
<span>WALLCOVERINGS</span>
</div>
</div>
<div class="header-meta">
<div class="meta-pill">
<span>Which Design Era?</span>
<span class="meta-separator" aria-hidden="true"></span>
<span><strong>Guess the Room</strong></span>
</div>
<div class="meta-pill">
<span>Best Streak</span>
<span class="stat-value" id="headerBestScore">0 / 8</span>
</div>
</div>
</div>
</header>
<main>
<div class="app-shell">
<section class="game-shell" aria-label="Design Era Guessing Game">
<!-- Vignette Panel -->
<article class="panel" aria-hidden="true">
<div class="panel-inner">
<div class="panel-heading">
<h1 class="panel-title">The Room</h1>
<div class="panel-subtitle">Rendered in CSS & gradients</div>
</div>
<div class="vignette-shell">
<div class="vignette-inner">
<div class="room room--victorian" id="room">
<div class="room-wall"></div>
<div class="room-floor"></div>
<!-- Shared elements swap via JS by toggling classes -->
<!-- Victorian set -->
<div class="frame-victorian"></div>
<div class="frame-victorian-inner"></div>
<div class="sofa-victorian">
<div class="sofa-victorian-back"></div>
<div class="sofa-victorian-leg left"></div>
<div class="sofa-victorian-leg right"></div>
</div>
<div class="lamp-victorian">
<div class="lamp-victorian-base"></div>
<div class="lamp-victorian-stem"></div>
<div class="lamp-victorian-shade"></div>
</div>
<!-- Art Deco set -->
<div class="console-deco hidden"></div>
<div class="console-deco-inlay hidden"></div>
<div class="mirror-deco hidden"></div>
<div class="lamp-deco hidden">
<div class="lamp-deco-base"></div>
<div class="lamp-deco-stem"></div>
<div class="lamp-deco-shade"></div>
</div>
<!-- Mid-century set -->
<div class="sofa-mid hidden">
<div class="sofa-mid-seat"></div>
<div class="sofa-mid-leg left"></div>
<div class="sofa-mid-leg mid"></div>
<div class="sofa-mid-leg right"></div>
</div>
<div class="plant-mid hidden">
<div class="plant-mid-pot"></div>
<div class="plant-mid-leaf left"></div>
<div class="plant-mid-leaf center"></div>
<div class="plant-mid-leaf right"></div>
</div>
<div class="clock-mid hidden">
<div class="clock-mid-core"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(0deg);"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(30deg);"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(60deg);"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(90deg);"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(120deg);"></div>
<div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(150deg);"></div>
</div>
<!-- Grandmillennial set -->
<div class="wall-floral hidden"></div>
<div class="chair-grand hidden">
<div class="chair-grand-back"></div>
<div class="chair-grand-skirt"></div>
</div>
<div class="table-grand hidden">
<div class="lamp-grand">
<div class="lamp-grand-stem"></div>
<div class="lamp-grand-shade"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Controls / Sidebar -->
<aside class="sidebar" aria-label="Game controls and status">
<div class="sidebar-inner">
<div class="stats-row">
<div class="stat-chip">
Round
<span class="stat-value" id="roundLabel">1 / 8</span>
</div>
<div class="stat-chip">
Score
<span class="stat-value" id="scoreLabel">0</span>
</div>
<div class="stat-chip">
Best
<span class="stat-value" id="bestScoreLabel">0</span>
</div>
</div>
<div class="progress-bar" aria-hidden="true">
<div class="progress-fill" id="progressFill"></div>
</div>
<header class="question-copy">
<div class="question-title">Which design era is this?</div>
<div class="question-lead">
Study the wall treatment, silhouettes and metalwork. Then trust your inner decorator.
</div>
</header>
<div class="options-grid" role="radiogroup" aria-label="Design era choices">
<button class="option-btn" data-era="victorian">
<span class="option-label">
<span class="option-main">Victorian</span>
<span class="option-sub">High ornament, saturated hues</span>
</span>
<span class="option-indicator">Pick</span>
</button>
<button class="option-btn" data-era="artdeco">
<span class="option-label">
<span class="option-main">Art Deco</span>
<span class="option-sub">Glam geometry & chrome glamour</span>
</span>
<span class="option-indicator">Pick</span>
</button>
<button class="option-btn" data-era="midcentury">
<span class="option-label">
<span class="option-main">Mid-Century Modern</span>
<span class="option-sub">Low lines, teak & optimism</span>
</span>
<span class="option-indicator">Pick</span>
</button>
<button class="option-btn" data-era="grandmillennial">
<span class="option-label">
<span class="option-main">Grandmillennial</span>
<span class="option-sub">Chintz, pleats & pretty pattern</span>
</span>
<span class="option-indicator">Pick</span>
</button>
</div>
<div class="fact-box" id="factBox">
<div class="fact-era" id="factEra">Victorian</div>
<div class="fact-text" id="factText">
Victorian interiors celebrated maximalism: layered textiles, carved wood and jewel-toned walls.
</div>
</div>
<div class="sidebar-footer">
<div class="status-pill" id="statusPill">
Round 1 · Make your first guess
</div>
<button class="primary-btn" id="nextBtn" disabled>
<span id="nextBtnLabel">Reveal</span>
<span aria-hidden="true">→</span>
</button>
</div>
</div>
</aside>
</section>
</div>
</main>
<!-- Overlay -->
<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="overlayTitle">
<div class="overlay-panel">
<div class="overlay-body">
<div class="overlay-label">Game Complete</div>
<h2 class="overlay-title" id="overlayTitle">Your Design Eye</h2>
<p class="overlay-score" id="overlayScore">You scored 0 out of 8.</p>
<p class="overlay-score" id="overlayBest">Best game so far: 0 / 8.</p>
<div class="overlay-fact" id="overlayFact">
Across Victorian, Art Deco, Mid-Century and Grandmillennial cues, you’re starting to think like a decorator —
notice how silhouette, pattern and metalwork betray an era.
</div>
<div class="overlay-actions">
<button class="secondary-btn" id="closeOverlayBtn">
<span>Back to Room</span>
</button>
<button class="primary-btn" id="restartBtn">
<span>Play Again</span>
<span aria-hidden="true">↻</span>
</button>
</div>
</div>
</div>
</div>
<script>
(function () {
const TOTAL_ROUNDS = 8;
const eras = [
{
id: "victorian",
name: "Victorian",
fact: "Victorian interiors celebrated maximalism — saturated damask walls, tufted seating, brass lamps and heavily carved frames layered into one lavish tableau."
},
{
id: "artdeco",
name: "Art Deco",
fact: "Art Deco design favors stepped silhouettes, fan motifs and gleaming metal inlays, echoing the glamour of early cinemas and grand city hotels."
},
{
id: "midcentury",
name: "Mid-Century Modern",
fact: "Mid-Century Modern rooms sit low and light on the floor: teak paneling, optimistic citrus upholstery and starburst clocks defined postwar cool."
},
{
id: "grandmillennial",
name: "Grandmillennial",
fact: "Grandmillennial style revives traditional chintz, skirts and pleated shades, but edited with airy palettes and a wink to nostalgia."
}
];
let currentRound = 1;
let score = 0;
let bestScore = 0;
let currentEra = null;
let hasGuessedThisRound = false;
let lastFactEra = "";
const room = document.getElementById("room");
const options = Array.from(document.querySelectorAll(".option-btn"));
const factBox = document.getElementById("factBox");
const factEra = document.getElementById("factEra");
const factText = document.getElementById("factText");
const roundLabel = document.getElementById("roundLabel");
const scoreLabel = document.getElementById("scoreLabel");
const bestScoreLabel = document.getElementById("bestScoreLabel");
const headerBestScore = document.getElementById("headerBestScore");
const progressFill = document.getElementById("progressFill");
const statusPill = document.getElementById("statusPill");
const nextBtn = document.getElementById("nextBtn");
const nextBtnLabel = document.getElementById("nextBtnLabel");
const overlay = document.getElementById("overlay");
const overlayScore = document.getElementById("overlayScore");
const overlayBest = document.getElementById("overlayBest");
const overlayFact = document.getElementById("overlayFact");
const closeOverlayBtn = document.getElementById("closeOverlayBtn");
const restartBtn = document.getElementById("restartBtn");
function safeGetBest() {
try {
const stored = localStorage.getItem("designEraBestScore");
if (stored != null) {
const val = parseInt(stored, 10);
if (!isNaN(val)) return val;
}
} catch (e) { /* ignore */ }
return 0;
}
function safeSetBest(value) {
try {
localStorage.setItem("designEraBestScore", String(value));
} catch (e) { /* ignore */ }
}
function updateBestScoreDisplay() {
bestScoreLabel.textContent = bestScore;
headerBestScore.textContent = bestScore + " / " + TOTAL_ROUNDS;
}
function applyEraToRoom(eraId) {
room.classList.remove("room--victorian", "room--artdeco", "room--midcentury", "room--grandmillennial");
room.classList.add("room--" + eraId);
const sets = {
victorian: [
".frame-victorian",
".frame-victorian-inner",
".sofa-victorian",
".lamp-victorian"
],
artdeco: [
".console-deco",
".console-deco-inlay",
".mirror-deco",
".lamp-deco"
],
midcentury: [
".sofa-mid",
".plant-mid",
".clock-mid"
],
grandmillennial: [
".wall-floral",
".chair-grand",
".table-grand"
]
};
const allSelectors = [
".frame-victorian", ".frame-victorian-inner", ".sofa-victorian", ".lamp-victorian",
".console-deco", ".console-deco-inlay", ".mirror-deco", ".lamp-deco",
".sofa-mid", ".plant-mid", ".clock-mid",
".wall-floral", ".chair-grand", ".table-grand"
];
allSelectors.forEach(sel => {
const el = room.querySelector(sel);
if (el) el.classList.add("hidden");
});
(sets[eraId] || []).forEach(sel => {
const el = room.querySelector(sel);
if (el) el.classList.remove("hidden");
});
}
function randomEra(excludeId) {
const pool = eras.filter(e => e.id !== excludeId);
return pool[Math.floor(Math.random() * pool.length)];
}
function updateProgress() {
const ratio = (currentRound - 1) / TOTAL_ROUNDS;
progressFill.style.width = (ratio * 100) + "%";
}
function resetOptionStates() {
options.forEach(btn => {
btn.classList.remove("correct", "incorrect");
btn.disabled = false;
const ind = btn.querySelector(".option-indicator");
if (ind) ind.textContent = "Pick";
});
}
function setStatus(text) {
statusPill.textContent = text;
}
function beginRound() {
hasGuessedThisRound = false;
currentEra = randomEra(currentEra ? currentEra.id : null);
applyEraToRoom(currentEra.id);
resetOptionStates();
factBox.style.display = "none";
roundLabel.textContent = currentRound + " / " + TOTAL_ROUNDS;
setStatus("Round " + currentRound + " · Choose an era");
nextBtnLabel.textContent = "Reveal";
nextBtn.disabled = true;
updateProgress();
}
function handleGuess(selectedId, btn) {
if (hasGuessedThisRound || !currentEra) return;
hasGuessedThisRound = true;
const isCorrect = selectedId === currentEra.id;
if (isCorrect) {
score += 1;
scoreLabel.textContent = score;
}
options.forEach(o => {
o.disabled = true;
const eraId = o.getAttribute("data-era");
const ind = o.querySelector(".option-indicator");
if (!ind) return;
if (eraId === currentEra.id) {
o.classList.add("correct");
ind.textContent = "Era";
} else if (o === btn && !isCorrect) {
o.classList.add("incorrect");
ind.textContent = "Guess";
} else {
ind.textContent = "•";
}
});
factEra.textContent = currentEra.name;
factText.textContent = currentEra.fact;
factBox.style.display = "block";
lastFactEra = currentEra.name;
if (isCorrect) {
setStatus("Correct — that was " + currentEra.name + ".");
} else {
setStatus("Not quite — it was " + currentEra.name + ".");
}
nextBtn.disabled = false;
if (currentRound === TOTAL_ROUNDS) {
nextBtnLabel.textContent = "View results";
} else {
nextBtnLabel.textContent = "Next room";
}
}
function openOverlay() {
overlay.classList.add("active");
overlayScore.textContent = "You scored " + score + " out of " + TOTAL_ROUNDS + ".";
const previousBest = bestScore;
if (score > bestScore) {
bestScore = score;
safeSetBest(bestScore);
updateBestScoreDisplay();
}
overlayBest.textContent = "Best game so far: " + bestScore + " / " + TOTAL_ROUNDS + ".";
let line;
const ratio = score / TOTAL_ROUNDS;
if (ratio === 1) {
line = "Flawless. You’re reading silhouettes, finishes and pattern the way a senior decorator does.";
} else if (ratio >= 0.75) {
line = "Beautiful work — your eye is picking up on the quiet clues each era leaves in its joinery and ornament.";
} else if (ratio >= 0.5) {
line = "A promising eye. Keep watching for height, hardware and wall treatments; they rarely lie about an era.";
} else {
line = "Every misstep is training. Linger on the silhouettes and metals — they’ll start to tell you the decade.";
}
const eraMention = lastFactEra ? ("That last vignette was " + lastFactEra + " — notice how its palette and shapes linger.") : "";
overlayFact.textContent = line + " " + eraMention;
}
function closeOverlay() {
overlay.classList.remove("active");
}
function nextAction() {
if (!hasGuessedThisRound) return;
if (currentRound >= TOTAL_ROUNDS) {
openOverlay();
} else {
currentRound += 1;
beginRound();
}
}
function restartGame() {
score = 0;
currentRound = 1;
scoreLabel.textContent = score;
progressFill.style.width = "0%";
closeOverlay();
beginRound();
}
function init() {
bestScore = safeGetBest();
updateBestScoreDisplay();
options.forEach(btn => {
btn.addEventListener("click", function () {
const eraId = btn.getAttribute("data-era");
if (!eraId) return;
handleGuess(eraId, btn);
});
});
nextBtn.addEventListener("click", nextAction);
closeOverlayBtn.addEventListener("click", closeOverlay);
restartBtn.addEventListener("click", restartGame);
// Keyboard: space/enter on overlay buttons trigger click
[closeOverlayBtn, restartBtn].forEach(el => {
el.addEventListener("keyup", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
el.click();
}
});
});
beginRound();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
</script>
</body>
</html>