[{"_1":2,"_137":-5,"_138":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":59,"_65":59,"_66":42,"_67":59,"_68":59,"_69":17,"_70":17,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_97":-5,"_98":17,"_99":100,"_133":32,"_134":135,"_136":17},"id","05ee57857a1ee24a0f50","isMyApp",false,"name","zalameme","description","Unleash your inner meme lord without a single design skill! Zalameme lets you create, edit, and share internet-breaking memes in seconds with our drag-and-drop interface and viral-ready templates. Watch as your wildest ideas transform into shareable masterpieces faster than you can say \"stonks.\"","brief","Create internet-breaking memes in seconds, even if you can't draw a stick figure!","isLive",true,"isPublic","tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/05ee57857a1ee24a0f50/72972_d6bcb088.webp","cdnUrl","https://cdn.dev.fun/app/05ee57857a1ee24a0f50/72972","createdAt",["D",1748508908293],"updatedAt",["D",1748803393319],"lastCommitId",["B","72972"],"tier",1,"credits",77,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"6cb867c1-69a4-407a-96fd-a646fada1a8a","uniqueId","75QQqwryWiTUb3uqeJfPpum3b5KAG5Myq93MH5DR88z5","username","solanaWallet","displayName","75Q...8z5","bio","avatar","/avatar.svg","commitCount",8,"forkCount",0,"likeCount","runsCount",22,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18","code","import { useState, useRef, useEffect } from 'react';\nimport { Download, Share2, Plus, Trash2, ArrowLeft, Type, Image as ImageIcon, Sparkles, Smartphone, WifiOff, Save, Star } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useChat } from 'ai/react';\nexport default function App() {\n const [currentView, setCurrentView] = useState('templates');\n const [selectedTemplate, setSelectedTemplate] = useState(null);\n const [textElements, setTextElements] = useState([]);\n const [selectedElement, setSelectedElement] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [notification, setNotification] = useState(null);\n const [showAiPanel, setShowAiPanel] = useState(false);\n const [isOfflineMode, setIsOfflineMode] = useState(!navigator.onLine);\n const [savedMemes, setSavedMemes] = useState([]);\n const [showShareOptions, setShowShareOptions] = useState(false);\n const [imageQuality, setImageQuality] = useState(100);\n const [addWatermark, setAddWatermark] = useState(false);\n const [votedMemes, setVotedMemes] = useState([]);\n const [viewMode, setViewMode] = useState('popular');\n const canvasRef = useRef(null);\n const textInputRef = useRef(null);\n const zalaTemplates = [{\n id: 201,\n name: \"ZALA Logo\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/tVMKDSrR_400x400_25a78cd7.jpg\"\n }, {\n id: 202,\n name: \"ZALA Think\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/6f67870e9f2fae5829f3d7a789c00d7c_24d35a89.jpg\"\n }, {\n id: 203,\n name: \"ZALA Cat Laugh\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/7934b5ae89fb15eb25d0c4bc20ee0ee9_086833b4.jpg\"\n }, {\n id: 204,\n name: \"ZALA Pointing\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/8413064065ab8e4e7522a96327915c89 (1)_d788901d.jpg\"\n }, {\n id: 205,\n name: \"ZALA Surprised\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/de63e74bd3a9eb596fa1e9579f27dcc5_4ac990b1.jpg\"\n }, {\n id: 206,\n name: \"ZALA Coffee\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/8e4a7d857cceb8da451c20cff9e05a62_f2cb067e.jpg\"\n }, {\n id: 207,\n name: \"ZALA Thinking\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/e259bc739224997cfe04a65e0b757a68_344bfe8a.jpg\"\n }, {\n id: 208,\n name: \"ZALA Shocked\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/8b4448886eb390a9450eff0e643e05c3_98ed17a1.jpg\"\n }, {\n id: 209,\n name: \"ZALA Surprised Cat\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/fdbe856132156f9ddd2489145a96e103_b7d1e6e3.jpg\"\n }, {\n id: 210,\n name: \"ZALA Eyes\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/47afddbfe09c7cad862dbe5f93c4128c_2ad5c26c.jpg\"\n }, {\n id: 211,\n name: \"ZALA Astronaut\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/8b08d0581b19959c4638d7ab4da094c1_81fbeccc.jpg\"\n }, {\n id: 212,\n name: \"ZALA Happy Cat\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/bbe1108ec8af28b854b0812194aad10e_7c5f577b.jpg\"\n }, {\n id: 213,\n name: \"ZALA Confused\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/f1bb62a1095eae24e2c7f8808f26c0ad_d6b2910f.jpg\"\n }, {\n id: 214,\n name: \"ZALA Surprise Dog\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/3dd5561ebc7b97dc579ae2dc501cb348_0ca2ea44.jpg\"\n }, {\n id: 215,\n name: \"ZALA Meme King\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/f74d9466757d480371e7fd4117d990c1_f83e4451.jpg\"\n }, {\n id: 216,\n name: \"ZALA Cat Jam\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/4a67eb7d60532a7678f5327911e4db85_9529c81b.jpg\"\n }, {\n id: 217,\n name: \"ZALA Wow\",\n url: \"https://cdn.dev.fun/asset/05ee57857a1ee24a0f50/e534c987245e6f809d8a9e4b697e5e41_1cb6be24.jpg\"\n }];\n const systemPrompt = `\n You are ZALAMEME AI, the world's most creative meme assistant. \n Your job is to suggest the perfect meme template and text for any situation.\n Always respond with JSON in this format:\n {\n \"template\": \"name of the meme template that fits best\",\n \"textTop\": \"suggested text for top of meme\",\n \"textBottom\": \"suggested text for bottom of meme\"\n }\n \n Be creative, funny, and a bit edgy - but never offensive. Respond only with the JSON, no other text.\n `;\n const {\n messages,\n input,\n handleInputChange,\n handleSubmit,\n isLoading: aiLoading\n } = useChat({\n api: 'https://chat.dev.fun/chat/05ee57857a1ee24a0f50',\n initialMessages: [{\n id: 'system',\n role: 'system',\n content: systemPrompt\n }]\n });\n const popularTemplates = [{\n id: 1,\n name: \"Drake Hotline Bling\",\n url: \"https://i.imgflip.com/30b1gx.jpg\"\n }, {\n id: 2,\n name: \"Two Buttons\",\n url: \"https://i.imgflip.com/1g8my4.jpg\"\n }, {\n id: 3,\n name: \"Distracted Boyfriend\",\n url: \"https://i.imgflip.com/1ur9b0.jpg\"\n }, {\n id: 4,\n name: \"Running Away Balloon\",\n url: \"https://i.imgflip.com/261o3j.jpg\"\n }, {\n id: 5,\n name: \"Left Exit 12 Off Ramp\",\n url: \"https://i.imgflip.com/22bdq6.jpg\"\n }, {\n id: 6,\n name: \"Expanding Brain\",\n url: \"https://i.imgflip.com/1jwhww.jpg\"\n }, {\n id: 7,\n name: \"Change My Mind\",\n url: \"https://i.imgflip.com/24y43o.jpg\"\n }, {\n id: 8,\n name: \"Doge\",\n url: \"https://i.imgflip.com/4t0m5.jpg\"\n }, {\n id: 9,\n name: \"Surprised Pikachu\",\n url: \"https://i.imgflip.com/2kbn1e.jpg\"\n }, {\n id: 10,\n name: \"Stonks\",\n url: \"https://i.imgflip.com/3n0l1t.jpg\"\n }, {\n id: 11,\n name: \"This is Fine\",\n url: \"https://i.imgflip.com/wxica.jpg\"\n }, {\n id: 12,\n name: \"Always Has Been\",\n url: \"https://i.imgflip.com/43a45p.jpg\"\n }];\n const [trendingTemplates, setTrendingTemplates] = useState([{\n id: 101,\n name: \"Gigachad\",\n url: \"https://i.imgflip.com/4xgqu8.jpg\"\n }, {\n id: 102,\n name: \"Anakin and Padme\",\n url: \"https://i.imgflip.com/5c7lwq.png\"\n }, {\n id: 103,\n name: \"Emotional Damage\",\n url: \"https://i.imgflip.com/6k12a7.jpg\"\n }, {\n id: 104,\n name: \"One Does Not Simply\",\n url: \"https://i.imgflip.com/1bij.jpg\"\n }, {\n id: 105,\n name: \"Wait It's All Ohio?\",\n url: \"https://i.imgflip.com/43a45p.jpg\"\n }, {\n id: 106,\n name: \"Disaster Girl\",\n url: \"https://i.imgflip.com/23ls.jpg\"\n }]);\n const [weeklyLeaderboard, setWeeklyLeaderboard] = useState([{\n id: 'leaderboard-1',\n name: \"When you finally debug that error\",\n url: \"https://i.imgflip.com/4xgqu8.jpg\",\n creator: \"MemeLord42\",\n votes: 420,\n rank: 1\n }, {\n id: 'leaderboard-2',\n name: \"Me explaining to my mom why I need the new GPU\",\n url: \"https://i.imgflip.com/5c7lwq.png\",\n creator: \"TechBro99\",\n votes: 369,\n rank: 2\n }, {\n id: 'leaderboard-3',\n name: \"When the coffee hits just right\",\n url: \"https://i.imgflip.com/6k12a7.jpg\",\n creator: \"CaffeineQueen\",\n votes: 256,\n rank: 3\n }, {\n id: 'leaderboard-4',\n name: \"My code in production vs during testing\",\n url: \"https://i.imgflip.com/1bij.jpg\",\n creator: \"BugHunter\",\n votes: 180,\n rank: 4\n }, {\n id: 'leaderboard-5',\n name: \"When someone asks if I'm productive working from home\",\n url: \"https://i.imgflip.com/43a45p.jpg\",\n creator: \"RemoteWorker\",\n votes: 142,\n rank: 5\n }]);\n const templates = viewMode === 'popular' ? popularTemplates : viewMode === 'trending' ? trendingTemplates : viewMode === 'zala' ? zalaTemplates : savedMemes;\n const colorOptions = [\"#FFFFFF\", \"#000000\", \"#FF5733\", \"#33FF57\", \"#3357FF\", \"#FF33A8\", \"#33FFF5\", \"#FFF933\", \"#8C33FF\", \"#FF3333\"];\n const fontOptions = [\"Impact\", \"Arial\", \"Comic Sans MS\", \"Verdana\", \"Times New Roman\"];\n useEffect(() => {\n if (selectedElement !== null && textInputRef.current) {\n textInputRef.current.focus();\n }\n }, [selectedElement]);\n useEffect(() => {\n const loadSavedMemes = () => {\n const saved = localStorage.getItem('zalameme-saved');\n if (saved) {\n try {\n setSavedMemes(JSON.parse(saved));\n } catch (e) {\n console.error('Failed to load saved memes:', e);\n }\n }\n };\n loadSavedMemes();\n const handleOnlineStatus = () => {\n setIsOfflineMode(!navigator.onLine);\n if (navigator.onLine) {\n showNotification(\"You're back online! Syncing your memes...\");\n setTimeout(() => showNotification(\"All memes synced successfully!\"), 1500);\n } else {\n showNotification(\"You're offline. You can still create memes!\");\n }\n };\n window.addEventListener('online', handleOnlineStatus);\n window.addEventListener('offline', handleOnlineStatus);\n const fetchTrendingMemes = () => {\n setIsLoading(true);\n setTimeout(() => {\n setTrendingTemplates(prev => [...prev].sort(() => Math.random() - 0.5));\n setIsLoading(false);\n }, 1000);\n };\n if (navigator.onLine) {\n fetchTrendingMemes();\n }\n return () => {\n window.removeEventListener('online', handleOnlineStatus);\n window.removeEventListener('offline', handleOnlineStatus);\n };\n }, []);\n const selectTemplate = template => {\n setIsLoading(true);\n setSelectedTemplate(template);\n setTextElements([]);\n setTimeout(() => {\n setCurrentView('editor');\n setIsLoading(false);\n }, 500);\n };\n const addTextElement = () => {\n const newElement = {\n id: Date.now(),\n text: \"Add your text here\",\n x: 50,\n y: 50,\n color: \"#FFFFFF\",\n fontSize: 24,\n fontFamily: \"Impact\",\n isDragging: false\n };\n setTextElements([...textElements, newElement]);\n setSelectedElement(newElement.id);\n };\n const updateTextElement = (id, updates) => {\n setTextElements(textElements.map(el => el.id === id ? {\n ...el,\n ...updates\n } : el));\n };\n const removeTextElement = id => {\n setTextElements(textElements.filter(el => el.id !== id));\n setSelectedElement(null);\n };\n const startDrag = id => {\n setSelectedElement(id);\n setTextElements(textElements.map(el => el.id === id ? {\n ...el,\n isDragging: true\n } : el));\n };\n const onDrag = (id, e) => {\n setTextElements(textElements.map(el => el.id === id ? {\n ...el,\n x: Math.max(0, Math.min(canvasRef.current.offsetWidth - 20, el.x + e.movementX)),\n y: Math.max(0, Math.min(canvasRef.current.offsetHeight - 20, el.y + e.movementY))\n } : el));\n };\n const endDrag = id => {\n setTextElements(textElements.map(el => el.id === id ? {\n ...el,\n isDragging: false\n } : el));\n };\n const downloadMeme = () => {\n const canvas = document.createElement('canvas');\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.src = selectedTemplate.url;\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n textElements.forEach(el => {\n ctx.font = `${el.fontSize}px ${el.fontFamily}`;\n ctx.fillStyle = el.color;\n ctx.textAlign = 'center';\n const x = el.x / canvasRef.current.offsetWidth * canvas.width;\n const y = el.y / canvasRef.current.offsetHeight * canvas.height;\n ctx.strokeStyle = 'black';\n ctx.lineWidth = el.fontSize / 8;\n ctx.strokeText(el.text, x, y);\n ctx.fillText(el.text, x, y);\n });\n const link = document.createElement('a');\n link.download = 'zalameme-creation.png';\n link.href = canvas.toDataURL('image/png');\n link.click();\n showNotification(\"Meme downloaded successfully! 🎉\");\n };\n };\n const shareMeme = () => {\n setShowShareOptions(!showShareOptions);\n };\n const shareToSocialMedia = platform => {\n const canvas = document.createElement('canvas');\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.src = selectedTemplate.url;\n img.onload = () => {\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n textElements.forEach(el => {\n ctx.font = `${el.fontSize}px ${el.fontFamily}`;\n ctx.fillStyle = el.color;\n ctx.textAlign = 'center';\n const x = el.x / canvasRef.current.offsetWidth * canvas.width;\n const y = el.y / canvasRef.current.offsetHeight * canvas.height;\n ctx.strokeStyle = 'black';\n ctx.lineWidth = el.fontSize / 8;\n ctx.strokeText(el.text, x, y);\n ctx.fillText(el.text, x, y);\n });\n if (addWatermark) {\n ctx.font = '14px Arial';\n ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';\n ctx.textAlign = 'right';\n ctx.fillText('Made with ZALA', canvas.width - 10, canvas.height - 10);\n }\n const imageData = canvas.toDataURL('image/jpeg', imageQuality / 100);\n switch (platform) {\n case 'whatsapp':\n window.open(`https://wa.me/?text=Check%20out%20this%20meme%20I%20made%20with%20ZALAMEME!%20${encodeURIComponent(imageData)}`);\n break;\n case 'twitter':\n window.open(`https://twitter.com/intent/tweet?text=Check%20out%20this%20meme%20I%20made%20with%20ZALAMEME!&url=${encodeURIComponent(imageData)}`);\n break;\n case 'instagram':\n showNotification(\"Instagram sharing requires the app. Meme copied to clipboard!\");\n break;\n case 'tiktok':\n showNotification(\"TikTok sharing requires the app. Meme copied to clipboard!\");\n break;\n default:\n try {\n navigator.clipboard.writeText(imageData);\n showNotification(\"Meme copied to clipboard!\");\n } catch (err) {\n showNotification(\"Couldn't copy to clipboard. Try downloading instead.\");\n }\n }\n setShowShareOptions(false);\n };\n };\n const showNotification = message => {\n setNotification(message);\n setTimeout(() => setNotification(null), 3000);\n };\n const voteMeme = memeId => {\n if (votedMemes.includes(memeId)) {\n showNotification(\"You've already voted for this meme!\");\n return;\n }\n setWeeklyLeaderboard(leaderboard => leaderboard.map(meme => meme.id === memeId ? {\n ...meme,\n votes: meme.votes + 1\n } : meme).sort((a, b) => b.votes - a.votes).map((meme, index) => ({\n ...meme,\n rank: index + 1\n })));\n setVotedMemes([...votedMemes, memeId]);\n showNotification(\"Vote counted! Thanks for participating!\");\n };\n const saveMeme = () => {\n if (!selectedTemplate) return;\n const memeToSave = {\n id: `saved-${Date.now()}`,\n name: `${selectedTemplate.name} - ${new Date().toLocaleString()}`,\n url: selectedTemplate.url,\n textElements: [...textElements],\n timestamp: Date.now()\n };\n const updatedSavedMemes = [...savedMemes, memeToSave];\n setSavedMemes(updatedSavedMemes);\n localStorage.setItem('zalameme-saved', JSON.stringify(updatedSavedMemes));\n showNotification(\"Meme saved! You can access it in the 'Saved' tab.\");\n };\n const loadSavedMeme = meme => {\n setSelectedTemplate({\n id: meme.id,\n name: meme.name,\n url: meme.url\n });\n setTextElements(meme.textElements || []);\n setCurrentView('editor');\n };\n const handleAiSubmit = async e => {\n e.preventDefault();\n await handleSubmit(e);\n const lastAiMessage = messages[messages.length - 1]?.content;\n if (lastAiMessage) {\n try {\n const aiSuggestion = JSON.parse(lastAiMessage);\n const suggestedTemplate = [...popularTemplates, ...trendingTemplates].find(t => t.name.toLowerCase().includes(aiSuggestion.template.toLowerCase())) || popularTemplates[0];\n setSelectedTemplate(suggestedTemplate);\n const newElements = [];\n if (aiSuggestion.textTop) {\n newElements.push({\n id: Date.now(),\n text: aiSuggestion.textTop,\n x: 50 + Math.random() * 20,\n y: 50,\n color: \"#FFFFFF\",\n fontSize: 24,\n fontFamily: \"Impact\",\n isDragging: false\n });\n }\n if (aiSuggestion.textBottom) {\n newElements.push({\n id: Date.now() + 1,\n text: aiSuggestion.textBottom,\n x: 50 + Math.random() * 20,\n y: 150,\n color: \"#FFFFFF\",\n fontSize: 24,\n fontFamily: \"Impact\",\n isDragging: false\n });\n }\n setTextElements(newElements);\n setCurrentView('editor');\n setShowAiPanel(false);\n } catch (err) {\n console.error(\"Failed to parse AI response:\", err);\n showNotification(\"Oops! AI had a brain fart. Try again!\");\n }\n }\n };\n const uploadCustomImage = e => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = event => {\n setSelectedTemplate({\n id: 'custom',\n name: 'Custom Template',\n url: event.target.result\n });\n setCurrentView('editor');\n };\n reader.readAsDataURL(file);\n }\n };\n return

\n {}\n {isOfflineMode &&

\n \n Offline Mode - Your changes will be saved locally\n

}\n \n

\n \n Z\n \n

\n ZALAMEME\n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n \n {currentView === 'editor' && }\n {currentView === 'editor' && }\n \n \n \n Upload\n \n \n

\n\n

\n {}\n \n {showAiPanel && \n

\n \n AI Meme Generator\n

\n \n

Describe your meme idea and our AI will generate it for you!

\n \n \n \n {messages.length > 1 &&

AI suggestion:

\n {messages[messages.length - 1].content}\n

}\n }\n \n \n \n {currentView === 'leaderboard' ? \n

Weekly Meme Leaderboard

Vote for your favorite memes! The winner gets 69$ZALA tokens

Competition ends in: 4d 12h 37m

\n \n

\n {weeklyLeaderboard.map((meme, index) =>

\n {meme.rank <= 3 &&

\n #{meme.rank}\n

}\n

{meme.name}

Created by: {meme.creator}

\n {meme.votes} votes\n

\n {meme.rank === 1 &&

\n WINNING\n

}\n

\n \n {meme.rank === 1 &&

\n 🏆\n Prize: 69$ZALA\n

}\n

)}\n

\n \n

\n : currentView === 'templates' ? \n

Choose a Meme Template

\n \n {}\n

\n \n \n \n \n

\n \n {}\n

\n \n Mobile-friendly controls\n

\n \n {isLoading ?

: viewMode === 'saved' && savedMemes.length === 0 ?

You haven't saved any memes yet!

Create and save some memes to see them here.

: viewMode === 'zala' ?

✨ ZALA Special Collection ✨

Exclusive ZALA-themed templates for the true meme lords!

\n {templates.map(template => selectTemplate(template)}>\n

{template.name}

\n )}\n

\n {templates.map(template => viewMode === 'saved' ? loadSavedMeme(template) : selectTemplate(template)}>\n

{template.name}

\n )}\n

}\n : \n {}\n

\n {isLoading ?

: <>\n

\n {textElements.map(element =>

startDrag(element.id)} onMouseMove={e => element.isDragging && onDrag(element.id, e)} onMouseUp={() => endDrag(element.id)} onMouseLeave={() => element.isDragging && endDrag(element.id)} onClick={() => setSelectedElement(element.id)} onTouchStart={() => startDrag(element.id)} onTouchMove={e => {\n if (element.isDragging) {\n const touch = e.touches[0];\n const target = e.target;\n const rect = target.getBoundingClientRect();\n const offsetX = touch.clientX - rect.left;\n const offsetY = touch.clientY - rect.top;\n onDrag(element.id, {\n movementX: offsetX - element.x,\n movementY: offsetY - element.y\n });\n }\n }} onTouchEnd={() => endDrag(element.id)}>\n {element.text}\n

)}\n }\n

\n \n

\n \n \n Download\n \n \n \n Share\n \n

\n \n {}\n \n {showShareOptions && \n

Share Your Meme

\n \n

\n Image Quality\n

\n Low\n setImageQuality(parseInt(e.target.value))} className=\"flex-1 accent-purple-500\" />\n High\n

\n \n

\n \n setAddWatermark(!addWatermark)} className=\"accent-purple-500\" />\n Add \"Made with ZALA\" watermark\n \n

\n \n

\n \n \n \n \n

\n \n \n }\n \n

\n\n {}\n

Meme Editor

\n \n \n Add Text\n \n

\n\n {selectedElement !== null &&

\n Text Content\n el.id === selectedElement)?.text || ''} onChange={e => updateTextElement(selectedElement, {\n text: e.target.value\n })} className=\"w-full px-3 py-2 bg-gray-900 rounded border border-gray-600 text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent\" />\n

\n\n

\n Font Size\n el.id === selectedElement)?.fontSize || 24} onChange={e => updateTextElement(selectedElement, {\n fontSize: parseInt(e.target.value)\n })} className=\"w-full accent-purple-500\" />\n

\n\n

\n Font Family\n \n

\n\n

\n Text Color\n

\n {colorOptions.map(color =>

el.id === selectedElement)?.color === color ? 'border-yellow-400' : 'border-transparent'}`} style={{\n backgroundColor: color\n }} onClick={() => updateTextElement(selectedElement, {\n color\n })}>

)}\n

\n\n \n

}\n\n {selectedElement === null &&

\n \n

Add text elements to your meme and select them to edit.

\n \n

}\n\n

Pro Tips:

Click and drag text to position it
Add multiple text elements for complex memes
Download your creation to share it anywhere

\n }\n \n

\n\n {}\n \n {notification && \n {notification}\n }\n \n\n {}\n

\n {[...Array(15)].map((_, i) => 0.5 ? 360 : -360\n }} transition={{\n duration: Math.random() * 20 + 10,\n repeat: Infinity,\n ease: \"linear\"\n }}>\n {['😂', '🔥', '💯', '👽', '🚀', '🤣', '🙌', '👌', '🎮', '🦄'][Math.floor(Math.random() * 10)]}\n )}\n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/web-sdk\":\"0.4.0\",\"@react-three/drei\":\"9.99.7\",\"@react-three/fiber\":\"8.15.19\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"react-router-dom\":\"6.18.0\",\"socket.io-client\":\"4.7.2\",\"three\":\"0.162.0\",\"ai\":\"4.0.0\"}}","appFunctions",[],"token",{"_18":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":62,"_95":96,"_71":72},"Z△L△ △I","symbol","ZALA","price",0.0001051,"marketcap",95842,"image","https://pump.mypinata.cloud/ipfs/QmUaDbuzVdFZy4uvH4tNsFq8byXnq2SiCfM1zudfQs1EhZ?img-width=256&img-dpr=2","website","https://dev.fun/p/65b6496d4f06da20c463","twitter","https://x.com/Zala_AI","devCount","appCount",30,"upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129,131],{"_102":103,"_104":59},"day","2025-08-15","runCount",{"_102":106,"_104":59},"2025-08-16",{"_102":108,"_104":59},"2025-08-17",{"_102":110,"_104":59},"2025-08-18",{"_102":112,"_104":59},"2025-08-19",{"_102":114,"_104":59},"2025-08-20",{"_102":116,"_104":59},"2025-08-21",{"_102":118,"_104":59},"2025-08-22",{"_102":120,"_104":59},"2025-08-23",{"_102":122,"_104":59},"2025-08-24",{"_102":124,"_104":59},"2025-08-25",{"_102":126,"_104":59},"2025-08-26",{"_102":128,"_104":59},"2025-08-27",{"_102":130,"_104":59},"2025-08-28",{"_102":132,"_104":42},"2025-08-29","snapshot","ogImage","https://cdn.dev.fun/og/image/05ee57857a1ee24a0f50/20a766fd.webp","isDevbase","actionData","errors"]

say something