`data/artifacts/0b9bb5066c06/gemma3-12b.html`

245 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Which Design Era?</title>
    <style>
        :root {
            --bg-color: #faf8f4; /* ivory-gallery */
            --surface-color: #ffffff;
            --text-color: #1c1a17;
            --muted-color: #9b948a;
            --accent-color-1: #b0472e;
            --accent-color-2: #2f4c39;
            --font-display: 'Playfair Display', Georgia, serif;
            --font-body: apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-body);
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        .top-bar {
            background-color: var(--surface-color);
            padding: 16px;
            text-align: left;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .wordmark {
            font-family: var(--font-display);
            font-size: 2.5em; /* Adjusted for better visual impact */
            text-transform: uppercase;
            letter-spacing: .18em;
            margin: 0;
        }

        .container {
            padding: 96px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .vignette {
            width: 100%;
            height: 400px;
            background-size: cover;
            background-position: center;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            margin-bottom: 32px;
        }

        .options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
        }

        .option-button {
            background-color: var(--surface-color);
            border: 1px solid var(--muted-color);
            padding: 16px 24px;
            border-radius: 14px;
            cursor: pointer;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .option-button:hover {
            background-color: #f9f9f9; /* Lighter shade on hover */
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
        }

        .feedback {
            text-align: center;
            font-size: 1.2em;
            margin-top: 32px;
        }

        .fun-fact {
            font-style: italic;
            color: var(--muted-color);
            margin-top: 8px;
        }


        .score {
            text-align: center;
            font-size: 1.5em;
            margin-bottom: 32px;
        }

        #restart-button {
          background-color: var(--accent-color-1);
          color: white;
          border: none;
          padding: 16px 24px;
          border-radius: 14px;
          cursor: pointer;
          transition: background-color 0.2s ease;
          margin-top: 32px;
        }

        #restart-button:hover {
            background-color: darken(var(--accent-color-1), 10%); /* Darken on hover */
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }

    </style>
</head>
<body>

    <div class="top-bar">
        <h1 class="wordmark">DESIGNER WALLCOVERINGS</h1>
    </div>

    <div class="container" id="gameContainer">
        <div class="score" id="scoreDisplay">Score: 0</div>
        <div class="vignette" id="vignetteImage"></div>
        <div class="options" id="optionButtons"></div>
        <div class="feedback" id="feedbackMessage"></div>
        <div class="fun-fact" id="funFactDisplay"></div>
        <button id="restart-button">Restart</button>
    </div>

    <script>
        const eras = [
            { name: "Victorian", image: "victorian.jpg", fact: "Victorian interiors often featured dark, rich colors and ornate details." },
            { name: "Art Deco", image: "art_deco.jpg", fact: "Art Deco emphasized geometric shapes, luxurious materials like chrome and velvet, and a sense of glamour." },
            { name: "Mid-Century Modern", image: "mid_century.jpg", fact: "Mid-Century Modern design focused on clean lines, organic forms, and functionality." },
            { name: "Grandmillennial", image: "grandmillennial.jpg", fact: "Grandmillennial style blends traditional elements like chintz and florals with a modern sensibility." }
        ];

        let currentEraIndex = 0;
        let score = 0;
        let round = 1;
        let highScore = localStorage.getItem("highScore") || 0;


        function setVignette() {
            const vignetteImage = document.getElementById("vignetteImage");
            vignetteImage.style.backgroundImage = `url(${eras[currentEraIndex].image})`;
        }

        function setOptions() {
            const optionButtonsDiv = document.getElementById("optionButtons");
            optionButtonsDiv.innerHTML = ""; // Clear previous options

            const correctEra = eras[currentEraIndex];

            let availableEras = [...eras];
            availableEras.splice(availableEras.indexOf(correctEra), 1);  // Remove the current era to prevent it from appearing as an option

            for (let i = 0; i < 3; i++) {
                const randomIndex = Math.floor(Math.random() * availableEras.length);
                const wrongEra = availableEras[randomIndex];
                availableEras.splice(randomIndex, 1);  // Remove the selected era to ensure uniqueness
            }

            let allOptions = [correctEra, ...availableEras];
            allOptions.sort(() => Math.random() - 0.5); // Shuffle options


            allOptions.forEach(era => {
                const button = document.createElement("button");
                button.classList.add("option-button");
                button.textContent = era.name;

                button.addEventListener("click", () => {
                    checkAnswer(era);
                });

                optionButtonsDiv.appendChild(button);
            });
        }


        function checkAnswer(selectedEra) {
            const feedbackMessage = document.getElementById("feedbackMessage");
            const funFactDisplay = document.getElementById("funFactDisplay");
            if (selectedEra.name === eras[currentEraIndex].name) {
                score++;
                feedbackMessage.textContent = "Correct!";
                funFactDisplay.textContent = eras[currentEraIndex].fact;
            } else {
                feedbackMessage.textContent = "Incorrect.";
                funFactDisplay.textContent = "";
            }

            document.getElementById("scoreDisplay").textContent = `Score: ${score}`;

            setTimeout(() => {
                nextRound();
            }, 1500); // Delay before showing next round
        }


        function nextRound() {
          round++;
          currentEraIndex = (currentEraIndex + 1) % eras.length;
          setVignette();
          setOptions();
          feedbackMessage.textContent = "";
          funFactDisplay.textContent = "";

          //animate vignette fade in on new round
          document.getElementById("vignetteImage").classList.add('fadeUp');
        }



        function restartGame() {
            score = 0;
            round = 1;
            currentEraIndex = 0;
            highScore = localStorage.getItem("highScore") || 0; // Reset high score on restart

            document.getElementById("scoreDisplay").textContent = `Score: ${score}`;
            setVignette();
            setOptions();
            feedbackMessage.textContent = "";
            funFactDisplay.textContent = "";
        }


        // Initialize game
        window.onload = () => {
            setVignette();
            setOptions();

            document.getElementById("restart-button").addEventListener("click", restartGame);
        };

    </script>
</body>
</html>