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",[143],"4cd4620e-f48c-11f0-a538-42dde27851f2","client.js","8e658d1e-f3d4-11f0-8c74-42dde27851f2",["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",[151],"pulls",1,"forks","envVars",{"_163":53,"_165":53},"connections",{"_163":53,"_164":53},"count","unfilledCount","emptyCount",{"_20":150,"_13":151,"_119":152,"_121":-5,"_122":21,"_123":30,"_125":49,"_22":180,"_29":127,"_128":102,"_129":154,"_131":38,"_132":-5,"_171":181,"_90":182},{"_20":142,"_13":143,"_119":144,"_121":-5,"_122":21,"_123":145,"_125":49,"_22":177,"_29":147,"_128":102,"_129":148,"_131":38,"_132":-5,"_171":178,"_90":179},{"_20":134,"_13":135,"_119":47,"_121":-5,"_122":21,"_123":136,"_125":49,"_22":174,"_29":138,"_128":139,"_129":140,"_131":38,"_132":14,"_171":175,"_90":176},{"_20":117,"_13":118,"_119":120,"_121":-5,"_122":21,"_123":124,"_125":49,"_22":170,"_29":127,"_128":102,"_129":130,"_131":38,"_132":-5,"_171":172,"_90":173},["D",1768754334634],"children",[],[118],["D",1768675730924],[],[135],["D",1768677653414],[],[143],["D",1768754386995],[],[151],["D",1768674045845],{"_11":12,"_88":84},{"_11":12,"_81":82,"_83":84,"_44":45,"_85":86,"_87":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_76":-5,"_77":-5,"_78":-5,"_79":14,"_80":12},"ctx",{"_69":-5,"_110":220,"_221":222,"_223":224,"_225":38,"_226":38,"_227":38,"_228":49,"_229":-5,"_230":-7,"_231":-7,"_232":53,"_233":38,"_234":38,"_235":-5,"_236":38,"_237":38,"_238":38,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":26,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"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"]

Branches1

Branches
1