From 9879c8c8f84af014e3ee61f3a2851ee2333cbb9d Mon Sep 17 00:00:00 2001 From: Voxel Date: Mon, 14 Apr 2025 13:38:42 -0400 Subject: [PATCH] QR generator --- qr/index.html | 21 +++++++++++++++++ qr/script.js | 30 ++++++++++++++++++++++++ qr/style.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 qr/index.html create mode 100644 qr/script.js create mode 100644 qr/style.css diff --git a/qr/index.html b/qr/index.html new file mode 100644 index 0000000..a1ca6f5 --- /dev/null +++ b/qr/index.html @@ -0,0 +1,21 @@ + + + + + + MilkNet | QR Code Generator + + + + +
+

QR Code Generator

+ + +
+ +
+ + + + \ No newline at end of file diff --git a/qr/script.js b/qr/script.js new file mode 100644 index 0000000..077d08f --- /dev/null +++ b/qr/script.js @@ -0,0 +1,30 @@ +let qrcode; + +document.getElementById('generate').addEventListener('click', () => { + const qrText = document.getElementById('qr-text').value.trim(); + if (!qrText) return alert("Please enter text!"); + + // Clear previous QR + document.getElementById('qrcode').innerHTML = ""; + + qrcode = new QRCode(document.getElementById('qrcode'), { + text: qrText, + width: 256, + height: 256, + colorDark : "#000000", + colorLight : "#ffffff", + correctLevel : QRCode.CorrectLevel.H + }); + + document.getElementById('download').style.display = 'inline-block'; +}); + +document.getElementById('download').addEventListener('click', () => { + const img = document.querySelector('#qrcode img'); + if (img) { + const link = document.createElement('a'); + link.href = img.src; + link.download = 'qrcode.png'; + link.click(); + } +}); \ No newline at end of file diff --git a/qr/style.css b/qr/style.css new file mode 100644 index 0000000..ff63585 --- /dev/null +++ b/qr/style.css @@ -0,0 +1,63 @@ +body { + font-family: 'Segoe UI', sans-serif; + background: #000; + color: #fff; + text-align: center; + padding: 2rem; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + .container { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 2rem; + border-radius: 20px; + box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); + display: inline-block; + max-width: 90%; + } + + h1 { + font-size: 2rem; + margin-bottom: 1rem; + } + + input { + width: 280px; + padding: 0.6rem; + margin-bottom: 1rem; + background: rgba(255, 255, 255, 0.08); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px; + outline: none; + } + + input::placeholder { + color: #aaa; + } + + button { + padding: 0.6rem 1.2rem; + margin-top: 1rem; + cursor: pointer; + background: rgba(0, 123, 255, 0.8); + color: white; + border: none; + border-radius: 10px; + transition: background 0.2s ease; + font-weight: bold; + } + + button:hover { + background: rgba(0, 123, 255, 1); + } + + #qrcode { + margin-top: 2rem; + } \ No newline at end of file