← back to Model Arena
data/artifacts/25835bfaba3a/hf-qwen-coder-32b.html
234 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;
--ink: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--line: #eae6e1;
--shadow: 0 8px 24px rgba(0,0,0,.12);
--hover-shadow: 0 16px 48px rgba(0,0,0,.18);
--glow: 0 0 24px rgba(176,71,46,0.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(--ink);
line-height: 1.5;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 24px 32px;
background-color: var(--bg);
box-shadow: var(--shadow);
z-index: 1000;
}
header h1 {
margin: 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 28px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
}
main {
display: flex;
justify-content: center;
padding-top: 96px;
}
section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px;
}
.round {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.matchup {
position: relative;
background-color: var(--surface);
border-radius: 14px;
box-shadow: var(--shadow);
transition: transform .15s ease-in-out;
}
.matchup:hover {
box-shadow: var(--hover-shadow);
transform: translateY(-4px);
}
.swatch {
width: 100%;
height: 260px;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--line);
}
.swatch svg {
width: 150px;
height: 150px;
}
.result {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
text-align: center;
font-size: 12px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.overlay-content {
background-color: var(--surface);
padding: 48px;
border-radius: 16px;
box-shadow: 0 24px 48px rgba(0,0,0,.35);
text-align: center;
}
.overlay-content h2 {
margin-bottom: 24px;
font-size: 38px;
color: var(--ink);
}
.overlay-content p {
margin: 0 0 24px;
font-size: 16px;
color: var(--muted);
}
.overlay-content button {
padding: 12px 24px;
background-color: var(--accent);
border: none;
border-radius: 8px;
color: var(--surface);
font-size: 16px;
cursor: pointer;
transition: background-color .15s ease-in-out;
}
.overlay-content button:hover {
background-color: rgba(176,71,46,.8);
}
</style>
</head>
<body>
<header>
<h1>DESIGNER WALLCOVERINGS</h1>
</header>
<main>
<section id="tournament">
<div class="round" data-round="quarterfinals">
<div class="matchup" data-match="0">
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(0, 0)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#c9a961"/></svg>
</div>
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(0, 1)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#b0472e"/></svg>
</div>
</div>
<div class="matchup" data-match="1">
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(1, 0)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#c9a961"/></svg>
</div>
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(1, 1)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#b0472e"/></svg>
</div>
</div>
<div class="matchup" data-match="2">
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(2, 0)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#c9a961"/></svg>
</div>
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(2, 1)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#b0472e"/></svg>
</div>
</div>
<div class="matchup" data-match="3">
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(3, 0)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#c9a961"/></svg>
</div>
<div class="swatch" style="background-color: #f5f2ea;" onclick="advanceMatch(3, 1)">
<svg viewBox="0 0 100 100"><path d="M40 98 C33.9 96.7 29.7 91.1 29 85 C28.3 78.9 30.5 72.3 35 67.5 L35 32.5 C30.5 27.7 28.3 21.1 29 14.9 C29.7 8.7 33.9 3.1 40 1.8 L60 1.8 C66.1 3.1 70.3 8.7 71 14.9 C71.7 21.1 69.5 27.7 65 32.5 L65 67.5 C69.5 72.3 71.7 78.9 71 85 C70.3 91.1 66.1 96.7 60 98 Z" fill="#b0472e"/></svg>
</div>
</div>
</div>
<div class="round" data-round="semifinals" style="display: none;">
<div class="matchup" data-match="0">
<div class="swatch" style="background-color: #f5f2ea;"></div>
<div class="swatch" style="background-color: #f5f2ea;"></div>
</div>
<div class="matchup" data-match="1">
<div class="swatch" style="background-color: #f5f2ea;"></div>
<div class="swatch" style="background-color: #f5f2ea;"></div>
</div>
</div>
<div class="round" data-round="finals" style="display: none;">
<div class="matchup" data-match="0">
<div class="swatch" style="background-color: #f5f2ea;"></div>
<div class="swatch" style="background-color: #f5f2ea;"></div>
</div>
</div>
</section>
</main>
<div id="resultOverlay" class="overlay" style="display: none;">
<div class="overlay-content">
<h2>CHAMPION!</h2>
<p id="championName"></p>
<button onclick="restartTournament()">RESTART TOURNAMENT</button>
</div>
</div>
<script>
const rounds = document.querySelectorAll('.round');
let currentRoundIndex = 0;
const matches = Array.from(rounds).flatMap(round => Array.from(round.children));
matches.forEach(match => match.style.opacity = '0').forEach((match, index) => setTimeout(() => match.style.opacity = '1', index * 90));
function advanceMatch(roundIndex, winnerIndex) {
const round = rounds[roundIndex];
const nextRound = rounds[roundIndex + 1];
if (nextRound) {
nextRound.children[winnerIndex].children[0].innerHTML = round.children[winnerIndex * 2].children[0].innerHTML;
nextRound.style.display = 'grid';
} else {
document.getElementById('championName').textContent = `The winner is ${['Damask', 'Toile', 'Ikat', 'Chinoiserie', 'Art Deco', 'Boho', 'Coastal', 'Grandmillennial'][winnerIndex * 4 + (roundIndex % 2) * 2]};
document.getElementById('resultOverlay').style.display = 'flex';
}
round.style.display = 'none';
}
function restartTournament() {
currentRoundIndex = 0;
rounds.forEach(round => round.style.display = 'none');
rounds[0].style.display = 'grid';
matches.forEach(match => match.children[0].innerHTML = '');
document.getElementById('resultOverlay').style.display = 'none';
}
</script>
</body>
</html>