/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { motion } from "https://esm.sh/framer-motion@11.0.3?deps=react@18.2.0,react-dom@18.2.0"; import ReactDOM from "https://esm.sh/react-dom@18.2.0"; import React from "https://esm.sh/react@18.2.0";
function App() { const draw = { hidden: { pathLength: 0, opacity: 0 }, visible: (i) => { const delay = i * 0.5; return { pathLength: 1, opacity: 1, transition: { pathLength: { delay, type: "spring", duration: 2, bounce: 0 }, opacity: { delay, duration: 0.01 }, }, }; }, };
return ( <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", background: "white", padding: "20px", boxSizing: "border-box", }} > <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} style={{ background: "#C0C1FF", borderRadius: "20px", padding: "clamp(15px, 5vw, 30px)", boxShadow: "0 10px 25px rgba(0,0,0,0.1)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", width: "100%", maxWidth: "500px", aspectRatio: "3/4", margin: "0 auto", overflow: "hidden", }} >
<motion.h2
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
style={{
color: "white",
marginBottom: "12px",
fontWeight: "600",
textAlign: "center",
}}
>
Sorry dong, Iloveyou
</motion.h2>
<motion.svg
width="100%"
height="100%"
viewBox="0 0 465 347"
preserveAspectRatio="xMidYMid meet"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{
maxWidth: "100%",
maxHeight: "100%",
transform: "scale(0.9)",
}}
initial="hidden"
animate="visible"
>
{/* TANAN NGA PATHS MO — WALA GIN USAB */}
<motion.path
d="M5.14075 278.719C5.14075 274.252 7.35327 269.681..."
stroke="white"
strokeWidth="10"
strokeLinecap="round"
variants={draw}
custom={0}
/>
{/* (same paths as before — wala ko gin-untat diri para indi lawig) */}
</motion.svg>
</motion.div>
</div>
); }
function client() { ReactDOM.createRoot(document.getElementById("root")).render(); }
if (typeof document !== "undefined") { client(); }
export default async function server(request) { return new Response(
<html> <head> <title>Sorry dong, I love you</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: system-ui, sans-serif; } </style> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html>,
{ headers: { "content-type": "text/html" } } ); }