eldridge.cam
CGI bin for generating a QR code
1<!doctype html>
2<html>
3 <head>
4 <title>QR Generator</title>
5 <style>
6 form {
7 width: 100%;
8 max-width: 1000px;
9 display: grid;
10 grid-template-columns: auto 1fr;
11 gap: 0 1rem;
12 }
13
14 form > * {
15 display: grid;
16 grid-template-columns: subgrid;
17 align-items: center;
18 grid-column: 1 / -1;
19 }
20
21 .radio {
22 display: flex;
23 gap: 2rem;
24 }
25 </style>
26 </head>
27 <body>
28 <div>
29 <form>
30 <label>
31 <p>Data</p>
32 <textarea name="data" placeholder="QR data"></textarea>
33 </label>
34 <label>
35 <p>Foreground Color</p>
36 <input
37 type="color"
38 name="fg"
39 value="#000000"
40 alpha
41 colorspace="limited-srgb"
42 />
43 </label>
44 <label>
45 <p>Background Color</p>
46 <input
47 type="color"
48 name="bg"
49 value="#ffffff"
50 alpha
51 colorspace="limited-srgb"
52 />
53 </label>
54 <div>
55 <p>Error correction level:</p>
56 <div class="radio">
57 <label><input type="radio" name="ec" value="L" /> Low (7%)</label>
58 <label>
59 <input type="radio" name="ec" value="M" checked /> Medium (15%)
60 </label>
61 <label>
62 <input type="radio" name="ec" value="Q" /> Quartile (25%)
63 </label>
64 <label><input type="radio" name="ec" value="H" /> High (30%)</label>
65 </div>
66 </div>
67 <div>
68 <p>Mode</p>
69 <div class="radio">
70 <label>
71 <input type="radio" name="mode" value="Micro" /> Micro (Version
72 must be 1-4)
73 </label>
74 <label>
75 <input type="radio" name="mode" value="Standard" checked />
76 Standard (Version must be 1-40)
77 </label>
78 <label>
79 <input type="radio" name="mode" value="Auto" checked />
80 Auto
81 </label>
82 </div>
83 </div>
84 <label>
85 <p>Version (if Mode is not auto)</p>
86 <input type="number" name="version" min="1" max="40" value="9" />
87 </label>
88 <label>
89 <p>Size (pixels; approximate)</p>
90 <input type="number" name="size" max="2048" value="200" />
91 </label>
92 <div>
93 <p>Format</p>
94 <div class="radio">
95 <label>
96 <input type="radio" name="format" value="Png" checked /> PNG
97 </label>
98 <label>
99 <input type="radio" name="format" value="Avif" />
100 AVIF
101 </label>
102 <label>
103 <input type="radio" name="format" value="Svg" />
104 SVG
105 </label>
106 </div>
107 </div>
108 </form>
109 <button onclick="generate()">Generate</button>
110 </div>
111 <script>
112 const form = document.querySelector("form");
113
114 function formatColor(color) {
115 return color.slice(1).padEnd(8, "f").toLowerCase();
116 }
117
118 function generate() {
119 const formdata = new FormData(form);
120 const data = formdata.get("data");
121 formdata.delete("data");
122 formdata.set("fg", formatColor(formdata.get("fg")));
123 formdata.set("bg", formatColor(formdata.get("bg")));
124 const query = new URLSearchParams(formdata);
125 window.location.href = `/${encodeURIComponent(data)}?${query}`;
126 }
127 </script>
128 </body>
129</html>