← back to Model Arena
data/artifacts/028885e12558/gpt.html
1571 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>What’s Your Wallcovering Style?</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--surface-soft: #1f1f26;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent-soft: #7d6a45;
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 10px;
--shadow-soft: 0 26px 80px rgba(0, 0, 0, 0.65);
--font-display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
--font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--fs-caption: 12px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--fs-display: 67px;
--elevated-border: 1px solid rgba(255, 255, 255, 0.04);
--ease-out: cubic-bezier(.22, 1, .36, 1);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: none; }
}
@keyframes clipReveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0); }
}
@keyframes blurIn {
from { opacity: 0; filter: blur(12px); }
to { opacity: 1; filter: blur(0); }
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background: radial-gradient(circle at top, #1d1d23 0, #050507 55%, #000 100%);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.frame {
width: 100%;
max-width: 1080px;
max-height: 1080px;
aspect-ratio: 1 / 1;
background: radial-gradient(circle at 10% 0, #252531 0, #0b0b0d 40%, #050507 100%);
border-radius: 40px;
box-shadow: var(--shadow-soft);
padding: 32px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.frame {
border-radius: 0;
box-shadow: none;
max-height: none;
padding: 20px;
}
}
.card-shell {
width: 100%;
height: 100%;
border-radius: 32px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%),
radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.16), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(125, 106, 69, 0.24), transparent 60%),
radial-gradient(circle at 50% 0, rgba(10, 10, 14, 0.7), rgba(13, 13, 15, 0.98));
padding: 32px 32px 28px;
display: flex;
flex-direction: column;
overflow: hidden;
}
@media (max-width: 768px) {
.card-shell {
border-radius: 24px;
padding: 20px 18px 18px;
}
}
.card-inner {
flex: 1;
border-radius: 26px;
border: var(--elevated-border);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 55%), #101014;
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.card-inner {
padding: 22px 18px 18px;
}
}
.chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
position: relative;
z-index: 3;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 11px;
color: var(--muted);
}
.brand-mark {
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(201, 169, 97, 0.6);
background:
conic-gradient(from 210deg, rgba(255, 255, 255, 0.12), rgba(201, 169, 97, 0.65), rgba(125, 106, 69, 0.4), rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.12));
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.brand-mark::after {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
border: 1px solid rgba(13, 13, 15, 0.9);
background: radial-gradient(circle at 30% 0, #f5f2ea 0, #e4d4ae 40%, #8d6a2b 100%);
box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.6);
}
.chrome-meta {
display: flex;
align-items: center;
gap: 14px;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.14em;
}
.pill {
padding: 4px 9px 4px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
linear-gradient(135deg, rgba(23, 23, 28, 0.96), rgba(15, 15, 19, 0.96));
}
.steps {
display: inline-flex;
align-items: center;
gap: 4px;
}
.steps-dot {
width: 4px;
height: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
position: relative;
}
.steps-dot-fill {
position: absolute;
inset: 0;
transform-origin: bottom;
transform: scaleY(0);
background: linear-gradient(to top, #c9a961, #f5e3b7);
transition: transform 260ms var(--ease-out);
}
.steps-dot.active .steps-dot-fill {
transform: scaleY(1);
}
.share-tag {
border-radius: 999px;
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.8));
display: inline-flex;
align-items: center;
gap: 6px;
}
.share-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: radial-gradient(circle at 20% 0, #f5f2ea, #c9a961);
}
.content {
flex: 1;
display: grid;
grid-template-columns: 1.25fr 1.1fr;
gap: 22px;
min-height: 0;
position: relative;
z-index: 2;
}
@media (max-width: 900px) {
.content {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
}
.left-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
min-width: 0;
}
.headline-block {
animation: fadeUp 0.7s var(--ease-out) both;
}
.eyebrow {
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
margin-bottom: 8px;
}
.title {
font-family: var(--font-display);
font-size: clamp(32px, 3.2vw, 40px);
line-height: 1.03;
letter-spacing: -0.03em;
text-transform: uppercase;
margin: 0 0 6px;
}
.title span.em {
color: var(--accent);
}
.subtitle {
font-size: 14px;
color: rgba(245, 242, 234, 0.74);
max-width: 36rem;
}
.quiz-panel {
position: relative;
min-height: 0;
}
.quiz-screen {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transform: translateY(18px);
transition:
opacity 320ms var(--ease-out),
transform 320ms var(--ease-out);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.quiz-screen.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.quiz-screen.quiz-result {
transform: scale(0.96);
}
.quiz-screen.quiz-result.active {
transform: scale(1);
}
.question-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}
.question-label-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(201, 169, 97, 0.74), transparent);
}
.question-title {
font-family: var(--font-display);
font-size: 20px;
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.answers-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.answer-card {
position: relative;
border-radius: 18px;
padding: 12px 12px 10px;
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 55%),
linear-gradient(145deg, #15151b, #101016);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
transition:
transform 200ms var(--ease-out),
box-shadow 200ms var(--ease-out),
border-color 200ms var(--ease-out),
background 200ms var(--ease-out);
}
.answer-card::before {
content: "";
position: absolute;
inset: -40%;
background:
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%),
radial-gradient(circle at 100% 0, rgba(201, 169, 97, 0.24), transparent 60%);
opacity: 0;
mix-blend-mode: screen;
transition: opacity 220ms var(--ease-out);
}
.answer-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
border-color: rgba(201, 169, 97, 0.7);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.12), transparent 55%),
linear-gradient(145deg, #1b1b23, #111019);
}
.answer-card:hover::before {
opacity: 0.6;
}
.answer-card:active {
transform: translateY(-1px) scale(0.99);
}
.answer-label {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.82);
}
.answer-meta {
font-size: 11px;
color: var(--muted);
}
.swatch {
position: relative;
border-radius: 14px;
overflow: hidden;
height: 80px;
background: #17171f;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.swatch-inner {
width: 130%;
height: 130%;
transform: translate(-8%, -8%);
opacity: 0.9;
}
.swatch-tag {
position: absolute;
right: 8px;
bottom: 8px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 3px 7px;
border-radius: 999px;
background: rgba(10, 10, 14, 0.76);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(245, 242, 234, 0.94);
}
.hint {
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.hint-line {
width: 26px;
height: 1px;
background: linear-gradient(to right, rgba(201, 169, 97, 0.7), transparent);
}
.right-panel {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
radial-gradient(circle at 100% 100%, rgba(201, 169, 97, 0.5), rgba(13, 13, 15, 0.9) 60%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
min-height: 0;
}
.result-card {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 22px;
background:
linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(7, 7, 10, 0.96)),
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%);
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
color: var(--text);
animation: clipReveal 0.7s var(--ease-out) both;
}
.result-badge-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
.result-main {
flex: 1;
display: grid;
grid-template-columns: 1.1fr 1.05fr;
gap: 16px;
align-items: stretch;
min-height: 0;
}
@media (max-width: 900px) {
.result-main {
grid-template-columns: 1fr;
}
}
.result-pattern {
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%), #15151e;
display: flex;
align-items: stretch;
justify-content: stretch;
min-height: 0;
}
.result-pattern-inner {
flex: 1;
display: grid;
place-items: center;
padding: 8px;
}
.result-pattern-tag {
position: absolute;
left: 10px;
top: 10px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 3px 7px;
border-radius: 999px;
background: rgba(10, 10, 14, 0.78);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.result-info {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.result-type {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
margin-bottom: 4px;
}
.result-title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 6px;
}
.result-line {
width: 32px;
height: 1px;
background: linear-gradient(to right, #c9a961, transparent);
margin-bottom: 8px;
}
.result-description {
font-size: 13px;
color: rgba(245, 242, 234, 0.8);
line-height: 1.5;
margin-bottom: 8px;
}
.result-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.result-tag-chip {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.14), transparent 60%),
linear-gradient(135deg, #15151b, #0f0f14);
color: rgba(245, 242, 234, 0.92);
}
.cta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
}
.btn-primary {
flex: 1;
border-radius: 999px;
border: none;
outline: none;
padding: 10px 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.22em;
background-image:
linear-gradient(120deg, #c9a961, #f9e8bd, #7d6a45);
background-size: 180% 100%;
color: #111015;
cursor: pointer;
transition:
background-position 260ms var(--ease-out),
transform 180ms var(--ease-out),
box-shadow 180ms var(--ease-out);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
white-space: nowrap;
}
.btn-primary:hover {
background-position: 100% 0;
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}
.cta-note {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
text-align: right;
max-width: 150px;
}
.footer {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}
.progress-rail {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.08);
position: relative;
margin-right: 10px;
overflow: hidden;
border-radius: 999px;
}
.progress-bar {
position: absolute;
inset: 0;
background: linear-gradient(to right, #c9a961, #f5e3b7);
transform-origin: left;
transform: scaleX(0.2);
transition: transform 280ms var(--ease-out);
}
.footer-label {
opacity: 0.8;
}
/* Pattern styles for answers & results */
.pattern-damask {
--c1: #15141c;
--c2: #22202b;
--c3: #c9a961;
background:
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
repeating-radial-gradient(circle at 50% 40%, var(--c3) 0 1px, transparent 1px 10px),
repeating-conic-gradient(from 0deg, var(--c1) 0 15deg, var(--c2) 15deg 30deg);
mask-image: radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.45));
}
.pattern-damask::before {
content: "";
position: absolute;
inset: 6% 10%;
border-radius: 50%;
border: 1px solid rgba(201, 169, 97, 0.45);
opacity: 0.8;
mix-blend-mode: screen;
}
.pattern-minimal {
--line: rgba(245, 242, 234, 0.08);
--block: rgba(245, 242, 234, 0.04);
background:
linear-gradient(120deg, #121219, #0c0c10);
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px),
linear-gradient(135deg, var(--block) 25%, transparent 25% 50%, var(--block) 50% 75%, transparent 75%);
background-size:
28px 28px,
28px 28px,
56px 56px;
}
.pattern-maximal {
background:
radial-gradient(circle at 0 0, #f5e3b7 0 8%, transparent 8% 22%, #f5e3b7 22% 30%, transparent 30%),
radial-gradient(circle at 60% 40%, #c16b5a 0 7%, transparent 7% 18%, #c16b5a 18% 26%, transparent 26%),
radial-gradient(circle at 30% 90%, #578f7a 0 8%, transparent 8% 19%, #578f7a 19% 27%, transparent 27%),
conic-gradient(from 45deg, #27131c, #221521, #171621, #1b2023, #27131c);
background-size: 120px 120px;
background-blend-mode: screen;
}
.pattern-maximal::before {
content: "";
position: absolute;
inset: 14% 6% 6% 14%;
background-image:
radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.3), transparent 60%),
repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.35) 0 6deg, transparent 6deg 12deg);
mix-blend-mode: multiply;
opacity: 0.9;
}
.pattern-deco {
--base: #15121a;
--gold: #c9a961;
background:
linear-gradient(135deg, #16131d, #0d0a11);
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size:
20px 20px,
20px 20px;
}
.pattern-deco::before {
content: "";
position: absolute;
inset: 12%;
background:
conic-gradient(from 0deg, transparent 0 10deg, rgba(201, 169, 97, 0.6) 10deg 20deg, transparent 20deg 30deg);
mask-image:
radial-gradient(circle at 50% 0, transparent 0 46%, black 46% 100%);
opacity: 0.9;
}
.pattern-deco::after {
content: "";
position: absolute;
inset: 18% 28% -8%;
border-radius: 60% 60% 0 0;
border: 2px solid rgba(201, 169, 97, 0.7);
border-bottom: none;
box-shadow:
0 0 0 1px rgba(10, 10, 14, 0.8),
0 12px 26px rgba(0, 0, 0, 0.9);
}
.pattern-minimal-lg,
.pattern-maximal-lg,
.pattern-damask-lg,
.pattern-deco-lg {
width: 100%;
height: 100%;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.pattern-damask-lg {
background:
radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
repeating-radial-gradient(circle at 50% 40%, rgba(201, 169, 97, 0.9) 0 2px, transparent 2px 14px),
repeating-conic-gradient(from 0deg, #15141c 0 15deg, #22202b 15deg 30deg);
}
.pattern-damask-lg::before {
content: "";
position: absolute;
inset: 10% 18%;
border-radius: 50%;
border: 2px solid rgba(201, 169, 97, 0.8);
box-shadow: 0 0 0 1px rgba(21, 20, 28, 0.8), 0 28px 70px rgba(0, 0, 0, 0.9);
}
.pattern-damask-lg::after {
content: "";
position: absolute;
inset: 22% 32%;
border-radius: 50%;
border: 1px solid rgba(245, 242, 234, 0.78);
box-shadow: 0 0 32px rgba(201, 169, 97, 0.9);
}
.pattern-minimal-lg {
background:
linear-gradient(135deg, #101017, #050507);
background-image:
linear-gradient(to right, rgba(245, 242, 234, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(245, 242, 234, 0.04) 1px, transparent 1px),
linear-gradient(135deg, rgba(245, 242, 234, 0.08) 25%, transparent 25% 50%, rgba(245, 242, 234, 0.08) 50% 75%, transparent 75%);
background-size:
32px 32px,
32px 32px,
64px 64px;
}
.pattern-minimal-lg::before {
content: "";
position: absolute;
inset: 16% 18%;
border-radius: 26px;
border: 1px solid rgba(245, 242, 234, 0.4);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}
.pattern-minimal-lg::after {
content: "";
position: absolute;
inset: 26% 30%;
border-radius: 20px;
border: 1px solid rgba(245, 242, 234, 0.22);
background: radial-gradient(circle at 0 0, rgba(245, 242, 234, 0.2), transparent 60%);
opacity: 0.9;
}
.pattern-maximal-lg {
background:
radial-gradient(circle at 0 0, #fbe4c4 0 10%, transparent 10% 26%, #fbe4c4 26% 34%, transparent 34%),
radial-gradient(circle at 80% 20%, #ffb6a0 0 9%, transparent 9% 23%, #ffb6a0 23% 31%, transparent 31%),
radial-gradient(circle at 40% 90%, #8bd3b3 0 9%, transparent 9% 23%, #8bd3b3 23% 31%, transparent 31%),
conic-gradient(from 45deg, #2a1120, #1d1020, #121322, #182329, #2a1120);
background-size: 160px 160px;
background-blend-mode: screen;
}
.pattern-maximal-lg::before {
content: "";
position: absolute;
inset: 12% 10% 20% 20%;
border-radius: 45% 60% 50% 70%;
border: 1px solid rgba(0, 0, 0, 0.6);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.2), transparent 65%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.24),
0 32px 70px rgba(0, 0, 0, 0.9);
mix-blend-mode: multiply;
}
.pattern-maximal-lg::after {
content: "";
position: absolute;
inset: 42% 14% 10% 8%;
border-radius: 60% 40% 60% 40%;
border: 1px solid rgba(0, 0, 0, 0.7);
background: radial-gradient(circle at 80% 0, rgba(255, 255, 255, 0.2), transparent 70%);
mix-blend-mode: soft-light;
}
.pattern-deco-lg {
background:
linear-gradient(135deg, #120f18, #08050a);
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size:
22px 22px,
22px 22px;
position: relative;
}
.pattern-deco-lg::before {
content: "";
position: absolute;
inset: 12% 18%;
border-radius: 0;
border: 2px solid rgba(201, 169, 97, 0.9);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.9),
0 26px 60px rgba(0, 0, 0, 1);
}
.pattern-deco-lg::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: 8%;
height: 40%;
border-radius: 50% 50% 0 0;
border: 2px solid rgba(201, 169, 97, 0.9);
border-bottom: none;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.9),
0 22px 50px rgba(0, 0, 0, 1);
}
.result-style-damask .result-title {
color: #f5e3c2;
}
.result-style-minimal .result-title {
color: #f5f2ea;
}
.result-style-maximal .result-title {
color: #ffd2b9;
}
.result-style-deco .result-title {
color: #f6e2b5;
}
.result-style-damask .result-badge-row,
.result-style-damask .result-type {
color: #d6c496;
}
.result-style-maximal .result-badge-row,
.result-style-maximal .result-type {
color: #f3b6a3;
}
.result-style-deco .result-badge-row,
.result-style-deco .result-type {
color: #e5d5a7;
}
.result-style-minimal .result-badge-row,
.result-style-minimal .result-type {
color: #b7b4a8;
}
.result-style-damask .result-line {
background: linear-gradient(to right, #c9a961, #f7e5bd);
}
.result-style-minimal .result-line {
background: linear-gradient(to right, rgba(245, 242, 234, 0.8), transparent);
}
.result-style-maximal .result-line {
background: linear-gradient(to right, #ffb6a0, #fbe4c4);
}
.result-style-deco .result-line {
background: linear-gradient(to right, #c9a961, #f6e2b5);
}
.badge-style-tag {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%),
linear-gradient(135deg, rgba(10, 10, 14, 0.9), rgba(0, 0, 0, 1));
display: inline-flex;
align-items: center;
gap: 6px;
}
.badge-style-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: conic-gradient(from 160deg, #c9a961, #f7e5bd, #7d6a45, #c9a961);
}
.ar-badge {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(245, 242, 234, 0.65);
}
.footer-logo {
font-family: var(--font-display);
letter-spacing: 0.32em;
text-transform: uppercase;
font-size: 11px;
}
.footer-logo span {
color: var(--accent);
}
.footer-meta {
display: flex;
align-items: center;
gap: 14px;
}
.footer-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.18);
}
</style>
</head>
<body>
<div class="frame">
<div class="card-shell">
<div class="card-inner">
<div class="chrome">
<div class="brand-lockup">
<div class="brand-mark"></div>
<span>Maison Aurelia</span>
</div>
<div class="chrome-meta">
<div class="pill">
<div class="steps" aria-hidden="true">
<div class="steps-dot"><div class="steps-dot-fill"></div></div>
<div class="steps-dot"><div class="steps-dot-fill"></div></div>
<div class="steps-dot"><div class="steps-dot-fill"></div></div>
<div class="steps-dot"><div class="steps-dot-fill"></div></div>
<div class="steps-dot"><div class="steps-dot-fill"></div></div>
</div>
</div>
<div class="share-tag">
<div class="share-dot"></div>
<span>Tap to reveal</span>
</div>
</div>
</div>
<div class="content">
<div class="left-panel">
<div class="headline-block">
<div class="eyebrow">Style Quiz</div>
<h1 class="title">
What’s Your<br />
<span class="em">Wallcovering</span><br />
Style?
</h1>
<p class="subtitle">
Five quick taps to discover the pattern that feels like home. Answer instinctively — your walls will thank you.
</p>
</div>
<div class="quiz-panel" aria-live="polite">
<div class="quiz-screen active" data-screen="1">
<div>
<div class="question-label">
Q1 — Mood
<div class="question-label-line"></div>
</div>
<div class="question-title">How do you want your space to feel?</div>
<div class="answers-grid">
<button class="answer-card" data-score="damask">
<div class="swatch">
<div class="swatch-inner pattern-damask"></div>
<div class="swatch-tag">Opulent Calm</div>
</div>
<div class="answer-label">Timeless & grand</div>
<div class="answer-meta">Candlelit dinners, heirloom silver, soft strings in the background.</div>
</button>
<button class="answer-card" data-score="minimal">
<div class="swatch">
<div class="swatch-inner pattern-minimal"></div>
<div class="swatch-tag">Quiet Clarity</div>
</div>
<div class="answer-label">Clean & composed</div>
<div class="answer-meta">Sunlight, negative space, one perfect chair and a good book.</div>
</button>
<button class="answer-card" data-score="maximal">
<div class="swatch">
<div class="swatch-inner pattern-maximal"></div>
<div class="swatch-tag">Eclectic Joy</div>
</div>
<div class="answer-label">Playful & collected</div>
<div class="answer-meta">Layered textiles, travel finds, and a story on every surface.</div>
</button>
<button class="answer-card" data-score="deco">
<div class="swatch">
<div class="swatch-inner pattern-deco"></div>
<div class="swatch-tag">Evening Glam</div>
</div>
<div class="answer-label">Dramatic & polished</div>
<div class="answer-meta">Velvet banquettes, champagne coupes, city lights at midnight.</div>
</button>
</div>
</div>
<div class="hint">
<div class="hint-line"></div>
<span>Tap a tile to continue</span>
</div>
</div>
<div class="quiz-screen" data-screen="2">
<div>
<div class="question-label">
Q2 — Architecture
<div class="question-label-line"></div>
</div>
<div class="question-title">Which backdrop feels most like “home”?</div>
<div class="answers-grid">
<button class="answer-card" data-score="minimal">
<div class="swatch">
<div class="swatch-inner pattern-minimal"></div>
<div class="swatch-tag">Gallery Walls</div>
</div>
<div class="answer-label">Airy loft</div>
<div class="answer-meta">Crisp lines, pale oak, hidden hardware, soft architectural light.</div>
</button>
<button class="answer-card" data-score="damask">
<div class="swatch">
<div class="swatch-inner pattern-damask"></div>
<div class="swatch-tag">Townhouse</div>
</div>
<div class="answer-label">Historic brownstone</div>
<div class="answer-meta">Crown mouldings, marble mantels, and library-green doors.</div>
</button>
<button class="answer-card" data-score="deco">
<div class="swatch">
<div class="swatch-inner pattern-deco"></div>
<div class="swatch-tag">Skyline Suite</div>
</div>
<div class="answer-label">City penthouse</div>
<div class="answer-meta">Metallic accents, skyline views, a bar cart always at the ready.</div>
</button>
<button class="answer-card" data-score="maximal">
<div class="swatch">
<div class="swatch-inner pattern-maximal"></div>
<div class="swatch-tag">Artist Loft</div>
</div>
<div class="answer-label">Sun-drenched studio</div>
<div class="answer-meta">Plants, paint splatters, vintage rugs, and a curated chaos.</div>
</button>
</div>
</div>
<div class="hint">
<div class="hint-line"></div>
<span>Follow your first instinct</span>
</div>
</div>
<div class="quiz-screen" data-screen="3">
<div>
<div class="question-label">
Q3 — Pattern
<div class="question-label-line"></div>
</div>
<div class="question-title">Choose the pattern energy that draws you in.</div>
<div class="answers-grid">
<button class="answer-card" data-score="damask">
<div class="swatch">
<div class="swatch-inner pattern-damask"></div>
<div class="swatch-tag">Heritage</div>
</div>
<div class="answer-label">Ornate motifs</div>
<div class="answer-meta">Scrolling florals, medallions, and a whisper of old-world romance.</div>
</button>
<button class="answer-card" data-score="minimal">
<div class="swatch">
<div class="swatch-inner pattern-minimal"></div>
<div class="swatch-tag">Precision</div>
</div>
<div class="answer-label">Linear & graphic</div>
<div class="answer-meta">Architectural stripes, grids, and quiet tonal shifts.</div>
</button>
<button class="answer-card" data-score="maximal">
<div class="swatch">
<div class="swatch-inner pattern-maximal"></div>
<div class="swatch-tag">Botanical</div>
</div>
<div class="answer-label">Botanical & wild</div>
<div class="answer-meta">Overscale florals, palms, and a lush, layered jungle vibe.</div>
</button>
<button class="answer-card" data-score="deco">
<div class="swatch">
<div class="swatch-inner pattern-deco"></div>
<div class="swatch-tag">Geometry</div>
</div>
<div class="answer-label">Geometric glamour</div>
<div class="answer-meta">Fans, arches, and sharp metallic repeats.</div>
</button>
</div>
</div>
<div class="hint">
<div class="hint-line"></div>
<span>Imagine this wrapping an entire room</span>
</div>
</div>
<div class="quiz-screen" data-screen="4">
<div>
<div class="question-label">
Q4 — Palette
<div class="question-label-line"></div>
</div>
<div class="question-title">Which palette would you happily wake up to?</div>
<div class="answers-grid">
<button class="answer-card" data-score="minimal">
<div class="swatch">
<div class="swatch-inner pattern-minimal"></div>
<div class="swatch-tag">Bone & Ink</div>
</div>
<div class="answer-label">Soft neutrals</div>
<div class="answer-meta">Ivories, warm greys, and the gentlest hint of charcoal.</div>
</button>
<button class="answer-card" data-score="deco">
<div class="swatch">
<div class="swatch-inner pattern-deco"></div>
<div class="swatch-tag">Champagne</div>
</div>
<div class="answer-label">Noir & metallic</div>
<div class="answer-meta">Inky blacks, molten metals, and candlelit warmth.</div>
</button>
<button class="answer-card" data-score="damask">
<div class="swatch">
<div class="swatch-inner pattern-damask"></div>
<div class="swatch-tag">Antique Gold</div>
</div>
<div class="answer-label">Rich jewel tones</div>
<div class="answer-meta">Sapphire, garnet, and deep, velvety neutrals.</div>
</button>
<button class="answer-card" data-score="maximal">
<div class="swatch">
<div class="swatch-inner pattern-maximal"></div>
<div class="swatch-tag">Sunset</div>
</div>
<div class="answer-label">Sun-soaked brights</div>
<div class="answer-meta">Terracotta, olive, ochre, and saturated, joyful color.</div>
</button>
</div>
</div>
<div class="hint">
<div class="hint-line"></div>
<span>Trust your eye, not the trends</span>
</div>
</div>
<div class="quiz-screen" data-screen="5">
<div>
<div class="question-label">
Q5 — Lifestyle
<div class="question-label-line"></div>
</div>
<div class="question-title">Your Friday night at home looks like…</div>
<div class="answers-grid">
<button class="answer-card" data-score="damask">
<div class="swatch">
<div class="swatch-inner pattern-damask"></div>
<div class="swatch-tag">Salon</div>
</div>
<div class="answer-label">Slow dinner party</div>
<div class="answer-meta">Linen tablecloths, candles, and a playlist that never ends.</div>
</button>
<button class="answer-card" data-score="minimal">
<div class="swatch">
<div class="swatch-inner pattern-minimal"></div>
<div class="swatch-tag">Reset</div>
</div>
<div class="answer-label">Solo reset</div>
<div class="answer-meta">Fresh sheets, a face mask, and a perfectly plumped pillow.</div>
</button>
<button class="answer-card" data-score="maximal">
<div class="swatch">
<div class="swatch-inner pattern-maximal"></div>
<div class="swatch-tag">Gather</div>
</div>
<div class="answer-label">Friends & laughter</div>
<div class="answer-meta">Board games, bold drinks, and playlists on shuffle.</div>
</button>
<button class="answer-card" data-score="deco">
<div class="swatch">
<div class="swatch-inner pattern-deco"></div>
<div class="swatch-tag">After Dark</div>
</div>
<div class="answer-label">Cocktail hour</div>
<div class="answer-meta">Shaken, not stirred, with a late-night movie queue.</div>
</button>
</div>
</div>
<div class="hint">
<div class="hint-line"></div>
<span>Last one — tap to see your style</span>
</div>
</div>
<div class="quiz-screen quiz-result" data-screen="result">
<div class="result-card result-style-minimal" id="resultCard">
<div class="result-badge-row">
<span class="ar-badge">1080 × 1080 — Save & Share</span>
<span class="badge-style-tag">
<span class="badge-style-dot"></span>
<span id="resultShortLabel">Your Wallcovering DNA</span>
</span>
</div>
<div class="result-main">
<div class="result-pattern">
<div class="result-pattern-tag">Pattern Match</div>
<div class="result-pattern-inner">
<div class="pattern-minimal-lg" id="resultPattern"></div>
</div>
</div>
<div class="result-info">
<div>
<div class="result-type" id="resultCategory">Modern Minimalist</div>
<div class="result-title" id="resultTitle">Gallery-Quiet Walls</div>
<div class="result-line"></div>
<p class="result-description" id="resultDescription">
You’re drawn to calm, considered spaces where every line has purpose. Think tonal textures, subtle sheen, and patterns that reward a second look — never shouting, always softly framing your life.
</p>
<div class="result-tags" id="resultTags">
<span class="result-tag-chip">Soft contrast</span>
<span class="result-tag-chip">Architectural lines</span>
<span class="result-tag-chip">Museum-grade calm</span>
</div>
</div>
<div class="cta-row">
<button class="btn-primary" type="button" id="shopButton">Shop this style</button>
<div class="cta-note">
Tap & hold to save, or tag us @MaisonAurelia to be featured.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<aside class="right-panel" aria-hidden="true">
<div class="result-card result-style-minimal">
<div class="result-badge-row">
<span class="ar-badge">Live Preview</span>
<span class="badge-style-tag">
<span class="badge-style-dot"></span>
Your style loading
</span>
</div>
<div class="result-main">
<div class="result-pattern">
<div class="result-pattern-tag">Wallcovering</div>
<div class="result-pattern-inner">
<div class="pattern-minimal-lg"></div>
</div>
</div>
<div class="result-info">
<div>
<div class="result-type">Signature Edit</div>
<div class="result-title">Curated for You</div>
<div class="result-line"></div>
<p class="result-description">
As you tap through, we’re building a palette of pattern, mood, and sheen. Your final match will reveal a bespoke wallcovering story — ready to shop in a single tap.
</p>
<div class="result-tags">
<span class="result-tag-chip">5 questions</span>
<span class="result-tag-chip">4 style houses</span>
<span class="result-tag-chip">1 signature look</span>
</div>
</div>
<div class="cta-row">
<button class="btn-primary" type="button">Begin</button>
<div class="cta-note">
Designed to fit perfectly inside your feed.
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
<footer class="footer">
<div class="progress-rail">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="footer-meta">
<span class="footer-label">Swipe-worthy interiors</span>
<div class="footer-divider"></div>
<span class="footer-logo"><span>Maison</span> Aurelia</span>
</div>
</footer>
</div>
</div>
</div>
<script>
(function() {
const TOTAL_QUESTIONS = 5;
const score = { damask: 0, minimal: 0, maximal: 0, deco: 0 };
let currentScreen = 1;
const screens = {};
document.querySelectorAll('.quiz-screen').forEach(el => {
const id = el.getAttribute('data-screen');
screens[id] = el;
});
const stepDots = Array.from(document.querySelectorAll('.steps-dot'));
const progressBar = document.getElementById('progressBar');
const resultCard = document.getElementById('resultCard');
const resultPattern = document.getElementById('resultPattern');
const resultCategory = document.getElementById('resultCategory');
const resultTitle = document.getElementById('resultTitle');
const resultDescription = document.getElementById('resultDescription');
const resultTags = document.getElementById('resultTags');
const resultShortLabel = document.getElementById('resultShortLabel');
const shopButton = document.getElementById('shopButton');
const resultConfig = {
damask: {
className: 'result-style-damask',
patternClass: 'pattern-damask-lg',
category: 'Traditional Damask',
title: 'Gilded Heritage Walls',
description:
'You gravitate toward rooms with history and a hint of ceremony. Ornate damask motifs, antique-gold inks, and tactile embossing turn your walls into a modern-day manor — romantic, refined, and endlessly photogenic.',
tags: ['Chandelier-ready', 'Silk-inspired sheen', 'Heirloom details'],
shortLabel: 'Old World, New Mood'
},
minimal: {
className: 'result-style-minimal',
patternClass: 'pattern-minimal-lg',
category: 'Modern Minimalist',
title: 'Gallery-Quiet Walls',
description:
'You breathe easiest in spaces that feel edited, intentional, and quietly luxurious. Understated patterning, tonal shifts, and architectural lines create a soft backdrop that makes everything else in the room shine.',
tags: ['Soft contrast', 'Architectural lines', 'Museum-grade calm'],
shortLabel: 'Quiet Luxury'
},
maximal: {
className: 'result-style-maximal',
patternClass: 'pattern-maximal-lg',
category: 'Bohemian Maximalist',
title: 'Collected Story Walls',
description:
'You curate spaces like you collect memories — boldly, joyfully, and without apology. Lush botanicals, layered prints, and rich, sun-warmed color turn every wall into a passport stamp.',
tags: ['Pattern-on-pattern', 'Lush botanicals', 'Global eclectic'],
shortLabel: 'More Is More'
},
deco: {
className: 'result-style-deco',
patternClass: 'pattern-deco-lg',
category: 'Art Deco Glam',
title: 'Midnight Deco Walls',
description:
'You live for a little drama. Think fan motifs, sharp geometrics, and metallic inks that catch the light just so. Your walls feel like the lobby of a grand hotel — always ready for the next cocktail hour.',
tags: ['Metallic accents', 'Geometric glamour', 'After-dark glow'],
shortLabel: 'Iconic Glamour'
}
};
function updateProgress() {
const ratio = Math.min(currentScreen, TOTAL_QUESTIONS) / TOTAL_QUESTIONS;
progressBar.style.transform = 'scaleX(' + ratio + ')';
stepDots.forEach((dot, index) => {
const fill = dot.querySelector('.steps-dot-fill');
if (index < currentScreen) {
dot.classList.add('active');
fill.style.transform = 'scaleY(1)';
} else {
dot.classList.remove('active');
fill.style.transform = 'scaleY(0)';
}
});
}
function showScreen(id) {
Object.values(screens).forEach(el => el.classList.remove('active'));
if (screens[id]) {
screens[id].classList.add('active');
}
}
function computeResult() {
const entries = Object.entries(score);
entries.sort((a, b) => b[1] - a[1]);
const top = entries[0][0] || 'minimal';
return top;
}
function renderResult() {
const styleKey = computeResult();
const cfg = resultConfig[styleKey] || resultConfig.minimal;
resultCard.classList.remove(
'result-style-damask',
'result-style-minimal',
'result-style-maximal',
'result-style-deco'
);
resultCard.classList.add(cfg.className);
resultPattern.className = cfg.patternClass;
resultCategory.textContent = cfg.category;
resultTitle.textContent = cfg.title;
resultDescription.textContent = cfg.description;
resultShortLabel.textContent = cfg.shortLabel;
resultTags.innerHTML = '';
cfg.tags.forEach(tag => {
const span = document.createElement('span');
span.className = 'result-tag-chip';
span.textContent = tag;
resultTags.appendChild(span);
});
}
function handleAnswerClick(e) {
const card = e.currentTarget;
const key = card.getAttribute('data-score');
if (!key) return;
if (score[key] != null) score[key] += 1;
if (currentScreen < TOTAL_QUESTIONS) {
currentScreen += 1;
showScreen(String(currentScreen));
updateProgress();
} else {
renderResult();
currentScreen = TOTAL_QUESTIONS;
updateProgress();
showScreen('result');
}
}
document.querySelectorAll('.answer-card').forEach(card => {
card.addEventListener('click', handleAnswerClick);
});
updateProgress();
if (shopButton) {
shopButton.addEventListener('click', function() {
alert('In a live experience, this button would take you directly to the curated wallcovering edit for your style.');
});
}
})();
</script>
</body>
</html>