<div class="container-fluid text-center">
    <img decoding="async" class="image"  src="img/logoTECHNOIT.png" alt="">
    <h1 class="">Generate Your QR Code / Genere su código QR </h1>
    <form id="qrForm">
        <label for="urlInput">Enter a Website URL / Introduzca la URL de un sitio web:</label><br>
        <input type="text" id="urlInput" required placeholder="http://example.com"><br><br>
        <button type="submit">Generate QR Code / Genere su código QR</button>
    </form>
    <br>
    <br>
    <div id="qrCode"></div>
    <a id="downloadLink" style="display:none;">Download QR Code / Descargar Código QR</a>

    <h3><a href="https:sussexwebstudio.com">Visit TechnoIt Website / Visite el sitio web de TechnoIt </a></h3>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
    <script>
        document.getElementById('qrForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from submitting the traditional way

            const url = document.getElementById('urlInput').value;
            const qr = new QRious({
                element: document.createElement('canvas'),
                value: url,
                size: 200
                
            });

            // Display the QR code
            const qrCodeDiv = document.getElementById('qrCode');
            qrCodeDiv.innerHTML = ''; // Clear previous QR codes
            qrCodeDiv.appendChild(qr.canvas);

            // Set up download link
            const downloadLink = document.getElementById('downloadLink');
            const imageUrl = qr.canvas.toDataURL('image/png');
            downloadLink.href = imageUrl;
            downloadLink.download = 'qr_code.png';
            downloadLink.innerText = 'Download QR Code';
            downloadLink.style.display = 'block';
        });

        
    
    </script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>