`data/artifacts/0066d3284995/mac1__qwen2-5vl-7b.html`

142 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</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1440px;
            width: 390px;
            padding-left: 5%;
            padding-right: 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            background-color: #fff;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        }
        @media (min-width: 768px) {
            .container {
                max-width: initial;
                width: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>The Ship of State <button>Steered by Committee</button></h1>
        <svg id="ship-of-state" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300">
            <g id="steer">
                <polygon points="479,82.5 436,105.5 451,150.5 398,173.5" fill="#d648ab"/>
                <rect x="50" y="150" width="400" height="100" rx="25" ry="25" fill="#4dbf4a" transform="rotate(-90, 75, -35) scale(.6)">
                    <title>Ship</title>
                </rect>
            </g>
            <path id="oarsman" d="M87.5,150S125,167.5 162.5,150Q200,32.5 497.5,32.5l-202,150z" fill="#f8b819"/>
            <path id="cargo" d="M350,0S467.5,-32.5 -600,-122Q-812.5,150 350,150Zm320,240L350,240v-50l-90 50" fill="#f8b819"/>
        </svg>
        <div id="caption">
            <p></p>
            <button class="toggle">Toggle Light/Dark</button>
        </div>
    </div>
    <script>
        const toggle = document.querySelector(".toggle");
        let isDark = false;
        const container = document.querySelector("body");
        const captionDiv = document.querySelector("#caption");

        function updateCaption(newText) {
            captionDiv.textContent = newText;
        }

        function makeSVGPoint(x, y) { return "M" + (x || 0) + "," + (y || 0); }
        function setLineGradient(lineId, startColor, endColor) {
            let gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
            gradient.setAttribute("id", lineId);
            gradient.setAttribute("x1", "0%");
            gradient.setAttribute("y1", "0%");
            gradient.setAttribute("x2", "100%");
            gradient.setAttribute("y2", "0%");
            gradient.setAttribute("spreadMethod", "reflect");
            let stopStart = document.createElementNS("http://www.w3.org/2000/svg", "stop");
            stopStart.setAttribute("id", lineId + "_startStop");
            stopStart.setAttribute("offset", "0%");
            stopStart.setAttribute("style", `stop-color: ${startColor};`);
            let stopEnd = document.createElementNS("http://www.w3.org/2000/svg", "stop");
            stopEnd.setAttribute("id", lineId + "_endStop");
            stopEnd.setAttribute("offset", "100%");
            stopEnd.setAttribute("style", `stop-color: ${endColor};`);
            gradient.appendChild(stopStart);
            gradient.appendChild(stopEnd);
            let path = document.querySelector(`#${lineId}`);
            path.setAttributeNS("http://www.w3.org/2000/svg", "gradient:href", lineId);
        }

        function makeSVGPath(point1, point2) {
            return `<path d="M${point1} ${point2}" fill="none" stroke="#eaeaea"stroke-width="10" id="oarsmanPath"/>`;
        }

        function toggleTheme() {
            isDark = !isDark;
            if (isDark) {
                container.classList.add("dark");
                document.body.setAttribute("data-theme", "dark");
                captionDiv.style.color = "#fff";
                document.querySelector(".toggle").textContent = "Toggle Light/Dark";
            } else {
                container.classList.remove("dark");
                captionDiv.style.color = "#000";
                document.querySelector(".toggle").textContent = "Toggle Dark/Light";
            }
        }

        function updateSVGPath(lineId, point1) {
            const line = document.querySelector(`#${lineId}`);
            if (line) { // check existence and use id otherwise
                let newPoint = makeSVGPoint(point1);
                line.setAttribute("d", newPoint); // apply update to path element with given id
            }
        }

        function dragOarsman(event, steerGroup) {
            document.addEventListener('mouseup', () => {
                const point = makeSVGPoint(event.clientX - (window.innerWidth / 2), event.clientY + window.innerHeight * .3);
                document.querySelector(`#${steerGroup} #cargo`).setAttribute("d", `M${point}S-80,150 346.27,-99Q620,-81 375,45`);
                updateCaption("The ship moves faster when the oarsman steers correctly.");
            });

            document.querySelector(`#${steerGroup}`).style.cursor = "move";
        }

        function dragCargo(event) {
            document.addEventListener('mouseup', () => {
                const point = makeSVGPoint(-event.clientX + (window.innerWidth / 2), event.clientY - window.innerHeight * .3);
                let newPoints = [
                    `M${point} L40,150 S-80,-99 Q620,17.5 ${event.clientX}-110.9 217`
                ];
                document.querySelector(`#${steerGroup}`).style.cursor = "not-allowed";
                updateSVGPath("cargo", point);
                document.querySelector(`#oarsmanPath`).setAttribute("d", newPoints.join(" "));
                updateCaption("The ship's cargo becomes unstable when the oarsmen push harder.");
            });
        }

        const steerGroup = document.getElementById("steer");

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