479e22e151
Move it near the text box. Change handling of updates to be more robust and remove the possibility of a particular bug that was occuring. Set the display threshold higher, now 50%.
168 lines
7.1 KiB
HTML
168 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple QR Generator</title>
|
|
<meta name="description" content="Fast, offline, multi-format QR code generator.">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<script src="qrcode.min.js"></script>
|
|
<script src="script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
|
|
<main class="app-container">
|
|
<section class="pane input-pane">
|
|
<header>
|
|
<h1>QR Generator</h1>
|
|
</header>
|
|
|
|
<div class="control-group">
|
|
<label for="mode-selector">Content Type</label>
|
|
<select id="mode-selector">
|
|
<option value="text">URL / Text</option>
|
|
<option value="wifi">WiFi Network</option>
|
|
<option value="email">Email</option>
|
|
</select>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div id="form-text" class="input-form active">
|
|
<div class="control-group">
|
|
<label for="inp-text">Text or URL</label>
|
|
<textarea id="inp-text" rows="6" placeholder="https://example.com or plain text"></textarea>
|
|
</div>
|
|
|
|
<div id="capacity-meter" style="display:none; margin-top:0.75rem; width:100%;">
|
|
<div style="display:flex; justify-content:space-between; font-size:0.7rem; font-family:var(--font-mono); margin-bottom:0.2rem;">
|
|
<span id="capacity-label">CAPACITY</span>
|
|
<span id="capacity-text">0%</span>
|
|
</div>
|
|
<div style="width:100%; height:4px; background:#eee; border:1px solid #000;">
|
|
<div id="capacity-bar" style="width:0%; height:100%; background:#000;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-wifi" class="input-form">
|
|
<div class="control-group">
|
|
<label for="inp-wifi-ssid">Network Name (SSID)</label>
|
|
<input type="text" id="inp-wifi-ssid" placeholder="MyWiFi">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="inp-wifi-pass">Password</label>
|
|
<input type="password" id="inp-wifi-pass" placeholder="Password">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="inp-wifi-type">Encryption</label>
|
|
<select id="inp-wifi-type">
|
|
<option value="WPA">WPA/WPA2</option>
|
|
<option value="WEP">WEP</option>
|
|
<option value="nopass">None</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-email" class="input-form">
|
|
<div class="control-group">
|
|
<label for="inp-email-to">To</label>
|
|
<input type="email" id="inp-email-to" placeholder="recipient@example.com">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="inp-email-sub">Subject</label>
|
|
<input type="text" id="inp-email-sub" placeholder="Inquiry">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="inp-email-body">Body</label>
|
|
<textarea id="inp-email-body" rows="4" placeholder="Message content..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="advanced-options">
|
|
<summary>ADVANCED CONFIGURATION</summary>
|
|
|
|
<div class="control-group">
|
|
<label for="opt-ecc">Error Correction</label>
|
|
<select id="opt-ecc">
|
|
<option value="H" selected>High (30%) - Best for Print</option>
|
|
<option value="Q">Quartile (25%)</option>
|
|
<option value="M">Medium (15%)</option>
|
|
<option value="L">Low (7%) - Highest Capacity</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="opt-size">Resolution (px)</label>
|
|
<input type="number" id="opt-size" value="256" min="64" max="4000" step="32">
|
|
<small style="display:block; margin-top:0.5rem; font-family:var(--font-mono); opacity:0.6;">
|
|
Min: 64px // Max: 4000px
|
|
</small>
|
|
</div>
|
|
|
|
<div class="control-group color-group">
|
|
<div class="color-input">
|
|
<label for="opt-fg">Foreground</label>
|
|
<div class="input-wrapper">
|
|
<input type="color" id="opt-fg" value="#000000">
|
|
<span id="hex-fg">#000000</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-input">
|
|
<label for="opt-bg">Background</label>
|
|
<div class="input-wrapper">
|
|
<input type="color" id="opt-bg" value="#ffffff">
|
|
<span id="hex-bg">#FFFFFF</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Output Format</label>
|
|
<div style="display: flex; gap: 2rem; align-items: center; border: 1px solid black; padding: 1rem; background: #fff;">
|
|
<label style="margin:0; display:flex; align-items:center; cursor:pointer;">
|
|
<input type="radio" name="opt-fmt" value="png" checked style="width:auto; margin-right:0.5rem;">
|
|
PNG
|
|
</label>
|
|
<label style="margin:0; display:flex; align-items:center; cursor:pointer;">
|
|
<input type="radio" name="opt-fmt" value="svg" style="width:auto; margin-right:0.5rem;">
|
|
SVG
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
|
|
<section class="pane preview-pane">
|
|
<div class="sticky-wrapper">
|
|
|
|
<div id="qr-container"> </div>
|
|
|
|
<button id="btn-download" disabled>DOWNLOAD PNG</button>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="app-footer">
|
|
<div class="footer-content">
|
|
<p>
|
|
© 2025 figtree
|
|
</p>
|
|
<p>
|
|
Source code licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">AGPLv3</a>.
|
|
</p>
|
|
<p>
|
|
Powered by <a href="https://davidshimjs.github.io/qrcodejs/" target="_blank">qrcode.js</a> (MIT).
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
|
|
<!-- A robin redbreast in a cage -->
|
|
<!-- Puts all Heaven in a rage. -->
|
|
|
|
</body>
|
|
</html>
|