hey add it so there's monacado code assist js deliver or cloudfare link make it so that it code assist in the text input in the console in the text input at console make it so the text input is big the numbers int he line sync when u upload text files and expand text input box the line TextInput grows bigger please make the full script to this please

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