← BACK
QR Code Generator.txt
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QR Generator Pro</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>:root{--bg:#0c0e2b;--main-color:#2df3fd;--shadow-light:rgba(255,255,255,0.3);--shadow-a:rgba(255,255,255,0.4);--shadow-dark:rgba(0,0,0,0.9);--text-color:#ffffff}body{font-family:'Segoe UI',sans-serif;background-color:var(--bg);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;margin:0;padding:35px 20px 20px 20px}.container{background:rgb(255 255 255 / .17);padding:20px;border-radius:20px;box-shadow:0 8px 20px var(--shadow-dark);backdrop-filter:blur(12px);border:2px solid var(--shadow-light);text-align:center;position:relative}.back-button{position:absolute;top:10px;left:10px;background:rgb(10 11 30 / .6);width:35px;height:35px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;backdrop-filter:blur(6px);border:1px solid var(--shadow-light)}.back-button:active{box-shadow:inset 3px 3px 7px var(--shadow-dark);transform:scale(.95)}.back-button svg{fill:var(--text-color);width:28px;height:28px}h2{color:var(--main-color);margin-bottom:20px;margin-top:20px;font-size:22px;text-shadow:0 0 8px rgb(45 243 253 / .7)}.input-group input[type="text"]{font-size:14px;width:92%;padding:10px 8px 10px 8px;border:none;border-radius:8px;background:rgb(7 8 26 / .8);color:var(--text-color);backdrop-filter:blur(6px);border:1px solid var(--shadow-light);transition:0.3s}.input-group input[type="text"]:focus{outline:none;box-shadow:0 0 5px var(--main-color)}.input-group input::placeholder{color:#808181}.color-options{display:flex;gap:15px;justify-content:center;margin-top:10px;margin-bottom:10px}.color-option{width:37px;height:37px;border-radius:50%;cursor:pointer;position:relative;border:2px solid var(--shadow-a)}.color-option.selected::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px}.color-option.black{background-color:#000}.color-option.blue{background-color:#01017E}#qrcode{background-color:#fff;width:285px;height:285px;padding:10px;border-radius:10px;display:flex;justify-content:center;align-items:center}#qrcode canvas,#qrcode img{width:100%!important;height:100%!important;object-fit:contain}.download-button{background:linear-gradient(90deg,#3f0290,#029199);color:#fff;padding:12px 25px;border:1px solid var(--shadow-light);border-radius:15px;font-size:15px;font-weight:600;cursor:pointer;margin-top:15px;transition:0.3s}.download-button:hover{background:linear-gradient(90deg,#2df3fd,#00ff00);box-shadow:0 0 15px rgb(0 255 0 / .7)}@media (max-width:600px){.container{padding:15px;border-radius:12px}h2{font-size:20px}.download-button{padding:10px 20px}}</style></head><body><div class="container"><a href="/" class="back-button" aria-label="Kembali ke Halaman Utama"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg></a><h2>QR Code Generator</h2><div class="input-group"><input type="text" id="qrTextInput" placeholder="Ketik teks atau URL..." oninput="generateQR()"></div><div class="color-group"><div class="color-options"><div class="color-option black selected" data-color="#000000" onclick="selectColor(this, '#000000')"></div><div class="color-option blue" data-color="#01017E" onclick="selectColor(this, '#01017E')"></div></div></div><div id="qrcode-container"><div id="qrcode"></div></div><button class="download-button" onclick="downloadQR()">Download QR Code</button></div><script>let qrcodeInstance;let selectedColor="#000000";function initQRCode(){if(qrcodeInstance){qrcodeInstance.clear();document.getElementById("qrcode").innerHTML=""}
qrcodeInstance=new QRCode(document.getElementById("qrcode"),{width:300,height:300,colorDark:selectedColor,colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.H});generateQR()}
function generateQR(){const data=document.getElementById("qrTextInput").value;if(data){qrcodeInstance.makeCode(data)}else{qrcodeInstance.clear()}}
function selectColor(element,color){document.querySelectorAll('.color-option').forEach(opt=>opt.classList.remove('selected'));element.classList.add('selected');selectedColor=color;initQRCode()}
function downloadQR(){const originalCanvas=document.querySelector('#qrcode canvas');if(originalCanvas){const padding=20;const newCanvas=document.createElement('canvas');const ctx=newCanvas.getContext('2d');newCanvas.width=originalCanvas.width+(padding*2);newCanvas.height=originalCanvas.height+(padding*2);ctx.fillStyle="#ffffff";ctx.fillRect(0,0,newCanvas.width,newCanvas.height);ctx.drawImage(originalCanvas,padding,padding);const dataURL=newCanvas.toDataURL("image/png");const a=document.createElement("a");a.href=dataURL;a.download="my_qrcode.png";document.body.appendChild(a);a.click();document.body.removeChild(a)}else{alert("QR Code belum dibuat!")}}
window.onload=initQRCode</script></body></html>