← back to Model Arena
data/artifacts/0219528ac7d7/kimi.html
1099 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 {
/* Luxe Noir Palette */
--bg: #0d0d0f;
--surface: #17171c;
--surface-elevated: #1f1f26;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent2: #7d6a45;
--line: rgba(245, 242, 234, 0.12);
--shadow: rgba(0, 0, 0, 0.4);
/* Typography */
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
/* Motion */
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--ease-power: cubic-bezier(.77,0,.18,1);
/* Spacing Scale */
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
}
/* Header / Wordmark */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: linear-gradient(to bottom, var(--bg) 60%, transparent);
padding: var(--space-lg) var(--space-xl);
pointer-events: none;
}
.wordmark {
font-family: var(--font-display);
font-size: 42px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
line-height: 1.1;
pointer-events: auto;
display: inline-block;
}
/* Scoreboard */
.scoreboard {
position: fixed;
top: var(--space-lg);
right: var(--space-xl);
z-index: 101;
display: flex;
gap: var(--space-xl);
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.score-item {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-xs);
}
.score-value {
font-size: 21px;
color: var(--text);
font-weight: 500;
letter-spacing: 0.04em;
}
.score-value.accent {
color: var(--accent);
}
/* Main Game Area */
.game-container {
padding-top: 140px;
padding-bottom: var(--space-2xl);
max-width: 1200px;
margin: 0 auto;
padding-left: var(--space-xl);
padding-right: var(--space-xl);
}
/* Vignette Stage */
.stage {
position: relative;
width: 100%;
aspect-ratio: 16/10;
background: var(--surface);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 24px 64px var(--shadow);
margin-bottom: var(--space-xl);
}
.vignette {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms var(--ease-hero);
}
.vignette.active {
opacity: 1;
}
/* Victorian Vignette */
.victorian {
background:
linear-gradient(180deg, #2a2420 0%, #1a1612 100%);
}
.victorian-wall {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 65%;
background:
repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(201, 169, 97, 0.08) 48px, rgba(201, 169, 97, 0.08) 49px),
radial-gradient(ellipse at 30% 80%, rgba(139, 90, 43, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(201, 169, 97, 0.15) 0%, transparent 40%),
#2d2520;
}
.victorian-wall::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 Q40 20 30 30 Q20 20 30 10 M30 30 Q40 40 30 50 Q20 40 30 30' fill='none' stroke='%23c9a961' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
opacity: 0.6;
}
.victorian-molding {
position: absolute;
top: 65%;
left: 0;
right: 0;
height: 8%;
background: linear-gradient(to bottom, #3d3328, #2a2420);
border-top: 2px solid rgba(201, 169, 97, 0.3);
border-bottom: 1px solid rgba(201, 169, 97, 0.2);
}
.victorian-molding::after {
content: '';
position: absolute;
top: 50%;
left: 5%;
right: 5%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
}
.victorian-floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 27%;
background:
repeating-linear-gradient(90deg, #1f1a16 0px, #1f1a16 40px, #2a2420 40px, #2a2420 80px),
linear-gradient(to bottom, #161310, #0f0d0b);
}
.victorian-chair {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 180px;
}
.victorian-chair-back {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background: #4a3328;
border-radius: 50% 50% 0 0;
box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}
.victorian-chair-seat {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 50px;
background: #5c3d2e;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.victorian-chair-legs {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 40px;
}
.victorian-chair-legs::before,
.victorian-chair-legs::after {
content: '';
position: absolute;
bottom: 0;
width: 8px;
height: 40px;
background: #3d2820;
border-radius: 0 0 4px 4px;
}
.victorian-chair-legs::before { left: 10px; }
.victorian-chair-legs::after { right: 10px; }
/* Art Deco Vignette */
.artdeco {
background: linear-gradient(135deg, #1a1a20 0%, #0f0f14 100%);
}
.artdeco-wall {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 70%;
background:
linear-gradient(45deg, transparent 48%, rgba(201, 169, 97, 0.1) 49%, rgba(201, 169, 97, 0.1) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(201, 169, 97, 0.08) 49%, rgba(201, 169, 97, 0.08) 51%, transparent 52%),
repeating-linear-gradient(90deg, #1e1e24 0px, #1e1e24 60px, #25252c 60px, #25252c 120px);
background-size: 80px 80px, 80px 80px, 100% 100%;
}
.artdeco-sunburst {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
}
.artdeco-sunburst::before {
content: '';
position: absolute;
inset: 0;
background:
conic-gradient(from 0deg, transparent 0deg, rgba(201, 169, 97, 0.3) 5deg, transparent 10deg, transparent 20deg, rgba(201, 169, 97, 0.2) 25deg, transparent 30deg, transparent 40deg, rgba(201, 169, 97, 0.3) 45deg, transparent 50deg, transparent 60deg, rgba(201, 169, 97, 0.2) 65deg, transparent 70deg, transparent 80deg, rgba(201, 169, 97, 0.3) 85deg, transparent 90deg, transparent 100deg, rgba(201, 169, 97, 0.2) 105deg, transparent 110deg, transparent 120deg, rgba(201, 169, 97, 0.3) 125deg, transparent 130deg, transparent 140deg, rgba(201, 169, 97, 0.2) 145deg, transparent 150deg, transparent 160deg, rgba(201, 169, 97, 0.3) 165deg, transparent 170deg, transparent 180deg, rgba(201, 169, 97, 0.2) 185deg, transparent 190deg, transparent 200deg, rgba(201, 169, 97, 0.3) 205deg, transparent 210deg, transparent 220deg, rgba(201, 169, 97, 0.2) 225deg, transparent 230deg, transparent 240deg, rgba(201, 169, 97, 0.3) 245deg, transparent 250deg, transparent 260deg, rgba(201, 169, 97, 0.2) 265deg, transparent 270deg, transparent 280deg, rgba(201, 169, 97, 0.3) 285deg, transparent 290deg, transparent 300deg, rgba(201, 169, 97, 0.2) 305deg, transparent 310deg, transparent 320deg, rgba(201, 169, 97, 0.3) 325deg, transparent 330deg, transparent 340deg, rgba(201, 169, 97, 0.2) 345deg, transparent 350deg);
border-radius: 50%;
}
.artdeco-sunburst::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(201, 169, 97, 0.6) 0%, transparent 70%);
border-radius: 50%;
}
.artdeco-band {
position: absolute;
top: 70%;
left: 0;
right: 0;
height: 6%;
background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
}
.artdeco-floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 24%;
background:
repeating-linear-gradient(90deg, #16161a 0px, #16161a 30px, #1f1f24 30px, #1f1f24 60px),
linear-gradient(to bottom, #1a1a1e, #0d0d10);
}
.artdeco-table {
position: absolute;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 80px;
}
.artdeco-table-top {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 20px;
background: linear-gradient(180deg, #2a2a30, #1f1f24);
border-radius: 2px;
border: 1px solid rgba(201, 169, 97, 0.3);
}
.artdeco-table-base {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 50px;
background: linear-gradient(90deg, #1f1f24, #2a2a30, #1f1f24);
}
.artdeco-table-base::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 8px;
background: #2a2a30;
border-radius: 2px;
border: 1px solid rgba(201, 169, 97, 0.2);
}
/* Mid-Century Modern Vignette */
.midcentury {
background: linear-gradient(180deg, #e8e4dc 0%, #d8d4cc 100%);
}
.midcentury-wall {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 68%;
background:
radial-gradient(circle at 20% 80%, rgba(139, 119, 89, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(194, 120, 86, 0.08) 0%, transparent 40%),
#e8e4dc;
}
.midcentury-wall::before {
content: '';
position: absolute;
top: 30%;
left: 10%;
right: 10%;
height: 40%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='2' fill='%238b7759' opacity='0.2'/%3E%3C/svg%3E");
}
.midcentury-panel {
position: absolute;
top: 20%;
left: 15%;
width: 70%;
height: 40%;
background: rgba(194, 120, 86, 0.15);
border-radius: 50% 50% 0 0 / 20% 20% 0 0;
}
.midcentury-floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 32%;
background:
linear-gradient(to bottom, #a08060, #806040),
repeating-linear-gradient(90deg, #907050 0px, #907050 2px, #a08060 2px, #a08060 100px);
}
.midcentury-rug {
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 120px;
background:
radial-gradient(ellipse, rgba(194, 120, 86, 0.4) 0%, transparent 70%),
repeating-conic-gradient(from 0deg at 50% 50%, rgba(139, 119, 89, 0.3) 0deg 10deg, transparent 10deg 20deg);
border-radius: 50%;
}
.midcentury-chair {
position: absolute;
bottom: 22%;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 140px;
}
.midcentury-chair-back {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 70px;
background: #c27856;
border-radius: 40px 40px 0 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.midcentury-chair-seat {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 40px;
background: #8b5a3e;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.midcentury-chair-legs {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 30px;
}
.midcentury-chair-legs::before,
.midcentury-chair-legs::after {
content: '';
position: absolute;
bottom: 0;
width: 6px;
height: 30px;
background: #654321;
border-radius: 0 0 3px 3px;
}
.midcentury-chair-legs::before {
left: 15px;
transform: rotate(-10deg);
}
.midcentury-chair-legs::after {
right: 15px;
transform: rotate(10deg);
}
/* Grandmillennial Vignette */
.grandmillennial {
background: linear-gradient(180deg, #f5f0e8 0%, #ebe5dc 100%);
}
.grandmillennial-wall {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 70%;
background: #f5f0e8;
}
.grandmillennial-wall::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M40 20 Q50 30 40 40 Q30 30 40 20 M20 40 Q30 50 20 60 Q10 50 20 40 M60 40 Q70 50 60 60 Q50 50 60 40 M40 60 Q50 70 40 80 Q30 70 40 60'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.grandmillennial-wainscoting {
position: absolute;
bottom: 30%;
left: 5%;
right: 5%;
height: 25%;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(201, 169, 97, 0.3);
border-radius: 2px;
}
.grandmillennial-wainscoting::before {
content: '';
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 1px;
background: rgba(201, 169, 97, 0.3);
}
.grandmillennial-floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background:
repeating-linear-gradient(45deg, #d4c8b8 0px, #d4c8b8 10px, #c8bcac 10px, #c8bcac 20px),
linear-gradient(to bottom, #e0d4c4, #c8bcac);
}
.grandmillennial-basket {
position: absolute;
bottom: 25%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 80px;
}
.grandmillennial-basket-body {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 50px;
background:
repeating-linear-gradient(0deg, #c9a961 0px, #c9a961 4px, #b8956f 4px, #b8956f 8px),
repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(0,0,0,0.1) 8px, rgba(0,0,0,0.1) 9px);
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.grandmillennial-basket-handle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 40px;
border: 4px solid #c9a961;
border-bottom: none;
border-radius: 30px 30px 0 0;
}
/* Guess Buttons */
.guess-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.guess-btn {
background: var(--surface);
border: 1px solid var(--line);
color: var(--text);
padding: var(--space-lg) var(--space-md);
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 300ms var(--ease-swift);
position: relative;
overflow: hidden;
}
.guess-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(201, 169, 97, 0.1), transparent);
opacity: 0;
transition: opacity 300ms var(--ease-swift);
}
.guess-btn:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.guess-btn:hover::before {
opacity: 1;
}
.guess-btn:active {
transform: translateY(0);
}
.guess-btn.correct {
border-color: var(--accent);
background: rgba(201, 169, 97, 0.1);
}
.guess-btn.wrong {
opacity: 0.4;
}
/* Reveal Overlay */
.reveal-overlay {
position: fixed;
inset: 0;
background: rgba(13, 13, 15, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 400ms var(--ease-hero);
}
.reveal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.reveal-content {
text-align: center;
max-width: 500px;
padding: var(--space-xl);
transform: translateY(20px);
transition: transform 500ms var(--ease-hero);
}
.reveal-overlay.active .reveal-content {
transform: translateY(0);
}
.reveal-era {
font-family: var(--font-display);
font-size: 50px;
letter-spacing: 0.04em;
color: var(--accent);
margin-bottom: var(--space-md);
line-height: 1.1;
}
.reveal-fact {
font-size: 16px;
line-height: 1.7;
color: var(--text);
margin-bottom: var(--space-xl);
}
.next-btn {
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
padding: var(--space-md) var(--space-xl);
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: all 300ms var(--ease-swift);
}
.next-btn:hover {
background: var(--accent);
color: var(--bg);
}
/* Game Over Overlay */
.gameover-overlay {
position: fixed;
inset: 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity 500ms var(--ease-hero);
}
.gameover-overlay.active {
opacity: 1;
pointer-events: auto;
}
.gameover-content {
text-align: center;
padding: var(--space-xl);
}
.gameover-title {
font-family: var(--font-display);
font-size: 56px;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: var(--space-lg);
}
.final-score {
font-size: 21px;
color: var(--accent);
letter-spacing: 0.08em;
margin-bottom: var(--space-xs);
}
.best-score {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.12em;
margin-bottom: var(--space-xl);
}
.restart-btn {
background: var(--accent);
border: none;
color: var(--bg);
padding: var(--space-md) var(--space-2xl);
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: all 300ms var(--ease-swift);
}
.restart-btn:hover {
background: var(--text);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(201, 169, 97, 0.3);
}
/* Round indicator */
.round-indicator {
text-align: center;
margin-bottom: var(--space-lg);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.round-indicator span {
color: var(--text);
}
/* Start Screen */
.start-overlay {
position: fixed;
inset: 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 400;
transition: opacity 500ms var(--ease-hero);
}
.start-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.start-content {
text-align: center;
max-width: 600px;
padding: var(--space-xl);
}
.start-title {
font-family: var(--font-display);
font-size: 67px;
letter-spacing: 0.02em;
color: var(--text);
margin-bottom: var(--space-md);
line-height: 1;
}
.start-subtitle {
font-size: 16px;
color: var(--muted);
margin-bottom: var(--space-2xl);
letter-spacing: 0.04em;
}
.start-btn {
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
padding: var(--space-md) var(--space-2xl);
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: all 300ms var(--ease-swift);
}
.start-btn:hover {
background: var(--accent);
color: var(--bg);
}
/* Responsive */
@media (max-width: 768px) {
.wordmark {
font-size: 28px;
}
.guess-grid {
grid-template-columns: repeat(2, 1fr);
}
.reveal-era, .gameover-title {
font-size: 38px;
}
.start-title {
font-size: 48px;
}
}
</style>
</head>
<body>
<!-- Fixed Header -->
<header>
<div class="wordmark">Designer Wallcoverings</div>
</header>
<!-- Scoreboard -->
<div class="scoreboard">
<div class="score-item">
<span>Score</span>
<span class="score-value" id="score">0</span>
</div>
<div class="score-item">
<span>Best</span>
<span class="score-value accent" id="bestScore">0</span>
</div>
</div>
<!-- Start Screen -->
<div class="start-overlay" id="startOverlay">
<div class="start-content">
<h1 class="start-title">Which Design Era?</h1>
<p class="start-subtitle">Test your eye for interior design history across 8 rounds</p>
<button class="start-btn" onclick="startGame()">Begin Game</button>
</div>
</div>
<!-- Game Container -->
<div class="game-container">
<div class="round-indicator">Round <span id="currentRound">1</span> of 8</div>
<!-- Vignette Stage -->
<div class="stage" id="stage">
<!-- Victorian -->
<div class="vignette victorian" id="victorian">
<div class="victorian-wall"></div>
<div class="victorian-molding"></div>
<div class="victorian-floor"></div>
<div class="victorian-chair">
<div class="victorian-chair-back"></div>
<div class="victorian-chair-seat"></div>
<div class="victorian-chair-legs"></div>
</div>
</div>
<!-- Art Deco -->
<div class="vignette artdeco" id="artdeco">
<div class="artdeco-wall"></div>
<div class="artdeco-sunburst"></div>
<div class="artdeco-band"></div>
<div class="artdeco-floor"></div>
<div class="artdeco-table">
<div class="artdeco-table-top"></div>
<div class="artdeco-table-base"></div>
</div>
</div>
<!-- Mid-Century Modern -->
<div class="vignette midcentury" id="midcentury">
<div class="midcentury-wall"></div>
<div class="midcentury-panel"></div>
<div class="midcentury-floor"></div>
<div class="midcentury-rug"></div>
<div class="midcentury-chair">
<div class="midcentury-chair-back"></div>
<div class="midcentury-chair-seat"></div>
<div class="midcentury-chair-legs"></div>
</div>
</div>
<!-- Grandmillennial -->
<div class="vignette grandmillennial" id="grandmillennial">
<div class="grandmillennial-wall"></div>
<div class="grandmillennial-wainscoting"></div>
<div class="grandmillennial-floor"></div>
<div class="grandmillennial-basket">
<div class="grandmillennial-basket-handle"></div>
<div class="grandmillennial-basket-body"></div>
</div>
</div>
</div>
<!-- Guess Buttons -->
<div class="guess-grid" id="guessGrid">
<button class="guess-btn" onclick="makeGuess('victorian')">Victorian</button>
<button class="guess-btn" onclick="makeGuess('artdeco')">Art Deco</button>
<button class="guess-btn" onclick="makeGuess('midcentury')">Mid-Century Modern</button>
<button class="guess-btn" onclick="makeGuess('grandmillennial')">Grandmillennial</button>
</div>
</div>
<!-- Reveal Overlay -->
<div class="reveal-overlay" id="revealOverlay">
<div class="reveal-content">
<div class="reveal-era" id="revealEra">Victorian</div>
<p class="reveal-fact" id="revealFact">Fact goes here</p>
<button class="next-btn" onclick="nextRound()">Continue</button>
</div>
</div>
<!-- Game Over Overlay -->
<div class="gameover-overlay" id="gameoverOverlay">
<div class="gameover-content">
<div class="gameover-title">Game Complete</div>
<div class="final-score" id="finalScore">Final Score: 0/8</div>
<div class="best-score" id="finalBest">Personal Best: 0</div>
<button class="restart-btn" onclick="restartGame()">Play Again</button>
</div>
</div>
<script>
// Game Data
const eras = ['victorian', 'artdeco', 'midcentury', 'grandmillennial'];
const facts = {
victorian: "Victorian interiors (1837-1901) favored ornate walnut furniture, deep jewel tones, and elaborate moldings. The era embraced maximalism—pattern on pattern, heavy drapery, and carved details that signaled wealth and refinement.",
artdeco: "Art Deco (1920s-1930s) brought geometric precision and luxury materials like lacquer, chrome, and exotic woods. Sunburst motifs, zigzag patterns, and stepped forms reflected the machine age and Jazz Age optimism.",
midcentury: "Mid-Century Modern (1945-1969) emphasized organic shapes, clean lines, and honest materials. Teak, walnut, and bold textiles met open floor plans, bringing the outdoors in through expansive glass and biomorphic forms.",
grandmillennial: "Grandmillennial (2010s-present) revives chintz, wicker, and needlepoint with ironic appreciation. This 'granny chic' movement celebrates traditional patterns and collected antiques through a contemporary, curated lens."
};
const eraNames = {
victorian: 'Victorian',
artdeco: 'Art Deco',
midcentury: 'Mid-Century Modern',
grandmillennial: 'Grandmillennial'
};
// Game State
let currentRound = 1;
let score = 0;
let currentEra = null;
let roundSequence = [];
let canGuess = false;
// Load best score
let bestScore = parseInt(localStorage.getItem('designEraBestScore') || '0');
document.getElementById('bestScore').textContent = bestScore;
function startGame() {
document.getElementById('startOverlay').classList.add('hidden');
generateRounds();
setTimeout(() => loadRound(), 300);
}
function generateRounds() {
roundSequence = [];
for (let i = 0; i < 8; i++) {
roundSequence.push(eras[Math.floor(Math.random() * eras.length)]);
}
}
function loadRound() {
if (currentRound > 8) {
endGame();
return;
}
currentEra = roundSequence[currentRound - 1];
canGuess = true;
// Update UI
document.getElementById('currentRound').textContent = currentRound;
// Hide all vignettes
document.querySelectorAll('.vignette').forEach(v => v.classList.remove('active'));
// Show current era vignette
setTimeout(() => {
document.getElementById(currentEra).classList.add('active');
}, 50);
// Reset buttons
document.querySelectorAll('.guess-btn').forEach(btn => {
btn.classList.remove('correct', 'wrong');
btn.disabled = false;
});
}
function makeGuess(guess) {
if (!canGuess) return;
canGuess = false;
const isCorrect = guess === currentEra;
// Update button states
document.querySelectorAll('.guess-btn').forEach(btn => {
btn.disabled = true;
const btnEra = btn.getAttribute('onclick').match(/'([^']+)'/)[1];
if (btnEra === currentEra) {
btn.classList.add('correct');
} else if (btnEra === guess && !isCorrect) {
btn.classList.add('wrong');
}
});
if (isCorrect) {
score++;
document.getElementById('score').textContent = score;
}
// Show reveal after brief delay
setTimeout(() => showReveal(isCorrect), 600);
}
function showReveal(isCorrect) {
document.getElementById('revealEra').textContent = eraNames[currentEra];
document.getElementById('revealFact').textContent = facts[currentEra];
document.getElementById('revealOverlay').classList.add('active');
}
function nextRound() {
document.getElementById('revealOverlay').classList.remove('active');
currentRound++;
setTimeout(() => loadRound(), 400);
}
function endGame() {
// Update best score
if (score > bestScore) {
bestScore = score;
localStorage.setItem('designEraBestScore', bestScore.toString());
document.getElementById('bestScore').textContent = bestScore;
}
// Show game over
document.getElementById('finalScore').textContent = `Final Score: ${score}/8`;
document.getElementById('finalBest').textContent = `Personal Best: ${bestScore}`;
document.getElementById('gameoverOverlay').classList.add('active');
}
function restartGame() {
document.getElementById('gameoverOverlay').classList.remove('active');
currentRound = 1;
score = 0;
document.getElementById('score').textContent = '0';
generateRounds();
setTimeout(() => loadRound(), 400);
}
</script>
</body>
</html>