QR Generator

\n \n

\n Loading...\n

\n \n

Customize

\n \n

\n Dots\n dots\n

\n \n

●■

\n \n

\n Corner Square\n extra-rounded\n

\n \n

●■

\n \n

\n Corner Dot\n dot\n

\n \n

●■

\n \n

\n Pixels\n \n

\n Background\n \n

\n \n \n URL\n \n \n \n

\n \n \n

\n \n \n\n\n",[68],"4cd4620e-f48c-11f0-a538-42dde27851f2","client.js","8e658d1e-f3d4-11f0-8c74-42dde27851f2",51,["D",1768754386995],"// Client-side QR generation\nconst DOT_STYLES = [\"dots\", \"rounded\", \"extra-rounded\", \"classy-rounded\", \"classy\", \"square\"];\nconst CORNER_STYLES = [\"dot\", \"extra-rounded\", \"square\"];\n\nlet qrCode = null;\n\nconst state = {\n link: \"https://val.town\",\n dotIndex: 0,\n cornerSquareIndex: 1,\n cornerDotIndex: 0,\n pixelColor: \"#000000\",\n bgColor: \"#ffffff\"\n};\n\nconst getQrOptions = (type = \"canvas\") => ({\n width: 560,\n height: 560,\n type,\n data: state.link || \"https://val.town\",\n dotsOptions: {\n color: state.pixelColor,\n type: DOT_STYLES[state.dotIndex]\n },\n backgroundOptions: {\n color: state.bgColor\n },\n cornersSquareOptions: {\n type: CORNER_STYLES[state.cornerSquareIndex],\n color: state.pixelColor\n },\n cornersDotOptions: {\n type: CORNER_STYLES[state.cornerDotIndex],\n color: state.pixelColor\n }\n});\n\nlet updateTimeout;\nconst updateQR = () => {\n clearTimeout(updateTimeout);\n updateTimeout = setTimeout(() => {\n if (qrCode) {\n qrCode.update(getQrOptions());\n // Update wrapper background to match QR background\n document.getElementById(\"qr-wrapper\").style.backgroundColor = state.bgColor;\n }\n }, 50);\n};\n\nconst randomize = () => {\n state.dotIndex = Math.floor(Math.random() * DOT_STYLES.length);\n state.cornerSquareIndex = Math.floor(Math.random() * CORNER_STYLES.length);\n state.cornerDotIndex = Math.floor(Math.random() * CORNER_STYLES.length);\n state.pixelColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');\n \n // Random pastel background (light but colorful, keeps scannable)\n const hue = Math.floor(Math.random() * 360);\n const sat = 40 + Math.floor(Math.random() * 40); // 40-80%\n const light = 85 + Math.floor(Math.random() * 12); // 85-97%\n state.bgColor = hslToHex(hue, sat, light);\n \n // Update UI\n document.getElementById(\"dot-slider\").value = state.dotIndex;\n document.getElementById(\"dot-value\").textContent = DOT_STYLES[state.dotIndex];\n document.getElementById(\"corner-square-slider\").value = state.cornerSquareIndex;\n document.getElementById(\"corner-square-value\").textContent = CORNER_STYLES[state.cornerSquareIndex];\n document.getElementById(\"corner-dot-slider\").value = state.cornerDotIndex;\n document.getElementById(\"corner-dot-value\").textContent = CORNER_STYLES[state.cornerDotIndex];\n document.getElementById(\"pixel-color\").value = state.pixelColor;\n document.getElementById(\"bg-color\").value = rgbToHex(state.bgColor);\n \n updateQR();\n};\n\nconst rgbToHex = (rgb) => {\n if (rgb.startsWith('#')) return rgb;\n const match = rgb.match(/\\d+/g);\n if (!match) return '#ffffff';\n return '#' + match.slice(0,3).map(x => parseInt(x).toString(16).padStart(2,'0')).join('');\n};\n\nconst hslToHex = (h, s, l) => {\n s /= 100;\n l /= 100;\n const a = s * Math.min(l, 1 - l);\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n};\n\nasync function loadQRLibrary() {\n try {\n const mod = await import(\"https://esm.sh/qr-code-styling@1.6.0-rc.1?bundle\");\n return mod.default || mod;\n } catch (e) {\n console.warn(\"ESM import failed, trying alternate:\", e);\n }\n \n return new Promise((resolve, reject) => {\n const script = document.createElement(\"script\");\n script.src = \"https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js\";\n script.onload = () => resolve(window.QRCodeStyling);\n script.onerror = reject;\n document.head.appendChild(script);\n });\n}\n\nasync function init() {\n const wrapper = document.getElementById(\"qr-wrapper\");\n \n try {\n const QRCodeStyling = await loadQRLibrary();\n \n if (!QRCodeStyling) {\n throw new Error(\"QRCodeStyling not found\");\n }\n \n wrapper.innerHTML = \"\";\n qrCode = new QRCodeStyling(getQrOptions());\n qrCode.append(wrapper);\n \n // Randomize on first load\n randomize();\n } catch (e) {\n console.error(\"QR library failed:\", e);\n wrapper.innerHTML = 'Failed: ' + e.message + '';\n return;\n }\n \n // URL input\n document.getElementById(\"link-input\").addEventListener(\"input\", (e) => {\n state.link = e.target.value;\n updateQR();\n });\n \n // Dot slider\n const dotSlider = document.getElementById(\"dot-slider\");\n const dotValue = document.getElementById(\"dot-value\");\n dotSlider.addEventListener(\"input\", (e) => {\n state.dotIndex = parseInt(e.target.value);\n dotValue.textContent = DOT_STYLES[state.dotIndex];\n updateQR();\n });\n \n // Corner square slider\n const cornerSquareSlider = document.getElementById(\"corner-square-slider\");\n const cornerSquareValue = document.getElementById(\"corner-square-value\");\n cornerSquareSlider.addEventListener(\"input\", (e) => {\n state.cornerSquareIndex = parseInt(e.target.value);\n cornerSquareValue.textContent = CORNER_STYLES[state.cornerSquareIndex];\n updateQR();\n });\n \n // Corner dot slider\n const cornerDotSlider = document.getElementById(\"corner-dot-slider\");\n const cornerDotValue = document.getElementById(\"corner-dot-value\");\n cornerDotSlider.addEventListener(\"input\", (e) => {\n state.cornerDotIndex = parseInt(e.target.value);\n cornerDotValue.textContent = CORNER_STYLES[state.cornerDotIndex];\n updateQR();\n });\n \n // Pixel color\n document.getElementById(\"pixel-color\").addEventListener(\"input\", (e) => {\n state.pixelColor = e.target.value;\n updateQR();\n });\n \n // Background color\n document.getElementById(\"bg-color\").addEventListener(\"input\", (e) => {\n state.bgColor = e.target.value;\n updateQR();\n });\n \n // Randomize\n document.getElementById(\"randomize-btn\").addEventListener(\"click\", randomize);\n \n // Download / Share\n document.getElementById(\"download-btn\").addEventListener(\"click\", async () => {\n if (!qrCode) return;\n \n const canvas = document.querySelector(\"#qr-wrapper canvas\");\n if (!canvas) {\n qrCode.download({ name: \"qr-code\", extension: \"png\" });\n return;\n }\n \n // Try Web Share API on mobile\n if (navigator.share && navigator.canShare) {\n try {\n const blob = await new Promise(resolve => canvas.toBlob(resolve, \"image/png\"));\n const file = new File([blob], \"qr-code.png\", { type: \"image/png\" });\n \n if (navigator.canShare({ files: [file] })) {\n await navigator.share({\n files: [file],\n title: \"QR Code\"\n });\n return;\n }\n } catch (e) {\n // User cancelled or share failed, fall back to download\n if (e.name !== \"AbortError\") {\n console.warn(\"Share failed:\", e);\n }\n }\n }\n \n // Fallback to regular download\n qrCode.download({ name: \"qr-code\", extension: \"png\" });\n });\n}\n\ninit();\n",[76],{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":50,"_51":24,"_52":80,"_54":55,"_56":-5,"_87":97,"_18":98},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":93,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_87":94,"_18":95},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":90,"_17":63,"_51":64,"_52":65,"_54":55,"_56":14,"_87":91,"_18":92},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_87":88,"_18":89},["D",1768754334634],"children",[],[38],["D",1768675730924],[],[59],["D",1768677653414],[],[68],["D",1768754386995],[],[76],"3dc47882-f3d1-11f0-8b0b-42dde27851f2",["D",1768674045845],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","3ee322c5-8742-48e0-86c7-5f3ae129683b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f427167a-3263-4778-81d8-f79626323ff5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_153":149},"org",{"_11":12,"_146":147,"_148":149,"_108":109,"_150":151,"_152":55},"branch",{"_17":78,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Kamal","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaVpXT3l1d2hWSFdtWTNoZFIwZ0lFUUhOd2oifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":99,"_13":14,"_48":202,"_101":-5,"_102":55,"_103":104,"_105":104,"_106":-5,"_107":-5,"_108":109,"_110":60,"_111":47,"_112":-5,"_113":-5,"_114":115,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":203,"_133":204,"_135":205,"_137":55},[190,191,192,193],"files",[190,191,192,193],"counts",{"_180":115,"_181":182,"_183":115,"_31":184,"_185":186},[172,173,174,175],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":50,"_51":24,"_52":80,"_54":55,"_56":-5,"_18":179},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_18":178},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":63,"_51":64,"_52":65,"_54":55,"_56":14,"_18":177},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":176},[38],[59],[68],[76],"pulls","branches",1,"forks",{"_187":115,"_189":115},"connections",{"_187":115,"_188":115},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":50,"_51":24,"_52":80,"_54":55,"_56":-5,"_87":200,"_18":201},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":93,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_87":198,"_18":199},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":90,"_17":63,"_51":64,"_52":65,"_54":55,"_56":14,"_87":196,"_18":197},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_87":194,"_18":195},[],[38],[],[59],[],[68],[],[76],["D",1768674045845],{"_11":12,"_153":149},{"_11":12,"_146":147,"_148":149,"_108":109,"_150":151,"_152":55},{"_17":78,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_131":-5,"_169":239,"_240":241,"_242":243,"_244":55,"_245":55,"_246":55,"_247":47,"_248":-5,"_249":-7,"_250":-7,"_251":115,"_252":55,"_253":55,"_254":-5,"_255":55,"_256":55,"_257":55,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":16,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]