admin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin QR Code Generator</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { display: flex; flex-direction: column; align-items: center; }
        .timer, .pin { margin: 10px; }
        .refresh-button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; }
    </style>
    <script>

        function generatePIN() {
            return Math.floor(Math.random() * 10000).toString().padStart(4, '0');
        }


        function generateUniqueID() {
            return Math.random().toString(16).substring(2, 12);
        }


        function encodeURIComponents(classId, startTime, pin) {
            const uniqueID = generateUniqueID();
            return `http://localhost/verify.php?code=${uniqueID}&classId=${encodeURIComponent(classId)}&startTime=${encodeURIComponent(startTime)}&pin=${pin}`;
        }


        function startTimer(duration, display) {
            let timer = duration, minutes, seconds;
            const intervalId = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) {
                    clearInterval(intervalId);
                    refreshContent();
                    startTimer(duration, display);
                }
            }, 1000);
        }

        
        function refreshContent() {
            const pin = generatePIN();
            const qrCodeURL = encodeURIComponents("Computer Science", "9:00AM", pin);
            document.getElementById('qrImage').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(qrCodeURL)}`;
            document.getElementById('pinDisplay').textContent = pin;
        }

        window.onload = function () {
            const fiveMinutes = 5 * 60;
            refreshContent();
            const display = document.querySelector('#time');
            startTimer(fiveMinutes, display);
        };
    </script>
</head>
<body>
<div class="container">
    <img id="qrImage" alt="QR Code" />
    <div class="timer">Time until next refresh: <span id='time'></span> seconds</div>
    <div class="pin">Current PIN: <strong id="pinDisplay"></strong></div>
    <button class="refresh-button" onclick="refreshContent()">Refresh Now</button>
</div>
</body>
</html>