← back to Model Arena
data/artifacts/25835bfaba3a/gemma3-12b.html
258 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Showdown</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent: #b0472e; /* Primary accent color */
--line: #dcdcdc;
--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;
letter-spacing: .18em;
display: flex;
align-items: center;
}
header span {
font-size: 32px;
font-weight: bold;
}
.container {
padding: 96px;
max-width: 1200px;
margin: 0 auto;
}
.style-card {
background-color: var(--surface);
border-radius: 14px;
box-shadow: 0 8px 24px var(--shadow);
padding: 32px;
width: 100%;
max-width: 260px;
transition: transform .3s ease, box-shadow .3s ease;
}
.style-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px var(--shadow);
}
.matchup {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.result-card {
background-color: var(--surface);
border-radius: 14px;
box-shadow: 0 8px 24px var(--shadow);
padding: 32px;
max-width: 400px;
margin: 48px auto;
text-align: center;
}
.result-card h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 38px;
margin-bottom: 16px;
}
.result-card p {
font-size: 18px;
color: var(--muted);
}
/* Style Swatches (CSS Gradients/SVG) */
.damask { background: linear-gradient(to right, #f0e68c, #d2b48c); }
.toile { background: repeating-linear-gradient(45deg, rgba(238, 232, 217, 0.1), rgba(238, 232, 217, 0.2) 10px, rgba(238, 232, 217, 0.3) 20px); }
.ikat { background: repeating-linear-gradient(45deg, #e6b8af 0%, #e6b8af 10%, transparent 10%, transparent 20%) , repeating-linear-gradient(45deg, #d9a3ad 0%, #d9a3ad 10%, transparent 10%, transparent 20%); }
.chinoiserie { background: repeating-linear-gradient(75deg, rgba(255, 247, 236, 0.2), rgba(255, 247, 236, 0) 10px); }
.artdeco { background: repeating-linear-gradient(45deg, #f8e71a 0%, #f8e71a 5px, transparent 5px, transparent 15%); }
.boho{ background: linear-gradient(-45deg, #c39b6b, #d2ac7b); }
.coastal { background: repeating-linear-gradient(45deg, rgba(255, 255, 204, 0.1), transparent 10px, transparent 20px) ; }
.grandmillennial { background: repeating-linear-gradient(90deg, #f8e71a 0%,#f8e71a 10px,transparent 10px); }
/* Buttons */
button {
background-color: var(--accent);
color: var(--surface);
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .15em;
transition: background-color .3s ease;
}
button:hover {
background-color: var(--muted); /* Slightly darker on hover */
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity .3s ease;
}
.overlay.active {
opacity: 1;
}
</style>
</head>
<body>
<header>
<span>DESIGNER WALLCOVERINGS</span>
</header>
<div class="container">
<h1>Style Showdown</h1>
<section class="matchup" id="matchup-1">
<div class="style-card damask" data-style="damask"></div>
<div class="style-card toile" data-style="toile"></div>
</section>
<section class="matchup" id="matchup-2">
<div class="style-card ikat" data-style="ikat"></div>
<div class="style-card chinoiserie" data-style="chinoiserie"></div>
</section>
<section class="matchup" id="matchup-3">
<div class="style-card artdeco" data-style="artdeco"></div>
<div class="style-card boho" data-style="boho"></div>
</section>
<section class="matchup" id="matchup-4">
<div class="style-card coastal" data-style="coastal"></div>
<div class="style-card grandmillennial" data-style="grandmillennial"></div>
</section>
<div class="result-card" id="result-card" style="display: none;">
<h2>Champion!</h2>
<p id="champion-style"></p>
</div>
<button id="restart-button">Restart Tournament</button>
</div>
<div class="overlay" id="overlay">
Loading... Please wait.
</div>
<script>
const styleCards = document.querySelectorAll('.style-card');
const matchupSections = document.querySelectorAll('.matchup');
const resultCard = document.getElementById('result-card');
const championStyleElement = document.getElementById('champion-style');
const restartButton = document.getElementById('restart-button');
const overlay = document.getElementById("overlay");
let currentRound = 1;
let winnerStyle = null;
let gameActive = false;
function fadeIn() {
overlay.classList.add("active");
}
setTimeout(fadeIn, 50); // Start fading in after a brief delay
function showMatchup(round) {
const matchupSection = document.getElementById(`matchup-${round}`);
if (round > currentRound) return;
matchupSections.forEach((section, index) => {
if (index < round ) {
section.style.display = 'none'; // Hide previous matchups
} else if( index >= round){
section.style.display = 'flex'
}else{
section.style.display = "flex";
}
});
}
function advanceRound() {
currentRound++;
showMatchup(currentRound);
}
function handleCardClick(event) {
const selectedCard = event.currentTarget;
const style = selectedCard.dataset.style;
if (winnerStyle === null) {
winnerStyle = style;
selectedCard.classList.add('winner');
advanceRound();
} else {
alert("Please choose one winner at a time."); // Simple error handling
}
}
styleCards.forEach(card => {
card.addEventListener('click', handleCardClick);
});
restartButton.addEventListener("click", () => {
location.reload(); // Simplest restart
});
// Initialize the game and show the first matchup
showMatchup(1);
</script>
</body>
</html>