<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Clay Force - Recursinauts</title>

</head>

<body style="margin:0px">

    <div id="imageContainer"></div> <!-- Container for images -->


    <script>

        // Image data as an array of objects

        const images = [

            {

                src: '/content/490c7f676bfedc0dbb01b5c84cc11905decd93aa449cc7770f4e5f7b75d0e08ei0',

                zIndex: 10

            },

            {

                src: '/content/484634dcdcb12aa795dc1d3a8ca341281f188206db38d7ddbf18183aa8499100i0',

                zIndex: 40

            },

            {

                src: '/content/27bf4c86b72a4fe95a983dfdead992e4fc66afdd72aaaa422b649860a9a9e2ddi0',

                zIndex: 50

            }

        ];


        // Function to add an image

        function addImage({src, zIndex}) {

            const img = new Image(); // Create a new Image object

            img.style.position = 'absolute';

            img.style.zIndex = zIndex;

            img.style.width = '100%';

            img.src = src;

            document.getElementById('imageContainer').appendChild(img); // Append the image to the div

        }


        // Add each image to the page

        images.forEach(addImage);

    </script>

</body>

</html>