hey make it so when you need to enter password is disables all clicking but not for the text input and submit once right password is submitted then it enables all clicking. also add 10 features to the console tab in there and give css to all text boxes and check box. and add 5 settings functioned and implemented with logic in settings please. and make the full script with everything added and what I want

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Games List with Features</title>
    <style>
        body {
            background-color: grey;
            color: black; /* Text stays consistent */
            font-family: sans-serif;
            transition: background-color 0.5s, color 0.5s;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        body.locked {
            overflow: hidden;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #passwordModal {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        #passwordInput {
            padding: 10px;
            width: calc(100% - 40px);
            border-radius: 4px;
            border: 1px solid #ddd;
            margin-top: 10px;
        }

        #submitPassword {
            padding: 10px;
            background-color: #555;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        #errorMessage {
            color: red;
            margin-top: 10px;
            display: none;
        }

        #errorMessage.show {
            display: block;
        }

        .dark-mode {
            background-color: #333;
            color: white;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            text-align: center;
            display: none;
        }

        .box {
            margin: auto;
            background-color: white;
            padding: 10px;
            width: 400px;
            transition: background-color 0.5s, color 0.5s;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

        .settings-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            padding: 10px 20px;
            z-index: 2000;
        }

        .settings-ui {
            display: none;
            background-color: #444;
            color: white;
            padding: 20px;
            position: fixed;
            bottom: 60px;
            left: 0;
            width: 100%;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
        }

        button {
            background-color: #555;
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
            border-radius: 4px;
        }

        button:hover {
            background-color: #777;
        }

        .glist {
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            max-height: 320px;
            padding: 0;
            text-align: center;
            margin-bottom: 10px;
        }

        .glist a {
            display: block;
            text-decoration: none;
            color: black;
            font-size: 18px;
            border: 1px solid #dddddd;
            margin-top: -1px;
            background-color: #f6f6f6;
            padding: 12px;
            border-radius: 4px;
            cursor: grab;
        }

        .glist a:active {
            cursor: grabbing;
        }

        .glist a.favorite {
            border: 2px solid gold;
            background-color: #ffffcc;
        }

        .glist a:hover {
            background-color: #eeeeee;
            text-shadow: none; /* Disabling text shadow */
        }

        .page-button {
            background-color: #555;
            color: white;
            padding: 10px;
            display: block;
            margin: 20px auto;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .youtube-embed-ui {
            padding: 20px;
            background-color: #444;
            color: white;
            position: fixed;
            top: 150px;
            left: 50%;
            transform: translateX(-50%);
            width: 120%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none;
        }

        .youtube-embed-ui input[type="text"] {
            width: calc(100% - 160px);
            padding: 10px;
            border-radius: 4px;
            border: none;
            color: #444;
        }

        .video-container {
            margin-top: 20px;
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #gsearchbar {
            display: block;
            margin: 20px auto;
            padding: 8px;
            width: calc(100% - 40px);
            max-width: 380px;
            color: #333;
            border-radius: 4px;
            border: none;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
        }

        #gsearchbar:focus {
            outline: none;
            border: 1px solid #555;
        }

        .confirmation-dialog {
            position: absolute;
            width: 300px;
            background-color: white;
            border: 2px solid #777;
            padding: 20px;
            display: none;
            z-index: 1000;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        }

        .confirmation-dialog p {
            margin-top: 0;
            color: #333;
        }

        .confirmation-dialog button {
            margin-right: 10px;
            padding: 8px 16px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .confirmation-dialog button:hover {
            background-color: #555;
        }

        #console-output {
            height: 200px;
            overflow-y: auto;
            background-color: black;
            color: lime;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            font-family: monospace;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>

<body class="locked">
    <!-- Password Modal -->
    <div id="overlay">
        <div id="passwordModal">
            <h2>Enter Password to Access</h2>
            <input type="password" id="passwordInput" placeholder="Password here"/>
            <button id="submitPassword">Submit</button>
            <p id="errorMessage">Wrong password. Try again.</p>
        </div>
    </div>

    <!-- Settings Bar -->
    <div class="settings-bar" id="settingsBar">
        <button id="settingsButton">Settings</button>
        <button id="youtubeUnblockerButton">YouTube Unblocker Embed Player</button>
        <button id="gamesListButton">Games List</button>
        <button id="consoleButton">Console</button>
    </div>

    <!-- Settings UI -->
    <div id="settingsUI" class="settings-ui">
        <h3>Settings</h3>
        <label>Dark Mode:
            <input type="checkbox" id="darkModeToggle">
        </label>       
        <label for="particlesDropdown">Particles Theme:</label>
        <select id="particlesDropdown">
            <option value="none">None</option>
            <option value="snow">Snow</option>
            <option value="bubbles">Bubbles</option>
            <option value="stars">Stars</option>
            <option value="rain">Rain</option>
        </select>
        <label>Enable Dragging:
            <input type="checkbox" id="enableDrag">
        </label>
    </div>

    <!-- YouTube Embed UI -->
    <div id="youtubeEmbedUI" class="youtube-embed-ui">
        <input type="text" id="youtubeURL" placeholder="Enter YouTube link" spellcheck="false" />
        <button id="loadVideoButton">Load Video</button>
        <button id="changeVideoButton" style="display: none;">Change Video</button>
        <div id="video-container" class="video-container"></div>
    </div>

    <!-- Console UI -->
    <div id="consoleUI" class="settings-ui">
        <h3>Console</h3>
        <div id="console-output"></div>
        <input type="text" id="consoleInput" placeholder="Enter JS code..." spellcheck="false"/>
        <button id="runConsoleCode">Run</button>
    </div>

    <!-- Games List Pages -->
    <div id="gamePage1" class="container">
        <div class="box">
            <h2>HTML5 Games - Page 1</h2>
            <div id="glist1" class="glist">
        <a href="javascript:void(0);" data-link="./gfiles/html5/2048/index.html" class="game-link">2048</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/adarkroom/index.html" class="game-link">A Dark Room</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/asciispace/index.html" class="game-link">ASCII Space</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/asteroids/index.html" class="game-link">Asteroids</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/astray/index.html" class="game-link">Astray</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/Fnf/fnf.html" class="game-link">Friday Night Funkin'</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/blackholesquare/index.html" class="game-link">Black Hole Square</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/bounceback/index.html" class="game-link">Bounce Back</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/breaklock/index.html" class="game-link">Breaklock</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/breakout/index.html" class="game-link">Breakout</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/captaincallisto/index.html" class="game-link">Captain Callisto</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/chess/index.html" class="game-link">Chess</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/chromaincident/index.html" class="game-link">Chroma Incident</a>
        <a href="javascript:void(0);" data-link="./ChromeD.html" class="game-link">Chrome-Dino</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/connect3/index.html" class="game-link">Connect 3</a>
        <a href="javascript:void(0);" data-link="./Pacman.html" class="game-link">Pac-Man</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/cookieclicker/index.html" class="game-link">Cookie Clicker</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/edgenotfound/index.html" class="game-link">Edge not Found</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/evilglitch/index.html" class="game-link">Evil Glitch</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/factoryballsforever/index.html" class="game-link">Factory Balls Forever</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/flappybird/index.html" class="game-link">Flappy Bird</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/geometrydash/index.html" class="game-link">Geometry Dash</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/hextris/index.html" class="game-link">Hextris</a>
        <a href="javascript:void(0);" data-link="./Selecter.html" class="game-link">Five nights at freddys</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/konnekt/index.html" class="game-link">Konnekt</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/minecraft/index.html" class="game-link">Minecraft</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/ninjavsevilcorp/index.html" class="game-link">Ninja vs Evilcorp</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/packabunchas/index.html" class="game-link">Packabunchas</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/particleclicker/index.html" class="game-link">Particle Clicker</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/pushback/index.html" class="game-link">Push Back</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/q1k3/index.html" class="game-link">Q1k3</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/racer/index.html" class="game-link">Racer</a>
        <a href="javascript:void(0);" data-link="./Sponge.html" class="game-link">SpongeBob games</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/radiusraid/index.html" class="game-link">Radius Raid</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/retrohaunt/index.html" class="game-link">Retrohaunt</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/roadblocks/index.html" class="game-link">Road Blocks</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/shuttledeck/index.html" class="game-link">Shuttledeck</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/sleepingbeauty/index.html" class="game-link">Sleeping Beauty</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/spacecompany/index.html" class="game-link">Space Company</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/spacegarden/index.html" class="game-link">Space Garden</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/spacehuggers/index.html" class="game-link">Space Huggers</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/tetris/index.html" class="game-link">Tetris</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/themazeofspacegoblins/index.html" class="game-link">The Maze of Space Goblins</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/towermaster/index.html" class="game-link">Towermaster</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/trimps/index.html" class="game-link">Trimps</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/underrun/index.html" class="game-link">Underrun</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/xx142-b2exe/index.html" class="game-link">xx142-b2.exe</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/FullScreenMario-master/index.html" class="game-link">Super-Mario-Bros</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/MicrosoftEdge-SURF-master/index.html" class="game-link">Edge-Surf</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/Awesome-tanks/awesome-tanks.html" class="game-link">Awesome-Tanks</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/MicrosoftEdge-SURF-master/index.html" class="game-link">Edge-Surf</a>
        <a href="javascript:void(0);" data-link="./gfiles/html5/Awesome-tanks/awesome-tanks.html" class="game-link">Awesome-Tanks</a>
                <button id="nextPageButton" class="page-button">Next Page</button>
            </div>
        </div>
    </div>

    <div id="gamePage2" class="container">
        <div class="box">
            <h2>HTML5 Games - Page 2</h2>
            <div id="glist2" class="glist">
                <a href="javascript:void(0);" data-link="./gfiles/html5/chess/index.html" class="game-link">Chess</a>
                <!-- Add more games -->
                <button id="prevPageButton" class="page-button">Previous Page</button>
            </div>
        </div>
    </div>

    <!-- Confirmation Dialog -->
    <div id="confirmationDialog" class="confirmation-dialog">
        <p>Are you sure you want to open this game?</p>
        <button id="confirmYes">Yes</button>
        <button id="confirmNo">No</button>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // DOM elements
            const overlay = document.getElementById('overlay');
            const passwordInput = document.getElementById('passwordInput');
            const submitPassword = document.getElementById('submitPassword');
            const errorMessage = document.getElementById('errorMessage');
            const youtubeEmbedUI = document.getElementById('youtubeEmbedUI');
            const youtubeURL = document.getElementById('youtubeURL');
            const loadVideoButton = document.getElementById('loadVideoButton');
            const changeVideoButton = document.getElementById('changeVideoButton');
            const videoContainer = document.getElementById('video-container');
            const youtubeUnblockerButton = document.getElementById('youtubeUnblockerButton');
            const gamesListButton = document.getElementById('gamesListButton');
            const gamePages = document.querySelectorAll('.container');
            const nextPageButton = document.getElementById('nextPageButton');
            const prevPageButton = document.getElementById('prevPageButton');
            const settingsButton = document.getElementById('settingsButton');
            const settingsUI = document.getElementById('settingsUI');
            const darkModeToggle = document.getElementById('darkModeToggle');
            const particlesDropdown = document.getElementById('particlesDropdown');
            const enableDrag = document.getElementById('enableDrag');
            const gameLinks = document.querySelectorAll('.game-link');
            const confirmationDialog = document.getElementById('confirmationDialog');
            const confirmYes = document.getElementById('confirmYes');
            const confirmNo = document.getElementById('confirmNo');
            const consoleButton = document.getElementById('consoleButton');
            const consoleUI = document.getElementById('consoleUI');
            const consoleInput = document.getElementById('consoleInput');
            const consoleOutput = document.getElementById('console-output');
            const runConsoleCode = document.getElementById('runConsoleCode');

            let attempts = 0;
            const maxAttempts = 3;
            const correctPassword = "yourPassword"; // Set your password here
            let currentLink = null;
            const sessionTimeoutMillis = 30 * 60 * 1000; // 30 minutes

            // Access control
            if (!sessionStorage.getItem('accessGranted') || isSessionExpired()) {
                showOverlay();
            } else {
                unlockScreen();
            }

            // Password management
            function showOverlay() {
                overlay.style.display = 'flex';
                document.body.classList.add('locked');
            }

            function unlockScreen() {
                document.body.classList.remove('locked');
                overlay.style.display = 'none';
                sessionStorage.setItem('accessGranted', true);
                sessionStorage.setItem('accessTime', Date.now());
            }

            function isSessionExpired() {
                const accessTime = parseInt(sessionStorage.getItem('accessTime'), 10);
                return !accessTime || (Date.now() - accessTime > sessionTimeoutMillis);
            }

            submitPassword.addEventListener('click', function () {
                if (passwordInput.value === correctPassword) {
                    errorMessage.style.display = 'none';
                    unlockScreen();
                } else {
                    attempts++;
                    errorMessage.classList.add('show');
                    if (attempts >= maxAttempts) {
                        errorMessage.textContent = 'Access denied. Reload to try again.';
                        passwordInput.disabled = true;
                        submitPassword.disabled = true;
                    }
                }
            });

            // Navigation
            function navigateToPage(pageId) {
                gamePages.forEach(page => page.style.display = 'none');
                if (pageId) {
                    document.getElementById(pageId).style.display = 'block';
                }
            }

            nextPageButton.addEventListener('click', function () {
                navigateToPage('gamePage2');
            });

            prevPageButton.addEventListener('click', function () {
                navigateToPage('gamePage1');
            });

            gamesListButton.addEventListener('click', function () {
                navigateToPage('gamePage1');
                youtubeEmbedUI.style.display = 'none';
                consoleUI.style.display = 'none';
            });

            youtubeUnblockerButton.addEventListener('click', function () {
                youtubeEmbedUI.style.display = youtubeEmbedUI.style.display === 'block' ? 'none' : 'block';
                if (youtubeEmbedUI.style.display === 'block') {
                    navigateToPage(''); // Hide all game pages
                    consoleUI.style.display = 'none';
                }
            });

            consoleButton.addEventListener('click', function() {
                consoleUI.style.display = consoleUI.style.display === 'block' ? 'none' : 'block';
                if (consoleUI.style.display === 'block') {
                    navigateToPage('');
                    youtubeEmbedUI.style.display = 'none';
                }
            });

            runConsoleCode.addEventListener('click', function() {
                try {
                    const result = eval(consoleInput.value);
                    logToConsole(result);
                } catch (error) {
                    logToConsole('Error: ' + error.message);
                }
                consoleInput.value = '';
            });

            function logToConsole(message) {
                const timestamp = new Date().toLocaleTimeString();
                consoleOutput.textContent += `[${timestamp}] ${message}\n`;
                consoleOutput.scrollTop = consoleOutput.scrollHeight;
            }

            // Video handling
            loadVideoButton.addEventListener('click', function () {
                const videoId = extractYouTubeVideoID(youtubeURL.value);
                if (videoId) {
                    const iframe = `<iframe src="https://www.youtube-nocookie.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
                    videoContainer.innerHTML = iframe;
                    youtubeURL.style.display = 'none';
                    changeVideoButton.style.display = 'inline';
                } else {
                    videoContainer.innerHTML = '<p>Invalid URL. Enter a valid YouTube link.</p>';
                }
            });

            changeVideoButton.addEventListener('click', function () {
                youtubeURL.style.display = 'block';
                youtubeURL.value = '';
                changeVideoButton.style.display = 'none';
                videoContainer.innerHTML = '';
            });

            function extractYouTubeVideoID(url) {
                const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
                const matches = url.match(regex);
                return matches ? matches[1] : null;
            }

            // Settings and particles
            settingsButton.addEventListener('click', function () {
                settingsUI.style.display = settingsUI.style.display === 'block' ? 'none' : 'block';
            });

            darkModeToggle.addEventListener('change', function () {
                document.body.classList.toggle('dark-mode', darkModeToggle.checked);
            });

            particlesDropdown.addEventListener('change', function () {
                const theme = particlesDropdown.value;
                const particlesConfig = {
                    snow: { particles: { number: { value: 100 }, color: { value: '#fff' }, shape: { type: 'circle' }, opacity: { value: 0.6 }, size: { value: 5 }, move: { speed: 1 } } },
                    bubbles: { particles: { number: { value: 50 }, size: { value: 6, random: true }, shape: { type: 'circle' }, opacity: { value: 0.8 } }, interactivity: { events: { onhover: { enable: true, mode: 'repulse' } } } },
                    stars: { particles: { number: { value: 80 }, shape: { type: 'star' }, color: { value: '#ffe600' }, size: { value: 3 }, move: { speed: 0.5 } } },
                    rain: { particles: { number: { value: 200 }, shape: { type: 'line' }, color: { value: '#00ace6' }, size: { value: 1 }, move: { speed: 5 } } }
                };
                particlesJS('particles-js', particlesConfig[theme] || { particles: { number: { value: 0 } } });
            });

            // Dragging and reordering logic
            let draggingElement = null;
            let gameOrder = JSON.parse(localStorage.getItem('gameOrder')) || [];

            if (gameOrder.length) {
                gameOrder.forEach(function (linkHref) {
                    const link = Array.from(document.querySelectorAll('.game-link')).find(el => el.dataset.link === linkHref);
                    if (link) link.parentElement.append(link);
                });
            }

            enableDrag.addEventListener('change', function () {
                gameLinks.forEach(link => {
                    if (enableDrag.checked) {
                        link.setAttribute('draggable', 'true');
                        link.addEventListener('dragstart', handleDragStart);
                        link.addEventListener('dragover', handleDragOver);
                        link.addEventListener('drop', handleDrop);
                        link.addEventListener('click', toggleFavorite);
                    } else {
                        link.removeAttribute('draggable');
                        link.removeEventListener('dragstart', handleDragStart);
                        link.removeEventListener('dragover', handleDragOver);
                        link.removeEventListener('drop', handleDrop);
                        link.removeEventListener('click', toggleFavorite);
                    }
                });
            });

            function handleDragStart(e) {
                draggingElement = e.target;
                e.dataTransfer.setData('text/plain', draggingElement.dataset.link);
            }

            function handleDragOver(e) {
                e.preventDefault();
                const target = e.target;
                if (target && target !== draggingElement && target.classList.contains('game-link')) {
                    gameOrder.push(e.dataTransfer.getData('text'));
                    target.parentNode.insertBefore(draggingElement, target);
                }
            }

            function handleDrop(e) {
                e.preventDefault();
                saveOrder();
            }

            function toggleFavorite(e) {
                e.preventDefault();
                const link = e.target;
                if (link.classList.contains('favorite')) {
                    link.classList.remove('favorite');
                    link.parentElement.append(link); // Move to end
                } else {
                    link.classList.add('favorite');
                    link.parentElement.prepend(link); // Move to start
                }
                saveOrder();
            }

            function saveOrder() {
                const order = Array.from(document.querySelectorAll('.game-link')).map(link => link.dataset.link);
                localStorage.setItem('gameOrder', JSON.stringify(order));
            }

            // Confirmation dialog for games
            gameLinks.forEach(link => link.addEventListener('click', function (e) {
                if (!enableDrag.checked) {
                    e.preventDefault();
                    currentLink = e.target.dataset.link;
                    confirmationDialog.style.display = 'flex';
                }
            }));

            confirmYes.addEventListener('click', function () {
                confirmationDialog.style.display = 'none';
                if (currentLink) window.location.href = currentLink;
            });

            confirmNo.addEventListener('click', function () {
                confirmationDialog.style.display = 'none';
            });

            // Initialization
            navigateToPage('gamePage1');
        });
    </script>
</body>

</html>