Youth Parliament World

Parliamentary Youth Communication Budget Internationally

recent posts

about

To Create a membership QR to be used for voting

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Member QR Code Generator</title> <!– Include the open-source QR Code library –> <script src=”https://cloudflare.com”></script&gt; <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f7f6; } .container { background-color: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 350px; } input { width: 100%; padding: 10px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } button { width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; } button:hover { background-color: #0056b3; } #qrcode { margin: 25px auto; display: flex; justify-content: center; } #downloadBtn { background-color: #28a745; display: none; margin-top: 10px; } #downloadBtn:hover { background-color: #218838; } </style> </head> <body> <div class=”container”> <h2>Generate Your QR Code</h2> <input type=”text” id=”qrText” placeholder=”Enter text or URL here…”> <button onclick=”generateQR()”>Generate QR Code</button> <!– QR Code container –> <div id=”qrcode”></div> <button id=”downloadBtn” onclick=”downloadQR()”>Download Image</button> </div> <script> let qrcodeInstance = null; function generateQR() { const textValue = document.getElementById(“qrText”).value.trim(); const qrContainer = document.getElementById(“qrcode”); const downloadBtn = document.getElementById(“downloadBtn”); if (!textValue) { alert(“Please enter some text or a URL first!”); return; } // Clear previous QR code if it exists qrContainer.innerHTML = “”; // Create new QR Code instance qrcodeInstance = new QRCode(qrContainer, { text: textValue, width: 200, height: 200, colorDark : “#000000”, colorLight : “#ffffff”, correctLevel : QRCode.CorrectLevel.H }); // Show download button once QR is generated setTimeout(() => { downloadBtn.style.display = “block”; }, 100); } function downloadQR() { const qrImg = document.querySelector(“#qrcode img”); if (!qrImg) return; // Create a temporary link to trigger the browser download const downloadLink = document.createElement(“a”); downloadLink.href = qrImg.src; downloadLink.download = “member-qrcode.png”; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink);

Posted in

Leave a comment