← back to Model Arena
data/artifacts/2b11fe341ffd/claude-code.html
472 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>
:root{
--bg:#f4efe6;
--surface:#fffdf8;
--ink:#1c1a17;
--muted:#8a8578;
--accent:#9a7b3f; /* single antique-brass metallic */
--accent-deep:#7d6236;
--line:#e4ddce;
--shadow:0 8px 24px rgba(28,26,23,.12);
--shadow-hi:0 18px 52px rgba(28,26,23,.20);
--glow:0 0 28px rgba(154,123,63,.42);
--ease:cubic-bezier(.22,1,.36,1);
--serif:'Cormorant Garamond','EB Garamond','Playfair Display',Didot,'Bodoni MT',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{
font-family:var(--sans);
min-height:100vh;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
background-image:radial-gradient(120% 80% at 50% -10%,rgba(154,123,63,.06),transparent 60%);
}
/* ---------- HEADER / WORDMARK ---------- */
header.brandbar{
position:sticky;top:0;z-index:50;
background:var(--surface);
border-bottom:1px solid var(--line);
padding:18px clamp(20px,5vw,56px);
display:flex;align-items:center;justify-content:space-between;
gap:20px;flex-wrap:wrap;
box-shadow:0 1px 0 rgba(28,26,23,.03);
}
.wordmark{
font-family:var(--serif);
color:var(--ink); /* darkest ink — never surface */
font-size:40px;
line-height:1.02;
font-weight:600;
text-transform:uppercase;
letter-spacing:.18em;
white-space:normal;
}
.wordmark small{display:block;font-size:40px;letter-spacing:.16em}
.brandtag{
font-family:var(--sans);
font-size:12px;letter-spacing:.24em;text-transform:uppercase;
color:var(--muted);
display:flex;align-items:center;gap:10px;
}
.brandtag::before{content:"";width:26px;height:1px;background:var(--accent)}
/* ---------- STAGE ---------- */
main{
max-width:1040px;margin:0 auto;
padding:clamp(28px,5vw,56px) clamp(20px,5vw,48px) 80px;
}
.intro{text-align:center;margin-bottom:34px}
.kicker{
font-size:12px;letter-spacing:.28em;text-transform:uppercase;
color:var(--accent-deep);font-weight:600;margin-bottom:14px;
}
h1{
font-family:var(--serif);
font-weight:600;
font-size:clamp(38px,6.4vw,64px);
line-height:1.02;letter-spacing:.005em;
}
.sub{
color:var(--muted);font-size:15px;letter-spacing:.02em;
margin-top:12px;max-width:38ch;margin-inline:auto;
}
/* progress rail */
.rail{
display:flex;align-items:center;justify-content:center;
gap:10px;margin:30px auto 6px;flex-wrap:wrap;
}
.rail .step{
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);font-weight:600;
padding:6px 2px;position:relative;transition:color .4s var(--ease);
}
.rail .step.active{color:var(--ink)}
.rail .step.done{color:var(--accent-deep)}
.rail .dot{width:5px;height:5px;border-radius:50%;background:var(--line)}
.matchcount{
text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-bottom:26px;
}
/* matchup */
.arena{position:relative}
.matchup{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;gap:clamp(12px,3vw,34px);
}
.vs{
font-family:var(--serif);font-style:italic;
font-size:clamp(22px,4vw,34px);color:var(--accent);
text-align:center;user-select:none;
}
.tile{
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:14px;
cursor:pointer;
box-shadow:var(--shadow);
transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
animation:fadeUp .7s var(--ease) both;
position:relative;
overflow:hidden;
}
.tile:nth-child(1){animation-delay:.05s}
.tile:last-child{animation-delay:.14s}
.tile:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-hi);
border-color:var(--accent);
}
.tile:active{transform:translateY(-2px)}
.swatch{
width:100%;
aspect-ratio:4/5;
border-radius:8px;
border:1px solid rgba(28,26,23,.10);
background-repeat:repeat;
}
.tile .name{
font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);
font-weight:600;margin-top:14px;line-height:1;
}
.tile .tag{
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-top:8px;
}
.tile.winner{
border-color:var(--accent);
box-shadow:var(--glow),var(--shadow-hi);
transform:translateY(-8px) scale(1.02);
z-index:3;
}
.tile.winner::after{
content:"✦ ADVANCES";
position:absolute;top:22px;left:50%;transform:translateX(-50%);
background:var(--accent);color:#fff;
font-size:11px;letter-spacing:.18em;font-weight:700;
padding:7px 14px;border-radius:40px;
animation:pop .5s var(--ease) both;
}
.tile.loser{
opacity:.32;filter:grayscale(.55) saturate(.7);
transform:scale(.97);
}
.matchup.resolving .tile{cursor:default;pointer-events:none}
/* ---------- RESULT OVERLAY ---------- */
.overlay{
position:fixed;inset:0;z-index:100;
background:rgba(28,26,23,.62);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:24px;
opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.overlay.show{opacity:1;pointer-events:auto}
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
max-width:420px;width:100%;
padding:40px 34px 32px;
text-align:center;
box-shadow:var(--shadow-hi);
transform:translateY(24px) scale(.97);
transition:transform .6s var(--ease);
position:relative;
}
.overlay.show .card{transform:none}
.card .crown{
font-size:12px;letter-spacing:.26em;text-transform:uppercase;
color:var(--accent-deep);font-weight:600;
}
.card .champ-swatch{
width:150px;height:186px;margin:22px auto 20px;
border-radius:12px;border:1px solid rgba(28,26,23,.12);
background-repeat:repeat;box-shadow:var(--shadow);
animation:pop .6s var(--ease) both;
}
.card h2{
font-family:var(--serif);font-size:46px;font-weight:600;line-height:1;
}
.card .champ-tag{
font-size:12px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-top:12px;
}
.card .line{
height:1px;background:var(--line);margin:24px 0;
}
.card p.blurb{color:var(--muted);font-size:14px;line-height:1.6}
.actions{display:flex;gap:12px;margin-top:26px}
button{
font-family:var(--sans);
flex:1;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
padding:15px 16px;border-radius:40px;cursor:pointer;
border:1px solid var(--accent);
transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
button:hover{transform:translateY(-2px)}
.btn-share{background:var(--accent);color:#fff}
.btn-share:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-again{background:transparent;color:var(--ink)}
.btn-again:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.toast{
position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);
background:var(--ink);color:var(--surface);
font-size:12px;letter-spacing:.14em;text-transform:uppercase;
padding:13px 22px;border-radius:40px;
opacity:0;pointer-events:none;transition:all .4s var(--ease);z-index:200;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
/* ---------- SWATCH MOTIFS (all CSS/SVG, no network) ---------- */
.sw-damask{
background-color:#1f3d33;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'><g fill='none' stroke='%23b79a5e' stroke-width='2'><path d='M40 6C62 24 62 46 40 62 18 46 18 24 40 6Z'/><path d='M40 62C62 80 62 104 40 118 18 104 18 80 40 62Z'/></g><circle cx='40' cy='32' r='5' fill='%23b79a5e'/><circle cx='40' cy='90' r='5' fill='%23b79a5e'/><circle cx='40' cy='62' r='3' fill='%23d8c188'/></svg>");
background-size:80px 120px;
}
.sw-toile{
background-color:#f2ede1;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g fill='none' stroke='%233a4c6d' stroke-width='1.3' stroke-linecap='round'><path d='M30 118 C28 86 42 76 34 46'/><path d='M34 62 C52 54 56 40 46 28'/><path d='M34 78 C16 70 12 56 24 46'/><circle cx='46' cy='26' r='4'/><circle cx='24' cy='44' r='4'/><path d='M86 122 q16 -22 32 0'/><path d='M96 98 a12 12 0 1 1 0.1 0'/><path d='M104 34 l8 8 l-8 8 l-8 -8Z'/></g></svg>");
background-size:140px 140px;
}
.sw-ikat{
background-color:#efe6d6;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><defs><filter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'><feGaussianBlur stdDeviation='2.4'/></filter></defs><g filter='url(%23b)'><path d='M60 12 L98 60 L60 108 L22 60Z' fill='none' stroke='%23b5502f' stroke-width='7'/><path d='M60 34 L80 60 L60 86 L40 60Z' fill='%23c9772f'/><path d='M60 58 L64 60 L60 64 L56 60Z' fill='%23efe6d6'/></g></svg>");
background-size:120px 120px;
}
.sw-chinoiserie{
background-color:#d7e2d8;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><g fill='none' stroke='%235d7a68' stroke-width='1.6' stroke-linecap='round'><path d='M20 142 C42 112 30 82 62 60 C82 46 92 30 122 20'/><path d='M62 60 C72 50 86 52 94 44'/><path d='M46 94 C56 86 68 88 76 80'/><path d='M92 108 C104 100 110 88 108 78'/></g><g fill='%23cf869c'><circle cx='122' cy='20' r='6'/><circle cx='94' cy='44' r='5'/><circle cx='76' cy='80' r='5'/><circle cx='30' cy='120' r='5'/><circle cx='108' cy='78' r='4.5'/></g></svg>");
background-size:150px 150px;
}
.sw-artdeco{
background-color:#141414;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g stroke='%23c9a441' fill='none' stroke-width='1.5'><path d='M60 60 L60 2'/><path d='M60 60 L96 8'/><path d='M60 60 L112 30'/><path d='M60 60 L118 60'/><path d='M60 60 L112 90'/><path d='M60 60 L96 112'/><path d='M60 60 L60 118'/><path d='M60 60 L24 112'/><path d='M60 60 L8 90'/><path d='M60 60 L2 60'/><path d='M60 60 L8 30'/><path d='M60 60 L24 8'/><circle cx='60' cy='60' r='24'/><circle cx='60' cy='60' r='40'/></g><circle cx='60' cy='60' r='6' fill='%23c9a441'/></svg>");
background-size:120px 120px;
}
.sw-boho{
background-color:#d8c3a5;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='%238a4b2f' stroke-width='2' stroke-linejoin='round'><path d='M0 22 L20 42 L40 22 L60 42 L80 22 L100 42 L120 22'/><path d='M0 98 L20 78 L40 98 L60 78 L80 98 L100 78 L120 98'/><path d='M60 48 L76 64 L60 80 L44 64Z'/></g><g stroke='%238a4b2f' stroke-width='2'><path d='M10 60 h18'/><path d='M92 60 h18'/></g><g fill='%238a4b2f'><circle cx='60' cy='64' r='2.4'/></g></svg>");
background-size:120px 120px;
}
.sw-coastal{
background-color:#f8f6f0;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f8f6f0'/><rect y='23' width='120' height='9' fill='%231f4e79'/><path d='M0 47 q15 -11 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%231f4e79' stroke-width='2'/><path d='M0 12 q15 -9 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%237ba7cf' stroke-width='1.6'/></svg>");
background-size:120px 60px;
}
.sw-grand{
background-color:#f2dde0;
background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%234a6d4f' stroke-width='1.6'><path d='M0 40 L40 0 L80 40 L40 80Z'/><path d='M40 0 L40 80'/><path d='M0 40 L80 40'/></g><g fill='none' stroke='%23b5657a' stroke-width='1.5'><path d='M-4 74 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0 a12 12 0 0 1 24 0'/></g><circle cx='40' cy='40' r='3' fill='%23b5657a'/></svg>");
background-size:80px 80px;
}
@media(max-width:640px){
.matchup{grid-template-columns:1fr;gap:16px}
.vs{padding:2px 0}
.wordmark,.wordmark small{font-size:40px}
}
</style>
</head>
<body>
<header class="brandbar">
<div class="wordmark">Designer<small>Wallcoverings</small></div>
<div class="brandtag">Style Showdown</div>
</header>
<main>
<section class="intro">
<div class="kicker">The Bracket</div>
<h1>Style Showdown</h1>
<p class="sub">Eight design traditions. One crown. Tap the pattern you'd hang on your wall and advance it to victory.</p>
<div class="rail" id="rail">
<span class="step" data-round="Quarterfinal">Quarters</span>
<span class="dot"></span>
<span class="step" data-round="Semifinal">Semis</span>
<span class="dot"></span>
<span class="step" data-round="Final">Final</span>
<span class="dot"></span>
<span class="step" data-round="Champion">Champion</span>
</div>
<div class="matchcount" id="matchcount">Match 1 of 7</div>
</section>
<section class="arena">
<div class="matchup" id="matchup"><!-- tiles injected --></div>
</section>
</main>
<!-- RESULT OVERLAY (in-page, token-styled) -->
<div class="overlay" id="overlay">
<div class="card">
<div class="crown">✦ Style Showdown Champion ✦</div>
<div class="champ-swatch" id="champSwatch"></div>
<h2 id="champName">—</h2>
<div class="champ-tag" id="champTag"></div>
<div class="line"></div>
<p class="blurb" id="champBlurb"></p>
<div class="actions">
<button class="btn-share" id="shareBtn">Share Result</button>
<button class="btn-again" id="againBtn">Play Again</button>
</div>
</div>
</div>
<div class="toast" id="toast">Copied to clipboard</div>
<script>
const STYLES = [
{id:'damask', name:'Damask', tag:'Regal Symmetry', sw:'sw-damask', blurb:'Ornate, mirror-perfect motifs with old-world gravitas.'},
{id:'toile', name:'Toile', tag:'Pastoral Romance', sw:'sw-toile', blurb:'Storybook scenes rendered in a single quiet ink.'},
{id:'ikat', name:'Ikat', tag:'Woven Soul', sw:'sw-ikat', blurb:'Feathered, hand-dyed geometry with a nomadic pulse.'},
{id:'chinoiserie', name:'Chinoiserie', tag:'Painted Reverie', sw:'sw-chinoiserie', blurb:'Trailing branches and blossoms in serene celadon.'},
{id:'artdeco', name:'Art Deco', tag:'Gilded Geometry', sw:'sw-artdeco', blurb:'Jazz-age radiance in black lacquer and brass.'},
{id:'boho', name:'Boho', tag:'Free-Spirited', sw:'sw-boho', blurb:'Earthy mudcloth marks with easy, undone charm.'},
{id:'coastal', name:'Coastal', tag:'Breezy Calm', sw:'sw-coastal', blurb:'Cool navy stripes and gentle, salt-air waves.'},
{id:'grandmillennial',name:'Grandmillennial',tag:'Heirloom Charm', sw:'sw-grand', blurb:'Trellis and scallop — granny-chic, gloriously.'}
];
const ROUND_NAME = {8:'Quarterfinal',4:'Semifinal',2:'Final'};
const TOTAL = 7;
let entrants, nextRound, pairIdx, matchNo, locked;
const $matchup = document.getElementById('matchup');
const $rail = document.getElementById('rail');
const $count = document.getElementById('matchcount');
const $overlay = document.getElementById('overlay');
const $toast = document.getElementById('toast');
function shuffle(a){
a=a.slice();
for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}
return a;
}
function start(){
entrants = shuffle(STYLES);
nextRound=[]; pairIdx=0; matchNo=0; locked=false;
$overlay.classList.remove('show');
renderMatch();
}
function updateRail(){
const size = entrants.length;
const active = ROUND_NAME[size] || 'Champion';
const order = ['Quarterfinal','Semifinal','Final','Champion'];
const activeIdx = order.indexOf(active);
$rail.querySelectorAll('.step').forEach(s=>{
const r = s.dataset.round;
const i = order.indexOf(r);
s.classList.toggle('active', i===activeIdx);
s.classList.toggle('done', i<activeIdx);
});
}
function renderMatch(){
updateRail();
const a = entrants[pairIdx], b = entrants[pairIdx+1];
$count.textContent = `${ROUND_NAME[entrants.length]} · Match ${matchNo+1} of ${TOTAL}`;
$matchup.className = 'matchup';
$matchup.innerHTML =
tileHTML(a,0) +
`<div class="vs">vs</div>` +
tileHTML(b,1);
$matchup.querySelectorAll('.tile').forEach(t=>{
t.addEventListener('click',()=>pick(parseInt(t.dataset.side,10)));
});
}
function tileHTML(style, side){
return `<div class="tile" data-side="${side}">
<div class="swatch ${style.sw}" role="img" aria-label="${style.name} pattern swatch"></div>
<div class="name">${style.name}</div>
<div class="tag">${style.tag}</div>
</div>`;
}
function pick(side){
if(locked) return;
locked = true;
const tiles = $matchup.querySelectorAll('.tile');
$matchup.classList.add('resolving');
tiles[side].classList.add('winner');
tiles[side?0:1].classList.add('loser');
const winner = entrants[pairIdx + side];
setTimeout(()=>{
nextRound.push(winner);
pairIdx += 2;
matchNo += 1;
if(pairIdx >= entrants.length){
entrants = nextRound; nextRound = []; pairIdx = 0;
if(entrants.length === 1){ crown(entrants[0]); return; }
}
locked = false;
renderMatch();
}, 780);
}
function crown(style){
updateRail();
document.getElementById('champSwatch').className = 'champ-swatch ' + style.sw;
document.getElementById('champName').textContent = style.name;
document.getElementById('champTag').textContent = style.tag;
document.getElementById('champBlurb').textContent =
`${style.blurb} Crowned champion of all eight styles.`;
$overlay.dataset.style = style.name;
setTimeout(()=>$overlay.classList.add('show'), 260);
}
function showToast(msg){
$toast.textContent = msg;
$toast.classList.add('show');
setTimeout(()=>$toast.classList.remove('show'), 2200);
}
document.getElementById('shareBtn').addEventListener('click', async ()=>{
const name = $overlay.dataset.style || '';
const text = `🏆 ${name} is my Style Showdown champion! Which design style wins your wall? — Designer Wallcoverings`;
try{
if(navigator.share){
await navigator.share({title:'Style Showdown', text});
}else if(navigator.clipboard){
await navigator.clipboard.writeText(text);
showToast('Result copied');
}else{
showToast(name + ' wins!');
}
}catch(e){ /* share dismissed — no-op */ }
});
document.getElementById('againBtn').addEventListener('click', start);
start();
</script>
</body>
</html>