84 lines
3.3 KiB
HTML
84 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QR Generator</title>
|
|
<meta name="description" content="Fast, offline, multi-format QR code generator.">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" defer></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>
|
|
|
|
<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>
|
|
</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>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|