\n 🌌 Image to PDF Converter\n

\n Transform your images into stunning PDF documents with cosmic precision\n

\n\n {/* Upload Area */}\n fileInputRef.current?.click()}\n >\n

🚀

\n Drop images here or click to select\n

\n Supports JPEG, PNG, GIF, and WebP formats\n

\n e.target.files && handleFileSelect(e.target.files)}\n />\n

\n\n {/* Conversion Options */}\n {images.length > 0 && (\n

⚙️ PDF Configuration

\n \n Page Size\n \n setOptions(prev => ({ ...prev, pageSize: e.target.value as any }))}\n className=\"w-full input-field rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-400\"\n >\n \n \n \n \n

\n \n Orientation\n \n setOptions(prev => ({ ...prev, orientation: e.target.value as any }))}\n className=\"w-full input-field rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-400\"\n >\n \n \n \n

\n \n Margin (mm)\n \n setOptions(prev => ({ ...prev, margin: parseInt(e.target.value) }))}\n className=\"w-full input-field rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-400\"\n />\n

\n \n Quality\n \n setOptions(prev => ({ ...prev, imageQuality: parseFloat(e.target.value) }))}\n className=\"w-full input-field rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-400\"\n >\n \n \n \n \n

\n )}\n\n {/* Image Preview Grid */}\n {images.length > 0 && (\n

\n 🖼️ Selected Images ({images.length})\n

\n setImages([])}\n className=\"text-red-400 hover:text-red-300 text-sm font-semibold transition-colors duration-300 hover:glow-text\"\n >\n 🗑️ Clear All\n \n

\n {images.map((image, index) => (\n

\n \n

\n removeImage(image.id)}\n className=\"remove-button absolute top-3 right-3 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm opacity-0 group-hover:opacity-100 transition-all duration-300\"\n >\n ✕\n \n

\n {image.name}\n

\n {formatFileSize(image.size)}\n

\n #{index + 1}\n

\n ))}\n

\n )}\n\n {/* Convert Button */}\n {images.length > 0 && (\n

\n \n {isConverting ? (\n <>\n

\n Converting to PDF...\n \n ) : (\n <>\n ⚡\n Convert to PDF\n \n )}\n \n

\n )}\n\n {/* Instructions */}\n {images.length === 0 && (\n

🌟

Ready to create something amazing?

\n Upload your images and watch them transform into a beautiful PDF document with cosmic precision.\n

🚀

Drag & Drop

Simply drag your images here

⚙️

Customize

Adjust size, quality & layout

⚡

Convert

Get your PDF instantly

\n )}\n

\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[19,60],"280beab6-3810-11f0-9a1c-9e149126039e","index.html","8385384a-380e-11f0-8a37-9e149126039e",15,["D",1748030249091],"\n\n\n \n \n 🌌 Image to PDF Converter - Dark Edition\n \n \n \n \n \n\n\n

\n 🌌 Loading Cosmic Converter...\n

\n \n

\n \n \n \n \n\n",[19,69],"83853fb6-380e-11f0-8a37-9e149126039e",3,["D",1748029543568],0,"directory",[19],{"_36":124,"_13":125,"_39":126,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":127,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":128,"_18":129},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":109,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":110,"_18":111},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":99,"_18":100},{"_36":85,"_13":86,"_39":87,"_41":-5,"_43":44,"_45":88,"_47":48,"_49":89,"_17":51,"_52":24,"_53":90,"_55":56,"_57":-5,"_91":92,"_18":93},"3f077fd2-3810-11f0-a508-9e149126039e","README.md","7e44af00-380e-11f0-8609-9e149126039e",16,["D",1748030287652],"# 🌌 Image to PDF Converter - Dark Edition\n\nA stunning dark-themed web application with 3D effects that allows users to upload images and convert them to PDF format with cosmic precision.\n\n## ✨ Features\n\n- **🌙 Dark Theme**: Beautiful dark interface with cyberpunk aesthetics\n- **🎭 3D Effects**: Immersive 3D transformations and animations\n- **🚀 Drag & Drop**: Intuitive drag-and-drop interface with holographic effects\n- **📱 Multiple Formats**: Supports JPEG, PNG, GIF, and WebP image formats\n- **⚙️ PDF Customization**: \n - Page size (A4, Letter, Legal)\n - Orientation (Portrait, Landscape)\n - Margin settings\n - Image quality settings\n- **🖼️ Image Preview**: Stunning 3D image cards with hover effects\n- **⚡ Client-side Processing**: Fast, client-side PDF generation using jsPDF\n- **📱 Responsive Design**: Works beautifully on desktop and mobile devices\n- **🎨 Glass Morphism**: Modern glass-card design with backdrop blur effects\n\n## 🎨 Visual Features\n\n- **Holographic Upload Zone**: Animated gradient effects on the drop zone\n- **Floating Cards**: Subtle floating animations for enhanced depth\n- **Neon Buttons**: Glowing buttons with 3D hover effects\n- **Cyber Grid Background**: Animated grid pattern for sci-fi aesthetics\n- **Glow Text Effects**: Text with neon glow and shadow effects\n- **3D Image Previews**: Images that lift and rotate on hover\n- **Loading Animations**: Futuristic 3D loading spinners\n\n## 🏗️ Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with PDF generation\n├── frontend/\n│ ├── index.html # Dark-themed HTML template with loader\n│ ├── index.tsx # React frontend with 3D components\n│ └── style.css # Advanced CSS with 3D effects and animations\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## 🚀 Usage\n\n1. Visit the application URL and enjoy the cosmic loading animation\n2. Drag and drop images into the holographic upload zone or click to select files\n3. Watch your images appear in beautiful 3D preview cards\n4. Customize PDF options with the sleek dark controls\n5. Click the glowing \"Convert to PDF\" button\n6. Download your perfectly formatted PDF document\n\n## 🛠️ Technical Details\n\n- **Backend**: Hono framework with static file serving\n- **Frontend**: React with TypeScript and advanced CSS animations\n- **Styling**: Custom dark theme with glass morphism and 3D effects\n- **PDF Generation**: Client-side PDF creation using jsPDF for optimal performance\n- **File Upload**: Base64 encoding with drag-and-drop support\n- **Animations**: CSS3 transforms, transitions, and keyframe animations\n- **Performance**: Optimized 3D effects with hardware acceleration\n\n## 🎭 Design Philosophy\n\nThis application combines functionality with stunning visual design, featuring:\n- **Cyberpunk Aesthetics**: Dark colors with neon accents\n- **Depth and Dimension**: 3D transforms and layered effects\n- **Smooth Interactions**: Fluid animations and transitions\n- **Visual Feedback**: Hover states and loading animations\n- **Modern UI Patterns**: Glass morphism and backdrop filters","children",[],[86],"80b45c5e-380e-11f0-b891-9e149126039e","shared","a8c9a90c-aac0-46f7-9400-29bf69c21bd2",2,["D",1748029538843],[101],[95],{"_36":102,"_13":103,"_39":104,"_41":96,"_43":44,"_45":97,"_47":48,"_49":105,"_17":78,"_52":65,"_53":106,"_55":56,"_57":-5,"_91":107,"_18":108},"80b43602-380e-11f0-b891-9e149126039e","types.ts","80b436a2-380e-11f0-b891-9e149126039e",["D",1748029538843],"export interface ImageFile {\n id: string;\n name: string;\n size: number;\n type: string;\n dataUrl: string;\n}\n\nexport interface ConversionOptions {\n pageSize: 'A4' | 'Letter' | 'Legal';\n orientation: 'portrait' | 'landscape';\n margin: number;\n imageQuality: number;\n}",[],[95,103],["D",1748029543568],[112,113,114],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":121,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_91":122,"_18":123},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":118,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_91":119,"_18":120},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":115,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_91":116,"_18":117},["D",1748030146919],[],[19,38],["D",1748030228130],[],[19,60],["D",1748030249091],[],[19,69],"a6c32aba-380e-11f0-8841-9e149126039e","backend","493fe9ba-1d31-4693-b10c-a81cf629d669",["D",1748029602693],[130],[125],{"_36":131,"_13":132,"_39":133,"_41":126,"_43":44,"_45":134,"_47":48,"_49":135,"_17":51,"_52":136,"_53":137,"_55":56,"_57":-5,"_91":138,"_18":139},"a8ae37ac-380e-11f0-ac8c-9e149126039e","index.ts","a6c30c4c-380e-11f0-8841-9e149126039e",7,["D",1748029605908],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main route - serve the HTML page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ \n status: \"ok\", \n service: \"Image to PDF Converter\",\n timestamp: new Date().toISOString()\n });\n});\n\n// API endpoint for getting supported formats (for future use)\napp.get(\"/api/formats\", c => {\n return c.json({\n supported: [\n { extension: \"jpg\", mimeType: \"image/jpeg\", description: \"JPEG Image\" },\n { extension: \"jpeg\", mimeType: \"image/jpeg\", description: \"JPEG Image\" },\n { extension: \"png\", mimeType: \"image/png\", description: \"PNG Image\" },\n { extension: \"gif\", mimeType: \"image/gif\", description: \"GIF Image\" },\n { extension: \"webp\", mimeType: \"image/webp\", description: \"WebP Image\" }\n ]\n });\n});\n\nexport default app.fetch;",[],[125,132],"6ea456c2-380e-11f0-9f7a-9e149126039e",["D",1748029508543],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","60ec6c90-380e-11f0-8bf7-1b413b1612ec","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","c7253a6b-3efb-483b-ae6d-b395c8bc455a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_192":188},"org",{"_11":12,"_186":-5,"_187":188,"_149":150,"_189":190,"_191":56},"branch",{"_17":88,"_13":16,"_36":44,"_178":140,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":14,"_185":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4Vmk3dkhhVFNlYXJHUzJsaThJbnZPTkxXRCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":140,"_13":14,"_49":255,"_142":-5,"_143":56,"_144":145,"_146":145,"_147":-5,"_148":-5,"_149":150,"_151":133,"_152":48,"_153":48,"_154":-5,"_155":78,"_156":157,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":163,"_164":163,"_165":166,"_167":166,"_168":166,"_169":163,"_170":163,"_171":256,"_173":257,"_175":258,"_177":56},[228,230,234,236],"files",[228,229,230,231,232,233,234,235,236],"counts",{"_219":78,"_220":51,"_221":78,"_32":222,"_223":224},[213,214,215],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":77,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_18":212},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":72,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_18":218},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":63,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_18":217},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":216},[19,38],[19,60],[19,69],"pulls","branches","forks",{"_225":78,"_227":78},"connections",{"_225":78,"_226":78},"count","unfilledCount","emptyCount",{"_36":124,"_13":125,"_39":126,"_41":-5,"_43":44,"_45":64,"_47":48,"_49":127,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":253,"_18":254},{"_36":131,"_13":132,"_39":133,"_41":126,"_43":44,"_45":134,"_47":48,"_49":135,"_17":51,"_52":136,"_53":137,"_55":56,"_57":-5,"_91":251,"_18":252},{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":109,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":249,"_18":250},{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":121,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_91":247,"_18":248},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":118,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_91":245,"_18":246},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":115,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_91":243,"_18":244},{"_36":94,"_13":95,"_39":96,"_41":-5,"_43":44,"_45":97,"_47":48,"_49":98,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_91":241,"_18":242},{"_36":102,"_13":103,"_39":104,"_41":96,"_43":44,"_45":97,"_47":48,"_49":105,"_17":78,"_52":65,"_53":106,"_55":56,"_57":-5,"_91":239,"_18":240},{"_36":85,"_13":86,"_39":87,"_41":-5,"_43":44,"_45":88,"_47":48,"_49":89,"_17":51,"_52":24,"_53":90,"_55":56,"_57":-5,"_91":237,"_18":238},[],[86],[],[95,103],[235],[95],[],[19,38],[],[19,60],[],[19,69],[231,232,233],[19],[],[125,132],[229],[125],["D",1748029508543],{"_11":12,"_192":188},{"_11":12,"_186":-5,"_187":188,"_149":150,"_189":190,"_191":56},{"_17":88,"_13":16,"_36":44,"_178":140,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":14,"_185":12},"ctx",{"_171":-5,"_209":292,"_293":294,"_295":296,"_297":56,"_298":56,"_299":56,"_300":48,"_301":-5,"_302":-7,"_303":-7,"_304":78,"_305":56,"_306":56,"_307":-5,"_308":56,"_309":56,"_310":56,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":16,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]