← back to Model Arena
data/artifacts/104018fe5adc/qwen3-14b.html
261 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallcovering Poll</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);
--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);
}
html, body {
height: 100%;
width: 100%;
background: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
}
header {
font-family: var(--font-display);
font-size: 40px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 24px;
color: var(--text);
background: var(--surface);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: flex-start;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 24px;
}
.container {
width: 100%;
max-width: 390px;
height: 844px;
position: relative;
background: var(--surface);
border-radius: 14px;
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
}
.swatch {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
border: 1px solid var(--line);
box-shadow: inset 0 0 0 1px var(--line);
transition: all 0.2s var(--ease);
}
.swatch.left {
left: 0;
background: linear-gradient(135deg, #f8f6f3 25%, #eae0d6 50%, #f8f6f3 75%);
background-size: 600% 600%;
animation: drift 18s linear infinite;
}
.swatch.right {
right: 0;
background: linear-gradient(135deg, #ffb3c6 25%, #ff8fa7 50%, #ffb3c6 75%);
background-size: 600% 600%;
animation: drift 18s linear infinite;
}
@keyframes drift {
0% {background-position: 0% 50%;}
100% {background-position: 100% 50%;}
}
.vote-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 12px;
background: var(--muted);
border-radius: 6px;
overflow: hidden;
}
.vote-fill {
height: 100%;
width: 0%;
background: var(--accent);
transition: width 0.3s var(--ease);
}
.stamp {
position: absolute;
top: 16px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text);
font-weight: bold;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.stamp.winner {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.overlay.visible {
opacity: 1;
pointer-events: auto;
}
.overlay-content {
text-align: center;
color: var(--text);
font-size: 28px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.label {
position: absolute;
top: 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted);
font-weight: 500;
}
.label.left {
left: 20px;
}
.label.right {
right: 20px;
}
.footer {
position: absolute;
bottom: 16px;
width: 100%;
text-align: center;
font-size: 12px;
letter-spacing: 0.15em;
color: var(--muted);
}
</style>
</head>
<body>
<header>DESIGNER WALLCOVERINGS</header>
<main>
<div class="container">
<div class="swatch left" id="swatch-left"></div>
<div class="swatch right" id="swatch-right"></div>
<div class="vote-bar">
<div class="vote-fill" id="vote-fill" style="width: 0%"></div>
</div>
<div class="stamp" id="stamp-left">DAMASK</div>
<div class="stamp" id="stamp-right">GEOMETRIC</div>
<div class="label left">DAMASK</div>
<div class="label right">GEOMETRIC</div>
<div class="overlay" id="overlay">
<div class="overlay-content" id="overlay-content">GEOMETRIC WINS</div>
</div>
<div class="footer">TAP TO VOTE</div>
</div>
</main>
<script>
const swatchLeft = document.getElementById('swatch-left');
const swatchRight = document.getElementById('swatch-right');
const voteFill = document.getElementById('vote-fill');
const stampLeft = document.getElementById('stamp-left');
const stampRight = document.getElementById('stamp-right');
const overlay = document.getElementById('overlay');
const overlayContent = document.getElementById('overlay-content');
let votesLeft = 0;
let votesRight = 0;
swatchLeft.addEventListener('click', () => {
votesLeft++;
updateVoteBar();
});
swatchRight.addEventListener('click', () => {
votesRight++;
updateVoteBar();
});
function updateVoteBar() {
const total = votesLeft + votesRight;
const percent = total > 0 ? (votesRight / total) * 100 : 0;
voteFill.style.width = percent + '%';
if (total >= 10) {
if (votesLeft > votesRight) {
overlayContent.textContent = 'DAMASK WINS';
} else {
overlayContent.textContent = 'GEOMETRIC WINS';
}
overlay.classList.add('visible');
} else {
overlay.classList.remove('visible');
}
}
// Ensure stamp shows only on win
if (votesLeft > votesRight) {
stampLeft.classList.add('winner');
} else if (votesRight > votesLeft) {
stampRight.classList.add('winner');
}
</script>
</body>
</html>