hey give me the code snippet to make the YouTube embed that loads the YouTube no cookie make it so that is loads the embed under the buttons to resize and stuff please make it possible andwork

<!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>