`data/artifacts/11a1a4a15370/qwen3-14b.html`

412 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Should Robots Get Weekends?</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: "Helvetica Neue", sans-serif;
      touch-action: manipulation;
    }

    body {
      margin: 0;
      padding: 0;
      background: #f3f5f7;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: #333;
      overflow: hidden;
      user-select: none;
    }

    .container {
      width: 100%;
      max-width: 1440px;
      min-width: 390px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 80vh;
      min-height: 50vh;
    }

    .seesaw {
      width: 80%;
      height: 100%;
      transform: rotate(0deg);
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .left-side, .right-side {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 8px;
    }

    .left-side {
      left: 0;
      background: #e0f7fa;
    }

    .right-side {
      left: 50%;
      background: #f8bbd0;
    }

    .robot {
      width: 80px;
      height: 80px;
      background: #fff;
      border: 4px solid #ccc;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .robot::before, .robot::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: #333;
      border-radius: 50%;
    }

    .robot::before {
      top: -20px;
      left: 30px;
    }

    .robot::after {
      top: -20px;
      right: 30px;
    }

    .robot img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .robot--sleeping::before,
    .robot--sleeping::after {
      background: #aaa;
    }

    .robot--sleeping::before {
      top: 10px;
      left: 30px;
    }

    .robot--sleeping::after {
      top: 10px;
      right: 30px;
    }

    .robot--working img {
      filter: grayscale(100%);
    }

    .robot--working::before,
    .robot--working::after {
      background: #333;
    }

    .robot--working::before {
      top: -20px;
      left: 30px;
      animation: blink 1s infinite;
    }

    .robot--working::after {
      top: -20px;
      right: 30px;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      50% { opacity: 0.3; }
    }

    .caption {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s ease;
    }

    .controls {
      position: absolute;
      bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      z-index: 10;
    }

    button {
      background: #4285f4;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    button:focus {
      outline: none;
      box-shadow: 0 0 0 3px #ccc;
    }

    button:active {
      background: #357ae8;
    }

    .tooltip {
      position: absolute;
      background: #fff;
      border: 1px solid #ccc;
      padding: 8px 12px;
      font-size: 12px;
      border-radius: 4px;
      display: none;
      z-index: 20;
      pointer-events: none;
    }

    .tooltip.show {
      display: block;
    }

    .empty-state {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.95);
      padding: 30px;
      border: 2px dashed #aaa;
      border-radius: 8px;
      font-size: 18px;
      color: #555;
      text-align: center;
      display: none;
    }

    .error-state {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffebee;
      padding: 20px;
      border: 2px solid #f44336;
      border-radius: 8px;
      font-size: 16px;
      color: #d32f2f;
      text-align: center;
      display: none;
    }

    .completion-state {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #c8e6c9;
      padding: 20px;
      border: 2px solid #4caf50;
      border-radius: 8px;
      font-size: 16px;
      color: #2e7d32;
      text-align: center;
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <svg viewBox="0 0 100 100">
      <g id="seesaw" class="seesaw">
        <line x1="0" y1="50" x2="100" y2="50" stroke="#9e9e9e" stroke-width="6" />
        <line x1="0" y1="50" x2="100" y2="50" stroke="#ccc" stroke-width="4" />
        <g class="left-side">
          <rect x="0" y="0" width="50" height="100" fill="transparent" />
          <image x="10" y="10" width="30" height="30" href="https://upload.wikimedia.org/wikipedia/commons/0/0b/Robot_icon.svg" />
        </g>
        <g class="right-side">
          <rect x="50" y="0" width="50" height="100" fill="transparent" />
          <image x="60" y="10" width="30" height="30" href="https://upload.wikimedia.org/wikipedia/commons/0/0b/Robot_icon.svg" />
        </g>
      </g>
    </svg>
    <div class="caption" id="caption">Does this robot need a break?</div>
    <div class="controls">
      <button id="leftBtn" title="Tip left: Robots need rest.">Left</button>
      <button id="rightBtn" title="Tip right: Robots should work nonstop.">Right</button>
    </div>
    <div class="empty-state" id="emptyState">No opinion yet. Tip the seesaw!</div>
    <div class="error-state" id="errorState">Something went wrong. Refresh the page.</div>
    <div class="completion-state" id="completionState">The debate is over. Let robots decide!</div>
    <div class="tooltip" id="leftTooltip">Tip left: Robots need rest. 🛏️</div>
    <div class="tooltip" id="rightTooltip">Tip right: Robots should work nonstop. 💼</div>
  </div>
  <script>
    const seesaw = document.getElementById('seesaw');
    const caption = document.getElementById('caption');
    const leftBtn = document.getElementById('leftBtn');
    const rightBtn = document.getElementById('rightBtn');
    const leftTooltip = document.getElementById('leftTooltip');
    const rightTooltip = document.getElementById('rightTooltip');
    const emptyState = document.getElementById('emptyState');
    const errorState = document.getElementById('errorState');
    const completionState = document.getElementById('completionState');

    let tilt = 0;
    const maxTilt = 30;
    let isTipping = false;
    let currentSide = null;

    // Set tooltips
    leftBtn.addEventListener('mouseenter', () => {
      leftTooltip.style.left = `${leftBtn.offsetLeft + leftBtn.offsetWidth / 2}px`;
      leftTooltip.style.top = `${leftBtn.offsetTop - 40}px`;
      leftTooltip.classList.add('show');
    });
    leftBtn.addEventListener('mouseleave', () => leftTooltip.classList.remove('show'));

    rightBtn.addEventListener('mouseenter', () => {
      rightTooltip.style.left = `${rightBtn.offsetLeft + rightBtn.offsetWidth / 2}px`;
      rightTooltip.style.top = `${rightBtn.offsetTop - 40}px`;
      rightTooltip.classList.add('show');
    });
    rightBtn.addEventListener('mouseleave', () => rightTooltip.classList.remove('show'));

    function updateCaption() {
      let side = tilt > 0 ? 'left' : 'right';
      if (Math.abs(tilt) < 1) side = 'neutral';
      switch (side) {
        case 'neutral':
          caption.textContent = "Does this robot need a break?";
          break;
        case 'left':
          caption.textContent = "Robots get 2 days off. They're happy!";
          break;
        case 'right':
          caption.textContent = "Robots never sleep. Productivity is everything!";
          break;
      }
    }

    function tipSide(direction) {
      if (isTipping) return;
      isTipping = true;
      const speed = 2;
      const interval = setInterval(() => {
        if (direction === 'left' && tilt < maxTilt) {
          tilt += speed;
        } else if (direction === 'right' && tilt > -maxTilt) {
          tilt -= speed;
        } else {
          clearInterval(interval);
          isTipping = false;
        }
        seesaw.style.transform = `rotate(${tilt}deg)`;
        updateCaption();
      }, 16);
    }

    leftBtn.addEventListener('click', () => tipSide('left'));
    rightBtn.addEventListener('click', () => tipSide('right'));

    // Accessibility: keyboard
    leftBtn.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        tipSide('left');
      }
    });
    rightBtn.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        tipSide('right');
      }
    });

    // Visual feedback on focus
    leftBtn.addEventListener('focus', () => {
      leftTooltip.classList.add('show');
    });
    leftBtn.addEventListener('blur', () => leftTooltip.classList.remove('show'));

    rightBtn.addEventListener('focus', () => {
      rightTooltip.classList.add('show');
    });
    rightBtn.addEventListener('blur', () => rightTooltip.classList.remove('show'));

    // Initial state
    updateCaption();
    emptyState.style.display = 'block';

    // Completion state after a certain tilt
    const interval = setInterval(() => {
      if (Math.abs(tilt) > 25) {
        clearInterval(interval);
        seesaw.style.transition = 'none';
        seesaw.style.transform = `rotate(${tilt}deg)`;
        completionState.style.display = 'block';
        emptyState.style.display = 'none';
        caption.textContent = "The debate is over. Let robots decide!";
      }
    }, 1000);

    // Reset on double click
    window.addEventListener('dblclick', () => {
      tilt = 0;
      seesaw.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';
      seesaw.style.transform = `rotate(0deg)`;
      caption.textContent = "Does this robot need a break?";
      emptyState.style.display = 'block';
      completionState.style.display = 'none';
    });

    // Handle reduced motion
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      seesaw.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';
    } else {
      seesaw.style.transition = 'none';
    }
  </script>
</body>
</html>