can u make a button in YouTube unblocker with 2 things Saved videos. where u can input videos and save them to click and automatlly load the YouTube video and another is Resize and u can click the button to make ur mouse size it and u can click reset to put it back if u wan't and click the button to toggle size. and add 5 features to this whole YouTube unblocker thing to. also make it so there's a save button to save ur YouTube saved videos data and there's a load button to load in ur data. make this take place in settings for the save YouTube videos and stuff and the Load saved videos button will be in YouTube unblocker and Resize toggle button will be in YouTube unblocker thing.
make the full main script
nice but make it have a custom notification gui like Video Saved and for loaded videos make it have alike a gui with scroll gui and x and a background and make it have the videos thumbnail names and link and a clickable thing so when u click it it loads it in already. please make this good. also u forgot to add the resize toggle button. also rework the settings like the buttons are now custom when a animation check green fade in and fade out if unchecked. and the drop-down is for the select is custom gui and animated to and make it so the settings pop up for settings had a move animation and make a new setting drop-down button called Settings pop up from either left right down (default) or right. and make it fit in and do it how the user selects and what ever side it is will appear of that side of the screen. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Games List Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.min.css">
    <style>
        body {
            background-color: grey;
            color: black;
            font-family: sans-serif;
            transition: background-color 0.5s, color 0.5s;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        h2 {
            color: black; /* Set a stable h2 color */
        }

        .dark-mode p, .dark-mode a, .dark-mode span {
            color: white;
        }

        #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;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }

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

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

        .CodeMirror-hints {
            font-family: monospace;
            background: #272822;
            color: #f8f8f2;
            border: 1px solid #75715e;
        }
        .CodeMirror-hint {
            padding: 4px 8px;
            border-radius: 2px;
        }
        .CodeMirror-hint-active {
            background: #49483e;
        }
        .hint-description {
            font-size: 0.9em;
            color: #a6e22e;
            margin-left: 10px;
        }

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

        input[type="checkbox"], select {
            margin: 5px;
            cursor: pointer;
            padding: 5px;
            background-color: white;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: none;
            transition: all 0.3s;
        }

        input[type="checkbox"]:focus, select:focus {
            border-color: #555;
        }

        .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 #ddd;
            margin-top: -1px;
            background-color: #f6f6f6;
            padding: 12px;
            border-radius: 4px;
            cursor: pointer;
        }

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

        .glist a:hover {
            background-color: #eeeeee;
        }

        .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 {
            width: calc(100% - 160px);
            padding: 10px;
            border-radius: 4px;
            border: none;
            color: #444;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }

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

        #secoundgsearchbar {
            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);
        }

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

        .code-tab {
            margin: 5px;
            display: inline-block;
            padding: 5px 10px;
            background-color: #333;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
        }

        .code-tab.active {
            background-color: #555;
        }

        .code-tab .close-tab {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #444;
            color: white;
            border-radius: 50%;
            font-size: 10px;
        }

        /* CodeMirror styles */
        .CodeMirror {
            border: 1px solid #444;
            background-color: #111;
            color: lime;
            font-family: monospace;
            height: 150px;
            line-height: normal;
            resize: none;
            width: 100%;
        }

        .line-numbers {
            background-color: #333;
            color: #777;
            text-align: right;
            padding: 10px;
            border-radius: 4px;
            box-sizing: border-box;
            font-family: monospace;
            font-size: 14px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 40px;
            overflow: hidden;
            user-select: none;
        }

        .console-wrapper {
            position: relative;
            width: calc(100% - 80px);
            margin: 0 auto;
            max-width: 600px;
        }

        .console-textarea-wrapper {
            position: relative;
            width: calc(100% - 40px);
            margin-left: 40px;
            overflow: auto;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
        }

        .expand-button {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #555;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

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

        .fullscreen-mode {
            width: 80vw !important;
            height: 80vh !important;
            position: fixed !important;
            top: 10vh !important;
            left: 10vw !important;
            z-index: 2000 !important;
            background-color: #111;
            border-radius: 0 !important;
            margin: 0 !important;
            padding: 20px;
            box-sizing: border-box;
        }

        .code-tab-bar {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        .code-tab-bar .close-tab {
            background: none;
            color: white;
            font-weight: bold;
            cursor: pointer;
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
    <!-- Include CodeMirror CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/show-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/hint/javascript-hint.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.cells.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.rings.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.topology.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs/loader.js"></script>
</head>

<body class="locked">
    <!-- Animated Background -->
    <div id="particles-js"></div>

    <!-- 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="themesDropdown">Themes:</label>
        <select id="themesDropdown">
            <option value="none">None</option>
            <option value="waves">Waves</option>
            <option value="net">Net</option>
            <option value="clouds">Clouds</option>
            <option value="fog">Fog</option>
            <option value="birds">Birds</option>
            <option value="cells">Cells</option>
            <option value="halo">Halo</option>
            <option value="rings">Rings</option>
            <option value="globe">Globe</option>
        </select>
        <label>Enable Dragging:
            <input type="checkbox" id="enableDrag">
        </label>
        <label>Toggle Favorites:
            <input type="checkbox" id="toggleFavorites">
        </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="codeTabs" class="code-tab-bar">
            <div id="newCodeButton" class="code-tab">+</div>
        </div>
        <div class="console-wrapper">
            <div class="line-numbers" id="lineNumbers">1</div>
            <div class="console-textarea-wrapper">
                <textarea id="consoleInput" placeholder="Enter JS/HTML code..." spellcheck="false"></textarea>
                <button class="expand-button" id="expandButton">Expand</button>
            </div>
        </div>
        <div>
            <button id="runConsoleCode">Run</button>
            <button id="saveCodeButton">Save Code</button>
            <button id="deleteCodeButton">Delete Code</button>
            <button id="downloadCodeButton">Download Code</button>
            <button id="uploadCodeButton">Upload Code</button>
        </div>
        <div id="console-output"></div>
    </div>

    <!-- Games List Pages -->
    <div id="gamePage1" class="container">
        <div class="box">
            <h2 id="page-title">HTML5 Games - Page 1</h2>
            <input type="text" id="gsearchbar" placeholder="Search games...">
            <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/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="Main/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="Main/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="Main/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/racer/index.html" class="game-link">Racer</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/tetris/index.html" class="game-link">Tetris</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/xx142-b2exe/index.html" class="game-link">xx142-b2.exe</a>
                <button id="nextPageButton" class="page-button">Next Page</button>
            </div>
        </div>
    </div>

    <div id="gamePage2" class="container">
        <div class="box">
            <h2 id="page-title-2">HTML5 Games - Page 2</h2>
            <div id="glist2" class="glist">
                <input type="text" id="secoundgsearchbar" placeholder="Search games...">
                <a href="javascript:void(0);" data-link="./gfiles/html5/extragames/games/wordle.html" class="game-link">Wordle</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/Games/slopeoffline.html" class="game-link">Slope</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/Games/brick-breaker.html" class="game-link">Brick breaker</a>
                <!-- Exclude repeated 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>
        let activeVantaEffect;

        const setupBackgroundAnimation = (theme) => {
            if (activeVantaEffect) {
                activeVantaEffect.destroy();
                activeVantaEffect = null;
            }
            switch (theme) {
                case 'waves': activeVantaEffect = VANTA.WAVES({ el: "#particles-js" }); break;
                case 'net': activeVantaEffect = VANTA.NET({ el: "#particles-js" }); break;
                case 'clouds': activeVantaEffect = VANTA.CLOUDS({ el: "#particles-js" }); break;
                case 'fog': activeVantaEffect = VANTA.FOG({ el: "#particles-js" }); break;
                case 'birds': activeVantaEffect = VANTA.BIRDS({ el: "#particles-js" }); break;
                case 'cells': activeVantaEffect = VANTA.CELLS({ el: "#particles-js" }); break;
                case 'halo': activeVantaEffect = VANTA.HALO({ el: "#particles-js" }); break;
                case 'rings': activeVantaEffect = VANTA.RINGS({ el: "#particles-js" }); break;
                case 'globe': activeVantaEffect = VANTA.GLOBE({ el: "#particles-js" }); break;
            }
        };

        document.addEventListener("DOMContentLoaded", function () {
            // Initialize Vanta based on local storage setting
            setupBackgroundAnimation(localStorage.getItem('theme') || 'none');

            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 themesDropdown = document.getElementById('themesDropdown');
            const enableDrag = document.getElementById('enableDrag');
            const toggleFavorites = document.getElementById('toggleFavorites');
            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 consoleOutput = document.getElementById('console-output');
            const runConsoleCode = document.getElementById('runConsoleCode');
            const saveCodeButton = document.getElementById('saveCodeButton');
            const deleteCodeButton = document.getElementById('deleteCodeButton');
            const downloadCodeButton = document.getElementById('downloadCodeButton');
            const uploadCodeButton = document.getElementById('uploadCodeButton');
            const newCodeButton = document.getElementById('newCodeButton');
            const expandButton = document.getElementById('expandButton');
            const codeTabs = document.getElementById('codeTabs');
            const gsearchbar = document.getElementById('gsearchbar');
            const secoundgsearchbar = document.getElementById('secoundgsearchbar');

            let attempts = 0;
            const maxAttempts = 3;
            const correctPassword = "dja101"; // Set your password here
            let currentLink = null;
            const sessionTimeoutMillis = 30 * 60 * 1000; // 30 minutes
            let currentTab = 0;
            let codeContents = JSON.parse(localStorage.getItem('codeContents')) || {};

            // Initialize CodeMirror for console input
            const codeMirror = CodeMirror.fromTextArea(document.getElementById('consoleInput'), {
                lineNumbers: true,
                mode: "javascript",
                theme: "monokai",
                minimap: { enabled: false },
                autoCloseBrackets: true,
                matchBrackets: true,
                lineWrapping: true,
                extraKeys: { "Ctrl-Space": "autocomplete" },
            });

            codeMirror.on("inputRead", function(cm, change) {
                if (change.origin !== '+input') return;
                const cur = cm.getCursor();
                const token = cm.getTokenAt(cur);
                
                // Simple custom autocomplete suggestions
                const keywords = [
                    'function', 'console.log', 'let', 'const', 'if', 'else', 
                    'for', 'while', 'return', 'try', 'catch'
                ];

                const completions = keywords.filter(keyword => 
                    keyword.startsWith(token.string)
                );

                if (completions.length > 0) {
                    CodeMirror.commands.autocomplete(cm, null, {
                        completeSingle: false,
                        hint: function() {
                            return {
                                list: completions.map(comp => ({
                                    text: comp,
                                    displayText: comp
                                }))
                            };
                        }
                    });
                }
            });

            const loadTabs = () => {
                codeTabs.innerHTML = '';
                Object.keys(codeContents).forEach(tab => {
                    const tabNumber = parseInt(tab.split('-')[1], 10);
                    const newTab = createTabElement(tabNumber);
                    codeTabs.appendChild(newTab);
                });
                codeTabs.appendChild(newCodeButton);
                if (codeTabs.children.length > 1) switchToTab(codeTabs.firstElementChild);
            };






            const createTabElement = (tabNumber) => {
                const tab = document.createElement('div');
                tab.className = 'code-tab';
                tab.dataset.tab = `tab-${tabNumber}`;
                tab.textContent = `Tab ${tabNumber + 1}`;
                const closeButton = document.createElement('span');
                closeButton.className = 'close-tab';
                closeButton.textContent = 'x';
                closeButton.addEventListener('click', (event) => {
                    event.stopPropagation();
                    handleCloseTab(tabNumber);
                });
                tab.appendChild(closeButton);
                tab.addEventListener('click', () => switchToTab(tab));
                return tab;
            };



            const switchToTab = (tab) => {
                document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                currentTab = parseInt(tab.dataset.tab.split('-')[1], 10);
                codeMirror.setValue(codeContents[`tab-${currentTab}`] || '');
            };

            const handleCloseTab = (tabNumber) => {
                if (confirm('Are you sure you want to close this tab?')) {
                    const tabId = `tab-${tabNumber}`;
                    delete codeContents[tabId];
                    localStorage.setItem('codeContents', JSON.stringify(codeContents));
                    loadTabs();
                }
            };

            loadTabs();

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

            function showOverlay() {
                overlay.style.display = 'flex';
                document.body.classList.add('locked');
                document.body.addEventListener('click', preventClick, true);
            }

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

            function preventClick(event) {
                if (event.target !== passwordInput && event.target !== submitPassword) {
                    event.stopPropagation();
                    event.preventDefault();
                }
            }

            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 () {
                const code = codeMirror.getValue();
                if (/<!DOCTYPE html>/i.test(code)) {
                    const newWindow = window.open("", "_blank");
                    newWindow.document.write(code);
                    newWindow.document.close();
                } else {
                    try {
                        const result = eval(code);
                        logToConsole(result === undefined ? 'Code executed.' : result);
                    } catch (error) {
                        logToConsole('Error: ' + error.message);
                    }
                }
                codeContents[`tab-${currentTab}`] = code;
                localStorage.setItem('codeContents', JSON.stringify(codeContents));
            });

            expandButton.addEventListener('click', function () {
                consoleUI.classList.toggle('fullscreen-mode');
                expandButton.textContent = consoleUI.classList.contains('fullscreen-mode') ? 'Minimize' : 'Expand';
            });

            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 width="100%" height="315" 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)?)\/|.*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
                const matches = url.match(regex);
                return matches ? matches[1] : null;
            }

            // Settings and themes
            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);
                gamePages.forEach(page => page.style.color = darkModeToggle.checked ? 'white' : 'black');
            });

            themesDropdown.addEventListener('change', function () {
                const theme = themesDropdown.value;
                localStorage.setItem('theme', theme);
                setupBackgroundAnimation(theme);
            });

            // 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);
                    } else {
                        link.removeAttribute('draggable');
                        link.removeEventListener('dragstart', handleDragStart);
                        link.removeEventListener('dragover', handleDragOver);
                        link.removeEventListener('drop', handleDrop);
                    }
                });
            });

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

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

            function handleDrop(e) {
                e.preventDefault();
                const draggedData = e.dataTransfer.getData('text/plain');
                const draggedElement = Array.from(document.querySelectorAll('.game-link')).find(link => link.dataset.link === draggedData);
                if (draggedElement && draggingElement !== draggedElement) {
                    draggingElement.parentNode.insertBefore(draggedElement, draggingElement.nextSibling);
                    saveOrder(); // Save the new order whenever the element is dropped
                }
            }

            function reorderFavorites() {
                const glists = document.querySelectorAll('.glist');
                glists.forEach(glist => {
                    const favorites = Array.from(glist.querySelectorAll('.favorite'));
                    favorites.forEach(fav => glist.prepend(fav));
                });
            }

            function toggleFavorite(e) {
                e.preventDefault();
                const link = e.currentTarget;
                link.classList.toggle('favorite');
                reorderFavorites();
                saveOrder();
            }

            saveOrder();

            toggleFavorites.addEventListener('change', function () {
                gameLinks.forEach(link => {
                    if (toggleFavorites.checked) {
                        link.addEventListener('click', toggleFavorite);
                    } else {
                        link.removeEventListener('click', toggleFavorite);
                    }
                });
            });

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

            gsearchbar.addEventListener('input', function() {
                const filter = gsearchbar.value.toLowerCase();
                document.querySelectorAll('.game-link').forEach(link => {
                    if (link.textContent.toLowerCase().includes(filter) || filter === '') {
                        link.style.display = 'block';
                    } else {
                        link.style.display = 'none';
                    }
                });
            });

            secoundgsearchbar.addEventListener('input', function() {
                const filter = secoundgsearchbar.value.toLowerCase();
                document.querySelectorAll('.game-link').forEach(link => {
                    if (link.textContent.toLowerCase().includes(filter) || filter === '') {
                        link.style.display = 'block';
                    } else {
                        link.style.display = 'none';
                    }
                });
            });

            // Confirmation dialog for games
            gameLinks.forEach(link => link.addEventListener('click', function (e) {
                if (!enableDrag.checked && !toggleFavorites.checked) {
                    e.preventDefault();
                    currentLink = e.currentTarget.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';
            });

            // Download Code
            downloadCodeButton.addEventListener('click', function () {
                const code = codeMirror.getValue();
                const blob = new Blob([code], {type: "text/plain"});
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.href = url;
                a.download = "consoleCode.txt";
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            });

            // Upload Code
            uploadCodeButton.addEventListener('click', function () {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.txt';

                input.onchange = e => { 
                    const file = e.target.files[0];
                    const reader = new FileReader();
                    reader.onload = event => {
                        codeMirror.setValue(event.target.result);
                    };
                    reader.readAsText(file);
                };

                input.click();
            });

            // Save Code
            saveCodeButton.addEventListener('click', function () {
                codeContents[`tab-${currentTab}`] = codeMirror.getValue();
                localStorage.setItem('codeContents', JSON.stringify(codeContents));
                alert('Code saved successfully.');
            });

            // Delete Code
            deleteCodeButton.addEventListener('click', function () {
                if (confirm('Are you sure you want to delete all saved code?')) {
                    localStorage.removeItem('codeContents');
                    codeContents = {};
                    alert('All saved code deleted.');
                    loadTabs();
                }
            });

            newCodeButton.addEventListener('click', function () {
                const maxTabIndex = Math.max(0, ...Object.keys(codeContents).map(tab => parseInt(tab.split('-')[1], 10))) + 1;
                codeContents[`tab-${maxTabIndex}`] = '';
                const newTab = createTabElement(maxTabIndex);
                codeTabs.insertBefore(newTab, newCodeButton);
                localStorage.setItem('codeContents', JSON.stringify(codeContents));
                switchToTab(newTab);
            });

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