it does not let me click in anything or nothing when password is entered and I said make it in like command prompt from u got the asii right but make it in command prompt form like on the side and the loading bar is actually this ( OOO----------- )[1/100] and make it so the password is in command prompt form after it loads extraa stuff make the full script better and with a loading screen entered on website and also make a password system after the loading screen make the loading screen highly detailed and make it like the windows command prompt loader like loading and asii text on a big title called Code Editer and it loads all the features and systems in the comman prompt telling u everything and code please and it saves in cookies it loads all saves data and all the stuff and make it so there's a fully working curroption system if anything is curropted it will make a replica blue screen with a loading to 100 and a sad face if there's a error and it will have a restart and clear memory to remove everything from cookies and saved data. make this all functional and make sure when its done loading the stuff in command prompt it says type in the code. password and its editor. and make it like the command prompt from windows typing. and its flickering and if its wrong it will s ay access denied and if its right it will make it like those windows packages loader loading all these stuff then it fades away and loads in the real code editor. make the full script make the full script 1000 lines and make sure there's no system error if the password is wrong g let them retry stop making aleerts pop up to just make it be entered into he command prompt line

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Package Installer</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            font-family: 'Courier New', Courier, monospace;
            background-color: #282c34;
            color: white;
            margin: 0;
            overflow: hidden; /* Prevent scrollbars */
        }

        /* Loading screen styles */
        #loadingScreen {
            position: absolute;
            width: 100%;
            height: 100%;
            background: black;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            opacity: 1;
            transition: opacity 0.5s;
            font-size: 24px;
            letter-spacing: 1px;
        }

        #loadingBar {
            height: 5px;
            background-color: #5cb85c;
            width: 0;
            transition: width 0.3s ease;
            margin-top: 10px;
        }

        #sidebar {
            width: 250px;
            background-color: #333;
            color: white;
            padding: 10px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        #sidebar h2 {
            font-size: 1.5em;
            margin: 0 0 10px 0;
        }

        #sidebar input {
            padding: 8px;
            margin-bottom: 10px;
            width: 100%;
            border: none;
            border-radius: 4px;
        }

        #packageList {
            list-style-type: none;
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
            background: #555;
            border-radius: 4px;
            margin: 0;
        }

        #packageList li {
            padding: 5px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s;
        }

        #packageList li:hover {
            background: #666;
        }

        #editor {
            flex: 1;
            border-left: 1px solid #444;
            padding: 10px;
            background-color: #1e1e1e;
        }

        #editor textarea {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #1e1e1e;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            resize: none;
        }

        button {
            background-color: #357ae8;
            border: none;
            color: white;
            padding: 8px 12px;
            cursor: pointer;
            margin-top: 10px;
        }

        button:hover {
            background-color: #3367d6;
        }

        #errorScreen {
            background-color: #ffcc00;
            display: none;
            color: black;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            justify-content: center;
            align-items: center;
        }

        .hidden {
            display: none;
        }

        #corruptionScreen {
            background-color: #f00;
            color: white;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            font-size: 24px;
        }

        #corruptionScreen h1 {
            font-size: 48px;
        }

        #corruptionScreen p {
            font-size: 18px;
        }

        #clearCookiesButton {
            margin-top: 10px;
            background-color: #dc3545;
        }
    </style>
</head>

<body onload="showLoadingScreen()">
    <!-- Loading Screen -->
    <div id="loadingScreen">
        <pre>
 ____   ___   ___   ____   _   _   _____   _____   ____  
|  _ \ |_ _| |   \ |  _ \ | | | | | ____| | ___ \ / ___| 
| |_) | | |  | |) || |_) || |_| | |  _|   | |_/ /| |     
|  _ <  | |  |  _ < |  __/ |  _  | |___  |  __/ | |___  
|_| \_\|___| |_| \_\|_|    |_| |_| |_____| |_|     \____| 
        </pre>
        <div id="loadingBar"></div>
        <p>Loading... Please wait.</p>
    </div>

    <!-- Error Simulation Screen -->
    <div id="errorScreen" class="hidden">
        <h1>😥 Something went wrong!</h1>
        <p>Loading failed due to corruption. Please restart the application.</p>
        <button onclick="location.reload();">Restart</button>
    </div>

    <!-- Corruption Simulation Screen -->
    <div id="corruptionScreen" class="hidden">
        <h1>😢 System Corrupt!</h1>
        <p>Loading failed... Please restart.</p>
        <button onclick="location.reload();">Restart</button>
    </div>

    <div id="sidebar" class="hidden">
        <h2>Package Manager</h2>
        <input type="text" id="searchInput" placeholder="Search for packages..." />
        <button onclick="searchPackages()">Search Packages</button>
        <select id="versionSelect">
            <option value="latest">Latest</option>
            <option value="1.0.0">1.0.0</option>
            <option value="2.0.0">2.0.0</option>
            <!-- Additional versions for demonstration -->
        </select>
        <button id="resetButton" onclick="resetPackageList()">Reset Package List</button>
        <button id="installedButton" onclick="listInstalledPackages()">List Installed Packages</button>
        <ul id="packageList"></ul>
        <button id="clearCookiesButton" onclick="clearCookies()">Clear Cookies</button>
    </div>
    <div id="editor" class="hidden">
        <textarea id="codeEditor" placeholder="Write your JavaScript code here..."></textarea>
    </div>
    <button id="runCode" class="hidden" onclick="runCode()">Run Code</button>

    <script>
        let packageCache = [];
        let installedPackages = [];
        let loadingScreenDisplayed = true;

        function showLoadingScreen() {
            updateLoadingBar(0);
            const interval = setInterval(() => {
                let progress = parseInt(document.getElementById("loadingBar").style.width) || 0;
                if (progress < 100) {
                    progress += 2; // Adjust for quicker loading
                    updateLoadingBar(progress);
                } else {
                    clearInterval(interval);
                    loadingScreenDisplayed = false;
                    document.getElementById("loadingScreen").style.opacity = 0;
                    setTimeout(() => {
                        document.getElementById("loadingScreen").classList.add("hidden");
                        document.getElementById("sidebar").classList.remove("hidden");
                        document.getElementById("editor").classList.remove("hidden");
                        document.getElementById("runCode").classList.remove("hidden");
                        createPasswordPrompt(); // Prompt for password after loading
                    }, 500);
                }
            }, 100); // Simulates loading progress
        }

        function updateLoadingBar(progress) {
            const loadingBar = document.getElementById("loadingBar");
            loadingBar.style.display = 'block';
            loadingBar.style.width = progress + '%';
        }

        function createPasswordPrompt() {
            const password = prompt("Please enter the password to access the code editor:");
            if (password === "correct-password") { // Dummy password for functionality
                alert("Access granted!");
            } else {
                alert("Access denied!");
                document.getElementById("corruptionScreen").style.display = "flex";
                return;
            }
        }

        async function searchPackages() {
            const searchInput = document.getElementById("searchInput").value;
            const packageList = document.getElementById("packageList");
            packageList.innerHTML = '';
            updateLoadingBar(0);

            if (!searchInput) {
                alert('Please enter a package name to search.');
                return;
            }

            try {
                updateLoadingBar(25);
                const response = await fetch(`https://registry.npmjs.org/-/v1/search?text=${searchInput}&size=10`);
                updateLoadingBar(50);

                const data = await response.json();
                if (data.objects.length === 0) {
                    alert('No packages found.');
                    updateLoadingBar(100);
                    return;
                }

                packageCache = data.objects.map(item => ({
                    name: item.package.name,
                    link: item.package.links.npm,
                    description: item.package.description || "No description available."
                }));

                packageCache.forEach(pkg => {
                    const li = document.createElement("li");
                    li.textContent = `${pkg.name} - ${pkg.description}`;

                    const uninstallButton = document.createElement("span");
                    uninstallButton.textContent = "X"; // Uninstall button
                    uninstallButton.style.cursor = "pointer";
                    uninstallButton.style.color = "red";
                    uninstallButton.onclick = (e) => {
                        e.stopPropagation();
                        uninstallPackage(pkg.name);
                    };

                    li.onclick = () => {
                        installPackage(pkg);
                        li.style.backgroundColor = "#5cb85c"; // Change color on successful installation
                        setTimeout(() => { li.style.backgroundColor = ""; }, 750); // Reset color
                    };

                    li.appendChild(uninstallButton);
                    packageList.appendChild(li);
                });
            } catch (error) {
                console.error(error);
                alert('Error fetching packages. Please try again later.');
            }
            updateLoadingBar(100);
        }

        function resetPackageList() {
            installedPackages.forEach(pkgName => uninstallPackage(pkgName));
            packageCache = [];
            document.getElementById("packageList").innerHTML = '';
            document.getElementById("searchInput").value = '';
            alert("Package list has been reset.");
        }

        function listInstalledPackages() {
            const installedList = document.createElement("ul");
            installedPackages.forEach(pkgName => {
                const li = document.createElement("li");
                li.textContent = pkgName;
                const link = document.createElement("a");
                link.href = `https://www.npmjs.com/package/${pkgName}`;
                link.target = "_blank";
                link.textContent = " (link)";
                li.appendChild(link);
                installedList.appendChild(li);
            });
            const listWindow = window.open('', '', 'width=300,height=400');
            listWindow.document.write("<h2>Installed Packages</h2>");
            listWindow.document.body.appendChild(installedList);
        }

        function installPackage(pkg) {
            const packageURL = `https://cdn.jsdelivr.net/npm/${pkg.name}@latest`;
            const script = document.createElement('script');
            script.src = packageURL;

            script.onload = () => {
                const codeToRun = `// You can use the ${pkg.name} package here...\n`;
                document.getElementById("codeEditor").value += codeToRun; // Insert package usage code
                installedPackages.push(pkg.name);
                alert(`${pkg.name} installed successfully.`);
            };

            script.onerror = () => {
                alert(`Error loading ${pkg.name}. Please check if it is a valid package or check its availability.`);
            };

            document.head.appendChild(script);
        }

        function uninstallPackage(pkgName) {
            installedPackages = installedPackages.filter(pkg => pkg !== pkgName);
            alert(`${pkgName} has been uninstalled.`);
        }

        function clearCookies() {
            localStorage.clear();
            alert("All cookies and memory cleared.");
        }

        function runCode() {
            const code = document.getElementById("codeEditor").value;
            try {
                eval(code);
            } catch (error) {
                alert(`Error running code: ${error.message}`);
            }
        }
    </script>
</body>

</html>