`data/artifacts/028885e12558/hf-qwen-coder-32b.html`

188 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>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background-color: #0d0d0f;
            color: #f5f2ea;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .container {
            width: 90%;
            max-width: 600px;
            padding: 48px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            font-size: 38px;
            margin-bottom: 32px;
            text-align: center;
        }
        .question {
            width: 100%;
            margin-bottom: 48px;
            opacity: 0;
            animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
        .question:not(:first-child) { animation-delay: 90ms; }
        .question h3 {
            font-size: 28px;
            margin-bottom: 24px;
        }
        .options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 24px;
        }
        .option {
            background-color: #17171c;
            border-radius: 14px;
            padding: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .option:hover {
            transform: scale(1.02);
            box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 24px #c9a9613d;
        }
        .result-card {
            background-color: #17171c;
            border-radius: 14px;
            padding: 48px;
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
            text-align: center;
            width: 100%;
        }
        .result-card h2 {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            font-size: 38px;
            margin-bottom: 24px;
        }
        .pattern-swatch {
            width: 100%;
            height: 150px;
            background-size: cover;
            border-radius: 14px;
            margin-bottom: 24px;
        }
        .result-description {
            font-size: 16px;
            margin-bottom: 32px;
        }
        .shop-button {
            background-color: #c9a961;
            color: #0d0d0f;
            border: none;
            padding: 16px 32px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.15s;
        }
        .shop-button:hover {
            background-color: #7d6a45;
        }
        .labels {
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.15em;
            color: #8a8578;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>What's Your Wallcovering Style?</h1>
        <div id="quiz" class="question active">
            <h3>PICK YOUR FAVORITE COLOR SCHEME:</h3>
            <div class="options">
                <div class="option" data-value="traditional">Rich Earth Tones</div>
                <div class="option" data-value="modern">Neutrals & Whites</div>
                <div class="option" data-value="bohemian">Bright & Bold Colors</div>
                <div class="option" data-value="artdeco">Gold & Silver Accents</div>
            </div>
        </div>
        <div id="result" style="display:none;">
            <div class="result-card">
                <h2 id="style-name"></h2>
                <div id="pattern-swatch" class="pattern-swatch"></div>
                <p id="description" class="result-description"></p>
                <a href="#" id="shop-button" class="shop-button">Shop this style</a>
            </div>
        </div>
    </div>
    <script>
        const questions = [
            { title: "PICK YOUR FAVORITE COLOR SCHEME:", options: ["Rich Earth Tones", "Neutrals & Whites", "Bright & Bold Colors", "Gold & Silver Accents"], values: ["traditional", "modern", "bohemian", "artdeco"] },
        ];
        const styles = {
            traditional: { name: "Traditional Damask", pattern: "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,0 L50,100 M0,50 L100,50 Z' stroke='#c9a961' stroke-width='4'/></svg>)", description: "Elegant and timeless, with rich textures and earthy tones." },
            modern: { name: "Modern Minimalist", pattern: "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' stroke='#c9a961' stroke-width='4' fill='none'/></svg>)", description: "Clean lines and neutral colors for a sleek, modern look." },
            bohemian: { name: "Bohemian Maximalist", pattern: "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='10' y='10' width='80' height='80' stroke='#c9a961' stroke-width='4' fill='none'/></svg>)", description: "Vibrant colors and intricate patterns for a bold, expressive space." },
            artdeco: { name: "Art Deco Glam", pattern: "url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,0 90,50 50,100 10,50' stroke='#c9a961' stroke-width='4' fill='none'/></svg>)", description: "Luxurious and glamorous with metallic accents and geometric shapes." },
        };
        let currentQuestionIndex = 0;
        const quizContainer = document.getElementById("quiz");
        const resultContainer = document.getElementById("result");
        const styleNameElement = document.getElementById("style-name");
        const patternSwatchElement = document.getElementById("pattern-swatch");
        const descriptionElement = document.getElementById("description");

        function showQuestion(index) {
            if (index >= questions.length) {
                quizContainer.style.display = "none";
                resultContainer.style.display = "";
                return;
            }
            currentQuestionIndex = index;
            const question = questions[index];
            quizContainer.querySelector("h3").innerText = question.title;
            const optionsContainer = quizContainer.querySelector(".options");
            optionsContainer.innerHTML = "";
            question.options.forEach((option, i) => {
                const optionElement = document.createElement("div");
                optionElement.classList.add("option");
                optionElement.innerText = option;
                optionElement.dataset.value = question.values[i];
                optionElement.addEventListener("click", () => selectOption(optionElement));
                optionsContainer.appendChild(optionElement);
            });
        }

        function selectOption(optionElement) {
            const selectedValue = optionElement.dataset.value;
            if (currentQuestionIndex === questions.length - 1) {
                const style = styles[selectedValue];
                styleNameElement.innerText = style.name;
                patternSwatchElement.style.backgroundImage = style.pattern;
                descriptionElement.innerText = style.description;
                document.getElementById("shop-button").href = `#/${selectedValue}`;
            }
            showQuestion(currentQuestionIndex + 1);
        }

        showQuestion(0);
    </script>
</body>
</html>