<!DOCTYPE html>
<html lang="en">

<head>
    <title>Login Failure</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <!--CSS styling the carousel layout, use of text overlay on the image-->
    <style>
        body{background-color: cornflowerblue;}
        .carousel-item .text{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: ghostwhite;
            font-size: 24px;
        }
    </style>
</head>
    <body>
        <div class="container-fluid p-0">
            <!--Carousel item, code sourced and adapted from the bootstrap website-->
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item">
                        <img class="d-block w-100" src="/images/Dualsense.jpg" alt="First slide">
                        <div class="text">Your login failed please try again.</div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="/images/Stray.jpg" alt="Second slide">
                        <div class="text">Your login failed please try again.</div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="/images/Cities.jpg" alt="Third slide">
                        <div class="text">Your login failed please try again.</div>
                    </div>
                </div>
            </div>
          </div>
    </body>

    <script>
        /*
            Script for carousel function on the loading of the page.
            3 images are coded so that one of them is randomly selected each time the 
            page is loaded. 
        */
        var carouselitems = document.querySelectorAll('.carousel-item');
        var index = Math.floor(Math.random()* carouselitems.length);
        carouselitems.forEach(function(item){
            item.classList.remove('active');
        });
        carouselitems[index].classList.add('active');
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

</html>