← back to Model Arena
data/artifacts/2b11fe341ffd/qwen3-14b.html
358 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style Showdown</title>
<style>
:root {
--bg: #faf8f4;
--surface: #ffffff;
--text: #1c1a17;
--muted: #9b948a;
--accent: #b0472e;
--line: #e0e0e0;
--shadow: 0 8px 24px rgba(0,0,0,0.12);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--fade-up: 0.7s var(--ease) both;
--stagger: 90ms;
--card-radius: 14px;
--card-gap: 24px;
--card-min: 260px;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-body);
}
body {
background-color: var(--bg);
color: var(--text);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16px 24px;
background-color: var(--surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 1000;
font-family: var(--font-display);
font-size: 40px;
letter-spacing: 0.18em;
color: var(--text);
display: flex;
align-items: center;
}
main {
padding-top: 96px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
min-height: 100vh;
}
.bracket {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
gap: var(--card-gap);
width: 100%;
max-width: 1200px;
padding: 0 24px;
}
.matchup {
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: var(--card-radius);
padding: 24px;
box-shadow: var(--shadow);
transition: transform 0.2s var(--ease);
}
.matchup:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.swatch {
width: 100%;
height: 200px;
border-radius: var(--card-radius);
overflow: hidden;
position: relative;
margin-bottom: 12px;
}
.swatch::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--accent), #fff, var(--accent));
background-size: 400% 400%;
animation: drift 18s linear infinite;
}
@keyframes drift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.swatch:nth-child(1)::before {
background: linear-gradient(45deg, #c9a961, #fff, #7d6a45);
}
.swatch:nth-child(2)::before {
background: linear-gradient(45deg, #b0472e, #fff, #2f4c39);
}
.swatch:nth-child(3)::before {
background: linear-gradient(45deg, #c65f38, #fff, #e0a458);
}
.swatch:nth-child(4)::before {
background: linear-gradient(45deg, #8a8578, #fff, #c9a961);
}
.swatch:nth-child(5)::before {
background: linear-gradient(45deg, #1c1a17, #fff, #c9a961);
}
.swatch:nth-child(6)::before {
background: linear-gradient(45deg, #7d6a45, #fff, #c9a961);
}
.swatch:nth-child(7)::before {
background: linear-gradient(45deg, #b0472e, #fff, #2f4c39);
}
.swatch:nth-child(8)::before {
background: linear-gradient(45deg, #8a8578, #fff, #c9a961);
}
.button {
background-color: var(--accent);
color: var(--text);
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: background-color 0.2s var(--ease);
margin: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.button:hover {
background-color: #d59e5c;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease);
}
.overlay.show {
opacity: 1;
visibility: visible;
}
.result-card {
background-color: var(--surface);
padding: 32px;
border-radius: var(--card-radius);
max-width: 400px;
text-align: center;
box-shadow: 0 0 24px var(--accent);
}
.result-card h2 {
font-family: var(--font-display);
font-size: 28px;
margin-bottom: 16px;
color: var(--accent);
}
.result-card p {
font-size: 16px;
color: var(--text);
margin-bottom: 24px;
}
.share {
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
cursor: pointer;
transition: color 0.2s var(--ease);
}
.share:hover {
color: #b0472e;
}
.fade-up {
animation: fadeUp var(--fade-up) var(--ease) both;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<main>
<div class="bracket" id="bracket">
<div class="matchup fade-up" data-round="quarter" data-index="0">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(0)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="quarter" data-index="1">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(1)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="quarter" data-index="2">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(2)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="quarter" data-index="3">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(3)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="semi" data-index="0">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(4)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="semi" data-index="1">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(5)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="final" data-index="0">
<div class="swatch"></div>
<div class="swatch"></div>
<button class="button" onclick="selectWinner(6)">SELECT WINNER</button>
</div>
<div class="matchup fade-up" data-round="champion" data-index="0">
<div class="swatch"></div>
<button class="button" onclick="showResult()">SHOW RESULT</button>
</div>
</div>
</main>
<div class="overlay" id="overlay">
<div class="result-card">
<h2>CHAMPION</h2>
<p id="champion-text">Grandmillennial</p>
<div class="share" onclick="copyToClipboard()">SHARE THIS STYLE SHOWDOWN</div>
</div>
</div>
<script>
const brackets = document.querySelectorAll('.matchup');
const overlay = document.getElementById('overlay');
const championText = document.getElementById('champion-text');
let winners = [];
function selectWinner(index) {
const bracket = brackets[index];
if (!winners[index]) {
winners[index] = 0;
}
winners[index] = (winners[index] + 1) % 2;
bracket.querySelector('.button').textContent = winners[index] ? 'SELECT WINNER' : 'SELECT WINNER';
advanceRound();
}
function advanceRound() {
let currentRound = 'quarter';
let nextRound = 'semi';
let nextBracketIndex = 0;
for (let i = 0; i < brackets.length; i++) {
const bracket = brackets[i];
const round = bracket.getAttribute('data-round');
if (round === currentRound) {
const winnerIndex = winners[i];
if (winnerIndex !== undefined && winnerIndex !== null) {
const nextBracket = brackets[nextBracketIndex];
if (nextBracket.getAttribute('data-round') === nextRound) {
nextBracket.querySelector('.swatch').style.backgroundImage = bracket.querySelectorAll('.swatch')[winnerIndex].style.backgroundImage;
nextBracket.querySelector('.swatch').style.backgroundImage = bracket.querySelectorAll('.swatch')[winnerIndex].style.backgroundImage;
nextBracketIndex++;
}
}
}
}
if (nextBracketIndex === 2) {
currentRound = 'semi';
nextRound = 'final';
nextBracketIndex = 0;
}
if (nextBracketIndex === 2) {
currentRound = 'final';
nextRound = 'champion';
nextBracketIndex = 0;
}
}
function showResult() {
overlay.classList.add('show');
championText.textContent = 'Grandmillennial';
}
function copyToClipboard() {
navigator.clipboard.writeText(window.location.href).then(() => {
alert('Result copied to clipboard!');
});
}
</script>
</body>
</html>