add it so when you type on the code it auto fills kinda like a code language for JavaScript auto for example if I type alert (it will detect and have a auto fill suggestion to make it faster and it will say ("") )
and make it so when u click expand in the console it expands the text box so it makes it longer to see all your code. and make the number lines fixed and sync when uploading codes and other stuff and make it go back to normal when minized but make the text box bigger for typing code. and also make it so favorites when they are clicked they stay yellow and save at the top and when u click it it removes from favorites and save even when it saves. give the full support for page 2 in HTML games for favorite and dragging support. now please make the full script! implement all the code and get the jsdeliver for the auto fill thing like I said yes get the monacoda from vs or anything just get it from js deliver make the full script working

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Games List with Features</title>
    <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);
        }

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

        #consoleInput {
            display: block;
            width: 100%;
            height: 150px;
            margin: 10px auto;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #444;
            background-color: #111;
            color: lime;
            font-family: monospace;
            resize: none;
            overflow: auto;
        }

        .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>
    <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>
</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="./ChromeD.html" class="game-link">Chrome-Dino</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/connect3/index.html" class="game-link">Connect 3</a>
                <a href="javascript:void(0);" data-link="./Pacman.html" class="game-link">Pac-Man</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/cookieclicker/index.html" class="game-link">Cookie Clicker</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/edgenotfound/index.html" class="game-link">Edge not Found</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/evilglitch/index.html" class="game-link">Evil Glitch</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/factoryballsforever/index.html" class="game-link">Factory Balls Forever</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/flappybird/index.html" class="game-link">Flappy Bird</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/geometrydash/index.html" class="game-link">Geometry Dash</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/hextris/index.html" class="game-link">Hextris</a>
                <a href="javascript:void(0);" data-link="./Selecter.html" class="game-link">Five nights at freddys</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/konnekt/index.html" class="game-link">Konnekt</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/minecraft/index.html" class="game-link">Minecraft</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/ninjavsevilcorp/index.html" class="game-link">Ninja vs Evilcorp</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/packabunchas/index.html" class="game-link">Packabunchas</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/particleclicker/index.html" class="game-link">Particle Clicker</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/pushback/index.html" class="game-link">Push Back</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/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>
                <a href="javascript:void(0);" data-link="./gfiles/html5/FullScreenMario-master/index.html" class="game-link">Super-Mario-Bros</a>
                <a href="javascript:void(0);" data-link="./gfiles/html5/MicrosoftEdge-SURF-master/index.html" class="game-link">Edge-Surf</a>
                <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">Wor</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 consoleInput = document.getElementById('consoleInput');
            const consoleOutput = document.getElementById('console-output');
            const runConsoleCode = document.getElementById('runConsoleCode');
            const lineNumbers = document.getElementById('lineNumbers');
            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')) || {};

            // Load stored theme and apply it
            themesDropdown.value = localStorage.getItem('theme') || 'none';
            setupBackgroundAnimation(themesDropdown.value);

            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);
                consoleInput.value = codeContents[`tab-${currentTab}`] || '';
                updateLineNumbers();
            };

            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 = consoleInput.value;
                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);
                    } catch (error) {
                        logToConsole('Error: ' + error.message);
                    }
                }
                codeContents[`tab-${currentTab}`] = code;
                localStorage.setItem('codeContents', JSON.stringify(codeContents));
                updateLineNumbers();
            });

            consoleInput.addEventListener('input', function () {
                this.style.height = 'auto';
                this.style.height = Math.min(this.scrollHeight, 400) + 'px';
                updateLineNumbers();
            });

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

            function updateLineNumbers() {
                const lines = consoleInput.value.split('\n').length;
                lineNumbers.textContent = Array(lines).fill().map((_, i) => i + 1).join('\n');
            }

            // 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 = consoleInput.value;
                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 => {
                        consoleInput.value = event.target.result;
                        updateLineNumbers();
                    };
                    reader.readAsText(file);
                };

                input.click();
            });

            // Save Code
            saveCodeButton.addEventListener('click', function () {
                codeContents[`tab-${currentTab}`] = consoleInput.value;
                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');
            updateLineNumbers();
        });
    </script>
</body>
</html>