← back to Model Arena
data/artifacts/028885e12558/claude-code.html
371 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What's Your Wallcovering Style?</title>
<style>
:root{
--bg:#0d0d0f; --surface:#17171c; --text:#f5f2ea; --muted:#8a8578;
--accent:#c9a961; --accent2:#7d6a45;
--radius:14px;
--card:0 8px 24px rgba(0,0,0,.35);
--hover:0 16px 48px rgba(0,0,0,.5);
--glow:0 0 24px rgba(201,169,97,.35);
--serif:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:var(--bg); color:var(--text); font-family:var(--sans);
display:flex; align-items:center; justify-content:center;
min-height:100vh; padding:24px; overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
body::before{
content:''; position:fixed; inset:-30%; z-index:0; pointer-events:none;
background:
radial-gradient(circle at 20% 25%, rgba(201,169,97,.10), transparent 42%),
radial-gradient(circle at 82% 78%, rgba(125,106,69,.14), transparent 46%);
background-size:200% 200%;
animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.stage{position:relative; z-index:1; width:100%; max-width:640px}
.label{
text-transform:uppercase; font-size:12px; letter-spacing:.15em;
color:var(--muted); font-weight:600;
}
/* ---------- INTRO ---------- */
.intro{
background:var(--surface); border:1px solid rgba(201,169,97,.18);
border-radius:var(--radius); padding:64px 48px; text-align:center;
box-shadow:var(--card); animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}
.brand{letter-spacing:.34em; color:var(--accent); margin-bottom:32px; animation:fadeUp .7s .05s both}
.intro h1{
font-family:var(--serif); font-weight:400; line-height:1.02;
font-size:clamp(38px,9vw,67px); margin-bottom:20px;
animation:fadeUp .7s .14s both;
}
.intro h1 em{font-style:italic; color:var(--accent)}
.intro p{
color:var(--muted); font-size:21px; line-height:1.5; max-width:460px;
margin:0 auto 40px; animation:fadeUp .7s .23s both;
}
.btn{
font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
font-weight:700; cursor:pointer; border:none; color:var(--bg);
background:linear-gradient(135deg,var(--accent),var(--accent2));
padding:18px 44px; border-radius:999px; transition:transform .2s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--glow)}
.intro .btn{animation:fadeUp .7s .32s both}
/* ---------- QUIZ ---------- */
.quiz{display:none}
.quiz.active{display:block; animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
.progress{display:flex; gap:8px; margin-bottom:28px; padding:0 4px}
.progress span{flex:1; height:3px; border-radius:2px; background:rgba(245,242,234,.12); transition:background .4s}
.progress span.done{background:var(--accent)}
.qcount{display:block; margin-bottom:10px; text-align:center}
.qtext{
font-family:var(--serif); font-weight:400; font-size:clamp(28px,6vw,38px);
text-align:center; line-height:1.15; margin-bottom:36px;
}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tile{
position:relative; background:var(--surface); border:1px solid rgba(245,242,234,.08);
border-radius:var(--radius); padding:0 0 18px; cursor:pointer; overflow:hidden;
box-shadow:var(--card); transition:transform .18s, box-shadow .18s, border-color .18s;
animation:pop .5s cubic-bezier(.22,1,.36,1) both;
}
.tile:nth-child(1){animation-delay:.04s}
.tile:nth-child(2){animation-delay:.13s}
.tile:nth-child(3){animation-delay:.22s}
.tile:nth-child(4){animation-delay:.31s}
.tile:hover{transform:translateY(-4px); box-shadow:var(--hover); border-color:rgba(201,169,97,.45)}
.swatch{height:118px; width:100%; display:block}
.tile-name{
font-family:var(--serif); font-size:19px; margin-top:14px; padding:0 16px; line-height:1.2;
}
.tile-sub{font-size:12.5px; color:var(--muted); padding:0 16px; margin-top:4px}
/* ---------- RESULT ---------- */
.result{display:none}
.result.active{display:block; animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
.card-wrap{width:100%; max-width:540px; margin:0 auto}
/* 1080x1080 aspect card */
.card{
position:relative; aspect-ratio:1/1; width:100%;
background:var(--surface); border-radius:var(--radius); overflow:hidden;
box-shadow:var(--card); border:1px solid rgba(201,169,97,.22);
display:flex; flex-direction:column;
}
.card-pattern{height:44%; width:100%; position:relative}
.card-pattern::after{
content:''; position:absolute; inset:0;
box-shadow:inset 0 -60px 60px -30px var(--surface);
}
.card-body{
flex:1; padding:26px 30px 22px; display:flex; flex-direction:column;
align-items:center; text-align:center; justify-content:space-between;
}
.card-eyebrow{color:var(--accent); letter-spacing:.24em; margin-bottom:12px}
.card-title{
font-family:var(--serif); font-weight:400; font-size:clamp(26px,6.6vw,40px);
line-height:1.05; margin-bottom:14px;
}
.card-desc{color:var(--muted); font-size:clamp(13px,3.4vw,16px); line-height:1.55; max-width:400px}
.card-foot{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px}
.card-brand{letter-spacing:.3em; color:var(--muted); font-size:11px}
.actions{display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap}
.btn.ghost{
background:transparent; color:var(--accent); border:1px solid rgba(201,169,97,.5);
}
.btn.ghost:hover{box-shadow:none; background:rgba(201,169,97,.08)}
/* ---------- CSS PATTERN SWATCHES ---------- */
.p-damask{
background-color:#1c1614;
background-image:
radial-gradient(circle at 25% 25%, rgba(201,169,97,.55) 0 6%, transparent 7%),
radial-gradient(circle at 75% 75%, rgba(201,169,97,.55) 0 6%, transparent 7%),
radial-gradient(ellipse 14% 22% at 50% 50%, rgba(201,169,97,.7) 0 60%, transparent 62%),
radial-gradient(ellipse 9% 15% at 50% 12%, rgba(201,169,97,.5) 0 60%, transparent 62%),
radial-gradient(ellipse 9% 15% at 50% 88%, rgba(201,169,97,.5) 0 60%, transparent 62%);
background-size:64px 64px;
}
.p-minimal{
background-color:#e9e5dc;
background-image:linear-gradient(90deg, rgba(60,58,54,.14) 1.5px, transparent 1.5px);
background-size:26px 100%;
}
.p-minimal.alt{background-color:#dfdacf}
.p-boho{
background-color:#3a241f;
background-image:
radial-gradient(circle at 50% 50%, #c65f38 0 12%, transparent 13%),
conic-gradient(from 0deg at 50% 50%, #e0a458 0 25%, #7d9a6a 0 50%, #c65f38 0 75%, #b3823f 0 100%),
radial-gradient(circle at 0 0, #e0a458 0 14%, transparent 15%),
radial-gradient(circle at 100% 100%, #7d9a6a 0 14%, transparent 15%);
background-size:52px 52px, 52px 52px, 52px 52px, 52px 52px;
background-blend-mode:normal, overlay, normal, normal;
}
.p-deco{
background-color:#101418;
background-image:
repeating-linear-gradient(45deg, rgba(201,169,97,.55) 0 2px, transparent 2px 13px),
repeating-linear-gradient(-45deg, rgba(201,169,97,.55) 0 2px, transparent 2px 13px),
radial-gradient(circle at 50% 50%, rgba(201,169,97,.9) 0 3px, transparent 4px);
background-size:38px 38px, 38px 38px, 38px 38px;
}
/* small tile variants scale down */
.swatch.p-damask{background-size:44px 44px}
.swatch.p-deco{background-size:28px 28px}
.swatch.p-boho{background-size:40px 40px,40px 40px,40px 40px,40px 40px}
@media (max-width:420px){
.intro{padding:48px 26px}
.tile-name{font-size:17px}
}
</style>
</head>
<body>
<div class="stage">
<!-- INTRO -->
<section class="intro" id="intro">
<div class="label brand">MAISON NOIR · WALLCOVERINGS</div>
<h1>What's Your <em>Wallcovering</em> Style?</h1>
<p>Five questions to reveal the surface that speaks to you — then shop the collection made for it.</p>
<button class="btn" onclick="start()">Begin the Quiz</button>
</section>
<!-- QUIZ -->
<section class="quiz" id="quiz">
<div class="progress" id="progress"></div>
<span class="label qcount" id="qcount">Question 1 of 5</span>
<h2 class="qtext" id="qtext"></h2>
<div class="tiles" id="tiles"></div>
</section>
<!-- RESULT -->
<section class="result" id="result">
<div class="card-wrap">
<div class="card" id="card">
<div class="card-pattern" id="cardPattern"></div>
<div class="card-body">
<div>
<div class="label card-eyebrow">YOUR WALLCOVERING STYLE</div>
<h2 class="card-title" id="rTitle"></h2>
<p class="card-desc" id="rDesc"></p>
</div>
<div class="card-foot">
<div class="card-brand">MAISON NOIR</div>
</div>
</div>
</div>
</div>
<div class="actions">
<button class="btn" id="shopBtn">Shop This Style</button>
<button class="btn ghost" onclick="restart()">Retake Quiz</button>
</div>
</section>
</div>
<script>
const RESULTS = {
damask:{
title:'Traditional Damask',
desc:'You are drawn to heritage, symmetry and quiet grandeur. Ornate scrollwork and tonal golds create rooms with a sense of history and ceremony.',
pattern:'p-damask'
},
minimal:{
title:'Modern Minimalist',
desc:'Restraint is your luxury. Clean linear rhythm, breathable neutrals and precise detail let architecture and light do the talking.',
pattern:'p-minimal'
},
boho:{
title:'Bohemian Maximalist',
desc:'You collect colour, texture and story. Layered motifs and warm earthen tones turn every wall into a well-travelled, joyful escape.',
pattern:'p-boho'
},
deco:{
title:'Art Deco Glam',
desc:'Geometry, gloss and drama define you. Fan motifs, metallic lines and bold symmetry bring 1920s glamour into a sharp modern frame.',
pattern:'p-deco'
}
};
const QUESTIONS = [
{
q:'Pick the room that feels like home.',
options:[
{name:'Grand Library',sub:'Carved wood & warm gold',s:'damask',sw:'p-damask'},
{name:'Sunlit Loft',sub:'White walls, clean lines',s:'minimal',sw:'p-minimal'},
{name:'Layered Salon',sub:'Rugs, plants & colour',s:'boho',sw:'p-boho'},
{name:'Velvet Lounge',sub:'Brass, black & mirror',s:'deco',sw:'p-deco'}
]
},
{
q:'Which palette do you reach for?',
options:[
{name:'Antique Gold',sub:'Ochre & bronze',s:'damask',sw:'p-damask'},
{name:'Soft Neutrals',sub:'Alabaster & greige',s:'minimal',sw:'p-minimal alt'},
{name:'Spice Market',sub:'Terracotta & olive',s:'boho',sw:'p-boho'},
{name:'Onyx & Brass',sub:'Ink black & metallic',s:'deco',sw:'p-deco'}
]
},
{
q:'Choose a motif you love.',
options:[
{name:'Scrolling Damask',sub:'Classic & ornate',s:'damask',sw:'p-damask'},
{name:'Fine Pinstripe',sub:'Barely-there line',s:'minimal',sw:'p-minimal'},
{name:'Folk Medallion',sub:'Bold & eclectic',s:'boho',sw:'p-boho'},
{name:'Sunburst Fan',sub:'Geometric glamour',s:'deco',sw:'p-deco'}
]
},
{
q:'How should a room make you feel?',
options:[
{name:'Timeless',sub:'Refined & rooted',s:'damask',sw:'p-damask'},
{name:'Serene',sub:'Calm & uncluttered',s:'minimal',sw:'p-minimal alt'},
{name:'Alive',sub:'Warm & expressive',s:'boho',sw:'p-boho'},
{name:'Dazzling',sub:'Bold & theatrical',s:'deco',sw:'p-deco'}
]
},
{
q:'Your finishing touch is…',
options:[
{name:'Gilt Frames',sub:'Heirloom art',s:'damask',sw:'p-damask'},
{name:'One Sculpture',sub:'A single object',s:'minimal',sw:'p-minimal'},
{name:'Global Textiles',sub:'Kilims & tassels',s:'boho',sw:'p-boho'},
{name:'Mirror & Marble',sub:'Polished sheen',s:'deco',sw:'p-deco'}
]
}
];
let current = 0;
let scores = {damask:0,minimal:0,boho:0,deco:0};
const $ = id => document.getElementById(id);
function start(){
$('intro').style.display='none';
$('quiz').classList.add('active');
buildProgress();
render();
}
function buildProgress(){
const p = $('progress'); p.innerHTML='';
QUESTIONS.forEach(()=>p.appendChild(document.createElement('span')));
}
function render(){
const item = QUESTIONS[current];
$('qcount').textContent = `Question ${current+1} of ${QUESTIONS.length}`;
$('qtext').textContent = item.q;
[...$('progress').children].forEach((s,i)=>s.classList.toggle('done', i<current));
const tiles = $('tiles'); tiles.innerHTML='';
item.options.forEach(opt=>{
const t = document.createElement('div');
t.className='tile';
t.innerHTML =
`<div class="swatch ${opt.sw}"></div>
<div class="tile-name">${opt.name}</div>
<div class="tile-sub">${opt.sub}</div>`;
t.onclick = ()=>choose(opt.s);
tiles.appendChild(t);
});
}
function choose(style){
scores[style]++;
current++;
if(current < QUESTIONS.length){
render();
window.scrollTo({top:0,behavior:'smooth'});
} else {
finish();
}
}
function finish(){
// determine winner; tie broken by question order priority
const order = ['damask','minimal','boho','deco'];
let best = order[0];
order.forEach(k=>{ if(scores[k] > scores[best]) best = k; });
const r = RESULTS[best];
$('quiz').classList.remove('active');
$('quiz').style.display='none';
$('rTitle').textContent = r.title;
$('rDesc').textContent = r.desc;
$('cardPattern').className = 'card-pattern ' + r.pattern;
$('shopBtn').onclick = ()=>{
$('shopBtn').textContent = 'Opening Collection…';
};
$('result').classList.add('active');
window.scrollTo({top:0,behavior:'smooth'});
}
function restart(){
current=0; scores={damask:0,minimal:0,boho:0,deco:0};
$('result').classList.remove('active');
$('quiz').style.display='block';
$('quiz').classList.add('active');
buildProgress();
render();
window.scrollTo({top:0,behavior:'smooth'});
}
</script>
</body>
</html>