← back to Model Arena
data/artifacts/25835bfaba3a/qwen3-14b.html
319 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style Showdown</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--ink: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--line: #e0e0e0;
--shadow: 0 8px 24px rgba(0,0,0,0.12);
--hover-shadow: 0 16px 48px rgba(0,0,0,0.18);
--glow: 0 0 24px var(--accent, #b0472e)35%;
--ease: cubic-bezier(0.22,1,0.36,1);
--fade-up: 0.7s var(--ease) both;
--spacing: 8px;
--card-radius: 14px;
--card-gap: 24px;
--section-padding: 96px;
--font-display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
--font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--h1: 50px;
--h2: 38px;
--h3: 28px;
--body: 16px;
--caption: 12px;
--label: 12px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-family: var(--font-body);
background-color: var(--bg);
color: var(--ink);
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--surface);
padding: 16px 32px;
font-family: var(--font-display);
font-size: var(--h2);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
z-index: 1000;
}
header::after {
content: '';
display: block;
height: 1px;
background-color: var(--line);
margin-top: 8px;
}
main {
padding-top: var(--section-padding);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
overflow-y: auto;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--card-gap);
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.matchup {
background-color: var(--surface);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: box-shadow 0.3s var(--ease);
}
.matchup:hover {
box-shadow: var(--hover-shadow);
}
.swatch {
width: 100%;
height: 240px;
background: linear-gradient(135deg, #e6c9a6 0%, #d6b797 100%);
background-size: 800px 800px;
position: relative;
cursor: pointer;
transition: transform 0.2s var(--ease);
}
.swatch:active {
transform: scale(0.98);
}
.label {
position: absolute;
top: 16px;
left: 16px;
font-family: var(--font-body);
font-size: var(--label);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted);
}
.results {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--surface);
border-radius: var(--card-radius);
padding: 48px;
box-shadow: var(--hover-shadow);
text-align: center;
max-width: 400px;
animation: fadeUp var(--fade-up);
}
.results h2 {
font-size: var(--h2);
margin-bottom: 24px;
}
.results .winner {
font-size: var(--h1);
margin-bottom: 24px;
color: var(--accent);
}
.results .share {
background-color: var(--accent);
color: var(--surface);
font-size: var(--body);
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s var(--ease);
}
.results .share:hover {
background-color: #c9a961;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes drift {
0% {background-position: 0 0;}
100% {background-position: 800px 800px;}
}
body {
background: linear-gradient(135deg, #e6c9a6 0%, #d6b797 100%);
background-size: 800px 800px;
animation: drift 18s linear infinite;
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<main>
<div class="container" id="bracket">
<div class="matchup">
<div class="swatch" data-style="Damask" style="background: linear-gradient(135deg, #e6c9a6 0%, #d6b797 100%); background-size: 800px 800px;">
<div class="label">Damask</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Toile" style="background: linear-gradient(135deg, #f7e3d2 0%, #e3c9b3 100%); background-size: 800px 800px;">
<div class="label">Toile</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Ikat" style="background: linear-gradient(135deg, #c9a961 0%, #7d6a45 100%); background-size: 800px 800px;">
<div class="label">Ikat</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Chinoiserie" style="background: linear-gradient(135deg, #e6d6c3 0%, #cdaa92 100%); background-size: 800px 800px;">
<div class="label">Chinoiserie</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Art Deco" style="background: linear-gradient(135deg, #d6c9b3 0%, #b3a992 100%); background-size: 800px 800px;">
<div class="label">Art Deco</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Boho" style="background: linear-gradient(135deg, #e3d6c9 0%, #c9b3a9 100%); background-size: 800px 800px;">
<div class="label">Boho</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Coastal" style="background: linear-gradient(135deg, #e6f7f3 0%, #d6e3d2 100%); background-size: 800px 800px;">
<div class="label">Coastal</div>
</div>
</div>
<div class="matchup">
<div class="swatch" data-style="Grandmillennial" style="background: linear-gradient(135deg, #f7e6e3 0%, #e3d6c9 100%); background-size: 800px 800px;">
<div class="label">Grandmillennial</div>
</div>
</div>
</div>
<div class="results" id="results">
<h2>Style Showdown</h2>
<div class="winner" id="winner">Champion</div>
<div class="share" onclick="copyToClipboard()">Share Result</div>
</div>
</main>
<script>
const bracket = document.getElementById('bracket');
const results = document.getElementById('results');
const winnerText = document.getElementById('winner');
let styles = ["Damask", "Toile", "Ikat", "Chinoiserie", "Art Deco", "Boho", "Coastal", "Grandmillennial"];
let currentRound = 0;
let winners = [];
function nextRound() {
if (winners.length === 1) {
winnerText.textContent = winners[0];
results.style.display = 'block';
return;
}
if (winners.length < 2) return;
bracket.innerHTML = '';
let matches = [];
for (let i = 0; i < winners.length; i += 2) {
matches.push([winners[i], winners[i + 1]]);
}
matches.forEach(match => {
const matchup = document.createElement('div');
matchup.className = 'matchup';
match.forEach(style => {
const swatch = document.createElement('div');
swatch.className = 'swatch';
swatch.style.background = `linear-gradient(135deg, ${getStyleBackground(style)} 0%, ${getStyleBackground(style).replace(/[^,]+/,'')} 100%)`;
swatch.style.backgroundSize = '800px 800px';
swatch.dataset.style = style;
swatch.innerHTML = `<div class="label">${style}</div>`;
swatch.addEventListener('click', () => {
if (matches.length === 1) {
winners = [style];
nextRound();
} else {
winners = matches.flatMap(m => m.includes(style) ? [style] : m);
nextRound();
}
});
matchup.appendChild(swatch);
});
bracket.appendChild(matchup);
});
}
function getStyleBackground(style) {
switch (style) {
case "Damask": return "#e6c9a6, #d6b797";
case "Toile": return "#f7e3d2, #e3c9b3";
case "Ikat": return "#c9a961, #7d6a45";
case "Chinoiserie": return "#e6d6c3, #cdaa92";
case "Art Deco": return "#d6c9b3, #b3a992";
case "Boho": return "#e3d6c9, #c9b3a9";
case "Coastal": return "#e6f7f3, #d6e3d2";
case "Grandmillennial": return "#f7e6e3, #e3d6c9";
default: return "#e6c9a6, #d6b797";
}
}
function copyToClipboard() {
const text = winnerText.textContent;
navigator.clipboard.writeText(text).then(() => {
alert('Result copied to clipboard!');
});
}
document.querySelectorAll('.swatch').forEach(swatch => {
swatch.addEventListener('click', () => {
if (currentRound === 0) {
winners = [swatch.dataset.style];
currentRound = 1;
nextRound();
}
});
});
</script>
</body>
</html>