\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 = \"rosylove\";\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}","deleted","label",[99],"permalink","https://www.val.town/x/imankii01/rosylove/code/main.tsx","extension","actionData","errors"]