← back to Model Arena
data/artifacts/0b9bb5066c06/qwen3-14b.html
312 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: #0d0d0f;
--surface: #17171c;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
--glow: 0 0 24px rgba(201, 169, 97, 0.35);
--spacing: 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px;
--card-radius: 14px;
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--type-scale: 12px 16px 21px 28px 38px 50px 67px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: var(--surface);
padding: var(--spacing-8) var(--spacing-16);
font-family: var(--font-display);
font-size: var(--type-scale-3);
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: var(--shadow);
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-16) var(--spacing-24);
position: relative;
z-index: 1;
}
.vignette {
width: 100%;
max-width: 600px;
height: 400px;
border-radius: var(--card-radius);
background-size: cover;
background-position: center;
box-shadow: var(--shadow);
transition: transform 0.25s ease-in-out;
}
.vignette:hover {
transform: scale(1.02);
box-shadow: var(--shadow), var(--glow);
}
.scoreboard {
margin-bottom: var(--spacing-24);
font-size: var(--type-scale-2);
font-family: var(--font-display);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.scoreboard span {
color: var(--accent);
font-weight: bold;
}
.buttons {
display: flex;
gap: var(--spacing-16);
margin-bottom: var(--spacing-32);
}
.button {
padding: var(--spacing-8) var(--spacing-16);
font-size: var(--type-scale-1);
letter-spacing: 0.15em;
text-transform: uppercase;
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--muted);
border-radius: var(--card-radius);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.button:hover {
background-color: var(--muted);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.button:active {
transform: scale(0.98);
}
.result {
font-size: var(--type-scale-2);
font-family: var(--font-display);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
text-align: center;
margin-bottom: var(--spacing-16);
}
.fact {
font-size: var(--type-scale-1);
color: var(--text);
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.footer {
margin-top: var(--spacing-32);
font-size: var(--type-scale-1);
font-family: var(--font-display);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fade-in-delay {
animation-delay: 0.1s;
}
@keyframes drift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
body {
background-image: linear-gradient(135deg, #0d0d0f 0%, #17171c 100%);
background-size: 800% 800%;
animation: drift 18s ease-in-out infinite;
}
</style>
</head>
<body>
<header class="fade-in">DESIGNER WALLCOVERINGS</header>
<main>
<div class="scoreboard fade-in" id="scoreboard">SCORE: <span>0</span> / 8</div>
<div class="vignette" id="vignette"></div>
<div class="buttons fade-in" id="buttons"></div>
<div class="result" id="result"></div>
<div class="fact" id="fact"></div>
<div class="footer fade-in">DESIGN YOUR SPACE. REDEFINE STYLE.</div>
</main>
<script>
const eras = [
{
name: "Victorian",
image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80",
fact: "The Victorian era was marked by the use of rich materials and intricate detailing, often inspired by nature and the Arts and Crafts movement."
},
{
name: "Art Deco",
image: "https://images.unsplash.com/photo-1507973952625-54448983683e?auto=format&fit=crop&w=600&q=80",
fact: "Art Deco, popular in the 1920s-1940s, featured bold geometric shapes, lavish materials, and a love for symmetry and luxury."
},
{
name: "Mid-Century Modern",
image: "https://images.unsplash.com/photo-1473152992598-f18e0f6078e6?auto=format&fit=crop&w=600&q=80",
fact: "Mid-Century Modern design, from the 1950s-1960s, emphasized clean lines, functionality, and a minimalist aesthetic with organic curves."
},
{
name: "Grandmillennial",
image: "https://images.unsplash.com/photo-1539838636893-2d63f0b61b4f?auto=format&fit=crop&w=600&q=80",
fact: "Grandmillennial style blends vintage charm with modern comfort, often featuring pastel hues, floral prints, and ornate details."
}
];
let currentRound = 0;
let score = 0;
let currentEra = {};
let highScore = localStorage.getItem("highScore") || 0;
const vignette = document.getElementById("vignette");
const buttons = document.getElementById("buttons");
const result = document.getElementById("result");
const fact = document.getElementById("fact");
const scoreboard = document.getElementById("scoreboard");
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]];
}
return array;
}
function generateButtons() {
const shuffled = shuffle(eras);
buttons.innerHTML = "";
shuffled.forEach((era) => {
const button = document.createElement("button");
button.classList.add("button");
button.textContent = era.name;
button.addEventListener("click", () => {
if (era.name === currentEra.name) {
score++;
result.textContent = "Correct!";
result.style.color = "var(--accent)";
updateScoreboard();
} else {
result.textContent = "Incorrect. Try again!";
result.style.color = "var(--muted)";
}
setTimeout(showFact, 1000);
});
buttons.appendChild(button);
});
}
function showFact() {
result.textContent = "";
fact.textContent = currentEra.fact;
currentRound++;
if (currentRound < 8) {
setTimeout(loadNextRound, 3000);
} else {
endGame();
}
}
function loadNextRound() {
currentEra = eras[Math.floor(Math.random() * eras.length)];
vignette.style.backgroundImage = `url('${currentEra.image}')`;
generateButtons();
fact.textContent = "";
}
function updateScoreboard() {
scoreboard.querySelector("span").textContent = score;
}
function endGame() {
if (score > highScore) {
localStorage.setItem("highScore", score);
highScore = score;
}
result.textContent = "Game Over!";
fact.textContent = `Your score: ${score}. High score: ${highScore}.`;
buttons.innerHTML = "<button class='button'>Restart</button>";
buttons.querySelector("button").addEventListener("click", () => {
resetGame();
});
}
function resetGame() {
currentRound = 0;
score = 0;
currentEra = {};
result.textContent = "";
fact.textContent = "";
updateScoreboard();
loadNextRound();
}
function init() {
currentEra = eras[Math.floor(Math.random() * eras.length)];
vignette.style.backgroundImage = `url('${currentEra.image}')`;
generateButtons();
updateScoreboard();
}
init();
</script>
</body>
</html>