← back to Model Arena
data/artifacts/104018fe5adc/grok.html
1190 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer Wallcoverings — This or That</title>
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--surface-2: #1e1e24;
--ink: #1c1a17;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent-dim: #7d6a45;
--line: rgba(245, 242, 234, 0.12);
--line-strong: rgba(245, 242, 234, 0.22);
--shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
--ease: cubic-bezier(.22, .9, .24, 1);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-pop: cubic-bezier(.34, 1.56, .64, 1);
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', 'Helvetica Neue', 'Segoe UI', sans-serif;
--phone-w: 390px;
--phone-h: 694px;
--radius: 40px;
--hair: 1px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 28px 20px 48px;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 169, 97, 0.08), transparent 55%),
var(--bg);
}
/* ── Brand header (outside phone) ── */
.site-header {
width: min(100%, 720px);
padding: 8px 4px 28px;
text-align: left;
}
.wordmark {
font-family: var(--serif);
font-size: clamp(22px, 4.2vw, 42px);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
line-height: 1.15;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
.wordmark-sub {
margin-top: 10px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
/* ── Stage ── */
.stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
/* ── Phone chrome ── */
.phone {
position: relative;
width: var(--phone-w);
height: var(--phone-h);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 1px rgba(0,0,0,0.4);
overflow: hidden;
isolation: isolate;
}
.phone-bezel {
position: absolute;
inset: 0;
border-radius: var(--radius);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);
pointer-events: none;
z-index: 40;
}
/* Dynamic Island */
.notch {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 118px;
height: 34px;
background: #000;
border-radius: 20px;
z-index: 50;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* Story progress bars */
.story-progress {
position: absolute;
top: 54px;
left: 14px;
right: 14px;
display: flex;
gap: 4px;
z-index: 30;
}
.story-progress span {
flex: 1;
height: 2px;
background: rgba(245, 242, 234, 0.22);
border-radius: 2px;
overflow: hidden;
}
.story-progress span i {
display: block;
height: 100%;
width: 0%;
background: var(--text);
border-radius: 2px;
animation: progressFill 6s linear forwards;
}
@keyframes progressFill {
to { width: 100%; }
}
/* Story top chrome */
.story-top {
position: absolute;
top: 66px;
left: 14px;
right: 14px;
display: flex;
align-items: center;
gap: 10px;
z-index: 30;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background:
conic-gradient(from 210deg, var(--accent), var(--accent-dim), var(--accent));
padding: 1.5px;
flex-shrink: 0;
}
.avatar-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--surface);
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 13px;
color: var(--accent);
letter-spacing: 0.04em;
}
.story-meta {
flex: 1;
min-width: 0;
}
.story-user {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
}
.story-time {
font-size: 11px;
color: var(--muted);
margin-top: 1px;
letter-spacing: 0.04em;
}
.story-actions {
display: flex;
gap: 14px;
color: var(--text);
opacity: 0.85;
}
.story-actions svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Story body */
.story-body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 118px 0 0;
background:
linear-gradient(180deg, rgba(13,13,15,0.55) 0%, transparent 18%, transparent 72%, rgba(13,13,15,0.75) 100%),
var(--surface);
}
.prompt {
text-align: center;
padding: 0 28px 18px;
z-index: 5;
}
.prompt-kicker {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.prompt-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.15;
color: var(--text);
}
.prompt-title em {
font-style: italic;
color: var(--accent);
letter-spacing: 0.02em;
}
/* Split poll */
.poll {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
min-height: 0;
margin: 0 14px 14px;
border-radius: 18px;
overflow: hidden;
border: var(--hair) solid var(--line-strong);
box-shadow: var(--shadow-soft);
}
.poll-side {
position: relative;
cursor: pointer;
border: none;
background: transparent;
padding: 0;
outline: none;
overflow: hidden;
color: inherit;
font: inherit;
transition: filter 0.45s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.poll-side:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.poll-side.is-dimmed {
filter: brightness(0.55) saturate(0.7);
}
.poll-side.is-winner {
filter: brightness(1.05);
}
.swatch {
position: absolute;
inset: 0;
}
/* Damask — ornate baroque motif via layered CSS + SVG */
.swatch-damask {
background:
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(201, 169, 97, 0.18), transparent 70%),
linear-gradient(165deg, #2a2218 0%, #1a1510 45%, #0f0d0b 100%);
}
.swatch-damask svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.72;
}
/* Geometric — crisp tessellation */
.swatch-geo {
background:
linear-gradient(145deg, #12161c 0%, #0c1016 50%, #151a22 100%);
}
.swatch-geo svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.85;
}
.side-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 48px 14px 18px;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
text-align: center;
z-index: 3;
pointer-events: none;
}
.side-name {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--text);
line-height: 1.1;
}
.side-tag {
margin-top: 6px;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.62);
}
/* Center OR diamond */
.or-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 44px;
height: 44px;
display: grid;
place-items: center;
pointer-events: none;
}
.or-badge::before {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
border: var(--hair) solid var(--accent);
transform: rotate(45deg);
border-radius: 4px;
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.or-badge span {
position: relative;
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
/* Vote bar */
.vote-bar-wrap {
position: absolute;
left: 18px;
right: 18px;
bottom: 72px;
z-index: 12;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
pointer-events: none;
}
.vote-bar-wrap.is-visible {
opacity: 1;
transform: translateY(0);
}
.vote-bar {
display: flex;
height: 36px;
border-radius: 100px;
overflow: hidden;
background: rgba(0,0,0,0.45);
border: var(--hair) solid var(--line-strong);
backdrop-filter: blur(8px);
}
.vote-fill {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
transition: width 1.1s var(--ease-out);
position: relative;
overflow: hidden;
}
.vote-fill-a {
background: linear-gradient(90deg, #3d3224, var(--accent-dim));
justify-content: flex-start;
padding-left: 14px;
}
.vote-fill-b {
background: linear-gradient(90deg, #1a2430, #2a3a4e);
justify-content: flex-end;
padding-right: 14px;
}
.vote-pct {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
opacity: 0;
transition: opacity 0.4s var(--ease) 0.35s;
}
.vote-bar-wrap.is-visible .vote-pct {
opacity: 1;
}
/* Winner stamp */
.stamp {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%) scale(0.6) rotate(-12deg);
z-index: 15;
opacity: 0;
pointer-events: none;
transition: none;
}
.stamp.is-show {
animation: stampIn 0.65s var(--ease-pop) 0.55s forwards;
}
@keyframes stampIn {
0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(-18deg); }
60% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(-8deg); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
}
.stamp-ring {
width: 108px;
height: 108px;
border-radius: 50%;
border: 2px solid var(--accent);
display: grid;
place-items: center;
background: rgba(13, 13, 15, 0.72);
box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.25), 0 12px 32px rgba(0,0,0,0.4);
backdrop-filter: blur(6px);
}
.stamp-inner {
text-align: center;
padding: 8px;
}
.stamp-word {
font-family: var(--serif);
font-size: 22px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
line-height: 1;
}
.stamp-sub {
margin-top: 6px;
font-family: var(--sans);
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text);
opacity: 0.8;
}
/* Story bottom reply bar */
.story-bottom {
position: absolute;
left: 14px;
right: 14px;
bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
z-index: 20;
}
.reply-pill {
flex: 1;
height: 40px;
border-radius: 100px;
border: var(--hair) solid var(--line-strong);
background: rgba(0,0,0,0.25);
display: flex;
align-items: center;
padding: 0 16px;
font-size: 13px;
color: rgba(245, 242, 234, 0.45);
letter-spacing: 0.02em;
}
.icon-btn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
color: var(--text);
background: none;
border: none;
cursor: default;
opacity: 0.9;
}
.icon-btn svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Home indicator */
.home-bar {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: rgba(245, 242, 234, 0.35);
border-radius: 4px;
z-index: 40;
}
/* Controls under phone */
.controls {
width: min(100%, var(--phone-w));
display: flex;
flex-direction: column;
gap: 16px;
padding: 4px 2px 0;
}
.controls-title {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
}
.edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.edit-card {
background: var(--surface);
border: var(--hair) solid var(--line);
border-radius: 12px;
padding: 14px 14px 16px;
box-shadow: var(--shadow-soft);
}
.edit-card label {
display: block;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.edit-card input[type="text"] {
width: 100%;
background: transparent;
border: none;
border-bottom: var(--hair) solid var(--line-strong);
color: var(--text);
font-family: var(--serif);
font-size: 18px;
letter-spacing: 0.04em;
padding: 4px 0 8px;
outline: none;
border-radius: 0;
transition: border-color 0.3s var(--ease);
}
.edit-card input[type="text"]:focus {
border-bottom-color: var(--accent);
}
.color-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.color-row span {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
flex: 1;
}
.color-row input[type="color"] {
-webkit-appearance: none;
appearance: none;
width: 32px;
height: 32px;
border: var(--hair) solid var(--line-strong);
border-radius: 50%;
background: transparent;
padding: 0;
cursor: pointer;
overflow: hidden;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
.color-row input[type="color"]::-moz-color-swatch {
border: none;
border-radius: 50%;
}
.reset-row {
display: flex;
justify-content: center;
padding-top: 4px;
}
.btn-reset {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
background: transparent;
border: var(--hair) solid var(--line);
border-radius: 100px;
padding: 10px 22px;
cursor: pointer;
transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.btn-reset:hover {
color: var(--text);
border-color: var(--accent-dim);
background: rgba(201, 169, 97, 0.06);
}
/* Result overlay (in-page, no alerts) */
.result-overlay {
position: absolute;
inset: 0;
z-index: 35;
display: grid;
place-items: center;
background: rgba(13, 13, 15, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.45s var(--ease);
backdrop-filter: blur(2px);
}
.result-overlay.is-on {
opacity: 1;
pointer-events: auto;
}
.result-card {
width: min(86%, 280px);
background: var(--surface-2);
border: var(--hair) solid var(--line-strong);
border-radius: 16px;
padding: 28px 24px 22px;
text-align: center;
box-shadow: var(--shadow);
transform: translateY(12px) scale(0.96);
transition: transform 0.5s var(--ease-out);
}
.result-overlay.is-on .result-card {
transform: translateY(0) scale(1);
}
.result-eyebrow {
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.result-name {
font-family: var(--serif);
font-size: 32px;
letter-spacing: 0.04em;
color: var(--text);
line-height: 1.1;
}
.result-copy {
margin-top: 10px;
font-size: 13px;
line-height: 1.55;
color: var(--muted);
}
.result-actions {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 8px;
}
.btn-ghost {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
background: transparent;
border: var(--hair) solid var(--line-strong);
border-radius: 100px;
padding: 10px 18px;
cursor: pointer;
transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Tap ripple */
.ripple {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(201, 169, 97, 0.35);
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
animation: rippleOut 0.7s var(--ease-out) forwards;
z-index: 4;
}
@keyframes rippleOut {
to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}
@media (max-width: 440px) {
:root { --phone-w: min(100vw - 32px, 390px); --phone-h: calc(var(--phone-w) * 16 / 9); }
body { padding: 16px 12px 36px; }
.wordmark { font-size: 22px; letter-spacing: 0.14em; }
}
</style>
</head>
<body>
<header class="site-header">
<div class="wordmark">Designer Wallcoverings</div>
<div class="wordmark-sub">Editorial Story · This or That</div>
</header>
<div class="stage">
<div class="phone" id="phone" aria-label="Instagram Story poll mockup">
<div class="phone-bezel"></div>
<div class="notch" aria-hidden="true"></div>
<div class="story-progress" aria-hidden="true">
<span><i></i></span>
<span></span>
<span></span>
</div>
<div class="story-top">
<div class="avatar"><div class="avatar-inner">DW</div></div>
<div class="story-meta">
<div class="story-user">designer.wallcoverings</div>
<div class="story-time">2h</div>
</div>
<div class="story-actions" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.2" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.2" fill="currentColor" stroke="none"/></svg>
</div>
</div>
<div class="story-body">
<div class="prompt">
<div class="prompt-kicker">Collection Vote</div>
<h1 class="prompt-title">This <em>or</em> That</h1>
</div>
<div class="poll" id="poll" role="group" aria-label="Style poll">
<button type="button" class="poll-side" id="sideA" data-side="a" aria-label="Vote Damask">
<div class="swatch swatch-damask" id="swatchA">
<!-- Ornate damask motif -->
<svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<pattern id="damaskTile" width="100" height="120" patternUnits="userSpaceOnUse">
<path d="M50 8
C58 22 72 28 72 48
C72 64 60 72 50 88
C40 72 28 64 28 48
C28 28 42 22 50 8Z" fill="none" stroke="#c9a961" stroke-width="1.1" opacity="0.85"/>
<path d="M50 40
C54 46 60 50 60 58
C60 66 54 70 50 78
C46 70 40 66 40 58
C40 50 46 46 50 40Z" fill="#c9a961" opacity="0.22"/>
<circle cx="50" cy="58" r="3" fill="#c9a961" opacity="0.55"/>
<path d="M50 88 C54 100 62 108 62 120 M50 88 C46 100 38 108 38 120" fill="none" stroke="#c9a961" stroke-width="0.8" opacity="0.45"/>
<path d="M18 60 Q8 80 18 100" fill="none" stroke="#c9a961" stroke-width="0.7" opacity="0.35"/>
<path d="M82 60 Q92 80 82 100" fill="none" stroke="#c9a961" stroke-width="0.7" opacity="0.35"/>
<path d="M50 0 V8 M28 48 H18 M72 48 H82" stroke="#c9a961" stroke-width="0.6" opacity="0.3"/>
</pattern>
<linearGradient id="damaskVeil" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2a2218" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#0a0908" stop-opacity="0.55"/>
</linearGradient>
</defs>
<rect width="200" height="360" fill="url(#damaskTile)"/>
<rect width="200" height="360" fill="url(#damaskVeil)"/>
<!-- central medallion -->
<g transform="translate(100 150)" opacity="0.9">
<ellipse cx="0" cy="0" rx="42" ry="56" fill="none" stroke="#c9a961" stroke-width="1.2"/>
<ellipse cx="0" cy="0" rx="28" ry="38" fill="none" stroke="#c9a961" stroke-width="0.8" opacity="0.7"/>
<path d="M0 -48
C10 -30 22 -22 22 0
C22 22 10 30 0 48
C-10 30 -22 22 -22 0
C-22 -22 -10 -30 0 -48Z" fill="#c9a961" opacity="0.12" stroke="#c9a961" stroke-width="0.9"/>
<circle cx="0" cy="0" r="5" fill="#c9a961" opacity="0.5"/>
<path d="M0 -18 C4 -10 8 -6 8 0 C8 6 4 10 0 18 C-4 10 -8 6 -8 0 C-8 -6 -4 -10 0 -18Z" fill="#c9a961" opacity="0.35"/>
</g>
</svg>
</div>
<div class="side-label">
<div class="side-name" id="nameA">Damask</div>
<div class="side-tag">Heritage weave</div>
</div>
</button>
<button type="button" class="poll-side" id="sideB" data-side="b" aria-label="Vote Geometric">
<div class="swatch swatch-geo" id="swatchB">
<!-- Crisp geometric tessellation -->
<svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<pattern id="geoTile" width="40" height="69.28" patternUnits="userSpaceOnUse">
<!-- hex lattice -->
<path d="M20 0 L40 11.55 L40 34.64 L20 46.19 L0 34.64 L0 11.55 Z" fill="none" stroke="#8fa4b8" stroke-width="0.9" opacity="0.55"/>
<path d="M20 11.55 L30 17.32 L30 28.87 L20 34.64 L10 28.87 L10 17.32 Z" fill="#6b8a9e" opacity="0.12" stroke="#a8c0d4" stroke-width="0.6"/>
</pattern>
<pattern id="geoLines" width="28" height="28" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<line x1="0" y1="0" x2="0" y2="28" stroke="#7a96aa" stroke-width="0.5" opacity="0.25"/>
</pattern>
<linearGradient id="geoVeil" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1a2836" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#070a0e" stop-opacity="0.65"/>
</linearGradient>
</defs>
<rect width="200" height="360" fill="url(#geoTile)"/>
<rect width="200" height="360" fill="url(#geoLines)"/>
<rect width="200" height="360" fill="url(#geoVeil)"/>
<!-- large diamond focal -->
<g transform="translate(100 170)" opacity="0.95">
<polygon points="0,-58 50,0 0,58 -50,0" fill="none" stroke="#b8d0e0" stroke-width="1.3"/>
<polygon points="0,-36 32,0 0,36 -32,0" fill="#6b8a9e" opacity="0.15" stroke="#c5d8e6" stroke-width="0.8"/>
<polygon points="0,-16 14,0 0,16 -14,0" fill="#a8c0d4" opacity="0.35"/>
<line x1="-50" y1="0" x2="50" y2="0" stroke="#8fa4b8" stroke-width="0.5" opacity="0.5"/>
<line x1="0" y1="-58" x2="0" y2="58" stroke="#8fa4b8" stroke-width="0.5" opacity="0.5"/>
<!-- corner chevrons -->
<path d="M-70 -40 L-55 -40 L-55 -25" fill="none" stroke="#9bb4c6" stroke-width="1" opacity="0.4"/>
<path d="M70 -40 L55 -40 L55 -25" fill="none" stroke="#9bb4c6" stroke-width="1" opacity="0.4"/>
<path d="M-70 40 L-55 40 L-55 25" fill="none" stroke="#9bb4c6" stroke-width="1" opacity="0.4"/>
<path d="M70 40 L55 40 L55 25" fill="none" stroke="#9bb4c6" stroke-width="1" opacity="0.4"/>
</g>
</svg>
</div>
<div class="side-label">
<div class="side-name" id="nameB">Geometric</div>
<div class="side-tag">Modern lattice</div>
</div>
</button>
<div class="or-badge" aria-hidden="true"><span>or</span></div>
<div class="vote-bar-wrap" id="voteBar">
<div class="vote-bar">
<div class="vote-fill vote-fill-a" id="fillA" style="width:50%">
<span class="vote-pct" id="pctA">50%</span>
</div>
<div class="vote-fill vote-fill-b" id="fillB" style="width:50%">
<span class="vote-pct" id="pctB">50%</span>
</div>
</div>
</div>
<div class="stamp" id="stamp" aria-hidden="true">
<div class="stamp-ring">
<div class="stamp-inner">
<div class="stamp-word">Winner</div>
<div class="stamp-sub" id="stampName">—</div>
</div>
</div>
</div>
</div>
<div class="story-bottom">
<div class="reply-pill">Send message…</div>
<div class="icon-btn" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>
</div>
<div class="icon-btn" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M22 2L11 13"/><path d="M22 2L15 22l-4-9-9-4 20-7z"/></svg>
</div>
</div>
</div>
<div class="home-bar" aria-hidden="true"></div>
<div class="result-overlay" id="resultOverlay" role="dialog" aria-modal="true" aria-labelledby="resultName">
<div class="result-card">
<div class="result-eyebrow">Studio Choice</div>
<div class="result-name" id="resultName">Damask</div>
<p class="result-copy" id="resultCopy">Your vote is in. The room leans heritage — ornate, layered, timeless.</p>
<div class="result-actions">
<button type="button" class="btn-ghost" id="btnCloseResult">Dismiss</button>
<button type="button" class="btn-ghost" id="btnRevote">Vote again</button>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="controls-title">Edit styles</div>
<div class="edit-grid">
<div class="edit-card">
<label for="inputNameA">Style A</label>
<input type="text" id="inputNameA" value="Damask" maxlength="18" autocomplete="off">
<div class="color-row">
<span>Accent wash</span>
<input type="color" id="colorA" value="#c9a961" title="Damask accent">
</div>
</div>
<div class="edit-card">
<label for="inputNameB">Style B</label>
<input type="text" id="inputNameB" value="Geometric" maxlength="18" autocomplete="off">
<div class="color-row">
<span>Accent wash</span>
<input type="color" id="colorB" value="#6b8a9e" title="Geometric accent">
</div>
</div>
</div>
<div class="reset-row">
<button type="button" class="btn-reset" id="btnReset">Reset poll</button>
</div>
</div>
</div>
<script>
(function () {
const sideA = document.getElementById('sideA');
const sideB = document.getElementById('sideB');
const fillA = document.getElementById('fillA');
const fillB = document.getElementById('fillB');
const pctA = document.getElementById('pctA');
const pctB = document.getElementById('pctB');
const voteBar = document.getElementById('voteBar');
const stamp = document.getElementById('stamp');
const stampName = document.getElementById('stampName');
const nameAEl = document.getElementById('nameA');
const nameBEl = document.getElementById('nameB');
const inputA = document.getElementById('inputNameA');
const inputB = document.getElementById('inputNameB');
const colorA = document.getElementById('colorA');
const colorB = document.getElementById('colorB');
const overlay = document.getElementById('resultOverlay');
const resultName = document.getElementById('resultName');
const resultCopy = document.getElementById('resultCopy');
const btnReset = document.getElementById('btnReset');
const btnClose = document.getElementById('btnCloseResult');
const btnRevote = document.getElementById('btnRevote');
const swatchA = document.getElementById('swatchA');
const swatchB = document.getElementById('swatchB');
let voted = false;
const copyFor = (side, name) => {
if (side === 'a') {
return `Your vote is in. The room leans ${name.toLowerCase()} — ornate, layered, timeless.`;
}
return `Your vote is in. The room leans ${name.toLowerCase()} — crisp lines, cool structure, modern calm.`;
};
function castVote(side, evt) {
if (voted) return;
voted = true;
// ripple
const btn = side === 'a' ? sideA : sideB;
const rect = btn.getBoundingClientRect();
const r = document.createElement('span');
r.className = 'ripple';
r.style.left = (evt.clientX - rect.left) + 'px';
r.style.top = (evt.clientY - rect.top) + 'px';
btn.appendChild(r);
setTimeout(() => r.remove(), 750);
// weighted random favoring the tapped side
const win = 58 + Math.floor(Math.random() * 22); // 58–79
const lose = 100 - win;
const aPct = side === 'a' ? win : lose;
const bPct = 100 - aPct;
voteBar.classList.add('is-visible');
requestAnimationFrame(() => {
fillA.style.width = aPct + '%';
fillB.style.width = bPct + '%';
pctA.textContent = aPct + '%';
pctB.textContent = bPct + '%';
});
const winner = aPct >= bPct ? 'a' : 'b';
const winName = winner === 'a' ? nameAEl.textContent.trim() : nameBEl.textContent.trim();
sideA.classList.toggle('is-winner', winner === 'a');
sideB.classList.toggle('is-winner', winner === 'b');
sideA.classList.toggle('is-dimmed', winner !== 'a');
sideB.classList.toggle('is-dimmed', winner !== 'b');
stampName.textContent = winName;
stamp.classList.add('is-show');
// position stamp over winning side
stamp.style.left = winner === 'a' ? '25%' : '75%';
resultName.textContent = winName;
resultCopy.textContent = copyFor(winner, winName);
setTimeout(() => overlay.classList.add('is-on'), 1400);
}
function resetPoll() {
voted = false;
voteBar.classList.remove('is-visible');
fillA.style.width = '50%';
fillB.style.width = '50%';
pctA.textContent = '50%';
pctB.textContent = '50%';
sideA.classList.remove('is-winner', 'is-dimmed');
sideB.classList.remove('is-winner', 'is-dimmed');
stamp.classList.remove('is-show');
stamp.style.left = '50%';
overlay.classList.remove('is-on');
}
sideA.addEventListener('click', (e) => castVote('a', e));
sideB.addEventListener('click', (e) => castVote('b', e));
btnReset.addEventListener('click', resetPoll);
btnClose.addEventListener('click', () => overlay.classList.remove('is-on'));
btnRevote.addEventListener('click', resetPoll);
inputA.addEventListener('input', () => {
const v = inputA.value.trim() || 'Damask';
nameAEl.textContent = v;
sideA.setAttribute('aria-label', 'Vote ' + v);
});
inputB.addEventListener('input', () => {
const v = inputB.value.trim() || 'Geometric';
nameBEl.textContent = v;
sideB.setAttribute('aria-label', 'Vote ' + v);
});
function hexToRgb(hex) {
const h = hex.replace('#', '');
const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function applySwatchColor(which, hex) {
const { r, g, b } = hexToRgb(hex);
if (which === 'a') {
swatchA.style.background = `
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(${r},${g},${b},0.28), transparent 70%),
linear-gradient(165deg, rgb(${Math.max(0,r-120)},${Math.max(0,g-130)},${Math.max(0,b-140)}) 0%, #1a1510 45%, #0f0d0b 100%)`;
const strokes = swatchA.querySelectorAll('svg [stroke]');
strokes.forEach(el => {
if (el.getAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
el.setAttribute('stroke', hex);
}
});
const fills = swatchA.querySelectorAll('svg [fill="#c9a961"], svg circle[fill], svg path[fill="#c9a961"]');
swatchA.querySelectorAll('svg path, svg circle, svg ellipse').forEach(el => {
const f = el.getAttribute('fill');
if (f && f !== 'none' && f.startsWith('#')) el.setAttribute('fill', hex);
});
fillA.style.background = `linear-gradient(90deg, rgb(${Math.max(0,r-80)},${Math.max(0,g-90)},${Math.max(0,b-100)}), ${hex})`;
} else {
swatchB.style.background = `
linear-gradient(145deg, rgb(${Math.max(0,r-90)},${Math.max(0,g-80)},${Math.max(0,b-70)}) 0%, #0c1016 50%, rgb(${Math.max(0,r-70)},${Math.max(0,g-60)},${Math.max(0,b-50)}) 100%)`;
swatchB.querySelectorAll('svg path, svg line, svg polygon').forEach(el => {
const s = el.getAttribute('stroke');
if (s && s !== 'none') el.setAttribute('stroke', hex);
const f = el.getAttribute('fill');
if (f && f !== 'none' && f.startsWith('#')) el.setAttribute('fill', hex);
});
fillB.style.background = `linear-gradient(90deg, #1a2430, ${hex})`;
}
}
colorA.addEventListener('input', () => applySwatchColor('a', colorA.value));
colorB.addEventListener('input', () => applySwatchColor('b', colorB.value));
})();
</script>
</body>
</html>