`data/artifacts/0066d3284995/qwen25-7b.html`

98 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Ship of State Steered by Committee</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            transition: background-color 0.3s ease;
            color: white;
            text-align: center;
        }
        body.light-theme {
            background-color: #f5f5f5;
            color: black;
        }
        svg {
            width: 80%;
            max-width: 1440px;
            min-width: 390px;
        }
        .caption {
            margin-top: 20px;
            font-size: 1.5em;
        }
    </style>
</head>
<body class="light-theme">
    <div id="wrapper" tabindex="0">
        <svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
            <path d="M50,400 C90,350 150,450 210,380 S370,480 430,520 L660,380 Q760,370 760,400 T890,420 C960,550 860,610 700,580 S440,420 410,360 Q380,300 350,300 S210,350 140,400 Z" fill="url(#ship)" stroke="black" stroke-width="5"/>
            <rect x="270" y="400" width="690" height="80" fill="#ddd" stroke="black" stroke-width="5"/>
            <g id="committee">
                <rect x="310" y="420" width="250" height="50" fill="#ff8c00" />
                <rect x="570" y="420" width="250" height="50" fill="#d5d5d5" stroke="#000"/>
                <rect x="830" y="420" width="150" height="50" fill="#32a87f" />
            </g>
        </svg>
        <div class="caption">Drag the committee sections to change control!</div>

        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const svg = document.querySelector('svg');
                const committee = document.getElementById('committee');
                const caption = document.querySelector('.caption');

                let isDragging = false;
                let startDragX;

                committee.addEventListener('mousedown', (e) => {
                    if (!isDragging) {
                        e.preventDefault();
                        startDragX = e.clientX - parseInt(committee.style.transform.split('(')[1].split('px')[0]);
                        document.body.style.cursor = 'grabbing';
                        isDragging = true;
                    }
                });

                document.addEventListener('mousemove', (e) => {
                    if (isDragging) {
                        const newX = e.clientX - startDragX;
                        committee.style.transform = `translate(${newX}px, 420px)`;
                        caption.textContent = `Control Shifted to: ${['Captain', 'Steering Committee Member A', 'Steering Committee Member B'][Math.round(newX / 250)]}`;
                    }
                });

                document.addEventListener('mouseup', () => {
                    if (isDragging) {
                        committee.style.transform = '';
                        isDragging = false;
                        document.body.style.cursor = 'grab';
                    }
                });
            });

            function toggleTheme() {
                const body = document.getElementsByTagName('body')[0];
                const newClass = body.classList.contains('light-theme') ? '' : 'light-theme';
                body.className = newClass;
            }

            document.getElementById('wrapper').addEventListener('keydown', e => {
                if (e.key === 'Escape' || e.key === 'Enter') {
                    toggleTheme();
                }
            });
        </script>
    </div>

    <button onclick="toggleTheme()" id="themeToggle">Toggle Light/Dark Theme</button>
</body>
</html>