← back to Model Arena
data/artifacts/0219528ac7d7/gemma3-12b.html
270 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: rgba(0, 0, 0, 0.06);
--shadow: rgba(0, 0, 0, 0.12);
--ease: cubic-bezier(.22,1,.36,1);
}
body {
font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scroll */
}
header {
background-color: var(--surface);
padding: 24px;
text-align: left;
font-family: 'Playfair Display', Georgia, serif;
font-size: 67px;
letter-spacing: .18em;
line-height: 1; /* Reduce vertical spacing */
color: var(--text);
}
.container {
padding: 96px;
max-width: 1200px;
margin: 0 auto;
}
.vignette {
width: 100%;
height: 400px;
background-size: cover;
border-radius: 14px;
box-shadow: 0 8px 24px var(--shadow);
margin-bottom: 32px;
position: relative;
}
.vignette::before { /* decorative gradient overlay */
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) , rgba(255, 255, 255, 0.3));
}
.options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.option-button {
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 24px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--muted);
cursor: pointer;
transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.option-button:hover {
background-color: #f9f3e6; /* slightly darker surface */
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
#score {
font-size: 28px;
text-align: center;
margin-bottom: 32px;
}
#era-fact {
font-style: italic;
color: var(--muted);
text-align: center;
margin-top: 32px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1000;
}
.overlay button {
padding: 16px 32px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .1em;
border: none;
background-color: var(--accent);
color: #fff;
border-radius: 8px;
cursor: pointer;
}
.hidden {
display:none;
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<div class="container">
<div id="score">Score: 0</div>
<div class="vignette" id="vignette">
<!-- Vignette image will be set dynamically -->
</div>
<div class="options" id="options">
<!-- Option buttons will be generated dynamically -->
</div>
<p id="era-fact"></p>
<div class="overlay hidden" id="gameover">
<h2>Game Over!</h2>
<p>Your Final Score: <span id="finalScore">0</span></p>
<button onclick="restartGame()">Play Again</button>
</div>
</div>
<script>
const eras = [
{ name: "Victorian", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:#f3e5ab;stop-opacity:1\"><\/stop><stop offset=\"48.179%\" style=\"stop-color:#d4a36c;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#bcaaa4;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad1)\" /><\/svg>')", fact: "Victorian design emphasized ornate details and rich colors." },
{ name: "Art Deco", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#3498db;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#e74c3c;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#2ecc71;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad2)\" /><\/svg>')", fact: "Art Deco celebrated modernity and geometric forms." },
{ name: "Mid-Century Modern", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad3\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#f39c12;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#e67e22;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#d35400;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad3)\" /><\/svg>')", fact: "Mid-Century Modern focused on functionality and clean lines." },
{ name: "Grandmillennial", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad4\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#9b59b6;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#34495e;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#2c3e50;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad4)\" /><\/svg>')", fact: "Grandmillennial style blends traditional and modern elements." }
];
let currentEraIndex = 0;
let score = 0;
let round = 1;
let bestScore = localStorage.getItem('bestScore') || 0;
function startGame() {
score = 0;
round = 1;
updateScore();
showEra();
document.getElementById('era-fact').textContent = ""; // Clear any previous fact
}
function showEra() {
const era = eras[currentEraIndex];
document.getElementById('vignette').style.backgroundImage = era.image;
}
function createOptions() {
const optionContainer = document.getElementById('options');
optionContainer.innerHTML = ""; // Clear previous options
const correctEraName = eras[currentEraIndex].name;
let incorrectEras = [];
// Ensure we get three different incorrect era names
while (incorrectEras.length < 3) {
let randomIndex = Math.floor(Math.random() * eras.length);
if (eras[randomIndex].name !== correctEraName && !incorrectEras.includes(eras[randomIndex].name)) {
incorrectEras.push(eras[randomIndex].name);
}
}
const allOptions = [correctEraName, ...incorrectEras];
allOptions.sort(); // Randomize the order of options
allOptions.forEach(option => {
const button = document.createElement('button');
button.classList.add('option-button');
button.textContent = option;
button.addEventListener('click', () => checkAnswer(option));
optionContainer.appendChild(button);
});
}
function checkAnswer(guess) {
if (guess === eras[currentEraIndex].name) {
score++;
updateScore();
showFact();
nextRound();
} else {
gameOver();
}
}
function showFact() {
document.getElementById('era-fact').textContent = eras[currentEraIndex].fact;
}
function nextRound() {
if (round < 8) {
round++;
currentEraIndex = (currentEraIndex + 1) % eras.length; // Cycle through eras
showEra();
createOptions();
updateScore();
} else {
gameOver();
}
}
function updateScore() {
document.getElementById('score').textContent = `Score: ${score}`;
localStorage.setItem('bestScore', Math.max(parseInt(bestScore), score)); // Update best score in localStorage
}
function gameOver() {
const overlay = document.getElementById("gameover");
overlay.querySelector("#finalScore").textContent = score;
overlay.classList.remove("hidden");
}
function restartGame() {
startGame();
document.getElementById('gameover').classList.add('hidden');
}
window.onload = () => {
startGame();
};
</script>
</body>
</html>