remove the loading screen entierely.

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

        #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: 20px;
        }

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

        #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;
            overflow-y: auto;
        }

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

        /* Additional styles */
        #installButton {
            margin-top: 10px;
        }
    </style>
</head>

<body onload="showLoadingScreen()">
    <div id="loadingScreen">
        <h1>Code Editor</h1>
        <div id="loadingBar"></div>
        <p>Loading... Please wait.</p>
    </div>

    <div id="errorScreen" class="hidden">
        <h1>😥 Loading Failed!</h1>
        <p>An error occurred during loading. Please restart the application.</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>
            <!-- 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>
    </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++;
                    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);
                }
            }, 50); // Simulates loading progress
        }

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

        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("errorScreen").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";
                    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 after 750ms
                    };

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

</html>