/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const LOFI_GIRL_URL = "https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1"; const LOFI_BOY_URL = "https://www.youtube.com/embed/4xDzrJKXOOY?autoplay=1"; function App() { const [selectedPlaylist, setSelectedPlaylist] = useState(null); const selectPlaylist = (url) => { setSelectedPlaylist(url); }; return (

Lofi Playlist Selector

{selectedPlaylist && (

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` Lofi Playlist Selector

`, { headers: { "content-type": "text/html", }, } ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; } h1 { color: #333; } .button-container { margin-bottom: 20px; } button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .source-link { margin-top: 20px; font-size: 14px; } .source-link a { color: #666; text-decoration: none; } .source-link a:hover { text-decoration: underline; } @media (max-width: 600px) { .container { padding: 10px; } button { padding: 10px 20px; font-size: 14px; } } `; export default server;

LofiGirlSimpleRunner