← back to Model Arena
data/artifacts/25835bfaba3a/kimi.html
962 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 | Designer Wallcoverings</title>
<style>
/* DESIGN TOKENS */
:root {
/* Luxury Palette - Ivory Ground */
--bg: #f5f2ea;
--surface: #ede9df;
--surface-2: #e5e0d4;
--ink: #1a1a1d;
--ink-muted: #6b665c;
--accent: #b69145;
--accent-light: #d4b76a;
--line: #d4cfc4;
--shadow: rgba(26,26,29,0.06);
--shadow-deep: rgba(26,26,29,0.12);
/* Typography */
--font-serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
--font-sans: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
/* Motion */
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-power: cubic-bezier(.77,0,.18,1);
--ease-out: cubic-bezier(.22,1,.36,1);
/* Spacing */
--header-height: 72px;
}
/* RESET & BASE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
line-height: 1.6;
min-height: 100vh;
padding-top: var(--header-height);
}
/* HEADER - Fixed Top Bar */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background: var(--bg);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
padding: 0 48px;
z-index: 1000;
box-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.wordmark {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.2;
}
/* MAIN CONTAINER */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px;
}
/* TOURNAMENT TITLE */
.tournament-title {
text-align: center;
margin-bottom: 64px;
animation: fadeUp 0.8s var(--ease-out) both;
}
.tournament-title h1 {
font-family: var(--font-serif);
font-size: 50px;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--ink);
}
.tournament-title p {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
font-weight: 500;
}
/* BRACKET LAYOUT */
.bracket-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
position: relative;
}
.round-column {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
}
.round-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
text-align: center;
margin-bottom: 16px;
font-weight: 600;
}
/* MATCHUP CARD */
.matchup {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 2px;
overflow: hidden;
position: relative;
transition: all 0.4s var(--ease-swift);
box-shadow: 0 2px 8px var(--shadow);
}
.matchup:hover {
box-shadow: 0 4px 16px var(--shadow-deep);
transform: translateY(-2px);
}
.matchup.completed {
opacity: 0.5;
pointer-events: none;
}
.matchup-card {
display: flex;
height: 140px;
position: relative;
}
.style-option {
flex: 1;
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.4s var(--ease-swift);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 16px;
}
.style-option::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.style-option:hover::before {
opacity: 0.08;
background: var(--accent);
}
.style-option:hover {
flex: 1.15;
}
.style-option.winner {
flex: 2;
}
.style-option.loser {
flex: 0;
opacity: 0;
pointer-events: none;
}
/* PATTERN SWATCHES */
.swatch {
position: absolute;
inset: 0;
opacity: 0.9;
}
.swatch-damask {
background:
radial-gradient(circle at 30% 30%, var(--accent-light) 2px, transparent 2px),
radial-gradient(circle at 70% 70%, var(--accent) 1px, transparent 1px),
radial-gradient(ellipse at 50% 50%, var(--accent-light) 0px, transparent 60%),
repeating-linear-gradient(45deg, var(--surface-2) 0px, var(--surface-2) 2px, transparent 2px, transparent 12px),
repeating-linear-gradient(-45deg, var(--surface-2) 0px, var(--surface-2) 2px, transparent 2px, transparent 12px);
background-color: #3d3229;
}
.swatch-damask::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, var(--accent) 20%, transparent 50%);
opacity: 0.3;
}
.swatch-toile {
background:
repeating-linear-gradient(90deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 20px),
linear-gradient(to bottom, #8fa5b8 0%, #a8c4d9 100%);
position: relative;
}
.swatch-toile::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,50 Q30,30 50,40 T80,50' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.4'/%3E%3Ccircle cx='25' cy='35' r='2' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='75' cy='40' r='3' fill='%23ffffff' opacity='0.3'/%3E%3C/svg%3E");
background-size: 60px 60px;
}
.swatch-ikat {
background:
repeating-linear-gradient(90deg,
#8b4513 0px, #8b4513 8px,
#d2691e 8px, #d2691e 16px,
#cd853f 16px, #cd853f 24px,
#8b4513 24px, #8b4513 32px
);
filter: blur(0.5px);
opacity: 0.85;
}
.swatch-chinoiserie {
background: #f8f6f0;
position: relative;
}
.swatch-chinoiserie::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,70 Q40,50 50,60 T70,40 Q60,30 50,20' fill='none' stroke='%234a7c59' stroke-width='1.5'/%3E%3Ccircle cx='35' cy='55' r='4' fill='%23d4af37'/%3E%3Ccircle cx='60' cy='35' r='3' fill='%23c41e3a'/%3E%3Cpath d='M20,80 Q40,60 60,70 T90,50' fill='none' stroke='%234a7c59' stroke-width='0.8'/%3E%3C/svg%3E");
background-size: 80px 80px;
opacity: 0.7;
}
.swatch-artdeco {
background: #0f0f0f;
position: relative;
}
.swatch-artdeco::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M0,30 L30,0 L60,30 L30,60 Z' fill='none' stroke='%23c9a961' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23c9a961' stroke-width='1'/%3E%3Cpath d='M10,10 L50,50 M50,10 L10,50' stroke='%23c9a961' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
background-size: 40px 40px;
}
.swatch-boho {
background:
radial-gradient(circle at 20% 80%, #d4a574 0%, transparent 50%),
radial-gradient(circle at 80% 20%, #c9a961 0%, transparent 40%),
radial-gradient(circle at 50% 50%, #e8d5b5 0%, transparent 60%);
background-color: #d4c4a8;
}
.swatch-boho::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20,5 Q25,15 20,20 Q15,15 20,5' fill='%238b6914' opacity='0.3'/%3E%3Ccircle cx='10' cy='30' r='3' fill='%238b6914' opacity='0.2'/%3E%3Ccircle cx='30' cy='25' r='2' fill='%238b6914' opacity='0.25'/%3E%3C/svg%3E");
background-size: 30px 30px;
}
.swatch-coastal {
background:
linear-gradient(to bottom,
#e8f4f8 0%,
#b8d4e3 30%,
#87ceeb 60%,
#5f9ea0 100%
);
position: relative;
}
.swatch-coastal::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,5 50,10 T100,10' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M0,15 Q25,10 50,15 T100,15' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.3'/%3E%3C/svg%3E");
background-size: 100px 20px;
background-repeat: repeat-x;
background-position: bottom;
}
.swatch-grandmillennial {
background: #faf8f5;
position: relative;
}
.swatch-grandmillennial::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Crect x='10' y='10' width='30' height='30' fill='none' stroke='%23e8b4b8' stroke-width='2'/%3E%3Ccircle cx='25' cy='25' r='8' fill='none' stroke='%239cbfa9' stroke-width='1.5'/%3E%3Cpath d='M25,17 L25,33 M17,25 L33,25' stroke='%239cbfa9' stroke-width='1'/%3E%3C/svg%3E");
background-size: 35px 35px;
}
/* STYLE LABELS */
.style-name {
position: relative;
z-index: 2;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink);
background: var(--bg);
padding: 6px 12px;
border: 1px solid var(--line);
box-shadow: 0 2px 4px var(--shadow);
}
.style-option:nth-child(1) .style-name {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
}
.style-option:nth-child(2) .style-name {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
}
/* VS DIVIDER */
.vs-divider {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
letter-spacing: 0.1em;
color: var(--ink-muted);
z-index: 3;
font-weight: 700;
}
/* RESULT OVERLAYS */
.overlay {
position: fixed;
inset: 0;
background: rgba(26,26,29,0.85);
backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
transition: opacity 0.4s var(--ease-swift);
}
.overlay.active {
display: flex;
opacity: 1;
}
.result-card {
background: var(--bg);
border: 1px solid var(--line);
padding: 64px;
text-align: center;
max-width: 480px;
width: 90%;
box-shadow: 0 24px 64px rgba(26,26,29,0.2);
animation: scaleIn 0.6s var(--ease-out) both;
}
.result-card h2 {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
margin-bottom: 32px;
letter-spacing: 0.02em;
}
.champion-swatch {
width: 160px;
height: 160px;
margin: 0 auto 32px;
border: 1px solid var(--line);
box-shadow: 0 4px 16px var(--shadow-deep);
position: relative;
}
.champion-name {
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 8px;
}
.champion-style {
font-family: var(--font-serif);
font-size: 38px;
margin-bottom: 32px;
color: var(--ink);
}
.share-btn, .replay-btn {
background: var(--ink);
color: var(--bg);
border: none;
padding: 16px 32px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s var(--ease-swift);
margin: 0 8px;
}
.share-btn:hover, .replay-btn:hover {
background: var(--accent);
transform: translateY(-2px);
}
.replay-btn {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
}
.replay-btn:hover {
background: var(--surface);
}
/* PROGRESS INDICATOR */
.progress-bar {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
height: 2px;
background: var(--line);
z-index: 999;
}
.progress-fill {
height: 100%;
background: var(--accent);
width: 12.5%;
transition: width 0.6s var(--ease-power);
}
/* ROUND STATES */
.round-column {
opacity: 0.4;
pointer-events: none;
transition: all 0.4s var(--ease-swift);
}
.round-column.active {
opacity: 1;
pointer-events: auto;
}
.round-column.completed {
opacity: 0.6;
}
/* CONNECTION LINES */
.connector {
position: absolute;
width: 16px;
height: 1px;
background: var(--line);
right: -24px;
top: 50%;
display: none;
}
.round-column:not(:last-child) .matchup::after {
content: '';
position: absolute;
right: -17px;
top: 50%;
width: 16px;
height: 1px;
background: var(--line);
}
/* ANIMATIONS */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: none;
}
}
/* Responsive */
@media (max-width: 1024px) {
.bracket-container {
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.round-column:nth-child(3),
.round-column:nth-child(4) {
grid-column: span 1;
}
}
@media (max-width: 640px) {
header {
padding: 0 24px;
}
.wordmark {
font-size: 14px;
letter-spacing: 0.14em;
}
.tournament-title h1 {
font-size: 32px;
}
.bracket-container {
grid-template-columns: 1fr;
gap: 32px;
}
.matchup-card {
height: 120px;
}
}
</style>
</head>
<body>
<!-- Fixed Header -->
<header>
<div class="wordmark">Designer Wallcoverings</div>
</header>
<!-- Progress Bar -->
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<!-- Main Container -->
<div class="container">
<div class="tournament-title">
<h1>Style Showdown</h1>
<p>Select your favorite in each matchup to crown a champion</p>
</div>
<div class="bracket-container" id="bracket">
<!-- Quarter Finals - Column 1 -->
<div class="round-column active" data-round="0">
<div class="round-label">Quarter Finals</div>
<div class="matchup" data-matchup="0" data-round="0">
<div class="matchup-card">
<div class="style-option" data-style="Damask" onclick="selectWinner(this, 0, 0)">
<div class="swatch swatch-damask"></div>
<span class="style-name">Damask</span>
</div>
<div class="style-option" data-style="Toile" onclick="selectWinner(this, 0, 0)">
<div class="swatch swatch-toile"></div>
<span class="style-name">Toile</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
<div class="matchup" data-matchup="1" data-round="0">
<div class="matchup-card">
<div class="style-option" data-style="Ikat" onclick="selectWinner(this, 1, 0)">
<div class="swatch swatch-ikat"></div>
<span class="style-name">Ikat</span>
</div>
<div class="style-option" data-style="Chinoiserie" onclick="selectWinner(this, 1, 0)">
<div class="swatch swatch-chinoiserie"></div>
<span class="style-name">Chinoiserie</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
<div class="matchup" data-matchup="2" data-round="0">
<div class="matchup-card">
<div class="style-option" data-style="Art Deco" onclick="selectWinner(this, 2, 0)">
<div class="swatch swatch-artdeco"></div>
<span class="style-name">Art Deco</span>
</div>
<div class="style-option" data-style="Boho" onclick="selectWinner(this, 2, 0)">
<div class="swatch swatch-boho"></div>
<span class="style-name">Boho</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
<div class="matchup" data-matchup="3" data-round="0">
<div class="matchup-card">
<div class="style-option" data-style="Coastal" onclick="selectWinner(this, 3, 0)">
<div class="swatch swatch-coastal"></div>
<span class="style-name">Coastal</span>
</div>
<div class="style-option" data-style="Grandmillennial" onclick="selectWinner(this, 3, 0)">
<div class="swatch swatch-grandmillennial"></div>
<span class="style-name">Grandmillennial</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
</div>
<!-- Semi Finals - Column 2 -->
<div class="round-column" data-round="1">
<div class="round-label">Semi Finals</div>
<div class="matchup" data-matchup="0" data-round="1">
<div class="matchup-card">
<div class="style-option" data-style="" onclick="selectWinner(this, 0, 1)">
<div class="swatch" id="semi0a"></div>
<span class="style-name" id="semi0a-name">TBD</span>
</div>
<div class="style-option" data-style="" onclick="selectWinner(this, 0, 1)">
<div class="swatch" id="semi0b"></div>
<span class="style-name" id="semi0b-name">TBD</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
<div class="matchup" data-matchup="1" data-round="1">
<div class="matchup-card">
<div class="style-option" data-style="" onclick="selectWinner(this, 1, 1)">
<div class="swatch" id="semi1a"></div>
<span class="style-name" id="semi1a-name">TBD</span>
</div>
<div class="style-option" data-style="" onclick="selectWinner(this, 1, 1)">
<div class="swatch" id="semi1b"></div>
<span class="style-name" id="semi1b-name">TBD</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
</div>
<!-- Finals - Column 3 -->
<div class="round-column" data-round="2">
<div class="round-label">Finals</div>
<div class="matchup" data-matchup="0" data-round="2">
<div class="matchup-card">
<div class="style-option" data-style="" onclick="selectWinner(this, 0, 2)">
<div class="swatch" id="final0a"></div>
<span class="style-name" id="final0a-name">TBD</span>
</div>
<div class="style-option" data-style="" onclick="selectWinner(this, 0, 2)">
<div class="swatch" id="final0b"></div>
<span class="style-name" id="final0b-name">TBD</span>
</div>
<div class="vs-divider">VS</div>
</div>
</div>
</div>
<!-- Champion - Column 4 -->
<div class="round-column" data-round="3">
<div class="round-label">Champion</div>
<div class="matchup champion-spot" data-matchup="0" data-round="3">
<div class="matchup-card" style="height: 200px;">
<div class="style-option" data-style="" style="flex: 1; cursor: default;">
<div class="swatch" id="champion"></div>
<span class="style-name" id="champion-name" style="font-size: 14px; letter-spacing: 0.16em;">TBD</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Result Overlay -->
<div class="overlay" id="resultOverlay">
<div class="result-card">
<h2>Your Style Champion</h2>
<div class="champion-swatch" id="championSwatch"></div>
<div class="champion-name">Winner</div>
<div class="champion-style" id="championStyleName">-</div>
<button class="share-btn" onclick="shareResult()">Share Result</button>
<button class="replay-btn" onclick="resetTournament()">Play Again</button>
</div>
</div>
<script>
// Tournament State
const state = {
rounds: [[null, null, null, null], [null, null], [null], null],
currentRound: 0,
winners: {}
};
const swatchClasses = {
'Damask': 'swatch-damask',
'Toile': 'swatch-toile',
'Ikat': 'swatch-ikat',
'Chinoiserie': 'swatch-chinoiserie',
'Art Deco': 'swatch-artdeco',
'Boho': 'swatch-boho',
'Coastal': 'swatch-coastal',
'Grandmillennial': 'swatch-grandmillennial'
};
function selectWinner(element, matchupIdx, roundIdx) {
const styleName = element.dataset.style;
const matchup = element.closest('.matchup');
const options = matchup.querySelectorAll('.style-option');
// Mark winner and loser
options.forEach(opt => {
if (opt === element) {
opt.classList.add('winner');
opt.classList.remove('loser');
} else {
opt.classList.add('loser');
opt.classList.remove('winner');
}
});
matchup.classList.add('completed');
// Store winner
state.rounds[roundIdx][matchupIdx] = styleName;
// Advance to next round
advanceWinner(styleName, matchupIdx, roundIdx);
// Update progress
updateProgress();
// Check if round is complete
checkRoundComplete(roundIdx);
}
function advanceWinner(styleName, matchupIdx, roundIdx) {
const nextRound = roundIdx + 1;
if (nextRound >= 4) {
// Tournament complete
setTimeout(() => showResult(styleName), 600);
return;
}
// Calculate next matchup index
const nextMatchupIdx = Math.floor(matchupIdx / 2);
// Determine position in next matchup (a or b)
const isA = matchupIdx % 2 === 0;
// Find the target elements
let targetSwatch, targetName;
if (nextRound === 1) {
// Semi finals
if (nextMatchupIdx === 0) {
targetSwatch = document.getElementById(isA ? 'semi0a' : 'semi0b');
targetName = document.getElementById(isA ? 'semi0a-name' : 'semi0b-name');
} else {
targetSwatch = document.getElementById(isA ? 'semi1a' : 'semi1b');
targetName = document.getElementById(isA ? 'semi1a-name' : 'semi1b-name');
}
} else if (nextRound === 2) {
// Finals
targetSwatch = document.getElementById(isA ? 'final0a' : 'final0b');
targetName = document.getElementById(isA ? 'final0a-name' : 'final0b-name');
} else if (nextRound === 3) {
// Champion
targetSwatch = document.getElementById('champion');
targetName = document.getElementById('champion-name');
}
// Update with animation delay
setTimeout(() => {
targetSwatch.className = 'swatch ' + swatchClasses[styleName];
targetName.textContent = styleName;
// Enable clicking on the advanced option
const option = targetSwatch.closest('.style-option');
option.dataset.style = styleName;
}, 300);
}
function checkRoundComplete(roundIdx) {
const roundWinners = state.rounds[roundIdx];
const isComplete = roundWinners.every(w => w !== null);
if (isComplete && roundIdx < 3) {
// Activate next round
setTimeout(() => {
const nextRoundEl = document.querySelector(`.round-column[data-round="${roundIdx + 1}"]`);
if (nextRoundEl) {
nextRoundEl.classList.add('active');
state.currentRound = roundIdx + 1;
}
// Mark current as completed
const currentRoundEl = document.querySelector(`.round-column[data-round="${roundIdx}"]`);
currentRoundEl.classList.add('completed');
currentRoundEl.classList.remove('active');
}, 500);
}
}
function updateProgress() {
const totalMatchups = 7; // 4 + 2 + 1
let completed = 0;
state.rounds.forEach((round, idx) => {
if (round) {
if (idx === 3) {
if (round) completed++;
} else {
completed += round.filter(w => w !== null).length;
}
}
});
const pct = ((completed / totalMatchups) * 100);
document.getElementById('progressFill').style.width = pct + '%';
}
function showResult(championStyle) {
const overlay = document.getElementById('resultOverlay');
const swatch = document.getElementById('championSwatch');
const name = document.getElementById('championStyleName');
swatch.className = 'champion-swatch ' + swatchClasses[championStyle];
name.textContent = championStyle;
overlay.classList.add('active');
}
function shareResult() {
const champion = document.getElementById('championStyleName').textContent;
const text = `My Style Showdown Champion is ${champion}! 🏆 Who's yours?`;
if (navigator.share) {
navigator.share({
title: 'Style Showdown Results',
text: text
});
} else {
// Copy to clipboard
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('.share-btn');
const original = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = original, 2000);
});
}
}
function resetTournament() {
// Reset state
state.rounds = [[null, null, null, null], [null, null], [null], null];
state.currentRound = 0;
// Hide overlay
document.getElementById('resultOverlay').classList.remove('active');
// Reset all matchups
document.querySelectorAll('.matchup').forEach(matchup => {
matchup.classList.remove('completed');
});
document.querySelectorAll('.style-option').forEach(opt => {
opt.classList.remove('winner', 'loser');
});
// Reset rounds visibility
document.querySelectorAll('.round-column').forEach((col, idx) => {
col.classList.remove('active', 'completed');
if (idx === 0) col.classList.add('active');
});
// Reset TBDs
document.querySelectorAll('[id$="-name"]').forEach(el => {
if (el.id !== 'champion-name') el.textContent = 'TBD';
});
document.querySelectorAll('.swatch[id]').forEach(el => {
if (el.id !== 'champion') {
el.className = 'swatch';
}
});
// Clear option data-styles for future rounds
document.querySelectorAll('.round-column:not([data-round="0"]) .style-option').forEach(opt => {
opt.dataset.style = '';
});
// Reset progress
document.getElementById('progressFill').style.width = '12.5%';
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
updateProgress();
});
</script>
</body>
</html>