← back to Model Arena
data/artifacts/104018fe5adc/gpt.html
950 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Designer Wallcoverings - This or That Story Poll</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
/* Design tokens */
--bg: #0d0d0f;
--surface: #17171c;
--text: #1c1a17; /* darkest ink for wordmark (near-black warm ink) */
--ink-soft: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* metallic gold accent */
--accent-deep: #7d6a45;
--line: rgba(245, 242, 234, 0.18);
--shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.42);
--shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.55);
--radius-card: 22px;
--radius-pill: 999px;
--ease-soft: cubic-bezier(.22,.9,.24,1);
--ease-pop: cubic-bezier(.34,1.56,.64,1);
--story-padding-x: 18px;
--story-padding-y: 14px;
--vote-height: 6px;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Avenir Next", "Century Gothic", Futura, "Segoe UI", sans-serif;
background: #000;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.story-frame {
position: relative;
width: min(100vw, 360px);
height: calc(min(100vw, 360px) * 16 / 9);
max-height: 640px;
background: radial-gradient(circle at top, #191922 0, var(--bg) 55%);
color: var(--ink-soft);
border-radius: 32px;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9);
}
/* Instagram-like chrome */
.status-bar {
position: absolute;
inset: 0;
pointer-events: none;
}
.status-top {
display: flex;
flex-direction: column;
padding: 10px var(--story-padding-x) 0;
gap: 8px;
}
.story-progress {
display: flex;
gap: 3px;
}
.story-progress-bar {
flex: 1;
height: 2px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
overflow: hidden;
}
.story-progress-bar::before {
content: "";
display: block;
width: 55%;
height: 100%;
background: rgba(255,255,255,0.9);
}
.story-chrome-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
.story-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.65) 0, rgba(255,255,255,0) 45%),
conic-gradient(from 210deg, #f7c76a, #e5528b, #7a5cff, #f7c76a);
padding: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.story-avatar-inner {
width: 100%;
height: 100%;
border-radius: inherit;
background:
radial-gradient(circle at 30% 30%, #f5f2ea 0, #d0c8b4 40%, #9a8f7a 100%);
}
.story-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.story-meta-primary {
display: flex;
align-items: baseline;
gap: 6px;
}
.story-username {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(245,242,234,0.95);
}
.story-time {
font-size: 11px;
color: rgba(245,242,234,0.6);
}
.story-viewers {
font-size: 11px;
color: rgba(245,242,234,0.6);
}
.story-controls {
display: flex;
align-items: center;
gap: 14px;
color: rgba(245,242,234,0.95);
font-size: 18px;
}
.story-close {
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(245,242,234,0.65);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.story-more {
width: 4px;
height: 14px;
border-radius: 999px;
border: 1px solid rgba(245,242,234,0.6);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.story-more::before {
content: "⋮";
transform: translateY(-0.5px);
}
.story-bottom {
position: absolute;
inset-inline: var(--story-padding-x);
bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
color: rgba(245,242,234,0.95);
font-size: 11px;
}
.story-send {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(245,242,234,0.6);
background: rgba(10,10,12,0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.story-send-label {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 10px;
color: rgba(245,242,234,0.7);
}
.story-send-icon {
width: 13px;
height: 13px;
border-radius: 999px;
border: 1px solid rgba(245,242,234,0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
}
.story-react {
display: flex;
gap: 7px;
pointer-events: auto;
}
.story-react span {
font-size: 17px;
line-height: 1;
transform-origin: center;
transition: transform 140ms var(--ease-pop);
}
.story-react span:active {
transform: scale(1.3);
}
/* Header with wordmark */
header.wordmark-header {
position: absolute;
inset-inline: var(--story-padding-x);
top: 46px;
display: flex;
align-items: flex-end;
justify-content: space-between;
z-index: 3;
pointer-events: none;
}
.wordmark-lockup {
max-width: 260px;
}
.wordmark {
margin: 0;
font-family: "Playfair Display", "Didot", "Bodoni MT", "Times New Roman", serif;
font-weight: 500;
font-size: 40px;
line-height: 1.1;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
text-shadow: 0 1px 0 rgba(255,255,255,0.12);
}
.wordmark-subline {
margin-top: 4px;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245,242,234,0.65);
}
.header-pill {
pointer-events: auto;
align-self: center;
padding: 7px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.35);
background: radial-gradient(circle at top left, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 50%),
rgba(12,12,15,0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 12px 30px rgba(0,0,0,0.6);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245,242,234,0.85);
}
.header-pill span {
color: var(--accent);
}
/* Main poll layout */
main.story-main {
position: absolute;
inset: 0;
padding: 112px var(--story-padding-x) 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
z-index: 1;
}
.poll-title-block {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 70%;
}
.poll-eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,242,234,0.6);
}
.poll-title {
margin: 0;
font-family: "Playfair Display", "Didot", "Bodoni MT", "Times New Roman", serif;
font-size: 28px;
line-height: 1.15;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.poll-subtitle {
font-size: 13px;
color: rgba(245,242,234,0.7);
max-width: 240px;
}
.poll-card {
position: relative;
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border-radius: var(--radius-card);
padding: 10px;
background:
radial-gradient(circle at top, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 48%),
linear-gradient(145deg, #15151b, #050507);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(255,255,255,0.03);
overflow: hidden;
}
.poll-option {
position: relative;
border-radius: 18px;
padding: 14px 12px 16px;
background: radial-gradient(circle at top, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.02) 55%),
rgba(7,7,10,0.95);
box-shadow: var(--shadow-subtle);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
cursor: pointer;
overflow: hidden;
transition: transform 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft), border-color 220ms var(--ease-soft), background 220ms var(--ease-soft);
}
.poll-option:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(0,0,0,0.75);
border-color: rgba(255,255,255,0.24);
background: radial-gradient(circle at top, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.04) 55%),
rgba(7,7,10,0.98);
}
.poll-option:active {
transform: translateY(0);
box-shadow: var(--shadow-subtle);
}
.poll-option.disabled {
cursor: default;
pointer-events: none;
opacity: 0.88;
}
.swatch {
position: relative;
border-radius: 14px;
overflow: hidden;
height: 120px;
border: 1px solid rgba(255,255,255,0.18);
background: #14141a;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.8);
}
/* Left swatch: Damask inspired motif using CSS + inline SVG texture */
.swatch-damask {
background:
radial-gradient(circle at 20% 15%, rgba(255,255,255,0.14) 0, transparent 45%),
radial-gradient(circle at 80% 75%, rgba(0,0,0,0.7) 0, transparent 60%),
repeating-radial-gradient(circle at 50% 20%, rgba(201,169,97,0.42), rgba(201,169,97,0.42) 2px, transparent 2px, transparent 6px),
linear-gradient(135deg, #191722, #0c0a11);
}
.swatch-damask::before {
content: "";
position: absolute;
inset: 14px 18px;
border-radius: 50%;
background-image:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.4) 0, transparent 40%),
radial-gradient(circle at 0 100%, rgba(0,0,0,0.5) 0, transparent 55%);
mix-blend-mode: screen;
opacity: 0.6;
}
.swatch-damask::after {
content: "";
position: absolute;
inset: 18px 24px;
background:
radial-gradient(circle at 50% 15%, rgba(0,0,0,0.75) 0, transparent 48%),
radial-gradient(circle at 50% 85%, rgba(0,0,0,0.85) 0, transparent 48%);
mask-image: radial-gradient(circle at 50% 15%, black 0, transparent 52%),
radial-gradient(circle at 50% 85%, black 0, transparent 52%);
mask-composite: add;
-webkit-mask-image: radial-gradient(circle at 50% 15%, black 0, transparent 52%),
radial-gradient(circle at 50% 85%, black 0, transparent 52%);
-webkit-mask-composite: xor;
opacity: 0.7;
}
/* Overlay an inline SVG damask motif */
.swatch-damask-svg {
position: absolute;
inset: 10px 14px;
opacity: 0.9;
mix-blend-mode: screen;
}
/* Right swatch: Geometric with crisp metallic lines */
.swatch-geo {
background:
repeating-linear-gradient(
45deg,
rgba(201,169,97,0.18),
rgba(201,169,97,0.18) 1px,
transparent 1px,
transparent 18px
),
repeating-linear-gradient(
135deg,
rgba(201,169,97,0.24),
rgba(201,169,97,0.24) 1px,
transparent 1px,
transparent 18px
),
linear-gradient(135deg, #222128, #09080d);
}
.swatch-geo::before {
content: "";
position: absolute;
inset: 20px 18px;
background:
linear-gradient(90deg, transparent 0 8%, rgba(201,169,97,0.8) 9%, transparent 10% 19%, rgba(201,169,97,0.6) 20%, transparent 22% 29%, rgba(201,169,97,0.7) 30%, transparent 32% 39%, rgba(201,169,97,0.45) 40%, transparent 42% 49%, rgba(201,169,97,0.7) 50%, transparent 51%);
opacity: 0.9;
mix-blend-mode: screen;
}
.swatch-geo::after {
content: "";
position: absolute;
inset: 14px 16px;
border-radius: 10px;
border: 1px solid rgba(201,169,97,0.7);
box-shadow:
0 0 0 1px rgba(0,0,0,0.85),
inset 0 0 18px rgba(0,0,0,0.8);
opacity: 0.9;
}
/* Option labels & vote bar */
.option-footer {
display: flex;
flex-direction: column;
gap: 8px;
}
.option-label-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 4px;
}
.option-name {
font-size: 12px;
letter-spacing: 0.19em;
text-transform: uppercase;
color: rgba(245,242,234,0.92);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.option-style-note {
font-size: 10px;
color: rgba(245,242,234,0.6);
text-transform: uppercase;
letter-spacing: 0.14em;
}
.option-percentage {
font-size: 11px;
color: rgba(245,242,234,0.85);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vote-track {
position: relative;
height: var(--vote-height);
border-radius: 999px;
background: radial-gradient(circle at top, rgba(255,255,255,0.4) 0, transparent 65%),
rgba(0,0,0,0.85);
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.06),
0 1px 0 rgba(255,255,255,0.12);
}
.vote-fill {
position: absolute;
inset: 0;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(201,169,97,0.1), rgba(201,169,97,0.95));
box-shadow: 0 0 12px rgba(201,169,97,0.6);
transition: width 560ms var(--ease-soft);
}
.poll-card.voted .poll-option {
opacity: 0.65;
transform: translateY(0);
}
.poll-card.voted .poll-option.selected {
opacity: 1;
box-shadow: 0 18px 40px rgba(0,0,0,0.9);
border-color: rgba(201,169,97,0.85);
background: radial-gradient(circle at top, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.06) 55%),
rgba(7,7,10,0.99);
transform: translateY(-3px) scale(1.01);
}
.poll-card.voted .poll-option.selected .vote-fill {
box-shadow: 0 0 18px rgba(201,169,97,0.9);
}
/* Winner stamp */
.winner-stamp {
position: absolute;
top: 16px;
right: 10px;
padding: 5px 9px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.75);
background: radial-gradient(circle at top left, rgba(255,255,255,0.3) 0, rgba(255,255,255,0) 55%),
rgba(12,11,9,0.96);
box-shadow: 0 16px 30px rgba(0,0,0,0.8);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
display: flex;
align-items: center;
gap: 6px;
opacity: 0;
transform: translateY(8px) scale(0.9);
transform-origin: 100% 0;
pointer-events: none;
transition: opacity 260ms var(--ease-soft), transform 320ms var(--ease-pop);
}
.winner-stamp::before {
content: "✶";
font-size: 10px;
color: var(--accent);
}
.winner-stamp.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.winner-stamp span {
color: rgba(245,242,234,0.8);
}
/* Overlay result card */
.result-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.75) 60%);
pointer-events: none;
opacity: 0;
transition: opacity 260ms var(--ease-soft);
}
.result-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.result-card {
min-width: 220px;
max-width: 260px;
border-radius: 20px;
padding: 14px 14px 12px;
background:
radial-gradient(circle at top left, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.02) 50%),
rgba(8,8,10,0.96);
border: 1px solid rgba(201,169,97,0.7);
box-shadow: 0 28px 60px rgba(0,0,0,0.95);
}
.result-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.18);
background: rgba(12,12,15,0.8);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,242,234,0.78);
margin-bottom: 8px;
}
.result-chip-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 8px rgba(201,169,97,0.9);
}
.result-heading {
font-family: "Playfair Display", "Didot", "Bodoni MT", "Times New Roman", serif;
font-size: 18px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 4px;
color: var(--ink-soft);
}
.result-body {
font-size: 12px;
color: rgba(245,242,234,0.75);
margin: 0 0 10px;
}
.result-close {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245,242,234,0.72);
}
.result-close-button {
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.4);
background: rgba(0,0,0,0.8);
cursor: pointer;
transition: background 160ms var(--ease-soft), transform 160ms var(--ease-soft), box-shadow 160ms var(--ease-soft);
}
.result-close-button:hover {
background: rgba(201,169,97,0.14);
box-shadow: 0 0 12px rgba(201,169,97,0.4);
}
.result-close-button:active {
transform: translateY(1px);
box-shadow: none;
}
</style>
</head>
<body>
<div class="story-frame">
<!-- Chrome -->
<div class="status-bar">
<div class="status-top">
<div class="story-progress">
<div class="story-progress-bar"></div>
</div>
<div class="story-chrome-row">
<div style="display:flex;align-items:center;gap:8px;">
<div class="story-avatar">
<div class="story-avatar-inner"></div>
</div>
<div class="story-meta">
<div class="story-meta-primary">
<div class="story-username">designerwallcoverings</div>
<div class="story-time">12m</div>
</div>
<div class="story-viewers">Elevated poll • Curated finish</div>
</div>
</div>
<div class="story-controls">
<div class="story-more"></div>
<div class="story-close">×</div>
</div>
</div>
</div>
<div class="story-bottom">
<div class="story-send">
<div class="story-send-label">Send message</div>
<div class="story-send-icon">➤</div>
</div>
<div class="story-react">
<span>🤍</span>
<span>✨</span>
<span>😍</span>
</div>
</div>
</div>
<!-- Fixed header with wordmark -->
<header class="wordmark-header">
<div class="wordmark-lockup">
<h1 class="wordmark">DESIGNER<br>WALLCOVERINGS</h1>
<div class="wordmark-subline">Bespoke walls for luminous rooms</div>
</div>
<div class="header-pill">
THIS OR THAT · <span>VOTE</span>
</div>
</header>
<!-- Main poll content -->
<main class="story-main">
<section class="poll-title-block" aria-label="This or that poll">
<div class="poll-eyebrow">Wallcovering study</div>
<h2 class="poll-title">Damask or geometric?</h2>
<p class="poll-subtitle">Tap the style you would install for a candlelit dining room reveal.</p>
</section>
<section class="poll-card" aria-live="polite">
<!-- Winner stamp (positioned over card, toggled via JS) -->
<div class="winner-stamp" id="winnerStamp">
<span>Voted favourite</span>
</div>
<!-- Option A: Damask -->
<article class="poll-option" data-option="damask" aria-label="Vote for Damask">
<div class="swatch swatch-damask">
<!-- Simple inline SVG ornament, repeated via pattern -->
<svg class="swatch-damask-svg" viewBox="0 0 120 80" preserveAspectRatio="none">
<defs>
<pattern id="damaskPattern" x="0" y="0" width="0.25" height="0.5">
<path d="M60 5
C45 10 38 20 38 30
C38 40 45 48 60 55
C75 48 82 40 82 30
C82 20 75 10 60 5Z
M60 55
C50 60 45 66 45 72
C45 75 48 77 60 80
C72 77 75 75 75 72
C75 66 70 60 60 55Z"
fill="none"
stroke="rgba(201,169,97,0.75)"
stroke-width="1.2"
stroke-linejoin="round" />
</pattern>
</defs>
<rect x="0" y="-10" width="200" height="120" fill="url(#damaskPattern)" opacity="0.9"></rect>
</svg>
</div>
<div class="option-footer">
<div class="option-label-row">
<div>
<div class="option-name" data-label="damask-label" contenteditable="true" spellcheck="false">Damask Grande</div>
<div class="option-style-note">Hand-drawn scrollwork</div>
</div>
<div class="option-percentage" data-percent="damask">0%</div>
</div>
<div class="vote-track" aria-hidden="true">
<div class="vote-fill" data-fill="damask"></div>
</div>
</div>
</article>
<!-- Option B: Geometric -->
<article class="poll-option" data-option="geo" aria-label="Vote for Geometric">
<div class="swatch swatch-geo"></div>
<div class="option-footer">
<div class="option-label-row">
<div>
<div class="option-name" data-label="geo-label" contenteditable="true" spellcheck="false">Midnight Geometry</div>
<div class="option-style-note">Lacquered linework</div>
</div>
<div class="option-percentage" data-percent="geo">0%</div>
</div>
<div class="vote-track" aria-hidden="true">
<div class="vote-fill" data-fill="geo"></div>
</div>
</div>
</article>
</section>
</main>
<!-- Result overlay -->
<div class="result-overlay" id="resultOverlay">
<div class="result-card" role="dialog" aria-modal="true" aria-labelledby="resultHeading">
<div class="result-chip">
<div class="result-chip-dot"></div>
LIVE POLL
</div>
<h3 class="result-heading" id="resultHeading">Your room, your rhythm.</h3>
<p class="result-body" id="resultBody">
We saved your vote. Damask brings candlelit drama; geometry sharpens the architecture.
</p>
<div class="result-close">
<span>Tap to keep exploring</span>
<button type="button" class="result-close-button" id="resultCloseButton">Continue story</button>
</div>
</div>
</div>
</div>
<script>
(function() {
const card = document.querySelector('.poll-card');
const options = document.querySelectorAll('.poll-option');
const fills = {
damask: document.querySelector('[data-fill="damask"]'),
geo: document.querySelector('[data-fill="geo"]')
};
const percents = {
damask: document.querySelector('[data-percent="damask"]'),
geo: document.querySelector('[data-percent="geo"]')
};
const winnerStamp = document.getElementById('winnerStamp');
const resultOverlay = document.getElementById('resultOverlay');
const resultBody = document.getElementById('resultBody');
const resultCloseButton = document.getElementById('resultCloseButton');
let hasVoted = false;
function animateVote(choice) {
if (hasVoted) return;
hasVoted = true;
const damaskShare = choice === 'damask' ? 0.68 : 0.42;
const geoShare = 1 - damaskShare;
fills.damask.style.width = (damaskShare * 100) + '%';
fills.geo.style.width = (geoShare * 100) + '%';
percents.damask.textContent = Math.round(damaskShare * 100) + '%';
percents.geo.textContent = Math.round(geoShare * 100) + '%';
card.classList.add('voted');
options.forEach(opt => {
if (opt.dataset.option === choice) {
opt.classList.add('selected');
}
});
const winningKey = damaskShare > geoShare ? 'damask' : 'geo';
const winnerElement = Array.from(options).find(o => o.dataset.option === winningKey);
if (winnerElement) {
const rect = winnerElement.getBoundingClientRect();
const cardRect = card.getBoundingClientRect();
const offsetTop = rect.top - cardRect.top + 6;
const offsetRight = cardRect.right - rect.right + 6;
winnerStamp.style.top = offsetTop + 'px';
winnerStamp.style.right = offsetRight + 'px';
winnerStamp.classList.add('visible');
}
const label = document.querySelector('[data-label="' + (choice === 'damask' ? 'damask-label' : 'geo-label') + '"]');
const chosenName = label ? label.textContent.trim() || (choice === 'damask' ? 'Damask' : 'Geometric') : (choice === 'damask' ? 'Damask' : 'Geometric');
if (choice === 'damask') {
resultBody.textContent = chosenName + " wins a slight edge tonight—soft patterning that glows under candlelight and frames heirloom pieces.";
} else {
resultBody.textContent = chosenName + " leads—graphic lines that catch the metalwork and echo the room’s architecture.";
}
setTimeout(() => {
resultOverlay.classList.add('visible');
}, 420);
}
options.forEach(option => {
option.addEventListener('click', () => {
animateVote(option.dataset.option);
});
});
resultOverlay.addEventListener('click', (e) => {
if (e.target === resultOverlay) {
resultOverlay.classList.remove('visible');
}
});
resultCloseButton.addEventListener('click', () => {
resultOverlay.classList.remove('visible');
});
// Make editable labels feel intentional
document.querySelectorAll('.option-name').forEach(el => {
el.addEventListener('focus', () => {
el.dataset.original = el.textContent;
});
el.addEventListener('blur', () => {
if (!el.textContent.trim()) {
el.textContent = el.dataset.original || '';
}
});
});
})();
</script>
</body>
</html>