\n {hearts.map(heart => (\n \n ❤️\n

\n ))}\n \n );\n};\n\n// Sample Preview Component\nconst SamplePreview = () => {\n const [showLetter, setShowLetter] = useState(false);\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n

Preview Our Templates

\n\n

\n Love Counter\n

\n 365 Days of Love ❤️\n

\n\n

\n Love Letter\n

\n setShowLetter(!showLetter)}\n className=\"bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600 transition\"\n >\n {showLetter ? \"Hide Letter\" : \"Read Letter\"}\n \n {showLetter && (\n

\n My dearest love, every moment with you feels like a beautiful dream...\n

\n )}\n

\n\n

\n Photo Memories\n

\n {[1, 2, 3, 4, 5, 6].map(num => (\n \n ))}\n

\n\n

\n Our Song\n

\n setIsPlaying(!isPlaying)}\n className=\"bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600 transition\"\n >\n {isPlaying ? \"🎵 Pause\" : \"🎶 Play\"}\n \n

\n );\n};\n\n// Feedback Form Component\nconst FeedbackSection = () => (\n

Share Your Love 💌

Help us make your love story even more special

\n \n Give Feedback\n \n

\n);\n\nconst extractYoutubeThumbnail = (url: string) => {\n try {\n const videoId = url.split(\"v=\")[1]?.split(\"&\")[0]\n || url.split(\"youtu.be/\")[1]?.split(\"?\")[0];\n return videoId\n ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\n : null;\n } catch (error) {\n console.error(\"Invalid YouTube URL\", error);\n return null;\n }\n};\n// Main App Component\nfunction App() {\n const [view, setView] = useState(\"home\");\n const [selectedTemplate, setSelectedTemplate] = useState(null);\n const [loading, setLoading] = useState(false);\n const [formData, setFormData] = useState({\n partnerName: \"\",\n startDate: \"\",\n loveLetter: \"\",\n musicUrl: \"\",\n musicThumbnail: \"\",\n images: [],\n });\n const [generatedUrl, setGeneratedUrl] = useState(null);\n const musicUrlRef = useRef(null);\n\n const handleTemplateSelect = (template) => {\n setSelectedTemplate(template);\n setView(\"create\");\n };\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n const handleMusicUrlBlur = async () => {\n if (musicUrlRef.current?.value) {\n try {\n const thumbnail = extractYoutubeThumbnail(musicUrlRef.current.value);\n if (thumbnail) {\n setFormData(prev => ({\n ...prev,\n musicUrl: musicUrlRef.current.value,\n musicThumbnail: thumbnail,\n }));\n }\n } catch (error) {\n console.error(\"Error extracting thumbnail\", error);\n }\n }\n };\n const handleImageUpload = async (e) => {\n const files = Array.from(e.target.files);\n\n if (files.length > 6) {\n alert(\"Maximum 6 images allowed\");\n return;\n }\n\n try {\n const base64Images = await Promise.all(files.map(fileToBase64));\n\n setFormData(prev => ({\n ...prev,\n images: base64Images,\n }));\n } catch (error) {\n console.error(\"Image upload error\", error);\n alert(\"Failed to upload images\");\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const shareableId = nanoid(12);\n setLoading(true);\n\n try {\n const response = await fetch(\"/api/love-template\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n ...formData,\n shareableId,\n template: selectedTemplate.id,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n console.error(\"💔 API Error:\", data.error);\n alert(data.error); // Show the fun error message\n return;\n }\n\n if (!data.shareableId) {\n console.error(\"❌ API did not return a shareableId:\", data);\n alert(\"Unexpected error! Try again later. 🚀\");\n return;\n }\n\n setGeneratedUrl(`/love/${data.shareableId}`);\n setView(\"success\");\n } catch (error) {\n console.error(\"🔥 Unexpected error:\", error);\n alert(\"Oh no! Something crazy happened. Try again in a moment. 🌍\");\n } finally {\n setLoading(false);\n }\n };\n\n // Render Home View with enhanced landing page\n const renderHomeView = () => (\n

\n Create Your Eternal Love Story 💑\n

\n Express your love in a unique and beautiful way\n

\n\n \n

\n Choose Any Theme to Create! 🎉\n

\n\n

\n {LOVE_TEMPLATES.map(template => (\n handleTemplateSelect(template)}\n >\n \n

\n {template.name}\n

{template.description}

\n {template.features.map(feature => (\n \n {feature}\n \n ))}\n

\n ))}\n

\n\n \n \n );\n // Render Create View\n const renderCreateView = () => (\n

\n \n

\n Create Your Love Story: {selectedTemplate.name}\n

\n );\n\n // Render Success View\n const renderSuccessView = () => (\n

\n Love Story Created Successfully! 🎉\n

\n Your unique love story is now live!\n

\n {generatedUrl && (\n

\n \n {\n navigator.clipboard.writeText(`https://${window.location.host}${generatedUrl}`);\n alert(\"Link copied to clipboard!\");\n }}\n className=\"mt-2 w-full bg-pink-600 text-white py-3 rounded-md hover:bg-pink-700 transition-colors\"\n >\n Copy Shareable Link\n \n

\n )}\n

\n );\n\n return (\n

\n \n {view === \"home\" && renderHomeView()}\n {view === \"create\" && renderCreateView()}\n {view === \"success\" && renderSuccessView()}\n

\n );\n}\n\n// Client-side rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// Server response handling different routes\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 3;\n\n // Initialize Love Templates Table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_love_templates_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n shareable_id TEXT UNIQUE NOT NULL,\n partner_name TEXT NOT NULL,\n start_date TEXT NOT NULL,\n love_letter TEXT NOT NULL,\n music_url TEXT,\n music_thumbnail TEXT,\n template_type TEXT NOT NULL,\n images TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(request.url);\n\n // API: Create Love Template\n if (url.pathname === \"/api/love-template\" && request.method === \"POST\") {\n try {\n const payload = await request.json();\n const {\n partnerName,\n startDate,\n loveLetter,\n musicUrl,\n musicThumbnail,\n images,\n shareableId,\n template,\n } = payload;\n\n // Check required fields\n if (!shareableId || !partnerName || !startDate || !loveLetter || !template) {\n console.error(\"❌ Missing required fields!\", payload);\n return Response.json({\n error: \"Oops! Your love isn't strong enough! Try filling all fields with love. 💖\",\n }, { status: 400 });\n }\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_love_templates_${SCHEMA_VERSION} \n (shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images) \n VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n shareableId,\n partnerName,\n startDate,\n loveLetter,\n musicUrl || \"\",\n musicThumbnail || \"\",\n template,\n JSON.stringify(images),\n ],\n );\n\n return Response.json({\n message: \"Love story successfully crafted! 💕\",\n shareableId, // Make sure shareableId is returned correctly\n });\n } catch (error) {\n console.error(\"🔥 API Error:\", error);\n\n // Fun error messages\n const funnyErrors = [\n \"🚨 Love energy too low! Try again after hugging your partner. 🤗\",\n \"💔 Oh no! Cupid missed the shot. Try again later! 🏹\",\n \"🌹 Your love needs more passion! Whisper 'I love you' to the screen and try again. 😘\",\n \"😱 API fell in love with your request and froze! Try again soon. 💘\",\n \"✨ Oops! The romance overload broke our database. Give it a sec. ⏳\",\n ];\n\n // Pick a random funny message\n const randomMessage = funnyErrors[Math.floor(Math.random() * funnyErrors.length)];\n\n return Response.json({ error: randomMessage }, { status: 500 });\n }\n }\n\n // API: Get Love Template\n if (url.pathname.startsWith(\"/love/\")) {\n const shareableId = url.pathname.split(\"/\").pop();\n\n try {\n const result = await sqlite.execute(\n `\n SELECT * FROM ${KEY}_love_templates_${SCHEMA_VERSION} \n WHERE shareable_id = ?\n `,\n [shareableId],\n );\n\n if (result.rows.length === 0) {\n return new Response(\"Love Website Not Found\", { status: 404 });\n }\n\n const websiteData = result.rows[0];\n const parsedImages = JSON.parse(websiteData.images);\n\n return new Response(\n `\n \n \n ${websiteData.partner_name}'s Love Story\n \n \n \n \n\n \n

\n ${\n Array(15).fill(0).map(() => `\n

❤️

\n `).join(\"\")\n }\n

\n\n \n

\n \n

💖 ${websiteData.partner_name}'s Love Story 💖

Together Since: ${websiteData.start_date}

\n\n \n

\n\n \n ${\n websiteData.music_thumbnail\n ? `\n

Our Song 🎶

\n \n ▶ Listen Now\n \n

\n `\n : \"\"\n }\n\n \n

Love Letter 💌

${websiteData.love_letter}

\n\n \n ${\n parsedImages.length > 0\n ? `\n

Our Memories 📸

\n ${\n parsedImages.map(img => `\n

\n `).join(\"\")\n }\n

\n `\n : \"\"\n }\n

\n\n \n\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n } catch (error) {\n console.error(\"Error fetching love template:\", error);\n return new Response(\"Internal Server Error\", { status: 500 });\n }\n }\n // API: Get All Love Templates (Posts)\n if (url.pathname === \"/api/love-templates\" && request.method === \"GET\") {\n try {\n // Parse query parameters for pagination\n const params = new URLSearchParams(url.search);\n const page = parseInt(params.get(\"page\")) || 1; // Default to page 1\n const limit = parseInt(params.get(\"limit\")) || 10; // Default to 10 items per page\n const offset = (page - 1) * limit;\n\n // Get total count of records\n const countResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${KEY}_love_templates_${SCHEMA_VERSION}\n `);\n const total = countResult.rows[0].total;\n const totalPages = Math.ceil(total / limit);\n\n // Fetch paginated records\n const result = await sqlite.execute(`\n SELECT shareable_id, partner_name, start_date, love_letter, music_url, music_thumbnail, template_type, images, created_at \n FROM ${KEY}_love_templates_${SCHEMA_VERSION} \n ORDER BY created_at DESC \n LIMIT ${limit} OFFSET ${offset}\n `);\n\n // Build HTML response\n let html = `\n \n \n \n \n \n Love Templates\n \n \n \n

Love Templates

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `;\n\n result.rows.forEach(row => {\n html += `\n \n \n \n \n \n \n \n \n \n \n `;\n });\n\n html += `\n \n

Shareable ID	Partner Name	Start Date	Love Letter	Music URL	Music Thumbnail	Template Type	Images	Created At
${row.shareable_id}	${row.partner_name}	${row.start_date}	${row.love_letter}	Music	$\"Thumbnail\"$	${row.template_type}	${row.images ? `` : \"No Image\"}	${row.created_at}

`;\n\n for (let i = 1; i <= totalPages; i++) {\n html += `${i}`;\n }\n\n html += `\n

\n \n `;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n console.error(\"Error fetching love templates:\", error);\n return new Response(\"

Internal Server Error

\", {\n status: 500,\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // Default homepage\n return new Response(\n `\n \n \n Valentine -Rose Day\n \n \n \n 🌹\">\n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1739183843235],"version",36,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","imankii01","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yckxGT1p0V1JYeEgxU2dmTzhQSnpSZ1VIRkMifQ","forkedVal","interval","slug","imankii01/rosylove","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,279,282],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739183843235],{"_117":145,"_142":-5,"_115":146,"_112":147},35,["D",1739183843111],"0331f2dc-e79b-11ef-a497-e6cdfca9ef9f",{"_117":149,"_142":-5,"_115":150,"_112":151},34,["D",1739183630199],"844b7d8a-e79a-11ef-b933-e6cdfca9ef9f",{"_117":153,"_142":-5,"_115":154,"_112":155},33,["D",1739183629938],"8420afd8-e79a-11ef-b933-e6cdfca9ef9f",{"_117":157,"_142":-5,"_115":158,"_112":159},32,["D",1739183421582],"07f1773a-e79a-11ef-b10b-e6cdfca9ef9f",{"_117":161,"_142":-5,"_115":162,"_112":163},31,["D",1739183419068],"06722576-e79a-11ef-8dfe-e6cdfca9ef9f",{"_117":165,"_142":-5,"_115":166,"_112":167},30,["D",1738932801983],"8305a49a-e552-11ef-89b1-e6cdfca9ef9f",{"_117":169,"_142":-5,"_115":170,"_112":171},29,["D",1738925304891],"0e67514e-e541-11ef-b2c7-e6cdfca9ef9f",{"_117":173,"_142":-5,"_115":174,"_112":175},28,["D",1738925304606],"0e3c47ba-e541-11ef-859b-e6cdfca9ef9f",{"_117":177,"_142":-5,"_115":178,"_112":179},27,["D",1738925283833],"01db43f4-e541-11ef-804b-e6cdfca9ef9f",{"_117":181,"_142":-5,"_115":182,"_112":183},26,["D",1738925283530],"01ac5ff8-e541-11ef-957d-e6cdfca9ef9f",{"_117":185,"_142":-5,"_115":186,"_112":187},25,["D",1738925191864],"cb0865be-e540-11ef-b836-e6cdfca9ef9f",{"_117":189,"_142":-5,"_115":190,"_112":191},24,["D",1738925143653],"ae4cf73c-e540-11ef-b836-e6cdfca9ef9f",{"_117":193,"_142":-5,"_115":194,"_112":195},23,["D",1738925143428],"ae295746-e540-11ef-8996-e6cdfca9ef9f",{"_117":197,"_142":-5,"_115":198,"_112":199},22,["D",1738925001729],"59b519f2-e540-11ef-a830-e6cdfca9ef9f",{"_117":201,"_142":-5,"_115":202,"_112":203},21,["D",1738925001417],"59850316-e540-11ef-933a-e6cdfca9ef9f",{"_117":205,"_142":-5,"_115":206,"_112":207},20,["D",1738924933108],"30cfa052-e540-11ef-b6d4-e6cdfca9ef9f",{"_117":209,"_142":-5,"_115":210,"_112":211},19,["D",1738924932723],"3092a684-e540-11ef-b6c1-e6cdfca9ef9f",{"_117":213,"_142":-5,"_115":214,"_112":215},18,["D",1738924918843],"284ce494-e540-11ef-a517-e6cdfca9ef9f",{"_117":217,"_142":-5,"_115":218,"_112":219},17,["D",1738924918529],"281d1368-e540-11ef-8ac0-e6cdfca9ef9f",{"_117":221,"_142":-5,"_115":222,"_112":223},16,["D",1738920599492],"19c68376-e536-11ef-84d4-e6cdfca9ef9f",{"_117":225,"_142":-5,"_115":226,"_112":227},15,["D",1738920599195],"19975b8c-e536-11ef-947b-e6cdfca9ef9f",{"_117":229,"_142":-5,"_115":230,"_112":231},14,["D",1738920175950],"1d508858-e535-11ef-bef6-e6cdfca9ef9f",{"_117":233,"_142":-5,"_115":234,"_112":235},13,["D",1738919067893],"88df1920-e532-11ef-91d9-e6cdfca9ef9f",{"_117":237,"_142":-5,"_115":238,"_112":239},12,["D",1738919067849],"88d81846-e532-11ef-b1f6-e6cdfca9ef9f",{"_117":241,"_142":-5,"_115":242,"_112":243},11,["D",1738918985033],"577ea0f8-e532-11ef-a85d-e6cdfca9ef9f",{"_117":245,"_142":-5,"_115":246,"_112":247},10,["D",1738918985031],"57797448-e532-11ef-a2d4-e6cdfca9ef9f",{"_117":249,"_142":-5,"_115":250,"_112":251},9,["D",1738918952525],"441a0ac0-e532-11ef-861d-e6cdfca9ef9f",{"_117":253,"_142":-5,"_115":254,"_112":255},8,["D",1738918952237],"43ee2db0-e532-11ef-b761-e6cdfca9ef9f",{"_117":257,"_142":-5,"_115":258,"_112":259},7,["D",1738918773996],"d9af58d4-e531-11ef-b4ee-e6cdfca9ef9f",{"_117":261,"_142":-5,"_115":262,"_112":263},6,["D",1738918773676],"d97fab5c-e531-11ef-b4ee-e6cdfca9ef9f",{"_117":265,"_142":-5,"_115":266,"_112":267},5,["D",1738918545001],"5132bef6-e531-11ef-95be-e6cdfca9ef9f",{"_117":269,"_142":-5,"_115":270,"_112":271},4,["D",1738918544719],"51081944-e531-11ef-9998-e6cdfca9ef9f",{"_117":273,"_142":-5,"_115":274,"_112":275},3,["D",1738918503855],"38b21dc2-e531-11ef-9b98-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":277,"_112":278},["D",1738918503848],"38abe59c-e531-11ef-8e91-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":280,"_112":281},["D",1738918042600],"25bd421a-e530-11ef-85a7-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":283,"_112":284},["D",1738918019271],"17d7544c-e530-11ef-85a7-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":292,"_129":130,"_137":138,"_98":99,"_370":31,"_371":31,"_50":51,"_372":373},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":293,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":124,"_125":31,"_126":31,"_127":-5,"_20":294,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":295},["D",1739183843235],{"_129":130,"_131":132},[296,298,300,302,304,306,308,310,312,314,316,318,320,322,324,326,328,330,332,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368],{"_117":118,"_142":-5,"_115":297,"_112":110},["D",1739183843235],{"_117":145,"_142":-5,"_115":299,"_112":147},["D",1739183843111],{"_117":149,"_142":-5,"_115":301,"_112":151},["D",1739183630199],{"_117":153,"_142":-5,"_115":303,"_112":155},["D",1739183629938],{"_117":157,"_142":-5,"_115":305,"_112":159},["D",1739183421582],{"_117":161,"_142":-5,"_115":307,"_112":163},["D",1739183419068],{"_117":165,"_142":-5,"_115":309,"_112":167},["D",1738932801983],{"_117":169,"_142":-5,"_115":311,"_112":171},["D",1738925304891],{"_117":173,"_142":-5,"_115":313,"_112":175},["D",1738925304606],{"_117":177,"_142":-5,"_115":315,"_112":179},["D",1738925283833],{"_117":181,"_142":-5,"_115":317,"_112":183},["D",1738925283530],{"_117":185,"_142":-5,"_115":319,"_112":187},["D",1738925191864],{"_117":189,"_142":-5,"_115":321,"_112":191},["D",1738925143653],{"_117":193,"_142":-5,"_115":323,"_112":195},["D",1738925143428],{"_117":197,"_142":-5,"_115":325,"_112":199},["D",1738925001729],{"_117":201,"_142":-5,"_115":327,"_112":203},["D",1738925001417],{"_117":205,"_142":-5,"_115":329,"_112":207},["D",1738924933108],{"_117":209,"_142":-5,"_115":331,"_112":211},["D",1738924932723],{"_117":213,"_142":-5,"_115":333,"_112":215},["D",1738924918843],{"_117":217,"_142":-5,"_115":335,"_112":219},["D",1738924918529],{"_117":221,"_142":-5,"_115":337,"_112":223},["D",1738920599492],{"_117":225,"_142":-5,"_115":339,"_112":227},["D",1738920599195],{"_117":229,"_142":-5,"_115":341,"_112":231},["D",1738920175950],{"_117":233,"_142":-5,"_115":343,"_112":235},["D",1738919067893],{"_117":237,"_142":-5,"_115":345,"_112":239},["D",1738919067849],{"_117":241,"_142":-5,"_115":347,"_112":243},["D",1738918985033],{"_117":245,"_142":-5,"_115":349,"_112":247},["D",1738918985031],{"_117":249,"_142":-5,"_115":351,"_112":251},["D",1738918952525],{"_117":253,"_142":-5,"_115":353,"_112":255},["D",1738918952237],{"_117":257,"_142":-5,"_115":355,"_112":259},["D",1738918773996],{"_117":261,"_142":-5,"_115":357,"_112":263},["D",1738918773676],{"_117":265,"_142":-5,"_115":359,"_112":267},["D",1738918545001],{"_117":269,"_142":-5,"_115":361,"_112":271},["D",1738918544719],{"_117":273,"_142":-5,"_115":363,"_112":275},["D",1738918503855],{"_117":90,"_142":-5,"_115":365,"_112":278},["D",1738918503848],{"_117":124,"_142":-5,"_115":367,"_112":281},["D",1738918042600],{"_117":31,"_142":-5,"_115":369,"_112":284},["D",1738918019271],"page","count","prs",[],"routes/_app","actionData","errors"]