hey maek it so when YouTube embed is loaded it goes under the YouTube embed loader like make it stay under it

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

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

        body.locked {
            overflow: hidden; /* Prevent scrolling when modal is active */
            pointer-events: none; /* Disable all interactions */
        }

        #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;
            opacity: 1;
            transition: opacity 0.3s ease; /* Smooth transition */
        }

        #passwordModal {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
            pointer-events: auto; /* Re-enable pointer events inside the modal */
        }

        #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: black;
}

.container {
    max-width: 600px;
    margin: -750px auto; /* Center the container horizontally with top margin */
    padding: 20px;
    text-align: center;
}

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

.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.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;
    cursor: pointer;
    z-index: 2000;
    transition: transform 0.3s;
}

.settings-bar:hover {
    transform: translateY(-5px);
}

.settings-ui {
    display: none;
    background-color: #444;
    color: white;
    padding: 20px;
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    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,
.glist {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-height: 320px;
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
    opacity: 1; /* Set to 1 for visibility by default */
    transition: opacity 1s ease;
}

.box:hover .glist {
    opacity: 1;  /* Set to 1 to ensure it becomes visible on hover */
}

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

#glist a:hover,
.glist a:hover {
    background-color: #eeeeee;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.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;
}

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

.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;
}

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



.video-container {
    margin-top: 20px;
}

.video-container iframe {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

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

.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;
}

.dragging {
    opacity: 0.5;
}

#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;
}
    </style>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body class="locked">
    <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>

    <!-- Your main content goes here -->

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            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 toggleSizeButton = document.getElementById('toggleSizeButton');
            const videoContainer = document.getElementById('video-container');
            const youtubeUnblockerButton = document.getElementById('youtubeUnblockerButton');
            const gamePages = document.querySelectorAll('.container');
            let attempts = 0;
            const maxAttempts = 3;
            const correctPassword = "yourPassword"; // Set your password here
            let isLargeSize = false;

            if (!localStorage.getItem('accessGranted')) {
                showOverlay();
            } else {
                unlockScreen();
            }

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

            function unlockScreen() {
                document.body.classList.remove('locked');
                overlay.style.display = 'none';
            }

            submitPassword.addEventListener('click', function () {
                const userPassword = passwordInput.value;

                if (userPassword === correctPassword) {
                    localStorage.setItem('accessGranted', true);
                    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;
                    }
                }
            });

            youtubeUnblockerButton.addEventListener('click', function () {
                youtubeEmbedUI.style.display = youtubeEmbedUI.style.display === 'block' ? 'none' : 'block';
                gamePages.forEach(page => page.style.display = youtubeEmbedUI.style.display === 'block' ? 'none' : 'block');
            });

            loadVideoButton.addEventListener('click', function () {
                const videoId = extractYouTubeVideoID(youtubeURL.value);
                if (videoId) {
                    loadYouTubeVideo(videoId);
                    hideElement(youtubeURL);
                    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 = '';
            });

            toggleSizeButton.addEventListener('click', function () {
                const iframe = videoContainer.querySelector('iframe');
                if (iframe) {
                    isLargeSize = !isLargeSize;
                    iframe.style.height = isLargeSize ? '720px' : '360px';
                }
            });

            function loadYouTubeVideo(videoId) {
                const iframe = `
                    <iframe src="https://www.youtube-nocookie.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                `;
                videoContainer.innerHTML = iframe;
            }

            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;
            }
        });
    </script>
</body>


<body>
    <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>
    </div>
        <div id="settingsUI" class="settings-ui" style="display: none;">
            <h3>Settings</h3>
            <label> Dark Mode: <input type="checkbox" id="darkModeToggle"> </label>
            <div>
                <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>
            </div>
            <label> Enable Dragging: <input type="checkbox" id="enableDrag"> </label>
        </div>
    </div>

    <!-- YouTube Embed UI -->
    <div id="youtubeEmbedUI" class="youtube-embed-ui" style="display: none;">
        <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>

    <input type="text" id="gsearchbar" placeholder="Search" autocomplete="off" spellcheck="false" style="display:none;" />

    <div id="particles-js"></div>

    <div class="container" id="gamePage1">
        <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>
                <button id="nextPageButton" class="page-button">Next Page</button>
            </div>
        </div>
    </div>

    <div class="container" id="gamePage2" style="display: none;">
        <div class="box">
            <h2>HTML5 Games - Page 2</h2>
            <div id="glist2" class="glist">
                <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>
                <button id="prevPageButton" class="page-button">Previous Page</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const nextPageButton = document.getElementById('nextPageButton');
            const prevPageButton = document.getElementById('prevPageButton');
            const gsearchbar = document.getElementById('gsearchbar');
            const gamePages = document.querySelectorAll('.container');

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

            function filterGames() {
                const filter = gsearchbar.value.toUpperCase();
                document.querySelectorAll('.glist').forEach(page => {
                    Array.from(page.getElementsByTagName('a')).forEach(link => {
                        const txtValue = link.textContent || link.innerText;
                        link.style.display = txtValue.toUpperCase().includes(filter) ? '' : 'none';
                    });
                });
            }

            gsearchbar.addEventListener('input', filterGames);
            nextPageButton.addEventListener('click', function () { navigateToPage('gamePage2'); });
            prevPageButton.addEventListener('click', function () { navigateToPage('gamePage1'); });

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

    <div id="confirmationDialog" class="confirmation-dialog" style="display:none;">
        <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 () {
            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 nextPageButton = document.getElementById('nextPageButton');
            const prevPageButton = document.getElementById('prevPageButton');
            const gsearchbar = document.getElementById('gsearchbar');
            const youtubeUnblockerButton = document.getElementById('youtubeUnblockerButton');
            const gamesListButton = document.getElementById('gamesListButton');
            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 gamePages = document.querySelectorAll('.container');
            let currentLink;

            function initialize() {
                loadSettings();
                bindEventListeners();
                loadOrder();
                navigateToPage('gamePage1');
            }

            function bindEventListeners() {
                settingsButton.addEventListener('click', toggleElementVisibility.bind(null, settingsUI));
                darkModeToggle.addEventListener('change', toggleDarkMode);
                particlesDropdown.addEventListener('change', applyParticles);
                enableDrag.addEventListener('change', toggleDrag);
                gsearchbar.addEventListener('input', filterGames);
                nextPageButton.addEventListener('click', navigateToPage.bind(null, 'gamePage2'));
                prevPageButton.addEventListener('click', navigateToPage.bind(null, 'gamePage1'));
                gameLinks.forEach(link => link.addEventListener('click', triggerConfirmation));
                confirmYes.addEventListener('click', confirmNavigation);
                confirmNo.addEventListener('click', cancelNavigation);
                youtubeUnblockerButton.addEventListener('click', toggleYouTubeEmbedUI);
                gamesListButton.addEventListener('click', showGamesList);
                loadVideoButton.addEventListener('click', loadYouTubeVideo);
                changeVideoButton.addEventListener('click', showYouTubeInput);
            }

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

            function toggleElementVisibility(element) {
                element.style.display = element.style.display === 'block' ? 'none' : 'block';
            }

            function applyParticles() {
                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 } } });
                saveSettings();
            }

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

            function handleDragStart(e) {
                e.dataTransfer.setData('text/plain', e.target.dataset.link);
                e.target.classList.add('dragging');
            }

            function handleDragOver(e) {
                e.preventDefault();
            }

            function handleDrop(e) {
                e.preventDefault();
                const draggedData = e.dataTransfer.getData('text');
                const targetGameLink = e.target;
                targetGameLink.dataset.link = draggedData;
                saveOrder();
            }

            function filterGames() {
                const filter = gsearchbar.value.toUpperCase();
                [document.getElementById('glist1'), document.getElementById('glist2')].forEach(page => {
                    Array.from(page.getElementsByTagName('a')).forEach(link => {
                        const txtValue = link.textContent || link.innerText;
                        link.style.display = txtValue.toUpperCase().includes(filter) ? '' : 'none';
                    });
                });
            }

function navigateToPage(pageId) {
    gsearchbar.style.display = 'block';
    gamePages.forEach(page => page.style.display = 'none');
    const targetPage = document.getElementById(pageId);
    if (targetPage) { // Ensure it exists and is not impacted by unrelated JavaScript
        targetPage.style.display = 'block';
    }
}

            function triggerConfirmation(e) {
                e.preventDefault();
                currentLink = e.target.getAttribute('data-link');
                confirmationDialog.style.display = 'flex';
                positionDialogAround(e.target);
            }

            function positionDialogAround(element) {
                const rect = element.getBoundingClientRect();
                confirmationDialog.style.top = `${rect.bottom + window.scrollY + 10}px`;
                confirmationDialog.style.left = `${rect.left}px`;
            }

            function confirmNavigation() {
                confirmationDialog.style.display = 'none';
                fadeTransitionEffect().then(() => {
                    if (currentLink) window.location.href = currentLink;
                });
            }

            function cancelNavigation() {
                confirmationDialog.style.display = 'none';
                currentLink = null;
            }

            function fadeTransitionEffect() {
                return new Promise(resolve => {
                    const transitionElement = document.createElement('div');
                    transitionElement.id = 'transitionElement';
                    Object.assign(transitionElement.style, {
                        position: 'fixed',
                        width: '100%',
                        height: '100%',
                        top: '0',
                        left: '0',
                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
                        transition: 'opacity 1s',
                        opacity: '0',
                        zIndex: '1000'
                    });
                    document.body.appendChild(transitionElement);
                    setTimeout(() => {
                        transitionElement.style.opacity = '1';
                        setTimeout(() => {
                            document.body.removeChild(transitionElement);
                            resolve();
                        }, 1000);
                    }, 10);
                });
            }

            function saveOrder() {
                const order = Array.from(gameLinks).map(link => link.dataset.link).join(',');
                localStorage.setItem('gamesOrder', order);
            }

            function loadOrder() {
                const order = localStorage.getItem('gamesOrder');
                if (order) {
                    order.split(',').forEach((link, index) => {
                        gameLinks[index].dataset.link = link;
                    });
                }
            }

            function loadSettings() {
                darkModeToggle.checked = localStorage.getItem('darkMode') === 'true';
                particlesDropdown.value = localStorage.getItem('particlesTheme') || 'none';
                enableDrag.checked = localStorage.getItem('enableDrag') === 'true';

                if (darkModeToggle.checked) toggleDarkMode();
                applyParticles();
                if (enableDrag.checked) toggleDrag();
            }

            function saveSettings() {
                localStorage.setItem('darkMode', darkModeToggle.checked);
                localStorage.setItem('particlesTheme', particlesDropdown.value);
                localStorage.setItem('enableDrag', enableDrag.checked);
            }


            function showGamesList() {
                youtubeEmbedUI.style.display = 'none';
                gsearchbar.style.display = 'block';
                navigateToPage('gamePage1');
            }

            function loadYouTubeVideo() {
                const url = youtubeURL.value;
                const videoId = extractYouTubeVideoID(url);
                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>`;
                }
            }

            function showYouTubeInput() {
                youtubeURL.style.display = 'block';
                youtubeURL.value = '';
                changeVideoButton.style.display = 'none';
            }

            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;
            }

            initialize();
        });
    </script>
</body>
</html>