Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QR Code Generator</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>📱 QR Code Generator</h1> | |
| <p>Convert any text or URL into QR code</p> | |
| </div> | |
| <div class="content"> | |
| <div class="input-section"> | |
| <label>Enter Text or URL:</label> | |
| <textarea | |
| id="inputText" | |
| placeholder="Enter URL, text, email, or phone number..." | |
| rows="4" | |
| ></textarea> | |
| <div class="button-group"> | |
| <button class="btn btn-primary" onclick="generateQR()">Generate QR Code</button> | |
| <button class="btn btn-secondary" onclick="clearAll()">Clear</button> | |
| </div> | |
| <div class="options"> | |
| <div class="option-group"> | |
| <label>Size:</label> | |
| <select id="sizeSelect"> | |
| <option value="150">Small (150x150)</option> | |
| <option value="250" selected>Medium (250x250)</option> | |
| <option value="350">Large (350x350)</option> | |
| <option value="450">Extra Large (450x450)</option> | |
| </select> | |
| </div> | |
| <div class="option-group"> | |
| <label>Error Correction:</label> | |
| <select id="errorSelect"> | |
| <option value="L">Low (7%)</option> | |
| <option value="M" selected>Medium (15%)</option> | |
| <option value="Q">Quartile (25%)</option> | |
| <option value="H">High (30%)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="output-section"> | |
| <div class="qr-preview"> | |
| <div id="qrcodeContainer"></div> | |
| </div> | |
| <div class="download-section"> | |
| <button class="btn btn-success" onclick="downloadQR('png')" id="downloadPNG" style="display:none;"> | |
| ⬇️ Download as PNG | |
| </button> | |
| <button class="btn btn-success" onclick="downloadQR('jpg')" id="downloadJPG" style="display:none;"> | |
| ⬇️ Download as JPG | |
| </button> | |
| </div> | |
| <div class="info-section"> | |
| <p><strong>Text Length:</strong> <span id="textLength">0</span> characters</p> | |
| <p><strong>QR Code Status:</strong> <span id="status">No QR generated yet</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="examples"> | |
| <h3>Quick Examples:</h3> | |
| <button onclick="setExample('https://github.com')">GitHub Link</button> | |
| <button onclick="setExample('mailto:hello@example.com')">Email</button> | |
| <button onclick="setExample('tel:+1234567890')">Phone</button> | |
| <button onclick="setExample('https://www.youtube.com')">YouTube</button> | |
| <button onclick="setExample('Hello World!')">Text</button> | |
| </div> | |
| <div class="footer"> | |
| <p>✅ 100% Free • No ads • Works offline • No data saved</p> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |