`data/artifacts/028885e12558/qwen25-7b.html`

98 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>
        body {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            background-color: #0d0d0f;
            color: #f5f2ea;
            margin: 0;
            padding: 0;
            display: grid;
            place-items: center;
            min-height: 1080px;
        }
        .quiz-container {
            max-width: 768px;
            width: 100%;
            text-align: center;
        }
        .question-card, .result-card {
            background-color: #17171c;
            color: #f5f2ea;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
            overflow: hidden;
        }
        .question-card {
            padding: 32px;
            margin-bottom: 24px;
        }
        .result-card {
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 24px;
            padding: 96px;
        }
        .answer-tile {
            background-color: #c9a961;
            color: #f5f2ea;
            border-radius: 14px;
            padding: 32px;
            cursor: pointer;
            transition: box-shadow 0.7s cubic-bezier(.22,1,.36,1) both, transform 0.7s cubic-bezier(.22,1,.36,1) both;
        }
        .answer-tile:hover {
            box-shadow: 0 16px 48px rgba(0,0,0,.18);
            transform: translateY(-15px);
        }
        .result-card .card-result {
            background-color: #c9a961;
            color: #f5f2ea;
            border-radius: 14px;
            padding: 32px;
            text-align: center;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
        .fade-up-enter-active, .fade-up-leave-active {
            transition: all 0.7s cubic-bezier(.22,1,.36,1) both;
        }
        .fade-up-enter-from, .fade-up-leave-to {
            opacity: 0;
            transform: translateY(28px);
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1 class="question-card">What's Your Wallcovering Style?</h1>
        <form id="quizForm" onsubmit="return false;">
            <div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Traditional Damask</div>
            <div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Modern Minimalist</div>
            <div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Bohemian Maximalist</div>
            <div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Art Deco Glam</div>
        </form>
        <div id="resultCard" class="result-card fade-up-enter-active"></div>
    </div>

    <script>
        function selectAnswer(style) {
            document.getElementById("resultCard").innerHTML = `
                <h2 class="card-result">${style}</h2>
                <p class="card-result">Shop this style</p>
                <button class="card-result" onclick="window.location.href='https://example.com/shop-style'">Shop this style</button>
            `;
            document.getElementById("resultCard").classList.remove('fade-up-enter-active');
            setTimeout(() => {
                document.getElementById("resultCard").classList.add('fade-up-enter-active');
            }, 10);
        }
    </script>
</body>
</html>