`data/artifacts/0219528ac7d7/qwen3-14b.html`

284 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: #faf8f4;
      --surface: #ffffff;
      --text: #1c1a17;
      --muted: #9b948a;
      --accent: #b0472e;
      --line: #e0e0e0;
      --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --font-display: "Playfair Display", Georgia, serif;
      --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      font-family: var(--font-body);
      background-color: var(--bg);
      color: var(--text);
      overflow: hidden;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 24px;
      background-color: var(--surface);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      z-index: 1000;
    }

    header h1 {
      font-family: var(--font-display);
      font-size: 48px;
      letter-spacing: 0.18em;
      color: var(--text);
    }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 96px 24px;
      position: relative;
      overflow: hidden;
    }

    .vignette {
      width: 100%;
      height: 100%;
      max-width: 600px;
      max-height: 600px;
      background: linear-gradient(135deg, var(--accent) 25%, var(--muted) 50%, var(--surface) 75%);
      background-size: 400% 400%;
      border-radius: 14px;
      box-shadow: var(--shadow);
      animation: drift 18s linear infinite;
      position: relative;
    }

    .era {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      opacity: 0;
      pointer-events: none;
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text);
    }

    .scoreboard {
      position: absolute;
      top: 24px;
      left: 24px;
      font-size: 16px;
      color: var(--muted);
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }

    .buttons {
      position: absolute;
      bottom: 24px;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .button {
      background-color: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 24px;
      font-size: 14px;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      cursor: pointer;
      transition: all 150ms var(--ease);
    }

    .button:hover {
      background-color: var(--muted);
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      font-family: var(--font-display);
      font-size: 32px;
      letter-spacing: 0.18em;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 300ms var(--ease);
    }

    .overlay.show {
      opacity: 1;
      visibility: visible;
    }

    @keyframes drift {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>DESIGNER WALLCOVERINGS</h1>
  </header>

  <main>
    <div class="vignette" id="vignette">
      <div class="era" id="era">Loading...</div>
      <div class="scoreboard" id="scoreboard">Score: 0 | Rounds: 0</div>
      <div class="buttons" id="buttons"></div>
    </div>

    <div class="overlay" id="overlay">
      <div id="overlayContent"></div>
    </div>
  </main>

  <script>
    const eras = [
      { name: "Victorian", pattern: "linear-gradient(135deg, #a67c52 20%, #b59f8a 50%, #c9a961 80%)" },
      { name: "Art Deco", pattern: "linear-gradient(135deg, #2f4c39 20%, #605a51 50%, #8a8578 80%)" },
      { name: "Mid-Century Modern", pattern: "linear-gradient(135deg, #c65f38 20%, #e0a458 50%, #f7efe6 80%)" },
      { name: "Grandmillennial", pattern: "linear-gradient(135deg, #ff2e88 20%, #00e5ff 50%, #b0472e 80%)" }
    ];

    const vignette = document.getElementById("vignette");
    const eraText = document.getElementById("era");
    const buttons = document.getElementById("buttons");
    const overlay = document.getElementById("overlay");
    const overlayContent = document.getElementById("overlayContent");
    const scoreboard = document.getElementById("scoreboard");

    let currentEra = null;
    let score = 0;
    let round = 0;
    let bestScore = parseInt(localStorage.getItem("bestScore")) || 0;

    function getRandomEra() {
      return eras[Math.floor(Math.random() * eras.length)];
    }

    function createButtons() {
      buttons.innerHTML = "";
      eras.forEach(era => {
        const btn = document.createElement("button");
        btn.textContent = era.name;
        btn.classList.add("button");
        btn.addEventListener("click", () => checkGuess(era.name));
        buttons.appendChild(btn);
      });
    }

    function checkGuess(guess) {
      if (guess === currentEra.name) {
        score++;
        showOverlay("Correct! 🎉", "green");
      } else {
        showOverlay("Wrong! 😕", "red");
      }

      round++;
      if (round >= 8) {
        endGame();
      } else {
        currentEra = getRandomEra();
        updateVignette();
        updateScoreboard();
      }
    }

    function updateVignette() {
      const current = currentEra;
      const bg = current.pattern;
      vignette.style.backgroundImage = bg;
      eraText.textContent = current.name;
      eraText.style.animation = "fadeUp 0.7s var(--ease) both";
    }

    function updateScoreboard() {
      scoreboard.textContent = `Score: ${score} | Rounds: ${round}`;
    }

    function showOverlay(message, color) {
      overlayContent.textContent = message;
      overlay.style.color = color;
      overlay.classList.add("show");

      setTimeout(() => {
        overlay.classList.remove("show");
      }, 1500);
    }

    function endGame() {
      const result = score > bestScore ? "New Best!" : "Game Over";
      showOverlay(`${result} Your Score: ${score} | Best: ${bestScore}`, score > bestScore ? "gold" : "red");
      if (score > bestScore) {
        localStorage.setItem("bestScore", score);
      }
    }

    function startGame() {
      score = 0;
      round = 0;
      currentEra = getRandomEra();
      updateVignette();
      updateScoreboard();
      createButtons();
    }

    // Initialize game
    startGame();
  </script>
</body>
</html>