\n Will you be my Valentine, {GIRL_NAME}? 💘\n

\n\n

\n \n Yes 💚\n \n\n \n

\n\n

\n (Click Yes!!!)\n

\n \n ) : (\n <>\n \n

Yay!!! 💖🎉

\n Okay cool… now go to your birthday message 😌\n

\n \n )}\n \n )}\n\n {/* PAGE 2 */}\n {page === 2 && (\n \n {confettiOn && }\n\n

\n Happy Birthday Baby Girl 🎂💗\n

\n\n

To my strong, black, smart & gorgeous woman

\n\n {/* Photo + mini glow */}\n

\n $\"Her\"$ \n

\n\n

\n \n Letter for {NICKNAME} 💌\n

\n\n \n

\n\n \n setPage(1)}>Back 💘\n\n setPage(3)}>\n Next: Flowers 💐\n \n

\n\n

\n Tip: paste her photo link at the top where it says{\" \"}\n HER_PHOTO.\n

\n \n )}\n\n {/* PAGE 3 */}\n {page === 3 && (\n \n

\n \n Flowers for My Love 💐\n \n

Click each note

\n\n \n\n

\n setPage(2)}>\n Back to Letter 💌\n \n

\n \n )}\n

\n \n );\n}\n\n/* -----------------------------------\n Bouquet Board (mobile safe layout)\n------------------------------------ */\nfunction BouquetBoard({ bouquetImg }) {\n const notes = useMemo(\n () => [\n {\n id: 1,\n title: \"Sunflower 🌻\",\n msg: \"You’re my sunflower — you brighten my whole day.\",\n },\n { id: 2, title: \"Rose 🌹\", msg: \"My heart rose the day I met you.\" },\n {\n id: 3,\n title: \"Pink Tulip 🌷\",\n msg: \"I’m tulip-ly in love with you, liefiee.\",\n },\n { id: 4, title: \"Daisy 🌼\", msg: \"I think about you every daisy.\" },\n { id: 5, title: \"Lavender 💜\", msg: \"You calm my mind like lavender.\" },\n { id: 6, title: \"Orchid 🪷\", msg: \"You’re rare… like an orchid.\" },\n { id: 7, title: \"Lily 💐\", msg: \"You’re my peace — my lily.\" },\n {\n id: 8,\n title: \"Peony 🌺\",\n msg: \"You’re beautiful in a way that feels expensive and effortless.\",\n },\n {\n id: 9,\n title: \"Cherry Blossom 🌸\",\n msg: \"You make my life feel like spring.\",\n },\n {\n id: 10,\n title: \"Baby’s Breath 🤍\",\n msg: \"You’re the soft part of my love. The little things that matter most.\",\n },\n ],\n [],\n );\n\n return (\n

\n {/* IMPORTANT: this class makes the mobile CSS work */}\n

\n {/* LEFT NOTES */}\n

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

\n\n {/* BOUQUET CENTER */}\n

\n\n $\"Bouquet\"$ \n\n

A bouquet for a 10 ✨

\n\n {/* RIGHT NOTES */}\n

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

\n );\n}\n\n/* -----------------------------------\n Note Card (click open)\n------------------------------------ */\nfunction NoteCard({ note }) {\n const [open, setOpen] = useState(false);\n\n return (\n setOpen((p) => !p)}\n style={{\n ...styles.noteCard,\n transform: open ? \"scale(1.03)\" : \"scale(1)\",\n }}\n >\n

{note.title}

\n\n

{open ? note.msg : \"Tap to open 💌\"}

\n \n );\n}\n\n/* -----------------------------------\n UI Components\n------------------------------------ */\nfunction Card({ children }) {\n return

{children}

;\n}\n\nfunction PrimaryButton({ children, onClick }) {\n return (\n \n );\n}\n\n/* -----------------------------------\n Effects\n------------------------------------ */\nfunction ConfettiBurst() {\n const pieces = new Array(70).fill(0);\n\n return (\n

\n {pieces.map((_, i) => (\n \n ))}\n

\n );\n}\n\nfunction FloatingHearts() {\n const hearts = new Array(18).fill(0);\n\n return (\n

\n {hearts.map((_, i) => (\n \n 💗\n

\n ))}\n

\n );\n}\n\nfunction Sparkles() {\n const sparkles = new Array(22).fill(0);\n\n return (\n

\n {sparkles.map((_, i) => (\n \n ✨\n

\n ))}\n

\n );\n}\n\n/* -----------------------------------\n Styles\n------------------------------------ */\nconst styles = {\n app: {\n minHeight: \"100vh\",\n background: \"linear-gradient(135deg, #ff2d7a, #ffd1e1)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"18px\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n\n shell: {\n width: \"min(980px, 95vw)\",\n position: \"relative\",\n zIndex: 2,\n },\n\n card: {\n width: \"100%\",\n borderRadius: \"24px\",\n background: \"rgba(255,255,255,0.92)\",\n padding: \"26px\",\n boxShadow: \"0px 18px 50px rgba(0,0,0,0.18)\",\n border: \"1px solid rgba(255,255,255,0.35)\",\n textAlign: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n\n h1: {\n margin: 0,\n fontSize: \"42px\",\n color: \"#ff2d7a\",\n letterSpacing: \"-0.5px\",\n },\n\n sub: {\n marginTop: \"10px\",\n marginBottom: \"0px\",\n fontSize: \"16px\",\n color: \"#333\",\n },\n\n bigYay: {\n fontSize: \"52px\",\n fontWeight: \"900\",\n color: \"#ff2d7a\",\n marginTop: \"10px\",\n },\n\n yesBtn: {\n margin: \"10px\",\n padding: \"12px 24px\",\n backgroundColor: \"#1ea54c\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"14px\",\n cursor: \"pointer\",\n fontWeight: \"800\",\n boxShadow: \"0px 10px 25px rgba(0,0,0,0.12)\",\n transition: \"0.2s ease\",\n },\n\n noBtn: {\n fontSize: \"16px\",\n margin: \"10px\",\n padding: \"12px 22px\",\n backgroundColor: \"#ff2b2b\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"14px\",\n cursor: \"pointer\",\n fontWeight: \"700\",\n boxShadow: \"0px 10px 25px rgba(0,0,0,0.12)\",\n },\n\n primaryBtn: {\n padding: \"12px 18px\",\n borderRadius: \"14px\",\n border: \"none\",\n background: \"#ff2d7a\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"800\",\n fontSize: \"15px\",\n boxShadow: \"0px 10px 24px rgba(0,0,0,0.12)\",\n },\n\n /* Page 2 photo */\n photoWrap: {\n marginTop: \"18px\",\n width: \"210px\",\n height: \"210px\",\n borderRadius: \"999px\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n position: \"relative\",\n },\n\n photoGlow: {\n position: \"absolute\",\n inset: \"-10px\",\n borderRadius: \"999px\",\n background:\n \"radial-gradient(circle, rgba(255,45,122,0.35), transparent 70%)\",\n filter: \"blur(2px)\",\n },\n\n photo: {\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n borderRadius: \"999px\",\n border: \"5px solid rgba(255,255,255,0.85)\",\n position: \"relative\",\n zIndex: 2,\n boxShadow: \"0px 18px 40px rgba(0,0,0,0.18)\",\n },\n\n letterBox: {\n marginTop: \"18px\",\n background: \"rgba(255,255,255,0.85)\",\n borderRadius: \"18px\",\n padding: \"16px\",\n border: \"1px solid rgba(0,0,0,0.06)\",\n textAlign: \"left\",\n },\n\n textarea: {\n marginTop: \"10px\",\n width: \"100%\",\n minHeight: \"200px\",\n borderRadius: \"14px\",\n border: \"1px solid rgba(0,0,0,0.12)\",\n padding: \"12px\",\n fontSize: \"14px\",\n outline: \"none\",\n resize: \"vertical\",\n fontFamily: \"Arial, sans-serif\",\n },\n\n /* Page 3 board */\n board: {\n marginTop: \"18px\",\n borderRadius: \"22px\",\n overflow: \"hidden\",\n border: \"1px solid rgba(255,255,255,0.35)\",\n background: \"linear-gradient(135deg, #ff4d88, #ff9bbd)\",\n boxShadow: \"0px 14px 40px rgba(0,0,0,0.12)\",\n padding: \"16px\",\n },\n\n boardInner: {\n display: \"grid\",\n gridTemplateColumns: \"1fr 1.1fr 1fr\",\n gap: \"14px\",\n alignItems: \"center\",\n },\n\n noteColumn: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"12px\",\n },\n\n /* ✅ FIXED bouquet center (glass background) */\n bouquetCenter: {\n position: \"relative\",\n display: \"grid\",\n placeItems: \"center\",\n padding: \"18px\",\n borderRadius: \"22px\",\n background: \"rgba(255,255,255,0.14)\",\n border: \"1px solid rgba(255,255,255,0.22)\",\n boxShadow: \"0px 14px 30px rgba(0,0,0,0.12)\",\n overflow: \"hidden\",\n },\n\n /* ✅ FIXED glow (no more weird checkerboard look) */\n bouquetGlow: {\n position: \"absolute\",\n inset: 0,\n borderRadius: \"22px\",\n background:\n \"radial-gradient(circle at top, rgba(255,255,255,0.22), transparent 60%)\",\n filter: \"blur(1px)\",\n zIndex: 1,\n },\n\n /* ✅ FIXED bouquet image sizing */\n bouquetImg: {\n width: \"320px\",\n maxWidth: \"78vw\",\n filter: \"drop-shadow(0px 18px 20px rgba(0,0,0,0.25))\",\n position: \"relative\",\n zIndex: 3,\n },\n\n bouquetCaption: {\n marginTop: \"10px\",\n fontSize: \"13px\",\n color: \"rgba(255,255,255,0.9)\",\n fontWeight: \"bold\",\n position: \"relative\",\n zIndex: 3,\n },\n\n noteCard: {\n position: \"relative\",\n borderRadius: \"16px\",\n border: \"1px solid rgba(0,0,0,0.10)\",\n background: \"rgba(255,255,255,0.92)\",\n padding: \"12px\",\n cursor: \"pointer\",\n boxShadow: \"0px 12px 22px rgba(0,0,0,0.14)\",\n transition: \"all 0.25s ease\",\n textAlign: \"left\",\n width: \"100%\",\n },\n\n tape: {\n position: \"absolute\",\n top: \"-10px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"70px\",\n height: \"20px\",\n borderRadius: \"6px\",\n background: \"rgba(255, 224, 235, 0.9)\",\n border: \"1px solid rgba(0,0,0,0.06)\",\n },\n\n noteTitle: {\n fontWeight: \"bold\",\n color: \"#ff2d7a\",\n fontSize: \"14px\",\n },\n\n noteText: {\n marginTop: \"8px\",\n color: \"#333\",\n fontSize: \"14px\",\n lineHeight: \"1.35\",\n },\n\n /* Confetti */\n confettiWrap: {\n position: \"absolute\",\n inset: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\",\n borderRadius: \"24px\",\n },\n\n confettiPiece: {\n position: \"absolute\",\n top: \"-10px\",\n width: \"10px\",\n height: \"10px\",\n borderRadius: \"4px\",\n background: \"white\",\n animationName: \"confettiFall\",\n animationTimingFunction: \"ease-in\",\n animationIterationCount: 1,\n },\n\n /* Background */\n floatWrap: {\n position: \"absolute\",\n inset: 0,\n zIndex: 0,\n pointerEvents: \"none\",\n },\n\n sparkWrap: {\n position: \"absolute\",\n inset: 0,\n zIndex: 0,\n pointerEvents: \"none\",\n },\n};\n\n/* -----------------------------------\n Client + Server\n------------------------------------ */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render(\n <>\n \n \n ,\n );\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n For ${GIRL_NAME} 💗\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/jeenyuhs/valentine/code/main.tsx","extension","actionData","errors"]