<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Confirmation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  </head>
  <style>
    .carousel-item .text{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.25);
            display: flex;
            justify-content: center;
            align-items: center;
            color: ghostwhite;
            font-size: 24px;
        }

  </style>

  <body>
    <div class="container-fluid p-0">
      <!--Carousel that is set up to change every 5 seconds via script at the bottom of code-->
      <div id="carouselConfirm" class="carousel" data-bs-ride="carousel">

        <!--Slides can be manually changed if desired-->
        <ol class="carousel-indicators">
          <li data-bs-target="#carouselConfirm" data-bs-slide-to="0" class="active"></li>
          <li data-bs-target="#carouselConfirm" data-bs-slide-to="1"></li>
          <li data-bs-target="#carouselConfirm" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item text active">
            <img class="d-block w-100" src="/images/DualSense.jpg" alt="First slide">
            <div class="text">Thanks for your order. We have sent an email to you!!<a href="home">Return Home</a></div>
            
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="/images/SkyrimPS5.png" alt="Second slide">
            <div class="text">Thanks for your order. We have sent an email to you!!<a href="home">Return Home</a></div>
            
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="/images/Crash.jpg" alt="Third slide">
            <div class="text">Thanks for your order. We have sent an email to you!!<a href="home">Return Home</a></div>
            
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
      /*
        Carousel function so that the time is set to 5 seconds and images will change.
        There is also indicators at the bottom of the images so that the user can also
        change them if they choose to. 
      */
      $(document).ready(function() {
        $("#carouselConfirm").carousel({
          interval: 5000
        });
      });
    </script>
    
  </body>

</html>
