%%html

<html>
<head>
    <title>GIF Switcher</title>
</head>
<body>
    <button id="showGifButton">Start Animation</button>
    <img id="gifImage" style="display: none;">
    
    <script>
        const gif1 = "/csse2_individual/images/game/pokemortloop1.gif"; // First loop with title animation
        const gif2 = "/csse2_individual/images/game/pokemortloop2.gif"; // Second loop with standstill title and only clouds moving

        const gifImage = document.getElementById("gifImage");
        const showGifButton = document.getElementById("showGifButton");

        showGifButton.addEventListener("click", function() {
            gifImage.src = gif1;
            gifImage.style.display = "block";
            showGifButton.disabled = true;
            
            setTimeout(function() {
                gifImage.src = gif2;
            }, 10000); // Switch to the second GIF after 10 seconds
        });
    </script>
</body>
</html>
GIF Switcher