QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\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 return new Response(\n `\n \n \n \n \n \n \n QR Code Generator\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: 'Inter', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f7f7f7;\n }\n\n .container {\n background-color: white;\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n text-align: center;\n max-width: 400px;\n width: 100%;\n box-sizing: border-box;\n }\n\n h1 {\n font-size: 2rem;\n margin-bottom: 1.5rem;\n color: #333;\n }\n\n input {\n width: 100%;\n padding: 0.75rem;\n margin: 1rem 0;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n }\n\n button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.75rem 1.25rem;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n\n button:hover {\n background-color: #0056b3;\n }\n\n svg {\n margin-top: 1.5rem;\n }\n\n p {\n margin-top: 1rem;\n font-size: 0.875rem;\n }\n\n a {\n color: #007bff;\n text-decoration: none;\n }\n\n a:hover {\n text-decoration: underline;\n }\n`;",[],[99],"files",[152,172],"counts",{"_184":32,"_185":160,"_186":32,"_187":32},"pulls","branches","forks","envVars","contents",[],{"_103":173,"_95":99,"_155":116,"_157":-5,"_158":140,"_159":139,"_161":109,"_105":191,"_100":175,"_163":176,"_165":177,"_167":22,"_168":-5,"_98":192},["D",1726062508897],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":201,"_164":206,"_209":210,"_235":236,"_244":-7,"_245":32,"_246":22},{"_103":104,"_95":96,"_105":202,"_107":-5,"_108":109,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":109,"_118":-5,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":203,"_134":204,"_137":205,"_149":22},["D",1746211028274],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},{"_103":173,"_95":99,"_155":116,"_157":-5,"_158":140,"_159":139,"_161":109,"_105":207,"_100":175,"_163":176,"_165":177,"_167":22,"_168":-5,"_98":208},["D",1726062508897],[99],"history",[211,213,217,222,227,231],{"_103":173,"_158":140,"_155":116,"_95":99,"_165":177,"_163":176,"_100":175,"_157":-5,"_105":212,"_159":139,"_168":-5},["D",1726062508897],{"_103":214,"_158":140,"_155":116,"_95":99,"_165":215,"_163":176,"_100":120,"_157":-5,"_105":216,"_159":175,"_168":-5},"740950e4-2784-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [text, setText] = useState(\"\");\n const [qrCode, setQrCode] = useState(\"\");\n\n const generateQR = async () => {\n if (text) {\n const qr = await import(\"https://esm.sh/qrcode-generator\");\n const qrCode = qr.default(0, \"L\");\n qrCode.addData(text);\n qrCode.make();\n\n const svgString = qrCode.createSvgTag({ cellSize: 4, margin: 4 });\n setQrCode(svgString);\n }\n };\n\n return (\n

QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\n

\n View Source\n

QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\n

\n View Source\n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n\n return new Response(`\n \n \n \n \n \n QR Code Generator\n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n body {\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 .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 text-align: center;\n }\n input {\n width: 100%;\n padding: 0.5rem;\n margin: 1rem 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n }\n button:hover {\n background-color: #0056b3;\n }\n svg {\n margin-top: 1rem;\n }\n`;",3,["D",1726062320624],{"_103":223,"_158":140,"_155":116,"_95":99,"_165":224,"_163":176,"_100":225,"_157":-5,"_105":226,"_159":220,"_168":-5},"73fef8ba-2784-11f0-b46e-569c3dd06744","// This val creates a QR code generator using the qrcode-generator library.\n// It generates QR codes on the server side and sends them as SVG images to the client.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [text, setText] = useState(\"\");\n const [qrCode, setQrCode] = useState(\"\");\n\n const generateQR = async () => {\n if (text) {\n const qr = await import(\"https://esm.sh/qrcode-generator\");\n const qrCode = qr.default(0, \"L\");\n qrCode.addData(text);\n qrCode.make();\n\n const svgString = qrCode.createSvgTag({ cellSize: 4, margin: 4 });\n setQrCode(svgString);\n }\n };\n\n return (\n

QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nconst css = `\n body {\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 .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 text-align: center;\n }\n input {\n width: 100%;\n padding: 0.5rem;\n margin: 1rem 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n }\n button:hover {\n background-color: #0056b3;\n }\n svg {\n margin-top: 1rem;\n }\n`;",2,["D",1726062183580],{"_103":228,"_158":140,"_155":116,"_95":99,"_165":229,"_163":176,"_100":160,"_157":-5,"_105":230,"_159":225,"_168":-5},"73f88390-2784-11f0-b46e-569c3dd06744","// This val creates a QR code generator using the qrcode-generator library.\n// It generates QR codes on the server side and sends them as SVG images to the client.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [text, setText] = useState(\"\");\n const [qrCode, setQrCode] = useState(\"\");\n\n const generateQR = async () => {\n if (text) {\n const qr = await import(\"https://esm.sh/qrcode-generator\");\n const qrCode = qr.default(0, \"L\");\n qrCode.addData(text);\n qrCode.make();\n\n const svgString = qrCode.createSvgTag({ cellSize: 4, margin: 4 });\n setQrCode(svgString);\n }\n };\n\n return (\n

QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\n

\n View Source\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 const url = new URL(request.url);\n \n if (url.pathname === \"/generate\") {\n const text = url.searchParams.get(\"text\");\n if (!text) {\n return new Response(\"Missing 'text' parameter\", { status: 400 });\n }\n\n const qr = await import(\"https://esm.sh/qrcode-generator\");\n const qrCode = qr.default(0, \"L\");\n qrCode.addData(text);\n qrCode.make();\n\n const svgString = qrCode.createSvgTag({ cellSize: 4, margin: 4 });\n return new Response(svgString, {\n headers: { \"Content-Type\": \"image/svg+xml\" },\n });\n }\n\n return new Response(`\n \n \n \n \n \n QR Code Generator\n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n body {\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 .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 text-align: center;\n }\n input {\n width: 100%;\n padding: 0.5rem;\n margin: 1rem 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n }\n button:hover {\n background-color: #0056b3;\n }\n svg {\n margin-top: 1rem;\n }\n`;",["D",1726062044470],{"_103":232,"_158":140,"_155":116,"_95":99,"_165":233,"_163":176,"_100":32,"_157":-5,"_105":234,"_159":160,"_168":-5},"73f2dde6-2784-11f0-b46e-569c3dd06744","// This val creates a QR code generator using the qrcode-generator library.\n// It generates QR codes on the server side and sends them as SVG images to the client.\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [text, setText] = useState(\"\");\n const [qrCode, setQrCode] = useState(\"\");\n\n const generateQR = async () => {\n if (text) {\n const response = await fetch(`/generate?text=${encodeURIComponent(text)}`);\n const svg = await response.text();\n setQrCode(svg);\n }\n };\n\n return (\n

QR Code Generator

\n setText(e.target.value)}\n placeholder=\"Enter text for QR code\"\n />\n \n {qrCode &&

}\n

\n View Source\n

History for main.tsx