← back to Model Arena
data/artifacts/0219528ac7d7/hf-qwen-coder-32b.html
241 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?</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--line: #dcdcdd;
--shadow: rgba(0, 0, 0, .12);
--hover-shadow: rgba(0, 0, 0, .18);
--glow: rgba(176, 71, 46, .35);
--ease: cubic-bezier(.22,1,.36,1);
}
body {
margin: 0;
font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 24px;
background-color: var(--bg);
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
z-index: 1000;
}
header h1 {
margin: 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 67px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text);
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 96px 24px;
width: 100%;
box-sizing: border-box;
}
.era-card {
width: 300px;
height: 400px;
background-color: var(--surface);
border-radius: 14px;
margin: 24px;
box-shadow: 0 8px 24px var(--shadow);
transition: box-shadow .25s var(--ease), transform .25s var(--ease);
overflow: hidden;
}
.era-card:hover {
box-shadow: 0 16px 48px var(--hover-shadow);
transform: translateY(-8px);
}
.victorian {
background: linear-gradient(135deg, #d7ccc8, #e57373);
}
.art-deco {
background: linear-gradient(135deg, #b0bec5, #4fc3f7);
}
.mid-century-modern {
background: linear-gradient(135deg, #fff9c4, #ffab91);
}
.grandmillennial {
background: linear-gradient(135deg, #fce4ec, #81d4fa);
}
button {
margin-top: 24px;
padding: 12px 24px;
font-size: 16px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text);
background-color: var(--accent);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color .25s var(--ease);
}
button:hover {
background-color: darken(var(--accent), 10%);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .75);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.overlay-content {
width: 300px;
padding: 48px;
background-color: var(--surface);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
text-align: center;
}
.overlay-content h2 {
font-size: 38px;
margin-bottom: 24px;
}
.overlay-content p {
font-size: 16px;
margin-bottom: 24px;
}
.overlay-content button {
display: block;
width: 100%;
padding: 12px 24px;
font-size: 16px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text);
background-color: var(--accent);
border: none;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>DESIGNER WALLCOVERINGS</h1>
</header>
<main>
<div id="game">
<div class="era-card victorian" data-era="victorian"></div>
<div class="era-card art-deco" data-era="art-deco"></div>
<div class="era-card mid-century-modern" data-era="mid-century-modern"></div>
<div class="era-card grandmillennial" data-era="grandmillennial"></div>
<button id="guess-victorian">VICTORIAN</button>
<button id="guess-art-deco">ART DECO</button>
<button id="guess-mid-century-modern">MID-CENTURY MODERN</button>
<button id="guess-grandmillennial">GRANDMILLENNIAL</button>
</div>
</main>
<script>
const eras = ['victorian', 'art-deco', 'mid-century-modern', 'grandmillennial'];
let score = 0;
let bestScore = localStorage.getItem('bestScore') || 0;
const eraFacts = {
victorian: "The Victorian era was known for its intricate and ornate designs, often featuring rich colors and complex patterns.",
art_deco: "Art Deco is characterized by geometric shapes, bold lines, and luxurious materials like chrome, glass, and metalwork.",
mid_century_modern: "Mid-Century Modern design emphasized simplicity, functionality, and the use of natural light and organic forms.",
grandmillennial: "Grandmillennial style blends retro aesthetics with modern luxury, often incorporating rich textures and bold colors."
};
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function randomEra() {
shuffle(eras);
return eras[0];
}
function showOverlay(title, message) {
const overlay = document.createElement('div');
overlay.className = 'overlay';
overlay.innerHTML = `
<div class="overlay-content">
<h2>${title}</h2>
<p>${message}</p>
<button onclick="restartGame()">RESTART</button>
</div>
`;
document.body.appendChild(overlay);
}
function restartGame() {
const overlay = document.querySelector('.overlay');
if (overlay) {
overlay.remove();
}
score = 0;
updateBestScore(bestScore);
startRound();
}
function updateBestScore(score) {
bestScore = Math.max(bestScore, score);
localStorage.setItem('bestScore', bestScore);
}
function guessEra(guess) {
const correctEra = randomEra();
if (guess === correctEra) {
score++;
showOverlay('CORRECT!', eraFacts[correctEra]);
} else {
showOverlay('WRONG!', `The correct answer was ${correctEra}. Fact: ${eraFacts[correctEra]}`);
}
updateBestScore(score);
}
function startRound() {
if (score >= 8) {
showOverlay('GAME OVER', 'Congratulations! You completed all rounds.');
return;
}
const correctEra = randomEra();
document.querySelectorAll('.era-card').forEach(card => {
card.classList.remove(...eras);
card.classList.add(correctEra);
});
}
document.getElementById('guess-victorian').addEventListener('click', () => guessEra('victorian'));
document.getElementById('guess-art-deco').addEventListener('click', () => guessEra('art-deco'));
document.getElementById('guess-mid-century-modern').addEventListener('click', () => guessEra('mid-century-modern'));
document.getElementById('guess-grandmillennial').addEventListener('click', () => guessEra('grandmillennial'));
startRound();
</script>
</body>
</html>