/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [step, setStep] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [expandedStep, setExpandedStep] = useState(null); const totalSteps = 5; const steps = [ { title: "Draw the first circle", explanation: "Begin by drawing a circle. This will be one of the two intersecting circles that form the Vesica Piscis.", }, { title: "Add the second circle", explanation: "Draw a second circle with the same radius. The center of this circle should be on the circumference of the first circle.", }, { title: "Observe the intersection", explanation: "Notice how the two circles intersect. The almond-shaped area in the middle is the Vesica Piscis.", }, { title: "Highlight the Vesica Piscis", explanation: "The Vesica Piscis is formed by the intersection of two circles with the same radius, where the center of each circle lies on the circumference of the other.", }, { title: "Add construction lines", explanation: "Draw lines connecting the centers of the circles and the points where they intersect. This forms two equilateral triangles within the Vesica Piscis.", }, ]; useEffect(() => { if (isPlaying && step < totalSteps - 1) { const timer = setTimeout(() => setStep(step + 1), 2000); return () => clearTimeout(timer); } }, [step, isPlaying]); const handlePlayPause = () => setIsPlaying(!isPlaying); const handleReset = () => { setStep(0); setIsPlaying(false); setExpandedStep(null); }; const handleStepClick = (index) => { setExpandedStep(expandedStep === index ? null : index); setStep(index); setIsPlaying(false); }; return (

Vesica Piscis Construction

{steps.map((s, index) => (

handleStepClick(index)}>

{s.title}

{expandedStep === index &&

{s.explanation}

}

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Vesica Piscis Construction

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; color: #333; } .container { text-align: center; background-color: white; padding: 30px; border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.1); max-width: 800px; width: 100%; } h1 { color: #2c3e50; margin-bottom: 20px; } .content { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .svg-container { flex: 1; margin-right: 20px; } .steps-container { flex: 1; text-align: left; } .step { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; } .step:hover { background-color: #e9ecef; } .step.active { border-color: #007bff; } .step.expanded { background-color: #e9ecef; } .step h3 { margin: 0; color: #495057; } .step p { margin-top: 10px; font-size: 14px; color: #6c757d; } .controls { margin-bottom: 20px; } button { margin: 0 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } a { color: #007bff; text-decoration: none; font-size: 14px; } a:hover { text-decoration: underline; } svg { max-width: 100%; height: auto; } svg circle, svg line, svg path, svg text { transition: all 0.5s ease; } `;

educatedBlackMosquito