Random Image Placement

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}",[],[177],{"_102":185,"_95":186,"_157":187,"_159":-5,"_160":138,"_161":188,"_163":116,"_104":189,"_99":190,"_166":191,"_168":192,"_170":22,"_171":-5,"_172":193,"_98":194},"b6f418fc-e595-11ef-82f4-e6cdfca9ef9f","constants","1bd7a3dc-f1ff-4361-a079-42614f4c4eb1",66,["D",1738961665402],7,"script","export const DATABASE_TABLENAME = \"VALENTINES_DAY_CARD_IMGS\";",[],[186],{"_102":196,"_95":197,"_157":114,"_159":-5,"_160":138,"_161":137,"_163":116,"_104":198,"_99":199,"_166":180,"_168":200,"_170":22,"_171":-5,"_172":201,"_98":202},"9c2ebeda-e597-11ef-a625-e6cdfca9ef9f","frontend_card",["D",1738962479481],41,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// import { getImages } from \"./get-images\";\n\n// const images = await getImages(\"image\", 12);\n// export const IMAGE_URLS = images;\n\n// mock data\nconst IMAGE_URLS = [\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957396306_pngtree-valentine-day-gift-box-open-love-heart-and-rose-potale-greeting-png-image_6564851.png\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959510139_2020-heart-pounding-animation.gif\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959545863_sugary-heart-valentine-png-5692911.png\",\n \"https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png\",\n];\n\nfunction Envelope({ onAnimationComplete }) {\n const [isOpening, setIsOpening] = useState(false);\n\n useEffect(() => {\n setTimeout(() => {\n setIsOpening(true);\n setTimeout(onAnimationComplete, 2000);\n }, 500);\n }, []);\n\n return (\n \n \n \n \n ❤️\n \n \n );\n}\n\nfunction DraggableImage({ imageUrl, initialPosition, index, onPositionChange, isCreating, delay = 0 }) {\n const [position, setPosition] = useState(initialPosition);\n const [isDragging, setIsDragging] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const dragOffset = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n setTimeout(() => {\n setIsVisible(true);\n }, delay);\n }, [delay]);\n\n const handleMouseDown = (e) => {\n if (!isCreating) return;\n setIsDragging(true);\n const rect = e.target.getBoundingClientRect();\n dragOffset.current = {\n x: e.clientX - rect.left,\n y: e.clientY - rect.top,\n };\n };\n\n const handleMouseMove = (e) => {\n if (!isDragging) return;\n\n const newPosition = {\n left: e.clientX - dragOffset.current.x,\n top: e.clientY - dragOffset.current.y,\n rotation: position.rotation,\n scale: position.scale,\n };\n\n setPosition(newPosition);\n onPositionChange(index, newPosition);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n }\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [isDragging]);\n\n return (\n \n \n \n );\n}\n\nfunction App() {\n const [message, setMessage] = useState(\"\");\n const [isCreating, setIsCreating] = useState(false);\n const [imagePositions, setImagePositions] = useState([]);\n const [showEnvelope, setShowEnvelope] = useState(false);\n const [contentVisible, setContentVisible] = useState(false);\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const urlMessage = urlParams.get(\"message\");\n const urlPositions = urlParams.get(\"positions\");\n\n if (urlMessage || urlPositions) {\n if (urlMessage) setMessage(decodeURIComponent(urlMessage));\n if (urlPositions) {\n setImagePositions(JSON.parse(decodeURIComponent(urlPositions)));\n } else {\n initializeRandomPositions();\n }\n setShowEnvelope(true);\n } else {\n setIsCreating(true);\n setContentVisible(true);\n initializeRandomPositions();\n }\n }, []);\n\n const initializeRandomPositions = () => {\n const positions = [...Array(12)].map(() => ({\n top: Math.random() * (window.innerHeight - 500) + 150,\n left: Math.random() * (window.innerWidth - 400) + 50,\n rotation: Math.random() * 40 - 20,\n scale: 0.8 + Math.random() * 0.4,\n }));\n setImagePositions(positions);\n };\n\n const handlePositionChange = (index, newPosition) => {\n const newPositions = [...imagePositions];\n newPositions[index] = newPosition;\n setImagePositions(newPositions);\n };\n\n const handleShare = () => {\n const url = new URL(window.location.href);\n url.searchParams.set(\"message\", message);\n url.searchParams.set(\"positions\", encodeURIComponent(JSON.stringify(imagePositions)));\n navigator.clipboard.writeText(url.toString());\n alert(\"URL copied to clipboard!\");\n };\n\n const handleEnvelopeComplete = () => {\n setShowEnvelope(false);\n setContentVisible(true);\n };\n\n if (!contentVisible && showEnvelope) {\n return ;\n }\n\n return (\n \n {isCreating\n ? (\n \n \n Valentine Note Generator\n \n setMessage(e.target.value)}\n placeholder=\"Enter your valentine message...\"\n style={{\n width: \"80%\",\n maxWidth: \"500px\",\n height: \"120px\",\n padding: \"10px\",\n borderRadius: \"5px\",\n border: \"1px solid #ccc\",\n resize: \"vertical\",\n fontFamily: \"arial\",\n fontSize: \"16px\",\n lineHeight: \"1.4\",\n }}\n />\n

\n Drag the images to arrange them\n

\n \n Share\n \n \n )\n : (\n {\n window.history.replaceState({}, \"\", window.location.pathname);\n setMessage(\"\");\n setIsCreating(true);\n initializeRandomPositions();\n }}\n style={{\n position: \"fixed\",\n top: \"20px\",\n right: \"20px\",\n padding: \"8px 20px\",\n backgroundColor: \"black\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n fontSize: \"14px\",\n zIndex: 1001,\n }}\n >\n Make Your Own\n \n )}\n\n {message && (\n \n {message}\n \n )}\n\n {imagePositions.map((position, index) => (\n \n ))}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const message = url.searchParams.get(\"message\") || \"\";\n\n return new Response(\n `\n \n \n Valentine's Message\n \n \n \n \n \n

\n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[197],{"_102":204,"_95":205,"_157":206,"_159":-5,"_160":138,"_161":207,"_163":116,"_104":208,"_99":209,"_166":191,"_168":210,"_170":22,"_171":-5,"_172":211,"_98":212},"7f8b262a-e596-11ef-9e5a-e6cdfca9ef9f","get-images","5ca2940a-e595-11ef-b12e-e6cdfca9ef9f",68,["D",1738962001940],4,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\n// export const manager = {\n// getImages(type: string, count: number): Promise {\n// return getImages(type, count);\n// },\n// };\n\nexport async function getImages(type: string, count: number): Promise {\n // Query to select random rows of the specified type\n const result = await sqlite.execute(\n `\n SELECT path \n FROM ${DATABASE_TABLENAME} \n WHERE type = ? \n ORDER BY RANDOM() \n LIMIT ?\n `,\n [type, count],\n );\n\n let images: string[] = [];\n console.log(result.rows);\n for (const row of result.rows) {\n const blobPath = await blob.get(row[\"path\"] as string);\n images.push(`https://shouser-blob_admin.web.val.run/api/public/${blobPath.url}`);\n }\n\n return images;\n // console.log(\"images\", await getImages(\"image\", 1));\n // Extract paths from the result rows\n // return result.rows.map(asyncrow => await blob.get(row.path as string));\n}\n\nconsole.log(await getImages(\"image\", 10));",[],[205],{"_102":214,"_95":215,"_157":216,"_159":-5,"_160":138,"_161":217,"_163":116,"_104":218,"_99":219,"_166":191,"_168":220,"_170":22,"_171":-5,"_172":221,"_98":222},"f3e871d2-e58f-11ef-a238-e6cdfca9ef9f","image_manager","27b3deb0-c96a-44e1-b333-0291b0d9e02b",33,["D",1738959190668],3,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\n// export const manager = {\n// getImages(type: string, count: number): Promise {\n// return getImages(type, count);\n// },\n// };\n\nexport async function getImages(type: string, count: number): Promise {\n // Query to select random rows of the specified type\n const result = await sqlite.execute(\n `\n SELECT path \n FROM ${DATABASE_TABLENAME} \n WHERE type = ? \n ORDER BY RANDOM() \n LIMIT ?\n `,\n [type, count],\n );\n\n // console.log(\"images\", await getImages(\"image\", 1));\n // Extract paths from the result rows\n return result.rows.map(row => await blob.get(row.path));\n}",[],[215],{"_102":224,"_95":225,"_157":226,"_159":-5,"_160":138,"_161":227,"_163":116,"_104":228,"_99":229,"_166":180,"_168":230,"_170":22,"_171":-5,"_172":231,"_98":232},"ed7cf110-e58f-11ef-9bdd-e6cdfca9ef9f","image_uploader","a5a53ffe-57c4-4b09-a7fe-aad4ad1aa6f9",32,["D",1738959179903],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\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 if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",[],[225],"files",[154,175,184,195,203,213,223],"counts",{"_237":32,"_238":165,"_239":32,"_240":241},"pulls","branches","forks","envVars",{"_242":32,"_243":32},"count","emptyCount","contents",[246,249,252,255,258,261,264],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":247,"_99":165,"_166":167,"_168":169,"_170":22,"_171":-5,"_98":248},["D",1738959075927],[156],{"_102":176,"_95":177,"_157":178,"_159":-5,"_160":138,"_161":165,"_163":116,"_104":250,"_99":32,"_166":180,"_168":181,"_170":22,"_171":-5,"_98":251},["D",1738957295132],[177],{"_102":185,"_95":186,"_157":187,"_159":-5,"_160":138,"_161":188,"_163":116,"_104":253,"_99":190,"_166":191,"_168":192,"_170":22,"_171":-5,"_98":254},["D",1738961665402],[186],{"_102":196,"_95":197,"_157":114,"_159":-5,"_160":138,"_161":137,"_163":116,"_104":256,"_99":199,"_166":180,"_168":200,"_170":22,"_171":-5,"_98":257},["D",1738962479481],[197],{"_102":204,"_95":205,"_157":206,"_159":-5,"_160":138,"_161":207,"_163":116,"_104":259,"_99":209,"_166":191,"_168":210,"_170":22,"_171":-5,"_98":260},["D",1738962001940],[205],{"_102":214,"_95":215,"_157":216,"_159":-5,"_160":138,"_161":217,"_163":116,"_104":262,"_99":219,"_166":191,"_168":220,"_170":22,"_171":-5,"_98":263},["D",1738959190668],[215],{"_102":224,"_95":225,"_157":226,"_159":-5,"_160":138,"_161":227,"_163":116,"_104":265,"_99":229,"_166":180,"_168":230,"_170":22,"_171":-5,"_98":266},["D",1738959179903],[225],"upstreamProject",{"_102":146,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":269},{"_93":270,"_130":271},"shouser","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","upstreamBranch",{"_102":141,"_104":274,"_275":276,"_95":43,"_139":146,"_99":277,"_140":-5,"_142":-5,"_278":279,"_106":-5,"_151":22,"_108":109,"_150":270,"_16":148,"_149":96},["D",1738944347583],"updatedAt",["D",1739161625327],174,"lockfileKey","1756264562671-esm.town_v_shouser_valentines_day_card_generator@174-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":286,"_240":291},{"_102":103,"_95":96,"_104":287,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":288,"_132":289,"_135":290,"_151":22},["D",1738957295132],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":143,"_144":109,"_145":146,"_147":148,"_149":96,"_150":94},[],"actionData","errors"]

charmaine

valentines_day_card_generator

Environment variables