← back to Model Arena
data/artifacts/028885e12558/gemma3-12b.html
332 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-color: #0d0d0f;
--surface-color: #17171c;
--text-color: #f5f2ea;
--muted-color: #8a8578;
--accent-color-1: #c9a961;
--accent-color-2: #7d6a45;
--font-display: 'Didot', serif;
--font-body: '-apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--caption-size: 12px;
--body-size: 16px;
--lead-size: 21px;
--h3-size: 28px;
--h2-size: 38px;
--h1-size: 50px;
--display-size: 67px;
}
body {
font-family: var(--font-body);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
overflow-x: hidden;
height:100vh; /* Ensure full height */
}
.container {
max-width: 1080px;
margin: 0 auto;
padding: 96px;
box-sizing: border-box;
}
h1 {
font-family: var(--font-display);
font-size: var(--h1-size);
text-align: center;
margin-bottom: 48px;
}
.question {
margin-bottom: 64px;
}
.answer-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.answer-tile {
background-color: var(--surface-color);
border-radius: 14px;
padding: 32px;
text-align: center;
cursor: pointer;
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.answer-tile:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.answer-tile label{
font-size: var(--caption-size);
letter-spacing: .15em;
color: var(--muted-color);
display:block;
margin-bottom: 8px;
}
.result {
background-color: var(--surface-color);
border-radius: 14px;
padding: 64px;
text-align: center;
margin: 0 auto;
max-width: 720px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.result h2 {
font-family: var(--font-display);
font-size: var(--h2-size);
margin-bottom: 24px;
}
.result p {
font-size: var(--body-size);
line-height: 1.6;
margin-bottom: 32px;
}
.result button {
background-color: var(--accent-color-1);
color: white;
border: none;
padding: 16px 32px;
font-size: var(--body-size);
border-radius: 8px;
cursor: pointer;
transition: background-color .2s ease-in-out;
}
.result button:hover {
background-color: var(--accent-color-2);
}
/* Style Swatch */
.style-swatch {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
background: linear-gradient(45deg, var(--accent-color-1) 30%, var(--accent-color-2) 70%);
}
/*Animations*/
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
body.loaded{
animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}
</style>
</head>
<body class="loading">
<div class="container">
<h1>What's Your Wallcovering Style?</h1>
<div id="quiz" class="loaded">
<div class="question q1">
<p>1. What best describes your ideal living room?</p>
<div class="answer-tiles">
<button data-value="traditional">
<label>Classic & Formal</label>
<img src="data:image/svg+xml,%3Csvg width='80' height='80'%3E%3Crect width='100%' height='100%' fill='%23c9a961'/%3E%3C/svg%3E" alt="Classic & Formal">
</button>
<button data-value="modern">
<label>Clean & Minimalist</label>
<img src="data:image/svg+xml,%3Csvg width='80' height='80'%3E%3Crect width='100%' height='100%' fill='%23ffffff'/%3E%3C/svg%3E" alt="Clean & Minimalist">
</button>
<button data-value="bohemian">
<label>Eclectic & Layered</label>
<img src="data:image/svg+xml,%3Csvg width='80' height='80'%3E%3Crect width='100%' height='100%' fill='%23f5f2ea'/%3E%3C/svg%3E" alt="Eclectic & Layered">
</button>
<button data-value="artdeco">
<label>Glamorous & Geometric</label>
<img src="data:image/svg+xml,%3Csvg width='80' height='80'%3E%3Crect width='100%' height='100%' fill='%2317171c'/%3E%3C/svg%3E" alt="Glamorous & Geometric">
</button>
</div>
</div>
<div class="question q2">
<p>2. Choose a color palette that inspires you.</p>
<div class="answer-tiles">
<button data-value="traditional">Deep Reds & Golds</button>
<button data-value="modern">Neutrals & Grays</button>
<button data-value="bohemian">Warm Earth Tones</button>
<button data-value="artdeco">Blacks, Silvers & Jewel Tones</button>
</div>
</div>
<div class="question q3">
<p>3. Which texture do you prefer?</p>
<div class="answer-tiles">
<button data-value="traditional">Velvet</button>
<button data-value="modern">Smooth Linen</button>
<button data-value="bohemian">Faux Fur</button>
<button data-value="artdeco">Metallic Foil</button>
</div>
</div>
<div class="question q4">
<p>4. What's your favorite furniture style?</p>
<div class="answer-tiles">
<button data-value="traditional">Antique & Ornate</button>
<button data-value="modern">Streamlined & Functional</button>
<button data-value="bohemian">Vintage & Mismatched</button>
<button data-value="artdeco">Geometric & Luxurious</button>
</div>
</div>
<div class="question q5">
<p>5. What's your ideal weekend?</p>
<div class="answer-tiles">
<button data-value="traditional">Hosting a formal dinner party</button>
<button data-value="modern">Enjoying quiet time with a good book</button>
<button data-value="bohemian">Exploring a local market</button>
<button data-value="artdeco">Attending a jazz concert</button>
</div>
</div>
</div>
<div id="result" style="display: none;">
<div class="result">
<div class="style-swatch"></div>
<h2></h2>
<p></p>
<button>Shop this Style</button>
</div>
</div>
</div>
<script>
const quiz = document.getElementById('quiz');
const resultContainer = document.getElementById('result');
let score = {};
// Function to update the loaded class after a slight delay
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
document.body.classList.add("loaded");
}, 10); // Add the class immediately
});
const questions = document.querySelectorAll('.question');
questions.forEach(question => {
const buttons = question.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', function() {
const value = this.dataset.value;
score[question.classList[1]] = value; // Use class name as the key
// Disable all other buttons in current question after selection
buttons.forEach(btn => btn.disabled = true);
});
});
});
function calculateResult() {
let traditional = score.q1?.traditional || 0;
let modern = score.q1?.modern || 0;
let bohemian = score.q1?.bohemian || 0;
let artdeco = score.q1?.artdeco || 0;
let totalTraditional = traditional + score.q2?.traditional || 0 + score.q3?.traditional || 0 + score.q4?.traditional || 0+ score.q5?.traditional || 0;
let totalModern = modern + score.q2?.modern || 0 + score.q3?.modern || 0 + score.q4?.modern || 0 + score.q5?.modern || 0;
let totalBohemian = bohemian + score.q2?.bohemian || 0 + score.q3?.bohemian || 0 + score.q4?.bohemian || 0+ score.q5?.bohemian || 0;
let totalArtDeco = artdeco + score.q2?.artdeco || 0 + score.q3?.artdeco || 0 + score.q4?.artdeco || 0 + score.q5?.artdeco || 0;
const styles = {
'Traditional Damask': totalTraditional,
'Modern Minimalist': totalModern,
'Bohemian Maximalist': totalBohemian,
'Art Deco Glam': totalArtDeco
};
let winningStyle = Object.keys(styles).reduce((a, b) => styles[a] > styles[b] ? a : b);
return winningStyle;
}
document.addEventListener('click', function(event){
if (event.target.tagName === 'BUTTON') {
setTimeout(() =>{ // Delay slightly to ensure all buttons are disabled
const result = calculateResult();
// Hide quiz, show result
quiz.style.display = 'none';
resultContainer.style.display = 'block';
// Set result content based on winning style
let h2Text = "";
let pText = "";
let swatchStyle="";
switch (result) {
case 'Traditional Damask':
h2Text = "Your Style: Traditional Damask";
pText = "Embrace timeless elegance with rich fabrics, ornate details, and a touch of formality. Think grand estates and cherished heirlooms.";
swatchStyle="background: linear-gradient(45deg, var(--accent-color-1) 20%, var(--accent-color-2) 80%);";
break;
case 'Modern Minimalist':
h2Text = "Your Style: Modern Minimalist";
pText = "Less is more! You appreciate clean lines, functional design, and a serene atmosphere.";
swatchStyle="background: linear-gradient(45deg, var(--accent-color-1) 0%, white 100%);";
break;
case 'Bohemian Maximalist':
h2Text = "Your Style: Bohemian Maximalist";
pText = "Create a vibrant and eclectic space filled with personality and unique finds. Layer textures, mix patterns, and embrace the unexpected.";
swatchStyle="background: linear-gradient(45deg, var(--accent-color-1) 30%, var(--accent-color-2) 70%);";
break;
case 'Art Deco Glam':
h2Text = "Your Style: Art Deco Glam";
pText = "Radiate sophistication with geometric patterns, luxurious materials, and a touch of old Hollywood glamour.";
swatchStyle="background: linear-gradient(45deg, var(--accent-color-1) 10%, var(--accent-color-2) 90%);";
break;
}
resultContainer.querySelector('h2').textContent = h2Text;
resultContainer.querySelector('p').textContent = pText;
resultContainer.querySelector('.style-swatch').setAttribute("style", swatchStyle);
}, 100) // Delay by a short time after button click.
}
});
</script>
</body>
</html>