Will you be my Valentine? 💘

\n\n

\n I hon des für di gmocht. Koan Druck… (ok a bissl Druck 😄)\n

\n\n

\n \n Ja 💞\n \n\n \n {noLabel}\n \n

\n\n

\n (Tipp: die richtige Ontwort isch die grüne 😌)\n

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

\n \n\n

Yay!!! 💖🎉

\n\n

\n Jetzt bin i die glücklichste Person der Welt.\n

\n\n

Dein Valentinstagsgeschenk 💌

🍝 Dinner + Dessert (von Klemi an Lisa - selber gekocht oder Restaurant: deine Wahl

🎬 Film deiner Wahl (ohne Proteste)

🫶 Unlimitierte Kuscheleinheiten

\n\n alert(\"Ok, dein Date isch jetzt festgesetzt 😄\")}\n style={styles.claimBtn}\n className=\"btn claimBtn\"\n >\n Buch dein Date ✨\n \n

\n\n {burst && (\n

\n {Array.from({ length: 18 }).map((_, i) => (\n \n 💖\n \n ))}\n

\n )}\n \n )}\n

\n );\n}\n\nconst styles: Record = {\n page: {\n minHeight: \"100svh\",\n display: \"grid\",\n placeItems: \"center\",\n padding:\n \"max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left))\",\n background:\n \"radial-gradient(1200px 600px at 30% 20%, #ffe3ee 0%, transparent 55%), radial-gradient(900px 500px at 70% 70%, #ffd6e6 0%, transparent 60%), linear-gradient(180deg, #fff7fb 0%, #ffeaf4 100%)\",\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif',\n position: \"relative\",\n overflow: \"hidden\",\n },\n heartsLayer: {\n position: \"absolute\",\n inset: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\",\n },\n card: {\n width: \"min(520px, 94vw)\",\n background: \"rgba(255,255,255,0.72)\",\n backdropFilter: \"blur(8px)\",\n border: \"1px solid rgba(255, 182, 203, 0.45)\",\n borderRadius: 24,\n boxShadow: \"0 20px 60px rgba(255, 105, 180, 0.18)\",\n padding: \"22px 18px\",\n textAlign: \"center\",\n position: \"relative\",\n },\n img: {\n display: \"block\",\n margin: \"0 auto 10px\",\n maxWidth: \"100%\",\n height: \"auto\",\n },\n h1: {\n margin: \"6px 0 6px\",\n fontSize: \"clamp(26px, 6.2vw, 34px)\",\n lineHeight: 1.12,\n letterSpacing: \"-0.02em\",\n textWrap: \"balance\" as any,\n },\n sub: {\n margin: \"0 0 16px\",\n opacity: 0.75,\n fontSize: \"clamp(14px, 3.8vw, 16px)\",\n lineHeight: 1.35,\n },\n row: {\n display: \"flex\",\n gap: 12,\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n marginTop: 8,\n },\n yesBtn: {\n backgroundColor: \"#16a34a\",\n color: \"white\",\n border: \"none\",\n borderRadius: 16,\n padding: \"12px 18px\",\n cursor: \"pointer\",\n boxShadow: \"0 10px 22px rgba(22,163,74,0.18)\",\n transition: \"transform 180ms ease, filter 180ms ease\",\n minHeight: 48,\n },\n noBtn: {\n backgroundColor: \"#ef4444\",\n color: \"white\",\n border: \"none\",\n borderRadius: 16,\n padding: \"12px 18px\",\n cursor: \"pointer\",\n maxWidth: \"92%\",\n transition: \"transform 180ms ease, opacity 180ms ease\",\n minHeight: 48,\n },\n tinyHint: {\n marginTop: 14,\n fontSize: \"clamp(12px, 3.4vw, 13px)\",\n opacity: 0.55,\n lineHeight: 1.25,\n },\n successWrap: {\n position: \"relative\",\n },\n yay: {\n fontSize: \"clamp(34px, 7.5vw, 52px)\",\n color: \"#ff4fa0\",\n fontWeight: 800,\n marginTop: 6,\n letterSpacing: \"-0.02em\",\n lineHeight: 1.05,\n },\n successText: {\n marginTop: 8,\n opacity: 0.8,\n fontSize: \"clamp(14px, 3.8vw, 16px)\",\n lineHeight: 1.35,\n },\n planCard: {\n margin: \"16px auto 12px\",\n width: \"min(420px, 100%)\",\n background: \"rgba(255,255,255,0.8)\",\n border: \"1px solid rgba(255, 182, 203, 0.55)\",\n borderRadius: 18,\n padding: \"14px 14px\",\n textAlign: \"left\",\n },\n planTitle: {\n fontWeight: 800,\n marginBottom: 8,\n color: \"#ff4fa0\",\n fontSize: \"clamp(14px, 3.8vw, 16px)\",\n },\n planLine: {\n margin: \"6px 0\",\n fontSize: \"clamp(14px, 3.7vw, 15px)\",\n lineHeight: 1.3,\n },\n claimBtn: {\n marginTop: 6,\n border: \"none\",\n borderRadius: 16,\n padding: \"12px 16px\",\n cursor: \"pointer\",\n background: \"#ff4fa0\",\n color: \"white\",\n fontWeight: 700,\n boxShadow: \"0 14px 30px rgba(255, 79, 160, 0.22)\",\n minHeight: 48,\n width: \"min(320px, 100%)\",\n },\n burstLayer: {\n position: \"absolute\",\n inset: 0,\n pointerEvents: \"none\",\n overflow: \"hidden\",\n },\n};\n\nconst css = `\n .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }\n\n .shake { animation: shake 320ms ease; }\n @keyframes shake {\n 0% { transform: translateX(0); }\n 25% { transform: translateX(-6px); }\n 50% { transform: translateX(6px); }\n 75% { transform: translateX(-4px); }\n 100% { transform: translateX(0); }\n }\n\n .floatHeart {\n position: absolute;\n bottom: -24px;\n animation: floatUp 6s linear infinite;\n user-select: none;\n }\n @keyframes floatUp {\n 0% { transform: translateY(0) translateX(0); }\n 100% { transform: translateY(-110vh) translateX(18px); }\n }\n\n .burstHeart {\n position: absolute;\n animation: burst 900ms ease-out forwards;\n user-select: none;\n }\n @keyframes burst {\n 0% { transform: translateY(10px) scale(0.6); opacity: 0; }\n 20% { opacity: 1; }\n 100% { transform: translateY(-40px) scale(1.15); opacity: 0; }\n }\n\n button:hover { filter: brightness(1.05); }\n\n @media (max-width: 420px) {\n .btnRow { gap: 10px; }\n .btnRow { display: grid !important; grid-template-columns: 1fr; }\n .yesBtn, .noBtn, .claimBtn { width: 100% !important; }\n .heroImg { width: 140px !important; height: 140px !important; }\n }\n\n @media (max-height: 700px) and (max-width: 420px) {\n .heroImg { width: 120px !important; height: 120px !important; }\n }\n`;\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/track\" && request.method === \"GET\") {\n return new Response(\"ok\", { status: 200 });\n }\n\n if (url.pathname === \"/track\" && request.method === \"POST\") {\n try {\n const data = await request.json().catch(() => ({}));\n const answer = (data as any)?.answer ?? \"unknown\";\n const clicks = (data as any)?.noClicks ?? 0;\n const label = (data as any)?.label ?? \"\";\n const at = (data as any)?.at ?? new Date().toISOString();\n\n const subject =\n answer === \"yes\"\n ? \"💘 Valentine Antwort: JA\"\n : answer === \"no\"\n ? \"💔 Valentine Antwort: NA\"\n : \"Valentine Antwort\";\n\n const textLines = [\n `Answer: ${answer}`,\n `No clicks: ${clicks}`,\n label ? `Label: ${label}` : undefined,\n `Time: ${at}`,\n ].filter(Boolean);\n\n const text = textLines.join(\"\\n\");\n\n // Try sending to Gmail; if restricted, fallback to owner email.\n try {\n await email({\n to: \"fbfb7fb@gmail.com\",\n subject,\n text,\n });\n console.log(\"email sent via explicit 'to':\", { subject, at });\n return new Response(JSON.stringify({ ok: true, mode: \"to\" }), {\n headers: { \"content-type\": \"application/json\" },\n });\n } catch (errTo) {\n console.log(\"email(to) failed, falling back to owner:\", errTo);\n\n await email({\n subject,\n text,\n });\n\n console.log(\"email sent via owner fallback:\", { subject, at });\n return new Response(JSON.stringify({ ok: true, mode: \"owner\" }), {\n headers: { \"content-type\": \"application/json\" },\n });\n }\n } catch (err) {\n console.log(\"track/email error:\", err);\n return new Response(\n JSON.stringify({ ok: false, error: String(err) }),\n { status: 500, headers: { \"content-type\": \"application/json\" } },\n );\n }\n }\n\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n

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