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

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

\n Preview Our Templates\n

\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\n 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\nconst FeedbackSection = () => (\n

\n Share Your Love 💌\n

\n Help us make your love story even more special\n

\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};\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 const handleSubmit = async (e) => {\n e.preventDefault();\n const shareableId = nanoid(12);\n setLoading(true);\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 setGeneratedUrl(`/love/${data.shareableId}`);\n setView(\"success\");\n } catch (error) {\n console.error(\"Error creating love story:\", error);\n alert(\"Failed to create your love story. Please try again.\");\n } finally {\n setLoading(false); // Hide loading indicator\n }\n };\n\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 Partner's Name\n \n

\n \n Relationship Start Date\n \n \n

\n Love Letter\n \n

\n \n Our Special Song (YouTube URL)\n \n \n {formData.musicThumbnail && (\n \n )}\n

\n \n Upload Memories (Max 6)\n \n \n

\n {formData.images.map((img, index) => (\n \n ))}\n

\n \n {loading ? \"Creating...\" : \"Create Love Story\"}\n \n \n

\n );\n\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(\n `https://${window.location.host}${generatedUrl}`,\n );\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\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 { 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 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 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 template created successfully\",\n shareableId,\n });\n } catch (error) {\n console.error(\"Error creating love template:\", error);\n return Response.json({ error: \"Failed to create love template\" }, {\n status: 500,\n });\n }\n }\n\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\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",[98],"permalink","https://www.val.town/x/steleus/untitled-4855/code/main.ts","extension","actionData","errors"]