`data/artifacts/176d578251e3/qwen25-7b.html`

99 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 Physics Menu</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .container {
            position: relative;
            width: 200px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
        }
        .icon {
            position: absolute;
            opacity: 0.7;
            transition: transform 0.3s ease-in-out, scale 0.2s ease-in-out, opacity 0.1s;
        }
        .center-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 50px;
            background-color: #4CAF50;
            color: white;
            font-size: 18px;
            border-radius: 50px;
        }
        .icon:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container" id="menu">
        <button class="center-button">+</button>
        <script>
            const container = document.getElementById('menu');
            let expanded = false;

            function expandMenu() {
                if (expanded) return;
                expanded = true;
                const iconArray = [
                    {angle: 60, top: -50},
                    {angle: 120, top: -30},
                    {angle: 180, top: -10},
                    {angle: 240, top: -30},
                    {angle: 300, top: -50}
                ];
                iconArray.forEach(icon => {
                    const iconElement = document.createElement('button');
                    iconElement.className = 'icon';
                    container.appendChild(iconElement);
                    setTimeout(() => {
                        iconElement.style.transform = `rotate(${icon.angle}deg) translateX(${icon.top}px)`;
                    }, 100);
                });
            }

            function retractMenu() {
                if (!expanded) return;
                expanded = false;
                const icons = Array.from(container.querySelectorAll('.icon'));
                icons.forEach((icon, index) => {
                    setTimeout(() => {
                        icon.remove();
                    }, (icons.length - index - 1) * 100);
                });
            }

            container.addEventListener('click', () => {
                if (!expanded) expandMenu();
                else retractMenu();
            });

            document.querySelectorAll('.icon').forEach(icon => {
                icon.addEventListener('mouseover', () => {
                    icon.style.transform = 'scale(1.2)';
                });
                icon.addEventListener('mouseout', () => {
                    icon.style.transform = 'scale(1)';
                });
            });
        </script>
    </div>
</body>
</html>