`data/artifacts/104018fe5adc/gemma3-12b.html`

209 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>This or That - Designer Wallcoverings</title>
  <style>
    :root {
      --bg: #faf8f4; /* Ivory Gallery */
      --surface: #ffffff;
      --text: #1c1a17;
      --muted: #9b948a;
      --accent: #b0472e;
      --line: rgba(0, 0, 0, .08);
      --shadow: rgba(0, 0, 0, .12);
      --ease: cubic-bezier(.22, 1, .36, 1);
    }

    body {
      margin: 0;
      font-family: system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      height: 100vh;
      overflow: hidden; /* Prevent scrollbars */
    }

    header {
      padding: 48px;
      display: flex;
      align-items: center;
      justify-content: left;
      background-color: var(--surface);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    header h1 {
      font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
      font-size: 67px;
      line-height: 1.1;
      letter-spacing: .18em;
      margin: 0;
      white-space: nowrap; /* Prevent wrapping */
    }

    .poll-container {
      padding: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      height: calc(100vh - 100px); /* Account for header height */
    }

    .choice {
      width: 85%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      background-color: var(--surface);
      padding: 32px;
      border-radius: 14px;
      box-shadow: 0 8px 24px var(--shadow);
    }

    .style-swatch {
      width: 160px;
      height: 160px;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer; /* Indicate clickable */
    }

    .damask {
      background: repeating-linear-gradient(45deg, #fff 0%, #fff 18px, #ccc 18px, #ccc 36px);
    }

    .geometric {
      background: repeating-linear-gradient(45deg, #fff 0%, #fff 12px, #eee 12px, #eee 24px);
    }


    .vote-bar {
      width: 100%;
      height: 8px;
      background-color: var(--accent);
      border-radius: 4px;
      transform: scaleX(0); /* Initially hidden */
      transform-origin: left;
      transition: transform .3s ease-in-out;
    }

    .winner-stamp {
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      background-color: var(--accent);
      color: var(--surface);
      padding: 8px 16px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }

    .winner-stamp.active {
        opacity: 1;
    }


    /* Mobile Responsive */
    @media (max-width: 600px) {
      header h1 {
          font-size: 48px;
      }
      .poll-container{
          padding: 24px;
          height: calc(100vh - 72px);
      }

      .choice {
        width: 95%;
      }

      .style-swatch {
        width: 120px;
        height: 120px;
      }
    }


  </style>
</head>
<body>
  <header>
    <h1>DESIGNER WALLCOVERINGS</h1>
  </header>

  <div class="poll-container">
    <h2>This or That?</h2>
    <p style="text-align:center; font-size: 18px;">Choose your favorite wallcovering style!</p>

    <div class="choice" data-style="damask">
      <h3>Damask</h3>
      <div class="style-swatch damask"></div>
      <div class="vote-bar"></div>
    </div>

    <div class="choice" data-style="geometric">
      <h3>Geometric</h3>
      <div class="style-swatch geometric"></div>
      <div class="vote-bar"></div>
    </div>


    <div class="winner-stamp" id="winnerStamp"></div>
  </div>

  <script>
    const choices = document.querySelectorAll('.choice');
    const voteBars = document.querySelectorAll('.vote-bar');
    const winnerStamp = document.getElementById('winnerStamp');

    choices.forEach(choice => {
      choice.addEventListener('click', () => {
        const style = choice.dataset.style;
        const otherStyle = (style === 'damask') ? 'geometric' : 'damask';

        // Animate vote bar fill
        const voteBar = choice.querySelector('.vote-bar');
        voteBar.style.transform = 'scaleX(1)';
        setTimeout(() => {
          voteBar.style.transform = 'scaleX(0)'; // Reset after animation
        }, 300);

        // Determine winner and display stamp
        const allChoices = document.querySelectorAll('.choice');
        let damaskVotes = 0;
        let geometricVotes = 0;

        allChoices.forEach(c => {
            if (c.dataset.style === 'damask') {
                damaskVotes++;
            } else {
                geometricVotes++;
            }
        });

        let winningStyle = (damaskVotes > geometricVotes) ? 'damask' : 'geometric';

        const winnerChoice = document.querySelector(`[data-style="${winningStyle}"]`);
        winnerStamp.textContent = `"${winningStyle.charAt(0).toUpperCase() + winningStyle.slice(1)}" Wins!`; // Display a simple "Wins!" message
        winnerStamp.classList.add('active');

        setTimeout(() => {
            winnerStamp.classList.remove('active');
            winnerStamp.textContent = "";
        }, 1500);
      });
    });
  </script>
</body>
</html>