Hey can you add a checkbox button in settings called Developer mode on enabled the settings turn into things like configure menu where you can add buttons to the games list and name them and put a link to it to redirect (fyi if it's a website just make it embed it on the page like a Windows window and a close button) Next make it so whatever page it was on will be created at. Also make it so you can modify other games names like each button you click It's different for all of them and saves the names you inputted for each of them like values to check if it was edited. Also make sure there's a delete button only for the ones you created please. Also make it so there's an untoggle developer mode to remove the guis back to normal and the normal game buttons are sure you want to play shows up appears now. Also make it so when developer mode is enabled there is  a save button and a load button the save button will make you download a all the buttons on the list including the ones you created the save file will be in a .save and it will save your favorites and dragged buttons and also save your edited once and values so when you re-enable it again it's there. Make all the functions and stuff in that save file and make a warning text in the text file reading please do not modify any of the stuff or functions in here, doing so will ruin the sites code and sensitive data. Also make it so when you load it the site will have a loading bar over everything and a menu saying loading and it will load the functions and code and everything and check if it's the right stuff for the sites code. Make sure it's the right code if it's not then make it say this save file is corrupted please or any way to  detect it.
Please make this full in detail please thank you. Also here is a example on how created button will be in games list.

|  <a href="javascript:void(0);" data-link="./gfiles/html5/Example/index.html" class="game-link">Example</a>  |

Thank you.





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


make the final scroll[t