`data/artifacts/176d578251e3/qwen3-14b.html`

147 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Radial Spring Menu</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #111;
      overflow: hidden;
      font-family: sans-serif;
    }

    .menu {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      perspective: 1000px;
    }

    .menu-button {
      position: absolute;
      width: 40px;
      height: 40px;
      background: #444;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      transition: transform 0.3s ease-out, box-shadow 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
    }

    .menu-button:hover {
      transform: scale(1.2);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }

    .menu-button svg {
      width: 20px;
      height: 20px;
      fill: white;
    }

    .center-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: #555;
      border-radius: 50%;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      cursor: pointer;
      user-select: none;
      z-index: 10;
    }

    .center-button svg {
      width: 30px;
      height: 30px;
      fill: white;
    }
  </style>
</head>
<body>
  <div class="menu" id="menu">
    <div class="center-button" id="centerButton">
      <svg viewBox="0 0 24 24"><path d="M12,2L15.09,8.26L22,9.27L17,14.14L18.18,21.02L12,17.77L5.82,21.02L7,14.14L2,9.27L8.91,8.26L12,2Z"/></svg>
    </div>
    <div class="menu-button" id="button1"><svg viewBox="0 0 24 24"><path d="M12,2C7,2,2.63,5.07,1,12s5.07,10,10,10s10-5.07,10-10S19,2,12,2Zm0,18c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8s-3.58,8-8,8Zm0-14c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6s-2.69-6-6-6Z"/></svg></div>
    <div class="menu-button" id="button2"><svg viewBox="0 0 24 24"><path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"/></svg></div>
    <div class="menu-button" id="button3"><svg viewBox="0 0 24 24"><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2Zm0,18c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8s-3.59,8-8,8Zm0-14c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6s-2.69-6-6-6Z"/></svg></div>
    <div class="menu-button" id="button4"><svg viewBox="0 0 24 24"><path d="M12,2C7,2,2.63,5.07,1,12s5.07,10,10,10s10-5.07,10-10S19,2,12,2Zm0,18c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8s-3.58,8-8,8Zm0-14c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6s-2.69-6-6-6Z"/></svg></div>
    <div class="menu-button" id="button5"><svg viewBox="0 0 24 24"><path d="M12,2C7,2,2.63,5.07,1,12s5.07,10,10,10s10-5.07,10-10S19,2,12,2Zm0,18c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8s-3.58,8-8,8Zm0-14c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6s-2.69-6-6-6Z"/></svg></div>
    <div class="menu-button" id="button6"><svg viewBox="0 0 24 24"><path d="M12,2C7,2,2.63,5.07,1,12s5.07,10,10,10s10-5.07,10-10S19,2,12,2Zm0,18c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8s-3.58,8-8,8Zm0-14c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6s-2.69-6-6-6Z"/></svg></div>
  </div>

  <script>
    const menu = document.getElementById('menu');
    const centerButton = document.getElementById('centerButton');
    const buttons = [document.getElementById('button1'), document.getElementById('button2'), document.getElementById('button3'), document.getElementById('button4'), document.getElementById('button5'), document.getElementById('button6')];
    let isOpen = false;
    let angleStep = 360 / buttons.length;

    const center = { x: 100, y: 100 };
    const radius = 60;

    function animateSpring(callback) {
      let timeStart;
      function step(time) {
        if (!timeStart) timeStart = time;
        const elapsed = time - timeStart;
        const progress = Math.min(elapsed / 400, 1);
        const easing = 1 - Math.cos(progress * Math.PI);
        callback(easing);
        if (progress < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }

    function updatePositions(open) {
      buttons.forEach((btn, i) => {
        const angle = i * angleStep - 90;
        const rad = open ? radius : 0;
        const x = center.x + rad * Math.cos(angle * Math.PI / 180);
        const y = center.y + rad * Math.sin(angle * Math.PI / 180);
        btn.style.left = `${x - 20}px`;
        btn.style.top = `${y - 20}px`;
      });
    }

    centerButton.addEventListener('click', () => {
      isOpen = !isOpen;
      animateSpring((easing) => {
        const open = isOpen;
        const rad = open ? radius : 0;
        buttons.forEach((btn, i) => {
          const angle = i * angleStep - 90;
          const x = center.x + rad * Math.cos(angle * Math.PI / 180);
          const y = center.y + rad * Math.sin(angle * Math.PI / 180);
          btn.style.left = `${x - 20}px`;
          btn.style.top = `${y - 20}px`;
        });
      });
    });

    updatePositions(isOpen);
  </script>
</body>
</html>