activeCarousel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ActiveCarousel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css">
    <link rel="stylesheet" href="css/activeCarousel.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="js/activeCarousel.js" type="module"></script>
</head>
<body>
    <div class="carousel">
        <div class="carousel-cell">
            <img src="media/0.png">
        </div>
    </div> 

    <!-- Instruction Modal -->
    <div class="instruction-modal" id="instructionModal">
        <div class="instruction-modal-content">
            <img src="media/hand.png" id="hand" alt="Hand gesture">
            <p class="instruction-text">Use your hand to scroll through the catalog to win a prize!</p>
        </div>
    </div>

    <!-- Flickity JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script>
</body>
</html>