BerriJ/onlyqr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modularize

Browse Source
This commit is contained in:
Jonathan Berrisch
2025-06-11 09:20:49 +02:00
parent fb0e0ee87f
commit 753635f62b
3 changed files with 267 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app.js Normal file
View File

@@ -0,0 +1,80 @@
/* filepath: /home/jonathan/git/onlyqr/app.js */
(function() {
'use strict';
// Initialize QR code generator
var qrcode = new QRCode(document.getElementById("qrcode"), {
colorDark: "#004c93"
});
var debounceTimer;
function makeCode() {
var elText = document.getElementById("text");
var elColor = document.getElementById("color");
var text = elText.value || "https://git.0n8.de/BerriJ/onlyqr";
qrcode._htOption.colorDark = elColor.value;
qrcode.makeCode(text);
}
function debouncedMakeCode() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(makeCode, 20);
}
function downloadSVG() {
var svg = document.querySelector('#qrcode svg');
if (!svg) {
alert('No QR code to download. Please generate a QR code first.');
return;
}
var svgData = new XMLSerializer().serializeToString(svg);
var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "qrcode.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(svgUrl);
}
function initializeApp() {
// Generate initial QR code
makeCode();
// Focus the input field
document.getElementById("text").focus();
// Set up event listeners
var textInput = document.getElementById("text");
var colorInput = document.getElementById("color");
var downloadButton = document.getElementById("download");
// Text input events
textInput.addEventListener('input', debouncedMakeCode);
textInput.addEventListener('blur', makeCode);
textInput.addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
makeCode();
}
});
// Color input events
colorInput.addEventListener('change', makeCode);
// Download button event
downloadButton.addEventListener('click', downloadSVG);
}
// Initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeApp);
} else {
initializeApp();
}
})();

244
index.html
View File

@@ -5,148 +5,7 @@
<title>QR Code Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 600px;
width: 100%;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: 300;
}
.input-group {
margin-bottom: 25px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
justify-content: center;
}
#text {
flex: 1;
min-width: 250px;
padding: 15px 20px;
border: 2px solid #e1e8ed;
border-radius: 25px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
#text:focus {
border-color: #4a5568;
}
#color {
width: 60px;
height: 50px;
border: none;
border-radius: 25px;
cursor: pointer;
outline: none;
}
#download {
background: linear-gradient(45deg, #4a5568, #2d3748);
color: white;
border: none;
padding: 15px 25px;
border-radius: 25px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#download:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.qr-container {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: center;
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
overflow: visible;
}
#qrcode {
display: flex;
justify-content: center;
align-items: center;
}
#qrcode svg {
max-width: 100%;
max-height: none;
width: auto;
height: auto;
border-radius: 10px;
background: white;
padding: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: block;
}
.footer {
margin-top: 20px;
color: #666;
font-size: 14px;
}
@media (max-width: 480px) {
.container {
padding: 25px;
margin: 10px;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
}
.input-group {
flex-direction: column;
}
#text {
min-width: 100%;
}
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
@@ -154,86 +13,47 @@
<h1>QR Code Generator</h1>
<div class="input-group">
<input id="text" type="text" value="" placeholder="Enter text or URL to generate QR code" autofocus />
<input id="text" type="text" value="" placeholder="Enter text to generate ..." autofocus />
<input id="color" type="color" value="#004c93" title="Choose QR code color" />
<button id="download" onclick="downloadSVG()">Download SVG</button>
<button id="download">Download SVG</button>
</div>
<div class="qr-container">
<div id="qrcode"></div>
</div>
<div class="footer">
Enter any text or URL above to generate a QR code
</div>
<div class="footer" style="margin-top: 10px; font-size: 12px; color: #999;">
Made by <a href="https://github.com/BerriJ" target="_blank" style="color: #667; text-decoration: none;">BerriJ</a>
with ❤️ using <a href="https://github.com/davidshimjs/qrcodejs" target="_blank"
style="color: #667; text-decoration: none;">QRCode.js by davidshimjs</a>
<div class="footer-credits">
Made by <a href="https://github.com/BerriJ" target="_blank">BerriJ</a>
with ❤️ using <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">QRCode.js.</a><br>
<a href="https://git.0n8.de/BerriJ/onlyqr" target="_blank" class="source-link">
Source:
<svg width="16" height="16" viewBox="0 0 640 640" style="fill:#609926;" aria-hidden="true">
<path d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2
c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5
c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5
c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3
c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1
C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4
c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7
S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55
c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8
l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z" />
<path d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4
c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1
c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9
c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3
c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3
c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29
c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8
C343.2,346.5,335,363.3,326.8,380.1z" />
</svg>
</a>
</div>
</div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
colorDark: "#004c93"
});
var debounceTimer;
function makeCode() {
var elText = document.getElementById("text");
var elColor = document.getElementById("color");
var text = elText.value || "https://git.0n8.de/BerriJ/onlyqr";
qrcode._htOption.colorDark = elColor.value;
qrcode.makeCode(text);
}
function debouncedMakeCode() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(makeCode, 20);
}
// Generate initial QR code with default URL since input is empty
makeCode();
// Focus the input field after page loads
document.getElementById("text").focus();
$("#text").
on("input", function () {
debouncedMakeCode();
}).
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
$("#color").on("change", function () {
makeCode();
});
function downloadSVG() {
var svg = document.querySelector('#qrcode svg');
var svgData = new XMLSerializer().serializeToString(svg);
var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "qrcode.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(svgUrl);
}
</script>
<script src="jquery.min.js"></script>
<script src="qrcode.js"></script>
<script src="app.js"></script>
</body>
</html>

155
styles.css Normal file
View File

@@ -0,0 +1,155 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 600px;
width: 100%;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: 300;
}
.input-group {
margin-bottom: 25px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
justify-content: center;
}
#text {
flex: 1;
min-width: 250px;
padding: 15px 20px;
border: 2px solid #e1e8ed;
border-radius: 25px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
#text:focus {
border-color: #4a5568;
}
#color {
width: 60px;
height: 50px;
border: none;
border-radius: 25px;
cursor: pointer;
outline: none;
}
#download {
background: linear-gradient(45deg, #4a5568, #2d3748);
color: white;
border: none;
padding: 15px 25px;
border-radius: 25px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#download:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.qr-container {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: center;
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
overflow: visible;
}
#qrcode {
display: flex;
justify-content: center;
align-items: center;
}
#qrcode svg {
max-width: 100%;
max-height: none;
width: auto;
height: auto;
border-radius: 10px;
background: white;
padding: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: block;
}
.footer {
margin-top: 20px;
color: #666;
font-size: 14px;
}
.footer-credits {
margin-top: 10px;
font-size: 12px;
color: #999;
}
.footer-credits a {
color: #667;
text-decoration: none;
}
.source-link {
display: inline-flex;
align-items: center;
gap: 3px;
}
@media (max-width: 480px) {
.container {
padding: 25px;
margin: 10px;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
}
.input-group {
flex-direction: column;
}
#text {
min-width: 100%;
}
}