PNG Maker

\n Select PNG File:\n \n

\n Select Additional File:\n \n

\n \n

\n \n\n\n */\n}\n\nfunction css() {\n /*\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n.container {\n background-color: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n width: 100%;\n max-width: 400px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.input-group {\n margin-bottom: 1rem;\n}\n\ninput[type=\"file\"] {\n width: 100%;\n padding: 0.5rem;\n}\n\nbutton {\n width: 100%;\n padding: 0.75rem;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #0056b3;\n}\n */\n}\n\nfunction js() {\n /*\nimport { createPolygotPng } from '/polypng.mjs';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const pngInput = document.getElementById('pngInput');\n const fileInput = document.getElementById('fileInput');\n const processButton = document.getElementById('processButton');\n\n processButton.addEventListener('click', async () => {\n const pngFile = pngInput.files[0];\n const additionalFile = fileInput.files[0];\n\n // Basic validation\n if (!pngFile || !additionalFile) {\n alert('Please select both files');\n return;\n }\n\n if (pngFile.type !== 'image/png') {\n alert('First file must be a PNG');\n return;\n }\n\n try {\n const blob = await createPolygotPng(pngFile, additionalFile);\n const url = URL.createObjectURL(blob);\n\n const a = document.createElement('a');\n a.href = url;\n a.download = additionalFile.name + '.png';\n a.click();\n } catch(err) {\n console.error(err);\n alert('Error:' + (err.message || err.toString()));\n }\n });\n});\n */\n}\n\nconst app = new Hono();\napp.get('/', serve(html, 'text/html'));\napp.get('/styles.css', serve(css, 'text/css'));\napp.get('/main.js', serve(js, 'text/javascript'));\napp.get('/polypng.mjs', async (c) => {\n const res = await fetch('https://gist.githubusercontent.com/autowert66/e6371d2cf5fd365d57668f8399ec02ca/raw/polypng.mjs');\n return new Response(res.body, { headers: { 'Content-Type': 'text/javascript' } });\n});\n\nexport default app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/g/pngMakerApp/code/main.tsx","extension","actionData","errors"]