Kumi
bd4fc2cf59
Adds support for generating QR codes in SVG format alongside PNG, providing users with the option to choose between these formats. Includes UI elements for selecting output format. Updates to utilize local QR code library instead of external CDN. Improves accessibility by allowing QR codes to be downloaded as SVG files. Fixes UI discrepancies when switching between formats.
105 lines
3.3 KiB
HTML
105 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>QRMaker</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link
|
|
href="https://nobsdelivr.private.coffee/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<h1 class="text-center">QRMaker</h1>
|
|
<div class="form-group textarea-container">
|
|
<label for="text-input">Enter text to generate QR code:</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="text-input"
|
|
rows="5"
|
|
placeholder="Type something..."
|
|
></textarea>
|
|
</div>
|
|
<div class="form-group mb-3 text-center">
|
|
<div class="btn-group" role="group" aria-label="Output Type">
|
|
<input
|
|
type="radio"
|
|
class="btn-check"
|
|
name="output-type"
|
|
id="png-output"
|
|
autocomplete="off"
|
|
checked
|
|
/>
|
|
<label class="btn btn-outline-primary" for="png-output"
|
|
>PNG</label
|
|
>
|
|
|
|
<input
|
|
type="radio"
|
|
class="btn-check"
|
|
name="output-type"
|
|
id="svg-output"
|
|
autocomplete="off"
|
|
/>
|
|
<label class="btn btn-outline-primary" for="svg-output"
|
|
>SVG</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="qr-code-container">
|
|
<div id="qrcodepng"></div>
|
|
<div id="qrcodesvgcontainer">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<g id="qrcodesvg" />
|
|
</svg>
|
|
<a
|
|
id="download-svg"
|
|
class="btn btn-primary"
|
|
href="#"
|
|
download="qrcode.svg"
|
|
>Download SVG</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>
|
|
Brought to you by
|
|
<a href="https://private.coffee" target="_blank">Private.coffee</a>
|
|
</p>
|
|
<p>
|
|
Source code available on
|
|
<a
|
|
href="https://git.private.coffee/PrivateCoffee/QRMaker"
|
|
target="_blank"
|
|
>Private.coffee Git</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- QRCode.js library -->
|
|
<script src="dist/qrcode.js"></script>
|
|
<!-- Bootstrap JS and dependencies -->
|
|
<script src="https://nobsdelivr.private.coffee/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<script src="https://nobsdelivr.private.coffee/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
|
|
<script src="https://nobsdelivr.private.coffee/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|