`data/artifacts/028885e12558/kimi.html`

642 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;
--font-display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
--font-body:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-spring:cubic-bezier(.22,.9,.24,1);
--shadow-3:0 8px 24px rgba(0,0,0,.12);
--shadow-4:0 16px 48px rgba(0,0,0,.18);
--radius-card:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
font-family:var(--font-body);
background:var(--bg);
color:var(--text);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:24px;
}

.quiz-container{
width:100%;
max-width:480px;
background:var(--surface);
border-radius:var(--radius-card);
box-shadow:var(--shadow-4);
padding:48px 32px;
position:relative;
overflow:hidden;
}

.quiz-container::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
}

@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}
}

.step{
display:none;
animation:fadeUp .7s var(--ease-out) both;
}

.step.active{display:block}

.step h2{
font-family:var(--font-display);
font-size:28px;
line-height:1.1;
letter-spacing:-0.02em;
margin-bottom:8px;
font-weight:400;
}

.step-number{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--muted);
margin-bottom:16px;
display:block;
}

.answers{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:32px;
}

.answer-tile{
background:linear-gradient(145deg,#1e1e26,#141418);
border:1px solid rgba(245,242,234,0.08);
border-radius:12px;
padding:24px 16px;
cursor:pointer;
transition:all .35s var(--ease-spring);
position:relative;
overflow:hidden;
}

.answer-tile:hover{
transform:translateY(-4px);
border-color:rgba(201,169,97,0.4);
box-shadow:0 0 24px 2px rgba(201,169,97,0.15),var(--shadow-3);
}

.answer-tile:active{transform:translateY(-2px) scale(0.98)}

.tile-visual{
width:100%;
height:80px;
border-radius:8px;
margin-bottom:16px;
position:relative;
}

/* CSS Pattern Illustrations */
.pattern-damask{
background-color:#2a2520;
background-image:
radial-gradient(circle at 30% 30%,rgba(201,169,97,0.3) 0%,transparent 50%),
radial-gradient(circle at 70% 70%,rgba(201,169,97,0.2) 0%,transparent 40%),
repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(201,169,97,0.05) 10px,rgba(201,169,97,0.05) 20px);
}

.pattern-minimal{
background:linear-gradient(135deg,#1a1a1e 0%,#25252b 100%);
position:relative;
}

.pattern-minimal::after{
content:'';
position:absolute;
inset:20%;
border:1px solid rgba(245,242,234,0.15);
}

.pattern-bohemian{
background:
repeating-conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.15) 0deg 10deg,transparent 10deg 20deg),
radial-gradient(circle at 20% 80%,rgba(201,169,97,0.25),transparent 50%),
radial-gradient(circle at 80% 20%,rgba(125,106,69,0.3),transparent 50%);
background-color:#1e1c18;
}

.pattern-artdeco{
background:
linear-gradient(45deg,transparent 48%,rgba(201,169,97,0.4) 49%,rgba(201,169,97,0.4) 51%,transparent 52%),
linear-gradient(-45deg,transparent 48%,rgba(201,169,97,0.4) 49%,rgba(201,169,97,0.4) 51%,transparent 52%);
background-color:#151418;
background-size:30px 30px;
}

.pattern-ornate{
background:
radial-gradient(circle at 50% 0,rgba(201,169,97,0.3) 0%,transparent 60%),
radial-gradient(circle at 50% 100%,rgba(201,169,97,0.3) 0%,transparent 60%);
background-color:#1f1d19;
}

.pattern-clean{
background:linear-gradient(180deg,#1e1e22 0%,#16161a 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.pattern-eclectic{
background:
radial-gradient(circle at 0% 0%,rgba(201,169,97,0.4) 0%,transparent 40%),
radial-gradient(circle at 100% 100%,rgba(125,106,69,0.5) 0%,transparent 40%),
radial-gradient(circle at 50% 50%,rgba(201,169,97,0.1) 0%,transparent 70%);
background-color:#252219;
}

.pattern-geometric{
background-image:
linear-gradient(30deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
linear-gradient(150deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
linear-gradient(30deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
linear-gradient(150deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3));
background-color:#0f0f12;
background-size:40px 70px;
background-position:0 0,0 0,20px 35px,20px 35px;
}

.pattern-floral{background:var(--pattern-damask)}
.pattern-neutral{background:var(--pattern-minimal)}
.pattern-texture{background:var(--pattern-bohemian)}
.pattern-metallic{background:var(--pattern-artdeco)}
.pattern-library{background:var(--pattern-damask)}
.pattern-loft{background:var(--pattern-minimal)}
.pattern-studio{background:var(--pattern-bohemian)}
.pattern-penthouse{background:var(--pattern-artdeco)}
.pattern-heirloom{background:var(--pattern-damask)}
.pattern-statement{background:var(--pattern-artdeco)}
.pattern-curated{background:var(--pattern-minimal)}
.pattern-collected{background:var(--pattern-bohemian)}

.tile-label{
font-size:14px;
font-weight:500;
color:var(--text);
text-align:center;
line-height:1.4;
}

.progress-bar{
position:absolute;
bottom:0;left:0;height:2px;
background:rgba(245,242,234,0.1);
width:100%;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,var(--accent),var(--accent2));
transition:width .5s var(--ease-out);
width:0%;
}

.result-card{
width:1080px;
height:1080px;
background:var(--bg);
display:none;
position:relative;
overflow:hidden;
}

.result-card.active{
display:block;
animation:scaleIn .8s var(--ease-out) both;
}

.result-content{
position:absolute;
inset:80px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.result-pattern{
width:400px;
height:400px;
border-radius:50%;
margin-bottom:48px;
position:relative;
box-shadow:var(--shadow-4);
}

.pattern-result-damask{
background-color:#2a2520;
background-image:
repeating-radial-gradient(circle at 50% 50%,rgba(201,169,97,0.15) 0px,rgba(201,169,97,0.15) 20px,transparent 20px,transparent 40px),
repeating-conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.1) 0deg 15deg,transparent 15deg 30deg);
border:2px solid rgba(201,169,97,0.3);
}

.pattern-result-minimal{
background:linear-gradient(145deg,#1a1a1e 0%,#0d0d0f 100%);
border:1px solid rgba(245,242,234,0.1);
position:relative;
}

.pattern-result-minimal::before{
content:'';
position:absolute;
inset:40px;
border:1px solid rgba(245,242,234,0.2);
border-radius:4px;
}

.pattern-result-bohemian{
background:
radial-gradient(circle at 20% 20%,rgba(201,169,97,0.4) 0%,transparent 40%),
radial-gradient(circle at 80% 80%,rgba(125,106,69,0.5) 0%,transparent 40%),
conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.1) 0deg,rgba(125,106,69,0.1) 60deg,rgba(201,169,97,0.1) 120deg,rgba(125,106,69,0.1) 180deg,rgba(201,169,97,0.1) 240deg,rgba(125,106,69,0.1) 300deg,rgba(201,169,97,0.1) 360deg);
background-color:#1e1c18;
border:2px solid rgba(201,169,97,0.2);
}

.pattern-result-artdeco{
background:
repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(201,169,97,0.1) 20px,rgba(201,169,97,0.1) 40px),
repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(201,169,97,0.1) 20px,rgba(201,169,97,0.1) 40px),
radial-gradient(circle at 50% 50%,rgba(201,169,97,0.15) 0%,transparent 70%);
background-color:#0f0f12;
border:3px solid rgba(201,169,97,0.4);
position:relative;
}

.pattern-result-artdeco::after{
content:'';
position:absolute;
inset:30px;
border:1px solid rgba(201,169,97,0.3);
transform:rotate(45deg);
}

.result-title{
font-family:var(--font-display);
font-size:72px;
letter-spacing:-0.03em;
color:var(--text);
margin-bottom:24px;
line-height:1;
}

.result-subtitle{
font-size:14px;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--accent);
margin-bottom:32px;
}

.result-desc{
font-size:24px;
line-height:1.6;
color:var(--muted);
max-width:600px;
margin-bottom:48px;
font-weight:300;
}

.shop-btn{
display:inline-flex;
align-items:center;
gap:12px;
padding:24px 48px;
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
font-size:14px;
text-transform:uppercase;
letter-spacing:0.15em;
text-decoration:none;
transition:all .35s var(--ease-spring);
cursor:pointer;
}

.shop-btn:hover{
background:var(--accent);
color:var(--bg);
transform:translateY(-2px);
box-shadow:0 8px 32px rgba(201,169,97,0.3);
}

.corner-accent{
position:absolute;
width:120px;
height:120px;
border:1px solid rgba(201,169,97,0.2);
}

.corner-tl{top:40px;left:40px;border-right:none;border-bottom:none}
.corner-tr{top:40px;right:40px;border-left:none;border-bottom:none}
.corner-bl{bottom:40px;left:40px;border-right:none;border-top:none}
.corner-br{bottom:40px;right:40px;border-left:none;border-top:none}

.quiz-view{display:block}
.result-view{display:none;justify-content:center;align-items:center;min-height:100vh;padding:40px}

.result-view.active{display:flex}

@media(max-width:1200px){
.result-card{transform:scale(0.5);transform-origin:center}
}

@media(max-width:640px){
.quiz-container{padding:32px 20px}
.answers{grid-template-columns:1fr}
.result-card{transform:scale(0.35)}
}

.restart-btn{
position:fixed;
top:24px;
right:24px;
padding:12px 24px;
background:rgba(23,23,28,0.9);
border:1px solid rgba(245,242,234,0.1);
color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:0.1em;
cursor:pointer;
transition:all .3s var(--ease-spring);
z-index:100;
border-radius:6px;
}

.restart-btn:hover{
border-color:var(--accent);
color:var(--accent);
}

.brand-mark{
position:absolute;
top:32px;
left:50%;
transform:translateX(-50%);
font-family:var(--font-display);
font-size:11px;
text-transform:uppercase;
letter-spacing:0.25em;
color:var(--muted);
}
</style>
</head>
<body>

<div class="quiz-view" id="quizView">
<div class="quiz-container">
<div class="brand-mark">Atelier Luxe</div>

<div class="step active" data-step="1">
<span class="step-number">Question 01 / 05</span>
<h2>Which room calls to you?</h2>
<div class="answers">
<div class="answer-tile" onclick="selectAnswer(1,'traditional')">
<div class="tile-visual pattern-ornate"></div>
<div class="tile-label">A grand library with leather-bound books</div>
</div>
<div class="answer-tile" onclick="selectAnswer(1,'modern')">
<div class="tile-visual pattern-clean"></div>
<div class="tile-label">A sunlit loft with floor-to-ceiling windows</div>
</div>
<div class="answer-tile" onclick="selectAnswer(1,'bohemian')">
<div class="tile-visual pattern-eclectic"></div>
<div class="tile-label">An artist's studio filled with treasures</div>
</div>
<div class="answer-tile" onclick="selectAnswer(1,'artdeco')">
<div class="tile-visual pattern-geometric"></div>
<div class="tile-label">A penthouse with skyline views</div>
</div>
</div>
</div>

<div class="step" data-step="2">
<span class="step-number">Question 02 / 05</span>
<h2>What's your ideal pattern?</h2>
<div class="answers">
<div class="answer-tile" onclick="selectAnswer(2,'traditional')">
<div class="tile-visual pattern-damask"></div>
<div class="tile-label">Intricate florals that tell a story</div>
</div>
<div class="answer-tile" onclick="selectAnswer(2,'modern')">
<div class="tile-visual pattern-minimal"></div>
<div class="tile-label">Clean lines, pure color, no distraction</div>
</div>
<div class="answer-tile" onclick="selectAnswer(2,'bohemian')">
<div class="tile-visual pattern-bohemian"></div>
<div class="tile-label">Layered textures, mixed prints</div>
</div>
<div class="answer-tile" onclick="selectAnswer(2,'artdeco')">
<div class="tile-visual pattern-artdeco"></div>
<div class="tile-label">Bold geometry with metallic accents</div>
</div>
</div>
</div>

<div class="step" data-step="3">
<span class="step-number">Question 03 / 05</span>
<h2>Choose your color mood:</h2>
<div class="answers">
<div class="answer-tile" onclick="selectAnswer(3,'traditional')">
<div class="tile-visual pattern-damask"></div>
<div class="tile-label">Rich burgundies and forest greens</div>
</div>
<div class="answer-tile" onclick="selectAnswer(3,'modern')">
<div class="tile-visual pattern-minimal"></div>
<div class="tile-label">Soft greys and warm whites</div>
</div>
<div class="answer-tile" onclick="selectAnswer(3,'bohemian')">
<div class="tile-visual pattern-bohemian"></div>
<div class="tile-label">Terracotta, ochre, and jewel tones</div>
</div>
<div class="answer-tile" onclick="selectAnswer(3,'artdeco')">
<div class="tile-visual pattern-artdeco"></div>
<div class="tile-label">Midnight blue, gold, and black</div>
</div>
</div>
</div>

<div class="step" data-step="4">
<span class="step-number">Question 04 / 05</span>
<h2>Your dream dinner party:</h2>
<div class="answers">
<div class="answer-tile" onclick="selectAnswer(4,'traditional')">
<div class="tile-visual pattern-ornate"></div>
<div class="tile-label">Formal seating, heirloom silver</div>
</div>
<div class="answer-tile" onclick="selectAnswer(4,'modern')">
<div class="tile-visual pattern-clean"></div>
<div class="tile-label">Intimate, curated, effortless</div>
</div>
<div class="answer-tile" onclick="selectAnswer(4,'bohemian')">
<div class="tile-visual pattern-eclectic"></div>
<div class="tile-label">Family-style, mismatched charm</div>
</div>
<div class="answer-tile" onclick="selectAnswer(4,'artdeco')">
<div class="tile-visual pattern-geometric"></div>
<div class="tile-label">Champagne towers, crystal glinting</div>
</div>
</div>
</div>

<div class="step" data-step="5">
<span class="step-number">Question 05 / 05</span>
<h2>The detail that stops you in your tracks:</h2>
<div class="answers">
<div class="answer-tile" onclick="selectAnswer(5,'traditional')">
<div class="tile-visual pattern-damask"></div>
<div class="tile-label">Hand-painted craftsmanship</div>
</div>
<div class="answer-tile" onclick="selectAnswer(5,'modern')">
<div class="tile-visual pattern-minimal"></div>
<div class="tile-label">Perfect proportion, subtle texture</div>
</div>
<div class="answer-tile" onclick="selectAnswer(5,'bohemian')">
<div class="tile-visual pattern-bohemian"></div>
<div class="tile-label">Vintage finds, stories embedded</div>
</div>
<div class="answer-tile" onclick="selectAnswer(5,'artdeco')">
<div class="tile-visual pattern-artdeco"></div>
<div class="tile-label">Gilded edges, mirrored luxury</div>
</div>
</div>
</div>

<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
</div>
</div>

<div class="result-view" id="resultView">
<button class="restart-btn" onclick="restartQuiz()">Retake Quiz</button>

<div class="result-card" id="resultCard">
<div class="corner-accent corner-tl"></div>
<div class="corner-accent corner-tr"></div>
<div class="corner-accent corner-bl"></div>
<div class="corner-accent corner-br"></div>
<div class="result-content">
<div class="result-pattern" id="resultPattern"></div>
<div class="result-subtitle" id="resultSubtitle">Your Wallcovering Style</div>
<h1 class="result-title" id="resultTitle"></h1>
<p class="result-desc" id="resultDesc"></p>
<a href="#" class="shop-btn">Shop This Style →</a>
</div>
</div>
</div>

<script>
const scores={traditional:0,modern:0,bohemian:0,artdeco:0};
let currentStep=1;

const results={
traditional:{
title:'Traditional Damask',
subtitle:'Timeless Elegance',
desc:'You gravitate toward heritage patterns and storied craftsmanship. Your walls whisper of ancestral estates and candlelit libraries—rich, layered, and enduringly sophisticated.',
patternClass:'pattern-result-damask'
},
modern:{
title:'Modern Minimalist',
subtitle:'Quiet Luxury',
desc:'You find beauty in restraint. Clean planes, subtle textures, and deliberate negative space create your sanctuary—a meditation on form, light, and essential elegance.',
patternClass:'pattern-result-minimal'
},
bohemian:{
title:'Bohemian Maximalist',
subtitle:'Curated Abundance',
desc:'Your spirit collects beauty without boundaries. Layered patterns, sun-washed colors, and global influences converge in spaces that feel both traveled and deeply personal.',
patternClass:'pattern-result-bohemian'
},
artdeco:{
title:'Art Deco Glam',
subtitle:'Bold Opulence',
desc:'You command drama and geometry in equal measure. Gilded accents, sharp lines, and unapologetic luxury define your aesthetic—glamour that demands to be witnessed.',
patternClass:'pattern-result-artdeco'
}
};

function selectAnswer(step,style){
scores[style]++;
if(step<5){
document.querySelector(`.step[data-step="${step}"]`).classList.remove('active');
setTimeout(()=>{
document.querySelector(`.step[data-step="${step+1}"]`).classList.add('active');
updateProgress(step+1);
},50);
}else{
showResult();
}
}

function updateProgress(step){
document.getElementById('progressFill').style.width=(step/5*100)+'%';
}

function showResult(){
const winner=Object.entries(scores).sort((a,b)=>b[1]-a[1])[0][0];
const result=results[winner];

document.getElementById('quizView').style.display='none';
document.getElementById('resultView').classList.add('active');
document.getElementById('resultCard').classList.add('active');

document.getElementById('resultTitle').textContent=result.title;
document.getElementById('resultSubtitle').textContent=result.subtitle;
document.getElementById('resultDesc').textContent=result.desc;
document.getElementById('resultPattern').className='result-pattern '+result.patternClass;
}

function restartQuiz(){
Object.keys(scores).forEach(k=>scores[k]=0);
currentStep=1;
document.querySelectorAll('.step').forEach((el,i)=>{
el.classList.toggle('active',i===0);
});
document.getElementById('progressFill').style.width='20%';
document.getElementById('resultView').classList.remove('active');
document.getElementById('resultCard').classList.remove('active');
document.getElementById('quizView').style.display='block';
}

updateProgress(1);
</script>

</body>
</html>