Image to WebP Converter

\n \n {imageUrl && (\n

\n $\"Original\"$ \n

Original Size: {originalSize}

\n \n

\n )}\n {webpUrl && (\n

\n $\"WebP\"$ \n

WebP Size: {webpSize}

\n Download WebP\n

\n )}\n {(imageUrl || webpUrl) && (\n \n )}\n

\n View source on Val Town\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Image to WebP Converter\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\ninput[type=\"file\"] {\n margin-bottom: 20px;\n}\nbutton, .download-btn {\n background-color: #4CAF50;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n text-decoration: none;\n display: inline-block;\n margin-top: 10px;\n margin-right: 10px;\n}\nbutton:hover, .download-btn:hover {\n background-color: #45a049;\n}\n.delete-btn {\n background-color: #f44336;\n}\n.delete-btn:hover {\n background-color: #d32f2f;\n}\n.preview {\n max-width: 100%;\n max-height: 300px;\n margin-top: 20px;\n}\n.footer {\n margin-top: 20px;\n text-align: center;\n font-size: 14px;\n color: #666;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/eligosmlytics/imageToWebPConverter/code/main.tsx","extension","actionData","errors"]