← back to Model Arena
data/artifacts/028885e12558/qwen3-14b.html
250 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-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-size: 16px;
--spacing: 16px;
}
body {
margin: 0;
font-family: var(--font-stack);
font-size: var(--font-size);
background-color: var(--bg);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.quiz-container {
width: 90vw;
max-width: 600px;
background-color: var(--surface);
padding: var(--spacing);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.quiz-title {
font-size: 1.5em;
margin-bottom: var(--spacing);
text-align: center;
}
.question {
margin-bottom: var(--spacing);
}
.answer-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing);
}
.answer-tile {
background-color: var(--accent2);
border-radius: 8px;
padding: var(--spacing);
text-align: center;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.answer-tile:hover {
transform: scale(1.05);
}
.result-card {
width: 100%;
height: 1080px;
background-color: var(--surface);
padding: var(--spacing);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.result-title {
font-size: 2em;
margin-bottom: var(--spacing);
}
.result-description {
font-size: 1.2em;
margin-bottom: var(--spacing);
}
.result-button {
padding: 10px 20px;
background-color: var(--accent);
color: var(--bg);
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
}
.pattern-swatch {
width: 200px;
height: 200px;
margin-bottom: var(--spacing);
background-image: repeating-linear-gradient(
45deg,
var(--accent),
var(--accent) 10px,
var(--accent2) 10px,
var(--accent2) 20px
);
border: 2px solid var(--muted);
border-radius: 8px;
}
svg {
width: 24px;
height: 24px;
fill: currentColor;
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="quiz-title">What's Your Wallcovering Style?</div>
<div class="question" id="question1">
<div>1. What is your preferred color palette?</div>
<div class="answer-tiles">
<div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Traditional Colors</div>
<div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Modern Neutrals</div>
<div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Vibrant Patterns</div>
<div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Gilded Metallics</div>
</div>
</div>
<div class="question" id="question2" style="display: none;">
<div>2. What is your preferred texture?</div>
<div class="answer-tiles">
<div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Velvet</div>
<div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Matte</div>
<div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Faux Fur</div>
<div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Glossy</div>
</div>
</div>
<div class="question" id="question3" style="display: none;">
<div>3. What is your preferred design style?</div>
<div class="answer-tiles">
<div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Classic</div>
<div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Clean Lines</div>
<div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Eclectic</div>
<div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Symmetrical</div>
</div>
</div>
<div class="question" id="question4" style="display: none;">
<div>4. What is your preferred lighting?</div>
<div class="answer-tiles">
<div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Soft</div>
<div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Bright</div>
<div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Mood Lighting</div>
<div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Ambient</div>
</div>
</div>
<div class="question" id="question5" style="display: none;">
<div>5. What is your preferred room style?</div>
<div class="answer-tiles">
<div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Formal Living Room</div>
<div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Open Plan Kitchen</div>
<div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Cozy Bedroom</div>
<div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Grand Entrance</div>
</div>
</div>
<div class="result-card" id="result" style="display: none;">
<div class="pattern-swatch"></div>
<div class="result-title" id="resultTitle"></div>
<div class="result-description" id="resultDescription"></div>
<button class="result-button" onclick="shareResult()">Shop this style</button>
</div>
</div>
<script>
let currentQuestion = 1;
let scores = {
"Traditional Damask": 0,
"Modern Minimalist": 0,
"Bohemian Maximalist": 0,
"Art Deco Glam": 0
};
function selectAnswer(style) {
scores[style]++;
currentQuestion++;
if (currentQuestion > 5) {
showResult();
} else {
hideAllQuestions();
document.getElementById("question" + currentQuestion).style.display = "block";
}
}
function hideAllQuestions() {
for (let i = 1; i <= 5; i++) {
document.getElementById("question" + i).style.display = "none";
}
}
function showResult() {
let maxStyle = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
let resultTitle, resultDescription;
let pattern;
switch (maxStyle) {
case "Traditional Damask":
resultTitle = "Traditional Damask";
resultDescription = "Classic elegance with intricate floral patterns.";
pattern = "repeating-linear-gradient(45deg, var(--accent), var(--accent) 10px, var(--accent2) 10px, var(--accent2) 20px)";
break;
case "Modern Minimalist":
resultTitle = "Modern Minimalist";
resultDescription = "Clean lines and neutral tones for a sleek look.";
pattern = "repeating-linear-gradient(45deg, var(--accent), var(--accent) 20px, var(--bg) 20px, var(--bg) 40px)";
break;
case "Bohemian Maximalist":
resultTitle = "Bohemian Maximalist";
resultDescription = "Vibrant colors and eclectic patterns for a bold look.";
pattern = "repeating-linear-gradient(45deg, var(--accent), var(--accent) 10px, var(--accent2) 10px, var(--accent2) 20px)";
break;
case "Art Deco Glam":
resultTitle = "Art Deco Glam";
resultDescription = "Gilded metallics and geometric patterns for a luxurious look.";
pattern = "repeating-linear-gradient(45deg, var(--accent), var(--accent) 10px, var(--accent2) 10px, var(--accent2) 20px)";
break;
}
document.getElementById("resultTitle").textContent = resultTitle;
document.getElementById("resultDescription").textContent = resultDescription;
document.querySelector(".pattern-swatch").style.backgroundImage = pattern;
document.getElementById("result").style.display = "flex";
}
function shareResult() {
alert("Sharing your result for " + document.getElementById("resultTitle").textContent + "!");
}
</script>
</body>
</html>