← back to Model Arena
data/artifacts/2b11fe341ffd/hf-qwen-coder-32b.html
214 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;
--line: 1px solid #e5e3df;
--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,.35);
--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: 96px;
display: flex;
flex-direction: column;
align-items: center;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--bg);
padding: 24px;
box-shadow: var(--shadow);
z-index: 1000;
font-family: 'Playfair Display', Georgia, serif;
font-size: 50px;
letter-spacing: .18em;
text-transform: uppercase;
}
header h1 {
margin: 0;
}
main {
width: 100%;
max-width: 960px;
display: flex;
flex-direction: column;
align-items: center;
}
.round {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
width: 100%;
margin-bottom: 96px;
}
.matchup {
background-color: var(--surface);
border-radius: 14px;
box-shadow: var(--shadow);
transition: box-shadow .3s ease, transform .3s ease;
overflow: hidden;
position: relative;
}
.matchup:hover {
box-shadow: var(--hover-shadow);
transform: translateY(-8px);
}
.matchup .swatch {
width: 100%;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.matchup .swatch svg {
width: 80%;
height: auto;
}
.matchup .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
color: var(--text);
transition: opacity .3s ease;
pointer-events: none;
opacity: 0;
}
.matchup.selected .overlay {
opacity: 1;
}
.result-card {
background-color: var(--surface);
border-radius: 14px;
box-shadow: var(--hover-shadow);
padding: 32px;
text-align: center;
font-size: 38px;
margin-top: 96px;
display: none;
}
.result-card.active {
display: block;
}
.result-card h2 {
margin-bottom: 24px;
}
.result-card .swatch {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<header><h1>DESIGNER WALLCOVERINGS</h1></header>
<main>
<div class="round" id="quarterfinals">
<div class="matchup" data-style="Damask" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Toile" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Ikat" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Chinoiserie" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Art Deco" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Boho" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Coastal" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
<div class="matchup" data-style="Grandmillennial" onclick="advanceMatch(this)">
<div class="swatch"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6V5H5V6H4V18H5V19H19V18H20V6H19ZM7.5 16C7.5 17.38 8.62 18.5 10 18.5C11.38 18.5 12.5 17.38 12.5 16C12.5 14.62 11.38 13.5 10 13.5C8.62 13.5 7.5 14.62 7.5 16ZM10 9C8.34 9 7 10.34 7 12C7 13.66 8.34 15 10 15C11.66 15 13 13.66 13 12C13 10.34 11.66 9 10 9Z" fill="#b0472e"/><path d="M16 13C16 14.38 17.12 15.5 18.5 15.5C19.88 15.5 21 14.38 21 13C21 11.62 19.88 10.5 18.5 10.5C17.12 10.5 16 11.62 16 13ZM18.5 8C16.84 8 15.5 9.34 15.5 11C15.5 12.66 16.84 14 18.5 14C20.16 14 21.5 12.66 21.5 11C21.5 9.34 20.16 8 18.5 8Z" fill="#b0472e"/></svg></div>
<div class="overlay">WINNER</div>
</div>
</div>
<div class="round" id="semifinals" style="display: none;">
<!-- Matchups will be populated here -->
</div>
<div class="round" id="finals" style="display: none;">
<!-- Matchup will be populated here -->
</div>
<div class="result-card" id="resultCard">
<h2>CHAMPION</h2>
<div class="swatch"></div>
</div>
</main>
<script>
const matchups = document.querySelectorAll('#quarterfinals .matchup');
const semifinals = document.getElementById('semifinals');
const finals = document.getElementById('finals');
const resultCard = document.getElementById('resultCard');
function advanceMatch(matchup) {
matchup.classList.add('selected');
setTimeout(() => {
if (matchups.length > 2) {
const nextRound = semifinals;
const newMatchup = createMatchup([matchup]);
nextRound.appendChild(newMatchup);
nextRound.style.display = 'grid';
} else {
const nextRound = finals;
const newMatchup = createMatchup([matchup]);
nextRound.appendChild(newMatchup);
nextRound.style.display = 'grid';
}
}, 500);
}
function createMatchup(winners) {
const matchupDiv = document.createElement('div');
matchupDiv.className = 'matchup';
matchupDiv.addEventListener('click', () => {
resultCard.querySelector('.swatch').innerHTML = winners[0].querySelector('.swatch').innerHTML;
resultCard.style.display = 'block';
finals.style.display = 'none';
});
const swatchDiv = document.createElement('div');
swatchDiv.className = 'swatch';
swatchDiv.innerHTML = winners[0].querySelector('.swatch').innerHTML;
matchupDiv.appendChild(swatchDiv