`data/artifacts/0a09f6b98e09/qwen3-14b.html`

349 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Weekend Robot Debate</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background-color: #f4f4f4;
      color: #333;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-tap-highlight-color: transparent;
    }

    svg {
      width: 100%;
      height: 100%;
      max-width: 1440px;
      max-height: 720px;
    }

    .seesaw {
      transform: rotate(0deg);
      transition: transform 0.2s ease-in-out;
    }

    .seesaw-active {
      transform: rotate(10deg);
    }

    .seesaw-inactive {
      transform: rotate(-10deg);
    }

    .robot, .weekend {
      fill: #0066cc;
    }

    .robot:focus, .weekend:focus {
      outline: 2px solid #0066cc;
    }

    .caption {
      position: absolute;
      top: 40px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      width: 100%;
      text-shadow: 1px 1px 2px #000;
      transition: all 0.3s ease;
    }

    .caption.error {
      color: #ff0000;
    }

    .caption.success {
      color: #00cc00;
    }

    .caption.loading {
      color: #000;
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      visibility: hidden;
      pointer-events: none;
    }

    .overlay.visible {
      visibility: visible;
      pointer-events: auto;
    }

    .control {
      position: absolute;
      width: 100px;
      height: 100px;
      background: #ccc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      user-select: none;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .control:active {
      background: #999;
    }

    .control:focus {
      outline: 2px solid #0066cc;
    }

    .slider {
      position: absolute;
      bottom: 20px;
      width: 80%;
      height: 10px;
      background: #ccc;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
    }

    .slider-handle {
      width: 20px;
      height: 20px;
      background: #0066cc;
      border-radius: 50%;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
      user-select: none;
    }

    .slider-handle:focus {
      outline: 2px solid #0066cc;
    }

    @media (max-width: 768px) {
      .caption {
        font-size: 18px;
      }

      .control {
        font-size: 16px;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      .seesaw {
        transition: transform 0.4s ease-in-out;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .seesaw {
        transition: none;
      }
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 1000 600">
    <g id="seesaw" class="seesaw">
      <rect x="250" y="100" width="500" height="40" rx="20" ry="20" fill="#ccc" />
      <line x1="0" y1="300" x2="1000" y2="300" stroke="#0066cc" stroke-width="4" />
    </g>

    <g id="robot" transform="translate(150, 200)" class="robot">
      <circle cx="50" cy="50" r="30" fill="#0066cc" />
      <line x1="35" y1="50" x2="65" y2="50" stroke="#fff" stroke-width="4" />
      <rect x="20" y="80" width="60" height="100" rx="10" ry="10" fill="#003366" />
      <circle cx="50" cy="150" r="25" fill="#00cc99" />
    </g>

    <g id="weekend" transform="translate(850, 200)" class="weekend">
      <path d="M50,20 C50,50 200,50 200,50 C200,50 200,100 250,100 C300,100 300,50 350,50 C350,50 350,20 250,20 Z" fill="#0066cc" />
      <text x="250" y="125" font-size="30" text-anchor="middle" fill="#fff">Weekend</text>
    </g>

    <text id="caption" class="caption">Decide: Should Robots Get Weekends?</text>

    <g id="controls">
      <g class="control" transform="translate(300, 100)">
        <text>Left</text>
      </g>
      <g class="control" transform="translate(700, 100)">
        <text>Right</text>
      </g>
    </g>

    <rect id="slider" class="slider" x="100" y="550" width="800" height="10" rx="5" ry="5">
      <circle id="sliderHandle" class="slider-handle" cx="500" cy="5" r="10" />
    </rect>

    <g id="overlay" class="overlay">
      <text id="overlayText"></text>
    </g>
  </svg>

  <script>
    const seesaw = document.getElementById('seesaw');
    const caption = document.getElementById('caption');
    const overlayText = document.getElementById('overlayText');
    const overlay = document.getElementById('overlay');
    const slider = document.getElementById('slider');
    const sliderHandle = document.getElementById('sliderHandle');
    const controls = document.querySelectorAll('.control');

    let balance = 0;
    let lastBalance = 0;

    function updateCaption() {
      if (balance > 0) {
        caption.textContent = "Robots Deserve Weekends! 🤖";
      } else if (balance < 0) {
        caption.textContent = "Robots Should Work All Week! 💼";
      } else {
        caption.textContent = "Decide: Should Robots Get Weekends?";
      }
    }

    function updateSeesaw() {
      if (balance === 0) {
        seesaw.classList.remove('seesaw-active', 'seesaw-inactive');
      } else if (balance > 0) {
        seesaw.classList.add('seesaw-active');
        seesaw.classList.remove('seesaw-inactive');
      } else {
        seesaw.classList.add('seesaw-inactive');
        seesaw.classList.remove('seesaw-active');
      }
    }

    function updateSliderPosition() {
      const sliderWidth = slider.clientWidth;
      const handleX = (balance + 1) * (sliderWidth / 2) + 100;
      sliderHandle.setAttribute('cx', handleX);
    }

    function updateState() {
      updateCaption();
      updateSeesaw();
      updateSliderPosition();
    }

    function simulateLoad() {
      overlay.classList.add('visible');
      overlayText.textContent = "Thinking... ⏱️";
      setTimeout(() => {
        overlay.classList.remove('visible');
        overlayText.textContent = "";
        if (Math.random() > 0.5) {
          caption.classList.add('success');
        } else {
          caption.classList.add('error');
        }
        setTimeout(() => {
          caption.classList.remove('success', 'error');
        }, 2000);
      }, 2000);
    }

    controls.forEach(control => {
      control.addEventListener('click', () => {
        const direction = control.querySelector('text').textContent === 'Left' ? -1 : 1;
        balance += direction;
        lastBalance = balance;
        updateState();
        simulateLoad();
      });

      control.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          const direction = control.querySelector('text').textContent === 'Left' ? -1 : 1;
          balance += direction;
          lastBalance = balance;
          updateState();
          simulateLoad();
        }
      });
    });

    sliderHandle.addEventListener('mousedown', (e) => {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    });

    let isDragging = false;
    function handleMouseMove(e) {
      isDragging = true;
      const rect = slider.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const percentage = Math.max(0, Math.min(1, x / rect.width));
      balance = Math.round((percentage - 0.5) * 2);
      updateState();
      simulateLoad();
    }

    function handleMouseUp() {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      isDragging = false;
    }

    // Keyboard accessibility
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        balance = Math.max(balance - 1, -100);
        updateState();
        simulateLoad();
      } else if (e.key === 'ArrowRight') {
        e.preventDefault();
        balance = Math.min(balance + 1, 100);
        update州;
        simulateLoad();
      }
    });

    window.addEventListener('resize', () => {
      updateSliderPosition();
    });

    updateState();
  </script>
</body>
</html>