← back to Model Arena
data/artifacts/0b9bb5066c06/kimi.html
816 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DESIGNER WALLCOVERINGS — Design Era Quiz</title>
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent2: #7d6a45;
--swift-out: cubic-bezier(.22,.9,.24,1);
--power-in-out: cubic-bezier(.77,0,.18,1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
}
/* Fixed Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 72px;
background: rgba(13, 13, 15, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(201, 169, 97, 0.15);
display: flex;
align-items: center;
padding: 0 48px;
z-index: 1000;
}
.wordmark {
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
font-weight: 400;
}
/* Main Content */
.main {
padding-top: 120px;
padding-bottom: 80px;
max-width: 900px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
/* Game Header */
.game-header {
text-align: center;
margin-bottom: 48px;
}
.game-title {
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 38px;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--text);
}
.game-subtitle {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.score-board {
display: flex;
justify-content: center;
gap: 48px;
margin-top: 32px;
padding: 24px;
border: 1px solid rgba(201, 169, 97, 0.2);
background: var(--surface);
}
.score-item {
text-align: center;
}
.score-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.score-value {
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 28px;
color: var(--accent);
}
/* Vignette Container */
.vignette-container {
position: relative;
width: 100%;
aspect-ratio: 4/3;
background: var(--surface);
border: 1px solid rgba(201, 169, 97, 0.2);
margin-bottom: 48px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
transition: transform 0.6s var(--swift-out);
}
.vignette-container:hover {
transform: translateY(-4px);
}
/* Victorian Era CSS Art */
.era-victorian {
background: linear-gradient(180deg, #2a2420 0%, #1a1512 100%);
position: relative;
}
.era-victorian::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% 30%, rgba(139, 90, 43, 0.3), transparent),
repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,0.1) 40px, rgba(0,0,0,0.1) 41px);
}
.victorian-wallpaper {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(201, 169, 97, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 90, 43, 0.2) 0%, transparent 40%);
}
.victorian-chair {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 200px;
}
.victorian-chair::before {
content: '';
position: absolute;
bottom: 0;
left: 20px;
width: 120px;
height: 80px;
background: linear-gradient(180deg, #4a3728 0%, #2f1f16 100%);
border-radius: 4px 4px 0 0;
border: 2px solid #6b4423;
}
.victorian-chair::after {
content: '';
position: absolute;
bottom: 80px;
left: 10px;
width: 140px;
height: 120px;
background: linear-gradient(180deg, #3d2b1f 0%, #1f1510 100%);
border-radius: 60px 60px 0 0;
border: 3px solid #6b4423;
}
.victorian-lamp {
position: absolute;
top: 60px;
right: 80px;
width: 60px;
height: 100px;
}
.victorian-lamp::before {
content: '';
position: absolute;
bottom: 0;
left: 20px;
width: 20px;
height: 60px;
background: linear-gradient(90deg, #8b7355, #6b5344);
}
.victorian-lamp::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 40px;
background: radial-gradient(ellipse, rgba(255, 220, 150, 0.6), rgba(201, 169, 97, 0.3));
border-radius: 50% 50% 20% 20%;
border: 2px solid #6b4423;
}
/* Art Deco Era CSS Art */
.era-artdeco {
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
position: relative;
}
.artdeco-sunburst {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background:
conic-gradient(from 0deg, transparent 0deg, var(--accent) 2deg, transparent 4deg, transparent 14deg, var(--accent) 16deg, transparent 18deg, transparent 28deg, var(--accent) 30deg, transparent 32deg, transparent 42deg, var(--accent) 44deg, transparent 46deg, transparent 56deg, var(--accent) 58deg, transparent 60deg, transparent 70deg, var(--accent) 72deg, transparent 74deg, transparent 84deg, var(--accent) 86deg, transparent 88deg, transparent 98deg, var(--accent) 100deg, transparent 102deg, transparent 112deg, var(--accent) 114deg, transparent 116deg, transparent 126deg, var(--accent) 128deg, transparent 130deg, transparent 140deg, var(--accent) 142deg, transparent 144deg, transparent 154deg, var(--accent) 156deg, transparent 158deg, transparent 168deg, var(--accent) 170deg, transparent 172deg, transparent 182deg, var(--accent) 184deg, transparent 186deg, transparent 196deg, var(--accent) 198deg, transparent 200deg, transparent 210deg, var(--accent) 212deg, transparent 214deg, transparent 224deg, var(--accent) 226deg, transparent 228deg, transparent 238deg, var(--accent) 240deg, transparent 242deg, transparent 252deg, var(--accent) 254deg, transparent 256deg, transparent 266deg, var(--accent) 268deg, transparent 270deg, transparent 280deg, var(--accent) 282deg, transparent 284deg, transparent 294deg, var(--accent) 296deg, transparent 298deg, transparent 308deg, var(--accent) 310deg, transparent 312deg, transparent 322deg, var(--accent) 324deg, transparent 326deg, transparent 336deg, var(--accent) 338deg, transparent 340deg, transparent 350deg, var(--accent) 352deg, transparent 354deg);
opacity: 0.3;
}
.artdeco-console {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 100px;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
border: 2px solid var(--accent);
border-radius: 4px;
}
.artdeco-console::before {
content: '';
position: absolute;
top: -40px;
left: 20px;
right: 20px;
height: 40px;
background: linear-gradient(180deg, rgba(201, 169, 97, 0.3), transparent);
border-left: 1px solid var(--accent);
border-right: 1px solid var(--accent);
}
.artdeco-mirror {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 160px;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(201, 169, 97, 0.2));
border: 3px solid var(--accent);
border-radius: 0;
box-shadow: 0 0 20px rgba(201, 169, 97, 0.3);
}
.artdeco-geometry {
position: absolute;
bottom: 20px;
right: 40px;
width: 80px;
height: 80px;
border: 2px solid var(--accent);
transform: rotate(45deg);
opacity: 0.5;
}
/* Mid-Century Modern Era CSS Art */
.era-midcentury {
background: linear-gradient(180deg, #e8e4dc 0%, #d4cfc4 100%);
position: relative;
}
.midcentury-wall {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 49%, rgba(139, 125, 107, 0.1) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, rgba(139, 125, 107, 0.1) 50%, transparent 51%);
background-size: 60px 60px;
}
.midcentury-chair {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 140px;
}
.midcentury-chair::before {
content: '';
position: absolute;
bottom: 0;
left: 20px;
width: 100px;
height: 20px;
background: #8b6914;
border-radius: 10px;
}
.midcentury-chair::after {
content: '';
position: absolute;
bottom: 20px;
left: 10px;
width: 120px;
height: 100px;
background: linear-gradient(135deg, #d4a574 0%, #a67c52 100%);
border-radius: 20px 20px 0 0;
box-shadow: -10px 0 0 #6b4423, 10px 0 0 #6b4423;
}
.midcentury-plant {
position: absolute;
bottom: 60px;
right: 80px;
width: 80px;
height: 120px;
}
.midcentury-plant::before {
content: '';
position: absolute;
bottom: 0;
left: 30px;
width: 20px;
height: 40px;
background: #5c4033;
border-radius: 0 0 10px 10px;
}
.midcentury-plant::after {
content: '';
position: absolute;
top: 0;
left: 10px;
width: 60px;
height: 80px;
background: radial-gradient(ellipse at 30% 70%, #4a7c59 0%, #2d5a3d 50%, transparent 70%);
border-radius: 50%;
}
/* Grandmillennial Era CSS Art */
.era-grandmillennial {
background: linear-gradient(180deg, #f5f0e8 0%, #e8e0d4 100%);
position: relative;
}
.grandmillennial-wallpaper {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(201, 169, 97, 0.2) 0%, transparent 15%),
radial-gradient(circle at 75% 75%, rgba(139, 90, 43, 0.15) 0%, transparent 20%);
background-size: 80px 80px;
}
.grandmillennial-sofa {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 100px;
background: linear-gradient(180deg, #d4a5a5 0%, #b88a8a 100%);
border-radius: 20px 20px 0 0;
border: 3px solid #fff;
box-shadow: inset 0 10px 20px rgba(255,255,255,0.5);
}
.grandmillennial-sofa::before {
content: '';
position: absolute;
top: -30px;
left: 20px;
right: 20px;
height: 30px;
background: repeating-linear-gradient(90deg, #d4a5a5, #d4a5a5 20px, #fff 20px, #fff 22px);
border-radius: 10px 10px 0 0;
}
.grandmillennial-table {
position: absolute;
bottom: 30px;
right: 60px;
width: 60px;
height: 60px;
background: #8b6914;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.grandmillennial-basket {
position: absolute;
bottom: 40px;
left: 60px;
width: 50px;
height: 40px;
background: repeating-linear-gradient(0deg, #d4a574, #d4a574 4px, #8b6914 4px, #8b6914 6px);
border-radius: 0 0 25px 25px;
border: 2px solid #8b6914;
}
/* Controls */
.controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.guess-btn {
padding: 20px 32px;
background: transparent;
border: 1px solid rgba(201, 169, 97, 0.4);
color: var(--text);
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s var(--swift-out);
position: relative;
overflow: hidden;
}
.guess-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--accent);
opacity: 0;
transition: opacity 0.4s var(--swift-out);
}
.guess-btn:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(201, 169, 97, 0.15);
}
.guess-btn:hover::before {
opacity: 0.1;
}
.guess-btn span {
position: relative;
z-index: 1;
}
.guess-btn.correct {
background: rgba(201, 169, 97, 0.2);
border-color: var(--accent);
pointer-events: none;
}
.guess-btn.incorrect {
opacity: 0.4;
pointer-events: none;
}
/* Reveal Panel */
.reveal-panel {
background: var(--surface);
border: 1px solid rgba(201, 169, 97, 0.2);
padding: 32px;
margin-bottom: 32px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s var(--swift-out);
display: none;
}
.reveal-panel.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.reveal-title {
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 28px;
color: var(--accent);
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.reveal-fact {
font-size: 16px;
line-height: 1.7;
color: var(--text);
margin-bottom: 24px;
}
.next-btn, .restart-btn {
padding: 16px 40px;
background: var(--accent);
border: none;
color: var(--bg);
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s var(--swift-out);
}
.next-btn:hover, .restart-btn:hover {
background: var(--text);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(201, 169, 97, 0.3);
}
/* Game Over */
.game-over {
text-align: center;
padding: 48px;
background: var(--surface);
border: 1px solid rgba(201, 169, 97, 0.2);
display: none;
}
.game-over.active {
display: block;
}
.final-score {
font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
font-size: 67px;
color: var(--accent);
margin: 24px 0;
letter-spacing: -0.02em;
}
.best-score {
font-size: 14px;
color: var(--muted);
margin-bottom: 32px;
}
.round-indicator {
text-align: center;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 24px;
}
/* Fade animation for era transition */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
.vignette-container.new-era {
animation: fadeIn 0.8s var(--swift-out);
}
</style>
</head>
<body>
<header class="header">
<div class="wordmark">DESIGNER WALLCOVERINGS</div>
</header>
<main class="main">
<div class="game-header">
<h1 class="game-title">Which Design Era?</h1>
<p class="game-subtitle">Identify the interior design style</p>
<div class="score-board">
<div class="score-item">
<div class="score-label">Score</div>
<div class="score-value" id="currentScore">0</div>
</div>
<div class="score-item">
<div class="score-label">Round</div>
<div class="score-value" id="currentRound">1/8</div>
</div>
<div class="score-item">
<div class="score-label">Best</div>
<div class="score-value" id="bestScore">0</div>
</div>
</div>
</div>
<div class="round-indicator" id="roundIndicator">Round 1 of 8</div>
<div class="vignette-container" id="vignette">
<!-- Era-specific CSS art will be injected here -->
</div>
<div class="controls" id="controls">
<button class="guess-btn" onclick="makeGuess('Victorian')"><span>Victorian</span></button>
<button class="guess-btn" onclick="makeGuess('Art Deco')"><span>Art Deco</span></button>
<button class="guess-btn" onclick="makeGuess('Mid-Century Modern')"><span>Mid-Century Modern</span></button>
<button class="guess-btn" onclick="makeGuess('Grandmillennial')"><span>Grandmillennial</span></button>
</div>
<div class="reveal-panel" id="revealPanel">
<div class="reveal-title" id="revealTitle"></div>
<div class="reveal-fact" id="revealFact"></div>
<button class="next-btn" id="nextBtn" onclick="nextRound()">Next Room</button>
</div>
<div class="game-over" id="gameOver">
<div class="game-subtitle">Game Complete</div>
<div class="final-score" id="finalScore">0/8</div>
<div class="best-score" id="finalBest">Best: 0</div>
<button class="restart-btn" onclick="restartGame()">Play Again</button>
</div>
</main>
<script>
const eras = {
'Victorian': {
class: 'era-victorian',
html: `
<div class="victorian-wallpaper"></div>
<div class="victorian-chair"></div>
<div class="victorian-lamp"></div>
`,
fact: 'Victorian interiors (1837-1901) embraced maximalism with rich damasks, dark mahogany furniture, and heavy drapery. Walls were often covered in ornate wallpaper featuring florals and scrollwork, while gas lighting cast warm, dramatic shadows across cluttered parlors filled with collected curiosities.'
},
'Art Deco': {
class: 'era-artdeco',
html: `
<div class="artdeco-sunburst"></div>
<div class="artdeco-mirror"></div>
<div class="artdeco-console"></div>
<div class="artdeco-geometry"></div>
`,
fact: 'Art Deco (1920s-1930s) celebrated the machine age with geometric patterns, sunburst motifs, and luxurious materials like lacquer, chrome, and exotic woods. Interiors featured stepped forms, chevrons, and zebra prints, reflecting the era\'s fascination with speed, luxury, and modernity.'
},
'Mid-Century Modern': {
class: 'era-midcentury',
html: `
<div class="midcentury-wall"></div>
<div class="midcentury-chair"></div>
<div class="midcentury-plant"></div>
`,
fact: 'Mid-Century Modern (1945-1969) brought the outdoors in with organic shapes, clean lines, and materials like teak, walnut, and molded plastic. Open floor plans, large windows, and biomorphic forms created harmonious spaces that rejected ornament in favor of functional beauty and connection to nature.'
},
'Grandmillennial': {
class: 'era-grandmillennial',
html: `
<div class="grandmillennial-wallpaper"></div>
<div class="grandmillennial-sofa"></div>
<div class="grandmillennial-table"></div>
<div class="grandmillennial-basket"></div>
`,
fact: 'Grandmillennial style (2010s-present) rebels against minimalism by embracing chintz, ruffles, wicker, and collected antiques. This "granny chic" aesthetic mixes traditional patterns like toile and florals with fresh colors, creating layered, nostalgic spaces that celebrate craftsmanship and inherited treasures.'
}
};
const eraNames = Object.keys(eras);
let currentRound = 1;
let totalRounds = 8;
let score = 0;
let currentEra = '';
let roundEras = [];
let hasGuessed = false;
function initGame() {
const savedBest = localStorage.getItem('dwDesignEraBest');
if (savedBest) {
document.getElementById('bestScore').textContent = savedBest;
}
generateRoundOrder();
loadRound();
}
function generateRoundOrder() {
roundEras = [];
for (let i = 0; i < totalRounds; i++) {
roundEras.push(eraNames[Math.floor(Math.random() * eraNames.length)]);
}
}
function loadRound() {
hasGuessed = false;
currentEra = roundEras[currentRound - 1];
const vignette = document.getElementById('vignette');
const era = eras[currentEra];
vignette.className = 'vignette-container new-era ' + era.class;
vignette.innerHTML = era.html;
document.getElementById('roundIndicator').textContent = `Round ${currentRound} of ${totalRounds}`;
document.getElementById('currentRound').textContent = `${currentRound}/${totalRounds}`;
document.getElementById('revealPanel').classList.remove('active');
// Reset buttons
document.querySelectorAll('.guess-btn').forEach(btn => {
btn.classList.remove('correct', 'incorrect');
btn.style.pointerEvents = 'auto';
btn.style.opacity = '1';
});
// Remove animation class after animation completes
setTimeout(() => {
vignette.classList.remove('new-era');
}, 800);
}
function makeGuess(era) {
if (hasGuessed) return;
hasGuessed = true;
const buttons = document.querySelectorAll('.guess-btn');
const revealPanel = document.getElementById('revealPanel');
const revealTitle = document.getElementById('revealTitle');
const revealFact = document.getElementById('revealFact');
buttons.forEach(btn => {
const btnEra = btn.getAttribute('onclick').match(/'([^']+)'/)[1];
if (btnEra === currentEra) {
btn.classList.add('correct');
} else if (btn === event.target.closest('button')) {
btn.classList.add('incorrect');
} else {
btn.style.opacity = '0.4';
}
btn.style.pointerEvents = 'none';
});
if (era === currentEra) {
score++;
document.getElementById('currentScore').textContent = score;
revealTitle.textContent = 'Correct — ' + currentEra;
} else {
revealTitle.textContent = 'It was ' + currentEra;
}
revealFact.textContent = eras[currentEra].fact;
revealPanel.classList.add('active');
if (currentRound === totalRounds) {
document.getElementById('nextBtn').textContent = 'See Final Score';
}
}
function nextRound() {
if (currentRound < totalRounds) {
currentRound++;
loadRound();
} else {
endGame();
}
}
function endGame() {
document.getElementById('vignette').style.display = 'none';
document.getElementById('controls').style.display = 'none';
document.getElementById('revealPanel').style.display = 'none';
document.getElementById('roundIndicator').style.display = 'none';
document.getElementById('gameOver').classList.add('active');
document.getElementById('finalScore').textContent = score + '/' + totalRounds;
const savedBest = parseInt(localStorage.getItem('dwDesignEraBest') || '0');
if (score > savedBest) {
localStorage.setItem('dwDesignEraBest', score);
document.getElementById('finalBest').textContent = 'New Best! Previous: ' + savedBest;
} else {
document.getElementById('finalBest').textContent = 'Best: ' + Math.max(savedBest, score);
}
}
function restartGame() {
currentRound = 1;
score = 0;
document.getElementById('currentScore').textContent = '0';
document.getElementById('vignette').style.display = 'block';
document.getElementById('controls').style.display = 'grid';
document.getElementById('revealPanel').style.display = 'block';
document.getElementById('roundIndicator').style.display = 'block';
document.getElementById('gameOver').classList.remove('active');
document.getElementById('nextBtn').textContent = 'Next Room';
const savedBest = localStorage.getItem('dwDesignEraBest');
if (savedBest) {
document.getElementById('bestScore').textContent = savedBest;
}
generateRoundOrder();
loadRound();
}
// Initialize
initGame();
</script>
</body>
</html>