milknet/pages
1
0
Fork 0
mirror of https://github.com/milk-net/milk-net.github.io.git synced 2025-04-19 21:53:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

QR generator

Browse source
This commit is contained in:
Voxel 2025-04-14 13:38:42 -04:00 • committed by GitHub
parent c249bbce55
commit 9879c8c8f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 114 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
qr/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MilkNet | QR Code Generator</title>
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>QR Code Generator</h1>
<input type="text" id="qr-text" placeholder="Enter text or URL" />
<button id="generate">Generate QR</button>
<div id="qrcode"></div>
<button id="download" style="display:none;">Download image</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script src="script.js"></script>
</body>
</html>

30
qr/script.js Normal file
View file

@ -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();
}
});

63
qr/style.css Normal file
View file

@ -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;
}