all's chronosphere

Code

\n setCode(e.target.value)}\n className=\"code-textarea\"\n />\n \n

Presets:

\n \n \n \n \n \n \n

Configuration:

\n \n Color: \n setColor(e.target.value)} \n />\n \n \n Point Count: \n setPointCount(Number(e.target.value))} \n min=\"1\" \n max=\"1000\"\n />\n \n \n Particle Size: \n \n \n \n \n

Output

{output}

Visualization

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n all's chronosphere\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\nbutton {\n margin: 10px 5px;\n padding: 5px 10px;\n}\ntextarea {\n font-family: monospace;\n font-size: 14px;\n}\npre {\n background-color: #f0f0f0;\n padding: 10px;\n border-radius: 5px;\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 14px;\n}\n.flex-container {\n display: flex;\n gap: 20px;\n}\n.flex-item {\n flex: 1;\n}\n.code-textarea {\n width: 100%;\n height: 300px;\n font-family: monospace;\n}\n.output-pre {\n height: 300px;\n overflow-y: auto;\n}\n.visualization-canvas {\n border: 1px solid black;\n}\nlabel {\n display: block;\n margin: 10px 0;\n}\ninput[type=\"color\"], input[type=\"number\"], select {\n margin-left: 10px;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/chronoGen/code/main.tsx","extension","actionData","errors"]