<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Betaling Verwerken</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            margin: 0;
            padding: 50px;
        }

        h1 {
            font-size: 2em;
            color: #333;
        }

        #progress-container {
            width: 100%;
            background-color: #ddd;
            border-radius: 20px;
            margin: 50px auto;
            height: 30px;
            max-width: 500px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        #progress-bar {
            height: 100%;
            width: 0%;
            background-color: #4caf50;
            border-radius: 20px;
            transition: width 0.3s;
        }

        #message {
            display: none;
            font-size: 2em;
            color: #4caf50;
            margin-top: 20px;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            animation: fall linear infinite;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh);
                opacity: 0;
            }
        }
    </style>
</head>
<body>

    <h1>Betaling wordt verwerkt...</h1>

    <!-- Voortgangsbalk -->
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>

    <!-- Bericht na voltooien -->
    <div id="message">Gefeliciteerd! Betaling is geslaagd!</div>

    <!-- Confetti container -->
    <div id="confetti-container"></div>

    <script>
        // Simuleer voortgang van de betaling
        let progressBar = document.getElementById("progress-bar");
        let progress = 0;

        function simulateProgress() {
            if (progress < 100) {
                progress += 1;
                progressBar.style.width = progress + '%';
                setTimeout(simulateProgress, 50);  // Verhoog elke 50ms
            } else {
                showSuccessMessage();
            }
        }

        // Laat bericht zien en start confetti
        function showSuccessMessage() {
            document.getElementById("message").style.display = "block";
            launchConfetti();
        }

        // Confetti animatie
        function launchConfetti() {
            const confettiContainer = document.getElementById("confetti-container");
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.backgroundColor = getRandomColor();
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2 tot 5 seconden
                confettiContainer.appendChild(confetti);
            }
        }

        // Random kleur voor confetti
        function getRandomColor() {
            const colors = ['#ff0a0a', '#ffb300', '#00ff88', '#00aaff', '#ff00ff'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // Start simulatie wanneer de pagina laadt
        window.onload = simulateProgress;
    </script>

</body>
</html>