hey can you add it so there's a feature called Preview so when u click the game the are you sure you wanna open the game opens up the little preview for the embed will be in there to see what the game looks like and make a settings in settings called disable game preview show so when the are you sure you wanna open this game comes back then there's no game preview shown. also make it so in the console so ,. there's a button called install Packages. make it so u can install packages from https://cdn.jsdelivr.net and https://cdnjs.cloudflare.com and make it so it's functional and actually installs packages for example like this

and make it so u can view your installed packages and and make it so there's auto fill to see if there relevant packages and stuff and u can remove and add packages to please make this all in detail

Make the full script

<!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="-/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>