From f3e90334d4b2bb3cc72a8ae594f6174a840e3141 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 15 May 2026 16:43:51 +0000 Subject: [PATCH 1/2] Add WiFi QR code mode to the QR code generator Introduces a mode toggle ("URL / text" vs "WiFi") in the input card. The WiFi panel collects SSID, password, security type, and a hidden-network flag, formats them into the standard WIFI:T:...;S:...;P:...;H:...;; payload with the required backslash-escaping of \ ; , " : characters, and feeds it into the existing QR rendering pipeline. Security defaults to "WPA / WPA2 / WPA3" with a hint that this covers almost every home network, so users who don't know which encryption their network uses can leave it alone. --- qr-code-generator.html | 206 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 192 insertions(+), 14 deletions(-) diff --git a/qr-code-generator.html b/qr-code-generator.html index cacdee2..19d51aa 100644 --- a/qr-code-generator.html +++ b/qr-code-generator.html @@ -201,17 +201,128 @@ .error.visible { display: block; } + +.mode-tabs { +display: flex; +gap: 4px; +background: #f5f5f7; +border-radius: 10px; +padding: 4px; +margin-bottom: 16px; +} + +.mode-tab { +flex: 1; +font-family: Helvetica, Arial, sans-serif; +font-size: 14px; +font-weight: 500; +padding: 8px 12px; +border-radius: 7px; +border: none; +background: transparent; +color: #1d1d1f; +cursor: pointer; +width: auto; +margin: 0; +transition: background 0.15s ease; +} + +.mode-tab.active { +background: #fff; +box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); +} + +.mode-panel { +display: none; +} + +.mode-panel.active { +display: block; +} + +.field { +margin-bottom: 12px; +} + +.field:last-child { +margin-bottom: 0; +} + +.password-wrap { +position: relative; +} + +.password-wrap input { +padding-right: 64px; +} + +.password-toggle { +position: absolute; +right: 8px; +top: 50%; +transform: translateY(-50%); +background: transparent; +border: none; +color: #0071e3; +font-size: 13px; +padding: 4px 8px; +width: auto; +margin: 0; +cursor: pointer; +} + +.hint { +margin: 10px 0 0; +font-size: 12px; +color: #6e6e73; +line-height: 1.4; +}

QR code generator

-

Paste any URL or text to create a scannable code.

+

Create a scannable code for a URL, text, or WiFi network.

- - +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ +
+ + +
+
+
+ + + +
+

Not sure? Leave it on WPA / WPA2 / WPA3 — that covers almost every home WiFi network.

+
+
``` @@ -259,6 +370,15 @@

QR code generator

From 6d07529a937a20e434ed242e5a8f8a591c528db2 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 15 May 2026 16:49:34 +0000 Subject: [PATCH 2/2] Fix stray markdown fences and broken input style selectors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The form card had two pre-existing bugs that became more visible with the WiFi panel added: - Two ``` fences were left in the markup and rendered as visible backticks above and below the Style/Size/Color block. - The input[type="text"] CSS selectors used curly Unicode quotes (“ ”) instead of straight quotes, so the rule never matched and text inputs fell back to browser defaults with inconsistent sizing and a sub-16px font (which triggers iOS auto-zoom on focus). Removes the fences, fixes the selectors, and extends the rule to cover input[type="password"] so the new WiFi password field matches the rest. --- qr-code-generator.html | 53 +++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/qr-code-generator.html b/qr-code-generator.html index 19d51aa..19e2e86 100644 --- a/qr-code-generator.html +++ b/qr-code-generator.html @@ -51,7 +51,8 @@ margin-bottom: 6px; } -input[type=“text”] { +input[type="text"], +input[type="password"] { width: 100%; font-size: 16px; font-family: Helvetica, Arial, sans-serif; @@ -64,7 +65,8 @@ appearance: none; } -input[type=“text”]:focus { +input[type="text"]:focus, +input[type="password"]:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); @@ -325,33 +327,30 @@

QR code generator

-``` -
- - - -
- -
- - - - -
+
+ + + +
- -``` +
+ + + + +
+