Hello, World! with Reflection

/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { return (

Hello, World!

); } function client() { const root = document.getElementById('root'); if (root) { createRoot(root).render(); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Hello, World! with Reflection

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, #87CEEB, #E0F6FF); perspective: 500px; overflow: hidden; } .container { position: relative; display: flex; flex-direction: column; align-items: center; } .text { font-family: Arial, sans-serif; font-size: 5rem; font-weight: bold; color: #333; transform: rotateX(20deg); transform-origin: center bottom; position: relative; margin-bottom: 0.1em; } .text::after { content: 'Hello, World!'; position: absolute; left: 0; top: 100%; transform: scaleY(-1); background: linear-gradient(to top, rgba(51,51,51,0.8), transparent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.7; } `;

GDI_HelloWorld