← back to Model Arena
data/artifacts/25835bfaba3a/grok.html
1035 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: #f7f3eb;
--bg-deep: #efe8dc;
--surface: #fffcf6;
--ink: #1a1814;
--ink-soft: #3d3830;
--muted: #8a8478;
--accent: #b8952c;
--accent-deep: #8a7020;
--accent-soft: rgba(184, 149, 44, 0.14);
--line: rgba(26, 24, 20, 0.12);
--line-strong: rgba(26, 24, 20, 0.22);
--shadow: 0 2px 24px rgba(26, 24, 20, 0.06), 0 1px 3px rgba(26, 24, 20, 0.04);
--shadow-lg: 0 16px 48px rgba(26, 24, 20, 0.10), 0 4px 12px rgba(26, 24, 20, 0.06);
--ease: cubic-bezier(.22, .9, .24, 1);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-power: cubic-bezier(.77, 0, .18, 1);
--radius: 2px;
--header-h: 64px;
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', 'Helvetica Neue', Futura, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
min-height: 100vh;
overflow-x: hidden;
}
/* ── Header ── */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--header-h);
background: var(--surface);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
padding: 0 28px;
box-shadow: 0 1px 0 var(--line);
}
.wordmark {
font-family: var(--serif);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.35;
white-space: normal;
max-width: 280px;
}
/* ── Main ── */
main {
padding: calc(var(--header-h) + 40px) 24px 80px;
max-width: 920px;
margin: 0 auto;
}
.intro {
text-align: center;
margin-bottom: 48px;
}
.eyebrow {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 16px;
font-weight: 500;
}
.intro h1 {
font-family: var(--serif);
font-size: clamp(32px, 5vw, 50px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
margin-bottom: 14px;
}
.intro p {
font-size: 16px;
color: var(--muted);
max-width: 42ch;
margin: 0 auto;
line-height: 1.65;
}
/* ── Progress ── */
.progress {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin-bottom: 40px;
}
.prog-step {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 0 14px;
position: relative;
transition: color 0.4s var(--ease);
}
.prog-step::after {
content: '';
position: absolute;
right: -1px;
top: 50%;
width: 16px;
height: 1px;
background: var(--line-strong);
transform: translateY(-50%);
}
.prog-step:last-child::after { display: none; }
.prog-step.active { color: var(--ink); }
.prog-step.done { color: var(--accent); }
/* ── Round label ── */
.round-label {
text-align: center;
margin-bottom: 28px;
}
.round-label h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
}
.round-label span {
display: block;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
/* ── Matchup ── */
.matchup-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
animation: fadeRise 0.55s var(--ease-out) both;
}
@keyframes fadeRise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.matchup {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: stretch;
width: 100%;
max-width: 720px;
}
@media (max-width: 600px) {
.matchup {
grid-template-columns: 1fr;
gap: 12px;
}
.vs-col { padding: 4px 0 !important; }
}
.vs-col {
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.vs {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid var(--line);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
}
/* ── Style card ── */
.style-card {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.35s var(--ease);
position: relative;
overflow: hidden;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.style-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--line-strong);
}
.style-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.style-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
transform: translateY(-2px);
}
.style-card.eliminated {
opacity: 0.35;
pointer-events: none;
transform: scale(0.97);
filter: grayscale(0.4);
}
.swatch {
width: 100%;
aspect-ratio: 5 / 4;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.card-meta {
padding: 18px 20px 20px;
}
.card-meta h3 {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 4px;
line-height: 1.15;
}
.card-meta p {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.02em;
line-height: 1.45;
}
.tap-hint {
display: inline-block;
margin-top: 10px;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-deep);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.style-card:hover .tap-hint {
opacity: 1;
transform: translateY(0);
}
/* ── Match counter ── */
.match-count {
text-align: center;
margin-top: 28px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
/* ── Champion overlay ── */
.overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(26, 24, 20, 0.48);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.45s var(--ease), visibility 0.45s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.overlay.open {
opacity: 1;
visibility: visible;
}
.result-card {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
max-width: 420px;
width: 100%;
padding: 0;
transform: translateY(24px) scale(0.97);
transition: transform 0.55s var(--ease-out);
overflow: hidden;
}
.overlay.open .result-card {
transform: translateY(0) scale(1);
}
.result-swatch {
width: 100%;
height: 200px;
position: relative;
border-bottom: 1px solid var(--line);
}
.result-body {
padding: 32px 32px 36px;
text-align: center;
}
.result-body .eyebrow { margin-bottom: 12px; }
.result-body h2 {
font-family: var(--serif);
font-size: 38px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
margin-bottom: 8px;
}
.result-body .tagline {
font-size: 14px;
color: var(--muted);
margin-bottom: 28px;
line-height: 1.5;
}
.result-path {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
margin-bottom: 28px;
padding: 16px;
background: var(--bg);
border: 1px solid var(--line);
}
.result-path span {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.result-path .sep {
color: var(--accent);
letter-spacing: 0;
}
.btn-row {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 14px 28px;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bg);
cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.btn:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.btn-ghost:hover {
background: var(--bg-deep);
border-color: var(--ink);
color: var(--ink);
}
/* ── Advancing flash ── */
.advance-flash {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.advance-flash.show { opacity: 1; }
.advance-flash .flash-inner {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 42px);
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
padding: 20px 40px;
box-shadow: var(--shadow-lg);
letter-spacing: -0.01em;
transform: scale(0.92);
transition: transform 0.4s var(--ease-out);
}
.advance-flash.show .flash-inner { transform: scale(1); }
/* ══════════════════════════════════════
PATTERN SWATCHES — each visually unique
══════════════════════════════════════ */
/* Damask — ornate damask medallion lattice */
.pat-damask {
background-color: #2c2416;
background-image:
radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,97,0.35) 0%, transparent 70%),
radial-gradient(circle at 50% 20%, rgba(201,169,97,0.2) 0%, transparent 25%),
radial-gradient(circle at 50% 80%, rgba(201,169,97,0.2) 0%, transparent 25%),
radial-gradient(circle at 20% 50%, rgba(201,169,97,0.15) 0%, transparent 20%),
radial-gradient(circle at 80% 50%, rgba(201,169,97,0.15) 0%, transparent 20%),
radial-gradient(circle at 0 0, transparent 40%, rgba(201,169,97,0.08) 40%, rgba(201,169,97,0.08) 42%, transparent 42%),
radial-gradient(circle at 100% 100%, transparent 40%, rgba(201,169,97,0.08) 40%, rgba(201,169,97,0.08) 42%, transparent 42%);
background-size: 80px 100px, 80px 100px, 80px 100px, 80px 100px, 80px 100px, 80px 100px, 80px 100px;
}
.pat-damask::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cpath d='M40 10 C30 25 30 40 40 50 C50 40 50 25 40 10Z' fill='none' stroke='%23c9a961' stroke-width='0.7' opacity='0.5'/%3E%3Cpath d='M40 50 C30 60 30 75 40 90 C50 75 50 60 40 50Z' fill='none' stroke='%23c9a961' stroke-width='0.7' opacity='0.5'/%3E%3Ccircle cx='40' cy='50' r='4' fill='none' stroke='%23c9a961' stroke-width='0.6' opacity='0.4'/%3E%3Cpath d='M20 50 Q30 40 40 50 Q50 60 60 50' fill='none' stroke='%23c9a961' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
background-size: 80px 100px;
opacity: 0.9;
}
/* Toile — pastoral line-work on cream */
.pat-toile {
background-color: #f0e6d3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%235c6b7a' stroke-width='0.9' opacity='0.55'%3E%3Ccircle cx='30' cy='35' r='8'/%3E%3Cpath d='M30 43 v12 M22 50 h16'/%3E%3Cpath d='M18 55 Q30 70 42 55'/%3E%3Cpath d='M70 20 Q80 10 90 20 Q95 35 85 45 Q75 50 70 40 Q65 30 70 20Z'/%3E%3Cpath d='M78 45 v20 M70 55 Q78 50 86 55'/%3E%3Cpath d='M15 90 Q30 80 45 95 Q60 105 75 90 Q90 80 105 95'/%3E%3Ccircle cx='95' cy='70' r='5'/%3E%3Cpath d='M95 75 v10 M90 80 h10'/%3E%3Cpath d='M50 15 Q55 5 60 15 Q58 25 50 22 Q48 18 50 15'/%3E%3C/g%3E%3C/svg%3E");
background-size: 120px 120px;
}
/* Ikat — blurred diamond weave */
.pat-ikat {
background-color: #1e3a4c;
background-image:
linear-gradient(135deg, #c45c26 25%, transparent 25%),
linear-gradient(225deg, #c45c26 25%, transparent 25%),
linear-gradient(45deg, #c45c26 25%, transparent 25%),
linear-gradient(315deg, #c45c26 25%, transparent 25%),
linear-gradient(135deg, #e8c56a 12%, transparent 12%),
linear-gradient(225deg, #e8c56a 12%, transparent 12%),
linear-gradient(45deg, #e8c56a 12%, transparent 12%),
linear-gradient(315deg, #e8c56a 12%, transparent 12%);
background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px;
background-position: 0 0, 20px 0, 20px 0, 0 0, 0 0, 20px 0, 20px 0, 0 0;
filter: none;
}
.pat-ikat::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent 0px,
transparent 3px,
rgba(30, 58, 76, 0.15) 3px,
rgba(30, 58, 76, 0.15) 4px
);
mix-blend-mode: multiply;
pointer-events: none;
}
/* Chinoiserie — peony & branch on lacquer */
.pat-chinoiserie {
background-color: #1a2f23;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cg fill='none' stroke='%23d4a0a0' stroke-width='1' opacity='0.6'%3E%3Cpath d='M20 160 Q40 120 35 80 Q30 40 60 20'/%3E%3Cpath d='M35 80 Q55 70 70 85'/%3E%3Ccircle cx='78' cy='88' r='12'/%3E%3Ccircle cx='70' cy='80' r='8'/%3E%3Ccircle cx='88' cy='80' r='7'/%3E%3Ccircle cx='78' cy='98' r='6'/%3E%3Cpath d='M60 20 Q80 10 100 30 Q110 50 95 60'/%3E%3Ccircle cx='100' cy='55' r='10'/%3E%3Ccircle cx='110' cy='48' r='6'/%3E%3Ccircle cx='92' cy='48' r='5'/%3E%3Cpath d='M90 140 Q110 110 120 80' stroke='%23c9a961' opacity='0.5'/%3E%3Cpath d='M10 40 Q30 50 25 70' stroke='%23c9a961'/%3E%3Cellipse cx='28' cy='72' rx='6' ry='4' fill='%23d4a0a0' opacity='0.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
background-size: 140px 160px;
}
/* Art Deco — geometric sunburst & chevrons */
.pat-artdeco {
background-color: #0e0e12;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 14px,
rgba(201, 169, 97, 0.15) 14px,
rgba(201, 169, 97, 0.15) 15px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 14px,
rgba(201, 169, 97, 0.1) 14px,
rgba(201, 169, 97, 0.1) 15px
),
conic-gradient(from 0deg at 50% 100%,
#c9a961 0deg, transparent 15deg,
#c9a961 30deg, transparent 45deg,
#c9a961 60deg, transparent 75deg,
#c9a961 90deg, transparent 105deg,
#c9a961 120deg, transparent 135deg,
#c9a961 150deg, transparent 165deg,
#c9a961 180deg, transparent 195deg,
transparent 360deg
);
background-size: 100% 100%, 100% 100%, 120% 70%;
background-position: 0 0, 0 0, 50% 100%;
background-repeat: no-repeat;
}
.pat-artdeco::before {
content: '';
position: absolute;
left: 50%;
top: 18%;
transform: translateX(-50%);
width: 48px;
height: 48px;
border: 1.5px solid rgba(201, 169, 97, 0.55);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.12), inset 0 0 0 6px rgba(201, 169, 97, 0.12);
}
.pat-artdeco::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 28%;
background:
linear-gradient(135deg, transparent 40%, rgba(201,169,97,0.35) 40%, rgba(201,169,97,0.35) 45%, transparent 45%),
linear-gradient(225deg, transparent 40%, rgba(201,169,97,0.35) 40%, rgba(201,169,97,0.35) 45%, transparent 45%);
background-size: 24px 100%;
}
/* Boho — warm tribal geometry */
.pat-boho {
background-color: #c4785a;
background-image:
linear-gradient(30deg, #6b3a2a 12%, transparent 12.5%, transparent 87%, #6b3a2a 87.5%, #6b3a2a),
linear-gradient(150deg, #6b3a2a 12%, transparent 12.5%, transparent 87%, #6b3a2a 87.5%, #6b3a2a),
linear-gradient(30deg, #6b3a2a 12%, transparent 12.5%, transparent 87%, #6b3a2a 87.5%, #6b3a2a),
linear-gradient(150deg, #6b3a2a 12%, transparent 12.5%, transparent 87%, #6b3a2a 87.5%, #6b3a2a),
linear-gradient(60deg, #d4a574 25%, transparent 25.5%, transparent 75%, #d4a574 75%, #d4a574),
linear-gradient(60deg, #d4a574 25%, transparent 25.5%, transparent 75%, #d4a574 75%, #d4a574);
background-size: 40px 70px;
background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}
.pat-boho::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='70' viewBox='0 0 40 70'%3E%3Ccircle cx='20' cy='35' r='3' fill='%23f0d9b5' opacity='0.5'/%3E%3Cpath d='M20 20 L24 28 L20 26 L16 28Z' fill='%23f0d9b5' opacity='0.4'/%3E%3Cpath d='M20 50 L24 42 L20 44 L16 42Z' fill='%23f0d9b5' opacity='0.4'/%3E%3C/svg%3E");
background-size: 40px 70px;
}
/* Coastal — soft sea stripes & wave */
.pat-coastal {
background-color: #dce8e6;
background-image:
repeating-linear-gradient(
0deg,
#dce8e6,
#dce8e6 10px,
#b8d4d0 10px,
#b8d4d0 11px,
#dce8e6 11px,
#dce8e6 20px,
#7a9e9a 20px,
#7a9e9a 21px
);
}
.pat-coastal::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 20 Q12.5 8 25 20 Q37.5 32 50 20 Q62.5 8 75 20 Q87.5 32 100 20' fill='none' stroke='%234a7c78' stroke-width='1.2' opacity='0.35'/%3E%3Cpath d='M0 28 Q12.5 18 25 28 Q37.5 38 50 28 Q62.5 18 75 28 Q87.5 38 100 28' fill='none' stroke='%234a7c78' stroke-width='0.8' opacity='0.2'/%3E%3C/svg%3E");
background-size: 100px 40px;
background-position: 0 70%;
background-repeat: repeat-x;
}
/* Grandmillennial — chintz cabbage rose */
.pat-grandmillennial {
background-color: #f2e8e4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='110' viewBox='0 0 100 110'%3E%3Cg opacity='0.7'%3E%3Ccircle cx='50' cy='45' r='18' fill='%23c47a8a'/%3E%3Ccircle cx='50' cy='45' r='12' fill='%23a85a6a'/%3E%3Ccircle cx='50' cy='45' r='6' fill='%238a4050'/%3E%3Ccircle cx='42' cy='38' r='5' fill='%23d4909e' opacity='0.7'/%3E%3Ccircle cx='58' cy='40' r='4' fill='%23d4909e' opacity='0.6'/%3E%3Cellipse cx='30' cy='55' rx='14' ry='8' fill='%235a7a5a' opacity='0.55' transform='rotate(-30 30 55)'/%3E%3Cellipse cx='72' cy='52' rx='14' ry='8' fill='%235a7a5a' opacity='0.55' transform='rotate(25 72 52)'/%3E%3Cellipse cx='50' cy='68' rx='12' ry='7' fill='%234a6a4a' opacity='0.5'/%3E%3Ccircle cx='18' cy='90' r='10' fill='%23c47a8a' opacity='0.5'/%3E%3Ccircle cx='18' cy='90' r='5' fill='%23a85a6a' opacity='0.5'/%3E%3Ccircle cx='85' cy='15' r='9' fill='%23c47a8a' opacity='0.45'/%3E%3Ccircle cx='85' cy='15' r='4' fill='%23a85a6a' opacity='0.45'/%3E%3Cellipse cx='8' cy='20' rx='10' ry='5' fill='%235a7a5a' opacity='0.35' transform='rotate(40 8 20)'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100px 110px;
}
/* Shared swatch overlay sheen */
.swatch::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 45%);
pointer-events: none;
z-index: 1;
}
/* Winner crown mark */
.crown {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 28px;
height: 28px;
background: var(--surface);
border: 1px solid var(--accent);
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
}
.style-card.selected .crown { display: flex; }
.crown svg { width: 14px; height: 14px; fill: var(--accent); }
/* Bracket trail (subtle) */
.trail {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--line);
text-align: center;
}
.trail-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.trail-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.chip {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 12px;
border: 1px solid var(--line);
color: var(--ink-soft);
background: var(--surface);
}
.chip.alive {
border-color: var(--accent);
color: var(--accent-deep);
background: var(--accent-soft);
}
.chip.out {
opacity: 0.4;
text-decoration: line-through;
}
</style>
</head>
<body>
<header class="site-header">
<div class="wordmark">Designer<br>Wallcoverings</div>
</header>
<main>
<div class="intro">
<div class="eyebrow">Style Showdown</div>
<h1>Which pattern reigns?</h1>
<p>Eight iconic wallcovering styles. One champion. Tap your favorite in each matchup to crown the winner.</p>
</div>
<nav class="progress" id="progress" aria-label="Tournament progress">
<div class="prog-step active" data-r="0">Quarters</div>
<div class="prog-step" data-r="1">Semis</div>
<div class="prog-step" data-r="2">Final</div>
<div class="prog-step" data-r="3">Champion</div>
</nav>
<div class="round-label" id="roundLabel">
<h2>Quarterfinals</h2>
<span>Match 1 of 4</span>
</div>
<div class="matchup-wrap" id="matchupWrap">
<!-- filled by JS -->
</div>
<div class="match-count" id="matchCount"></div>
<div class="trail" id="trail">
<div class="trail-label">The Field</div>
<div class="trail-chips" id="trailChips"></div>
</div>
</main>
<!-- Advance flash -->
<div class="advance-flash" id="advanceFlash" aria-hidden="true">
<div class="flash-inner" id="flashText"></div>
</div>
<!-- Result overlay -->
<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="champName">
<div class="result-card">
<div class="result-swatch" id="champSwatch"></div>
<div class="result-body">
<div class="eyebrow">Your Champion</div>
<h2 id="champName"></h2>
<p class="tagline" id="champTag"></p>
<div class="result-path" id="champPath"></div>
<div class="btn-row">
<button type="button" class="btn" id="btnShare">Copy Result</button>
<button type="button" class="btn btn-ghost" id="btnReplay">Play Again</button>
</div>
</div>
</div>
</div>
<script>
(function () {
const STYLES = [
{ id: 'damask', name: 'Damask', blurb: 'Ornate medallions, old-world grandeur', pat: 'pat-damask', tag: 'Timeless opulence for formal rooms' },
{ id: 'toile', name: 'Toile', blurb: 'Pastoral scenes in delicate linework', pat: 'pat-toile', tag: 'Storybook charm, endlessly refined' },
{ id: 'ikat', name: 'Ikat', blurb: 'Blurred diamonds, artisan dye-craft', pat: 'pat-ikat', tag: 'Global rhythm with modern edge' },
{ id: 'chinoiserie', name: 'Chinoiserie', blurb: 'Eastern peonies on lacquered ground', pat: 'pat-chinoiserie', tag: 'Exotic gardens, cultivated taste' },
{ id: 'artdeco', name: 'Art Deco', blurb: 'Sunbursts, geometry, gilded glamour', pat: 'pat-artdeco', tag: 'Jazz-age confidence in every line' },
{ id: 'boho', name: 'Boho', blurb: 'Tribal warmth, free-spirited weave', pat: 'pat-boho', tag: 'Earthy soul for collected interiors' },
{ id: 'coastal', name: 'Coastal', blurb: 'Sea-glass stripes and soft waves', pat: 'pat-coastal', tag: 'Breeze-washed calm, quietly luxe' },
{ id: 'grandmillennial', name: 'Grandmillennial', blurb: 'Chintz roses, heirloom nostalgia', pat: 'pat-grandmillennial', tag: 'Grandmother chic, proudly maximal' }
];
const ROUND_NAMES = ['Quarterfinals', 'Semifinals', 'Final', 'Champion'];
const byId = Object.fromEntries(STYLES.map(s => [s.id, s]));
// Fixed bracket seeding (shuffled once for variety but deterministic pairs)
let bracket = shuffle([...STYLES.map(s => s.id)]);
let round = 0; // 0 QF, 1 SF, 2 F
let matchIndex = 0;
let winners = [];
let path = []; // champion path names
let eliminated = new Set();
let locked = false;
const $wrap = document.getElementById('matchupWrap');
const $roundLabel = document.getElementById('roundLabel');
const $matchCount = document.getElementById('matchCount');
const $trailChips = document.getElementById('trailChips');
const $overlay = document.getElementById('overlay');
const $flash = document.getElementById('advanceFlash');
const $flashText = document.getElementById('flashText');
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
function currentPair() {
const a = bracket[matchIndex * 2];
const b = bracket[matchIndex * 2 + 1];
return [a, b];
}
function totalMatches() {
return bracket.length / 2;
}
function updateProgress() {
document.querySelectorAll('.prog-step').forEach((el) => {
const r = +el.dataset.r;
el.classList.toggle('active', r === round);
el.classList.toggle('done', r < round);
});
}
function updateTrail() {
$trailChips.innerHTML = STYLES.map(s => {
let cls = 'chip';
if (eliminated.has(s.id)) cls += ' out';
else cls += ' alive';
return `<span class="${cls}">${s.name}</span>`;
}).join('');
}
function cardHTML(id) {
const s = byId[id];
return `
<button type="button" class="style-card" data-id="${s.id}" aria-label="Vote for ${s.name}">
<div class="swatch ${s.pat}">
<div class="crown" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M3 17h18l-2-9-4 4-3-6-3 6-4-4-2 9zm0 2v2h18v-2H3z"/></svg>
</div>
</div>
<div class="card-meta">
<h3>${s.name}</h3>
<p>${s.blurb}</p>
<span class="tap-hint">Tap to advance →</span>
</div>
</button>`;
}
function renderMatch() {
locked = false;
const [a, b] = currentPair();
const tm = totalMatches();
$roundLabel.innerHTML = `<h2>${ROUND_NAMES[round]}</h2><span>Match ${matchIndex + 1} of ${tm}</span>`;
$matchCount.textContent = round < 2
? `${winners.length} advanced · ${tm - matchIndex} remaining this round`
: 'Choose the champion';
$wrap.style.animation = 'none';
void $wrap.offsetWidth;
$wrap.style.animation = '';
$wrap.innerHTML = `
<div class="matchup">
${cardHTML(a)}
<div class="vs-col"><div class="vs">VS</div></div>
${cardHTML(b)}
</div>`;
$wrap.querySelectorAll('.style-card').forEach(card => {
card.addEventListener('click', () => onPick(card.dataset.id));
});
updateProgress();
updateTrail();
}
function flash(msg) {
$flashText.textContent = msg;
$flash.classList.add('show');
return new Promise(res => {
setTimeout(() => {
$flash.classList.remove('show');
setTimeout(res, 280);
}, 720);
});
}
async function onPick(id) {
if (locked) return;
locked = true;
const [a, b] = currentPair();
const loser = id === a ? b : a;
$wrap.querySelectorAll('.style-card').forEach(card => {
if (card.dataset.id === id) card.classList.add('selected');
else card.classList.add('eliminated');
});
eliminated.add(loser);
winners.push(id);
path.push(byId[id].name);
updateTrail();
await new Promise(r => setTimeout(r, 480));
const tm = totalMatches();
if (matchIndex + 1 < tm) {
matchIndex++;
await flash(byId[id].name + ' advances');
renderMatch();
} else {
// Round complete
if (round < 2) {
await flash(ROUND_NAMES[round] + ' complete');
bracket = winners;
winners = [];
matchIndex = 0;
round++;
renderMatch();
} else {
// Champion
await flash('Champion crowned');
showChampion(id);
}
}
}
function showChampion(id) {
const s = byId[id];
document.getElementById('champName').textContent = s.name;
document.getElementById('champTag').textContent = s.tag;
const sw = document.getElementById('champSwatch');
sw.className = 'result-swatch ' + s.pat;
// Unique path of winners leading to champ (last 3 unique from path, or build from rounds)
const uniquePath = [];
path.forEach(n => { if (uniquePath[uniquePath.length - 1] !== n) uniquePath.push(n); });
// Show the champion's victories: filter path entries equal to champ name count, plus narrative
const pathEl = document.getElementById('champPath');
const steps = [ROUND_NAMES[0], ROUND_NAMES[1], ROUND_NAMES[2]].map((r, i) => {
return `<span>${r}</span>${i < 2 ? '<span class="sep">→</span>' : ''}`;
}).join('');
pathEl.innerHTML = steps + `<span class="sep">→</span><span style="color:var(--accent-deep);font-weight:600">${s.name}</span>`;
round = 3;
updateProgress();
$overlay.classList.add('open');
}
document.getElementById('btnReplay').addEventListener('click', () => {
$overlay.classList.remove('open');
bracket = shuffle([...STYLES.map(s => s.id)]);
round = 0;
matchIndex = 0;
winners = [];
path = [];
eliminated = new Set();
renderMatch();
});
document.getElementById('btnShare').addEventListener('click', async () => {
const name = document.getElementById('champName').textContent;
const text = `My Style Showdown champion: ${name} · Designer Wallcoverings`;
const btn = document.getElementById('btnShare');
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(text);
} else {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.left = '-9999px';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
btn.textContent = 'Copied';
setTimeout(() => { btn.textContent = 'Copy Result'; }, 1800);
} catch (_) {
btn.textContent = 'Copied';
setTimeout(() => { btn.textContent = 'Copy Result'; }, 1800);
}
});
// Close overlay on backdrop click
$overlay.addEventListener('click', (e) => {
if (e.target === $overlay) {
// keep open — champion is the end state; replay is explicit
}
});
// Kick off
renderMatch();
})();
</script>
</body>
</html>