File manager

File manager - Edit - /home/webtrixia/qr.webtrixia.com/index.html

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Webtrixia QR Code Generator</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> :root{ --bg:#0b0c10; --panel:#101318; --muted:#9aa3af; --text:#e5e7eb; --green:#22c55e; --green-dark:#16a34a; --border:#1f2937; --card:#0f1217; } {box-sizing:border-box} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background: var(--bg); position: relative; overflow-x: hidden; min-height:100vh; } / Background pattern using W image / body::before { content:""; position:fixed; inset:0; background: url("wpattern.png"); / rename your uploaded file here / background-size: 200px 200px; / adjust tile size / background-repeat: repeat; background-position: center; opacity: 0.08; / make subtle / z-index:-1; pointer-events:none; } .wrap{ max-width:980px; margin:28px auto 60px; padding:16px; } .card{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.35); padding:24px; backdrop-filter: blur(6px); } .head{display:flex;justify-content:center;margin-bottom:12px} .logo{max-width:260px;height:auto} h1{text-align:center;margin:4px 0 0;font-size:28px;font-weight:800} p.muted{color:var(--muted);margin:.25rem 0 1.25rem;text-align:center} .grid{display:grid;gap:18px;grid-template-columns:1.2fr .8fr} @media(max-width:900px){.grid{grid-template-columns:1fr}} .panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px} label{display:block;margin:0 0 6px;font-weight:600} textarea,input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #2a3340;background:#0e1217;color:var(--text);font-size:15px} textarea{min-height:90px;resize:vertical} .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px} .btn{appearance:none;border:0;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;background:var(--green);color:#0b0c10;box-shadow:0 8px 26px rgba(34,197,94,.35)} .btn:hover{filter:brightness(1.06)} .btn.secondary{background:#0e1217;color:var(--text);border:1px solid #2a3340;box-shadow:none} .hint{font-size:12px;color:var(--muted);margin-top:6px} .preview{ background:linear-gradient(180deg, rgba(34,197,94,.05), rgba(34,197,94,.02)), #0d1216; border:1px solid rgba(34,197,94,.25); border-radius:18px; padding:20px; display:flex;flex-direction:column;align-items:center } .preview h2{margin:0 0 10px;font-size:18px;font-weight:800} .qr-frame{ position:relative; width:min(320px,90%); aspect-ratio:1/1; margin:8px auto 10px; border-radius:16px; background:#fff; display:grid;place-items:center; box-shadow: 0 0 25px rgba(34,197,94,.25), 0 0 60px rgba(34,197,94,.15); border:2px solid rgba(34,197,94,.35); } .qr-frame:before,.qr-frame:after{ content:"";position:absolute;width:28px;height:28px;border:4px solid var(--green); filter: drop-shadow(0 0 12px rgba(34,197,94,.5)); } .qr-frame:before{left:-2px;top:-2px;border-right:none;border-bottom:none;border-radius:12px 0 0 0} .qr-frame:after{right:-2px;bottom:-2px;border-left:none;border-top:none;border-radius:0 0 12px 0} canvas#canvasOut{max-width:88%;max-height:88%;border-radius:8px} a#download{display:none;padding:10px 14px;border-radius:10px;font-weight:700;background:var(--green-dark);color:#fff;text-decoration:none;border:1px solid rgba(34,197,94,.45)} a#download:hover{filter:brightness(1.06)} .foot{margin-top:8px;text-align:center;color:var(--muted);font-size:12px} </style> </head> <body> <div class="wrap"> <div class="card"> <div class="head"><img src="webtrixialogo1.png" alt="Webtrixia Logo" class="logo"></div> <h1>QR Code Generator</h1> <p class="muted">Generate stylish QR codes instantly with optional center logos.</p> <div class="grid"> <!-- Controls --> <div class="panel"> <label for="text">Text / URL</label> <textarea id="text" placeholder="https://example.com"></textarea> <div class="row" style="margin-top:12px"> <div> <label for="ec">Error Correction</label> <select id="ec"> <option value="L">L (7%)</option> <option value="M">M (15%)</option> <option value="Q">Q (25%)</option> <option value="H" selected>H (30%)</option> </select> </div> <div> <label for="logo">Center Image (optional)</label> <input id="centerImage" type="file" accept="image/"> <div class="hint">Square images look best</div> </div> </div> <div class="actions"> <button class="btn" id="genBtn">Generate</button> <button class="btn secondary" id="clearBtn">Clear</button> </div> </div> <!-- Preview --> <div class="preview"> <h2>Preview</h2> <div class="qr-frame"><canvas id="canvasOut" width="276" height="276"></canvas></div> <a id="download" download="qrcode.png">⬇️ Download PNG</a> <div class="foot">Tip: keep the center logo ≤ 25% for best scan reliability.</div> </div> </div> </div> </div> <div id="qrHidden" style="position:absolute; left:-9999px; top:-9999px;"></div> <!-- qrcodejs --> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> const SIZE=256,PADDING=10,LOGO_RATIO=0.25; const genBtn=document.getElementById('genBtn'),clearBtn=document.getElementById('clearBtn'); genBtn.addEventListener('click',generate); clearBtn.addEventListener('click',()=>{document.getElementById('text').value='';document.getElementById('centerImage').value='';resetCanvas();}); function resetCanvas(){const out=document.getElementById('canvasOut'),ctx=out.getContext('2d');out.width=SIZE+PADDING2;out.height=SIZE+PADDING2;ctx.fillStyle='#ffffff';ctx.fillRect(0,0,out.width,out.height);document.getElementById('download').style.display='none';} resetCanvas(); function generate(){const text=document.getElementById('text').value.trim(),ec=document.getElementById('ec').value\|\|'H';if(!text){alert('Please enter some text or URL!');return;}const hidden=document.getElementById('qrHidden');hidden.innerHTML='';new QRCode(hidden,{text,width:SIZE,height:SIZE,correctLevel:QRCode.CorrectLevel[ec]??QRCode.CorrectLevel.H});const tryCompose=()=>{let srcCanvas=hidden.querySelector('canvas');const img=hidden.querySelector('img');if(srcCanvas){composeWithOptionalLogo(srcCanvas);}else if(img){if(img.complete){const temp=document.createElement('canvas');temp.width=SIZE;temp.height=SIZE;temp.getContext('2d').drawImage(img,0,0,SIZE,SIZE);composeWithOptionalLogo(temp);}else{img.onload=()=>{const temp=document.createElement('canvas');temp.width=SIZE;temp.height=SIZE;temp.getContext('2d').drawImage(img,0,0,SIZE,SIZE);composeWithOptionalLogo(temp);};}}else{setTimeout(tryCompose,60);}};tryCompose();} function composeWithOptionalLogo(qrCanvas){const out=document.getElementById('canvasOut');out.width=SIZE+PADDING2;out.height=SIZE+PADDING2;const ctx=out.getContext('2d');ctx.fillStyle='#ffffff';ctx.fillRect(0,0,out.width,out.height);ctx.drawImage(qrCanvas,PADDING,PADDING);const fileInput=document.getElementById('centerImage');if(fileInput.files&&fileInput.files[0]){const logo=new Image();logo.onload=()=>{const logoSize=Math.round(SIZE*LOGO_RATIO),x=PADDING+Math.round((SIZE-logoSize)/2),y=PADDING+Math.round((SIZE-logoSize)/2);ctx.fillStyle='#ffffff';ctx.fillRect(x,y,logoSize,logoSize);ctx.drawImage(logo,x,y,logoSize,logoSize);updateDownload(out);};logo.src=URL.createObjectURL(fileInput.files[0]);}else{updateDownload(out);}} function updateDownload(canvas){const url=canvas.toDataURL('image/png');const link=document.getElementById('download');link.href=url;link.style.display='inline-block';} </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.2.31 | Generation time: 0 | proxy | phpinfo | Settings