<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethetic - Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(8, 8, 8); /* Background color */
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        /* Small squares with transparent inside and a border */
        .square {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: transparent;
            border: 0.7px solid rgb(90, 90, 90);
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        /* Square animation container */
        #squares-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        /* Centered box with updated size and border color */
        #center-box {
            width: 1200px;  /* Updated width */
            height: 600px;  /* Updated height */
            background-color: rgb(8, 8, 8); /* Box background color */
            border: 0.7px solid rgb(70, 70, 70); /* Box border color (0.7px) */
            position: absolute;
            z-index: 10; /* Make sure it appears above the squares */
            display: flex;
            flex-direction: column; /* Stack text and line */
            justify-content: flex-start; /* Align text at the top */
            padding-top: 10px; /* Add space from the top */
        }

        /* Text inside the main box */
        #main-box-text {
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: rgb(70, 70, 70); /* Text color matching the border */
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px; /* Add some space below the text */
        }

        /* New 100x100 box with slightly rounded corners */
        #rounded-box {
            width: 100px;
            height: 100px;
            background-color: transparent;
            border: 0.7px solid rgb(70, 70, 70); /* Border color */
            border-radius: 8px; /* Slightly rounded corners */
            position: absolute;
            z-index: 11; /* Above the center box */
            left: calc(50% - 570px); /* Move the box a little more to the right */
            top: 300px; /* Move the box slightly up */
            cursor: pointer; /* Add cursor pointer for interaction */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Text inside the 100x100 box */
        #rounded-box-text {
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: rgb(70, 70, 70); /* Text color */
            font-size: 14px;
            text-align: center;
        }

        /* Thin line in the center of the main box */
        #center-line {
            width: 0.5px; /* Skinny line */
            height: 520px; /* Shortened line height */
            background-color: rgb(70, 70, 70); /* Line color */
            position: absolute;
            left: 50%; /* Center horizontally */
            top: 10%; /* Start the line 10% from the top */
            transform: translateY(0%); /* Ensure no translation is needed */
        }

        /* Image container on the right side of the center box */
        #image-container {
            position: absolute;
            top: 50%;
            right: 485px; /* Moved image more to the left */
            transform: translateY(-50%); /* Vertically center the image */
            z-index: 12; /* Ensure it's above other elements */
            text-align: center; /* Center the button under the image */
        }

        /* Image styling */
        #product-image {
            width: 300px; /* Make the image larger */
            height: 300px; /* Larger height */
            object-fit: contain; /* Ensure image fits within the given area */
        }

        /* Button styling */
        #enter-button {
            background-color: rgb(8, 8, 8); /* Button background color */
            color: white; /* Button text color */
            border: 0.7px solid rgb(70, 70, 70); /* Button border */
            padding: 10px 20px; /* Padding inside the button */
            font-size: 16px; /* Font size */
            cursor: pointer; /* Pointer cursor on hover */
            width: 200px; /* Longer button width */
            border-radius: 5px; /* Rounded corners for the button */
            transition: background-color 0.3s ease; /* Smooth hover effect */
            position: absolute;
            bottom: -50px; /* Place the button below the image */
            left: 50%;
            transform: translateX(-50%); /* Center the button horizontally */
        }

        /* Button hover effect */
        #enter-button:hover {
            background-color: rgb(100, 100, 100); /* Darker on hover */
        }
    </style>
</head>
<body>
    <!-- Square animation container -->
    <div id="squares-container"></div>

    <!-- Center box -->
    <div id="center-box">
        <!-- Text inside the main box -->
        <div id="main-box-text">Select Your Product</div>

        <!-- Skinny line in the center of the main box -->
        <div id="center-line"></div>
    </div>

    <!-- New 100x100 rounded box -->
    <div id="rounded-box" onclick="changeImage()">
        <div id="rounded-box-text">Ethetic</div>
    </div>

    <!-- Image container for the product image -->
    <div id="image-container">
        <img id="product-image" src="nothing.png" alt="Product Image" />
        <!-- Button under the image -->
        <button id="enter-button" onclick="enterAction()">Enter</button>
    </div>

    <script>
        // Define a function to create squares
        function createSquares() {
            const container = document.getElementById('squares-container');
            container.innerHTML = ''; // Clear the container before adding new squares

            const rows = 15;
            const columns = 15;
            const fadeFactor = 0.07;

            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            const spacing = Math.min(screenWidth, screenHeight) / 15; // Adjust the spacing dynamically

            // Create squares based on the updated screen dimensions
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < columns; j++) {
                    const square = document.createElement('div');
                    square.classList.add('square');
                    const topPosition = i * spacing;
                    const leftPosition = j * spacing;
                    square.style.top = `${topPosition}px`;
                    square.style.left = `${leftPosition}px`;

                    // Calculate opacity based on position to simulate fade-out effect
                    const opacity = Math.max(1 - (i + j) * fadeFactor, 0);
                    square.style.opacity = opacity;

                    container.appendChild(square);
                }
            }
        }

        // Function to change the image when the 100x100 box is clicked
        function changeImage() {
            const productImage = document.getElementById('product-image');
            productImage.src = "selected.png"; // Change to selected image
        }

        // Function for the "Enter" button action
        function enterAction() {
            const productImage = document.getElementById('product-image');
            if (productImage.src.includes("selected.png")) {
                window.location.href = "executor"; // Go to execute.html if selected.png is shown
            } else {
                alert("Please select a product first."); // Alert if nothing.png is showing
            }
        }

        // Call function to create squares when the page loads
        createSquares();

        // Recreate squares when window is resized
        window.addEventListener('resize', createSquares);
    </script>
</body>
</html>
