hey add a loading screen in the begining once the script runs and it loads everything. make it actually load every function and everything please make it show everything that is being loaded. and have a drop-down to scroll through loading logs. and make it have a actual loading bar. saying Loading BM launcher and it loads. and then it goes the the splash screen. also make it so if you click during the splash screen it skips it the password. same thing with outro once close button is clicked and outro is played onec clicked it disappears and music stops. also turn this into a HTML page. makee this have lots of extra functions and extra stuff to make this a good website please. make it a good website and everything. and make it good make the full script

javascript:(function() {
    // Sound effects configuration
    const soundEffects = {
        intro: 'https://www.myinstants.com/media/sounds/nouveau-jingle-netflix.mp3',
        buttonClick: 'https://example.com/error.mp3',
        typing: 'https://example.com/error.mp3',
        outro: 'https://www.myinstants.com/media/sounds/doors-elevator-music.mp3',
        error: 'https://example.com/error.mp3',
    };

    window.onload = () => {
        new Audio(soundEffects.intro).play(); // Play intro sound when the window loads
    };

    // Game data with custom configurations
    const games = [
        { name: 'Game 1', url: 'www.huggingface.co/spaces/yuntian-deng/ChatGPT', width: 800, height: 600, description: 'An exciting adventure game.' },
        { name: 'Game 2', url: 'https://game2.example.com', width: 600, height: 400, description: 'A challenging puzzle game.' },
        { name: 'Game 3', url: 'https://game3.example.com', width: 1024, height: 768, description: 'Fast-paced arcade action!' },
        { name: 'Game 4', url: 'https://game4.example.com', width: 640, height: 480, description: 'Mystery and exploration.' },
        { name: 'Game 5', url: 'https://game5.example.com', width: 1280, height: 720, description: 'Multiplayer battle game.' }
    ];

    // Styles for responsive UI and enhancements
    const style = document.createElement('style');
    style.textContent = `
        @keyframes splashEntrance {
            0% { opacity: 0; transform: scale(0.8) translateY(-100vh); }
            50% { opacity: 1; transform: scale(1.2) translateY(0); }
            70% { transform: scale(1) rotate(360deg); }
            100% { opacity: 0; transform: scale(0.5) translateY(100vh); }
        }
        @keyframes passwordEntrance {
            0% { opacity: 0; transform: translateY(-50px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes menuFadeIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes menuFadeOut {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(20px); }
        }
        @keyframes outroExit {
            0% { opacity: 0; }
            100% { opacity: 1; background-color: #111; }
        }
        #splashScreen, #outroMessage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4em;
            font-family: Arial, sans-serif;
            z-index: 10000;
        }
        #splashScreen {
            background-color: #1d1f20;
            color: #00d1b2;
            animation: splashEntrance 5s forwards;
        }
        #passwordContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: passwordEntrance 3s forwards;
        }
        #passwordEntry {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            text-align: center;
        }
        #outroMessage {
            background-color: #111;
            color: #fff;
            opacity: 0;
            animation: outroExit 3s forwards;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        #outroMessage div {
            animation: float 3s infinite;
        }
        @keyframes float {
            0% { transform: translatey(0px); }
            50% { transform: translatey(-20px); }
            100% { transform: translatey(0px); }
        }
        .fade {
            animation: menuFadeIn 3s forwards;
        }
        .fadeOut {
            animation: menuFadeOut 1s forwards;
        }
        .draggable {
            cursor: move;
        }
        #consoleOutput {
            height: 250px;
            overflow-y: auto;
            background-color: #282c34;
            color: #ffffff;
            font-family: monospace;
            padding: 10px;
            border-radius: 4px;
        }
        #consoleInput {
            width: calc(100% - 130px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: 5px;
        }
        #consoleContainer {
            transition: width 0.5s ease, height 0.5s ease;
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 400px;
            height: 400px;
            z-index: 9999;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #008CBA;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border-radius: 8px;
        }
        #consoleControlPanel {
            margin: 5px;
            text-align: center;
        }
        .hoverable:hover {
            transform: scale(1.05);
            transition: transform 0.3s ease;
            background-color: #f0f0f0;
            color: #333;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 140px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -70px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .loading-spinner {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);

    // Function to play sound
    function playSound(sound) {
        if (sound) {
            new Audio(sound).play();
        }
    }

    // Create the splash screen
    const splashScreen = document.createElement('div');
    splashScreen.id = 'splashScreen';
    splashScreen.textContent = 'BM 4.0 Launcher';
    document.body.appendChild(splashScreen);

    // Password entry container
    const passwordContainer = document.createElement('div');
    passwordContainer.id = 'passwordContainer';
    passwordContainer.style.display = 'none';
    const passwordEntry = document.createElement('div');
    passwordEntry.id = 'passwordEntry';
    passwordEntry.innerHTML = `
        <h2 style="margin-bottom: 10px;">Enter Password</h2>
        <input type="password" id="passwordInput" style="padding: 10px; font-size: 1em;">
        <button id="submitPassword" class="hoverable" style="padding: 10px; margin-top: 10px; background-color: #4CAF50; border: none; color: white; border-radius: 5px; cursor: pointer;" alt="Submit Password">Submit</button>
    `;
    passwordContainer.appendChild(passwordEntry);
    document.body.appendChild(passwordContainer);

    // Function to handle password submission
    function handlePasswordSubmit() {
        playSound(soundEffects.buttonClick);
        const passwordInput = document.getElementById('passwordInput').value;
        if (passwordInput === 'dja101') {
            passwordContainer.style.display = 'none';
            initializeMenu();
        } else {
            playSound(soundEffects.error);
            passwordAttempts++;
            alert('Incorrect password!');
            if (passwordAttempts >= 3) {
                passwordContainer.style.display = 'none';
                showLockoutMessage();
            }
        }
    }

    // Ensure correct event binding
    document.getElementById('submitPassword').onclick = handlePasswordSubmit;

    // Initialize menu after correct password
    function initializeMenu() {
        const menuContainer = document.createElement('div');
        menuContainer.id = 'menuContainer';
        menuContainer.className = 'fade';
        menuContainer.style.position = 'fixed';
        menuContainer.style.top = '10px';
        menuContainer.style.left = '10px';
        menuContainer.style.width = '300px';
        menuContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        menuContainer.style.borderRadius = '8px';
        menuContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        menuContainer.style.padding = '10px';
        menuContainer.style.zIndex = '9999';
        document.body.appendChild(menuContainer);

        // Games button
        const gamesTab = document.createElement('button');
        gamesTab.textContent = 'Games';
        gamesTab.className = 'hoverable tooltip';
        gamesTab.style.width = '100%';
        gamesTab.style.padding = '10px';
        gamesTab.style.border = 'none';
        gamesTab.style.borderRadius = '5px';
        gamesTab.style.backgroundColor = '#ffc107';
        gamesTab.style.color = 'white';
        gamesTab.style.fontSize = '1em';
        gamesTab.style.cursor = 'pointer';
        gamesTab.style.marginBottom = '10px';
        gamesTab.onclick = function() {
            playSound(soundEffects.buttonClick);
            menuContainer.classList.add('fadeOut');
            setTimeout(() => {
                menuContainer.style.display = 'none';
                openGamesList();
            }, 1000);
        };
        const gamesTooltip = document.createElement('span');
        gamesTooltip.classList.add('tooltiptext');
        gamesTooltip.textContent = 'View available games';
        gamesTab.appendChild(gamesTooltip);

        // Other existing buttons
        const unblockTab = document.createElement('button');
        unblockTab.textContent = 'Convert YouTube URL';
        unblockTab.className = 'hoverable tooltip';
        unblockTab.style.width = '100%';
        unblockTab.style.padding = '10px';
        unblockTab.style.border = 'none';
        unblockTab.style.borderRadius = '5px';
        unblockTab.style.backgroundColor = '#008CBA';
        unblockTab.style.color = 'white';
        unblockTab.style.fontSize = '1em';
        unblockTab.style.cursor = 'pointer';
        unblockTab.style.marginBottom = '10px';
        unblockTab.onclick = function() {
            playSound(soundEffects.buttonClick);
            menuContainer.classList.add('fadeOut');
            setTimeout(() => {
                menuContainer.style.display = 'none';
                openUnblockWebsiteInterface();
            }, 1000);
        };
        const unblockTooltip = document.createElement('span');
        unblockTooltip.classList.add('tooltiptext');
        unblockTooltip.textContent = 'Convert and view YouTube content';
        unblockTab.appendChild(unblockTooltip);

        const consoleTab = document.createElement('button');
        consoleTab.textContent = 'Inspect Element';
        consoleTab.className = 'hoverable tooltip';
        consoleTab.style.width = '100%';
        consoleTab.style.padding = '10px';
        consoleTab.style.border = 'none';
        consoleTab.style.borderRadius = '5px';
        consoleTab.style.backgroundColor = '#FF5733';
        consoleTab.style.color = 'white';
        consoleTab.style.fontSize = '1em';
        consoleTab.style.cursor = 'pointer';
        consoleTab.style.marginBottom = '10px';
        consoleTab.onclick = function() {
            playSound(soundEffects.buttonClick);
            menuContainer.classList.add('fadeOut');
            setTimeout(() => {
                menuContainer.style.display = 'none';
                openConsoleInterface();
            }, 1000);
        };
        const consoleTooltip = document.createElement('span');
        consoleTooltip.classList.add('tooltiptext');
        consoleTooltip.textContent = 'Open developer tools';
        consoleTab.appendChild(consoleTooltip);

        const closeTab = document.createElement('button');
        closeTab.textContent = 'Close Tab';
        closeTab.className = 'hoverable tooltip';
        closeTab.style.width = '100%';
        closeTab.style.padding = '10px';
        closeTab.style.border = 'none';
        closeTab.style.borderRadius = '5px';
        closeTab.style.backgroundColor = '#f44336';
        closeTab.style.color = 'white';
        closeTab.style.fontSize = '1em';
        closeTab.style.cursor = 'pointer';
        closeTab.style.marginBottom = '10px';
        closeTab.onclick = function() {
            playSound(soundEffects.buttonClick);
            const confirmClose = confirm('Are you sure you want to close the tab?');
            if (confirmClose) {
                menuContainer.classList.add('fadeOut');
                setTimeout(() => {
                    menuContainer.style.display = 'none';
                    showOutro();
                }, 1000);
            }
        };
        const closeTooltip = document.createElement('span');
        closeTooltip.classList.add('tooltiptext');
        closeTooltip.textContent = 'Close the application';
        closeTab.appendChild(closeTooltip);

        menuContainer.appendChild(gamesTab);
        menuContainer.appendChild(unblockTab);
        menuContainer.appendChild(consoleTab);
        menuContainer.appendChild(closeTab);
    }

    // Show lockout message after 3 incorrect password attempts
    function showLockoutMessage() {
        playSound(soundEffects.error);
        const outroMessage = document.createElement('div');
        outroMessage.id = 'outroMessage';
        outroMessage.textContent = 'who are u 💀';
        document.body.appendChild(outroMessage);
    }

    // Advanced outro animation
    function showOutro() {
        playSound(soundEffects.outro);
        const outroMessage = document.createElement('div');
        outroMessage.id = 'outroMessage';
        outroMessage.innerHTML = `
            <div style="animation-delay: 0.5s; font-size: 3em;">Goodbye!</div>
            <div style="animation-delay: 1s; font-size: 2em; color: #f08080;">Hope to see you soon!</div>
            <div style="animation-delay: 1.5s; font-size: 1.5em; color: #87cefa;">Take care!</div>
            <div style="animation-delay: 2s; font-size: 1em; color: #ffb6c1;">You rock! 🎸</div>
        `;
        document.body.appendChild(outroMessage);
        setTimeout(() => {
            outroMessage.classList.add('fadeOut');
            setTimeout(() => {
                outroMessage.remove();
            }, 5000);
        }, 3000);
    }

    function openGamesList() {
        if (document.getElementById('gameListContainer')) return;

        const gameListContainer = document.createElement('div');
        gameListContainer.id = 'gameListContainer';
        gameListContainer.className = 'fade';
        gameListContainer.style.position = 'fixed';
        gameListContainer.style.top = '50px';
        gameListContainer.style.left = '50px';
        gameListContainer.style.width = '300px';
        gameListContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        gameListContainer.style.borderRadius = '8px';
        gameListContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        gameListContainer.style.padding = '10px';
        gameListContainer.style.zIndex = '9999';

        const gameList = document.createElement('ul');
        gameList.style.listStyleType = 'none';
        gameList.style.padding = '0';

        games.forEach((game) => {
            const gameItem = document.createElement('li');
            gameItem.textContent = game.name;
            gameItem.style.padding = '10px';
            gameItem.style.cursor = 'pointer';
            gameItem.style.borderBottom = '1px solid #ddd';
            gameItem.className = 'tooltip';

            const gameTooltip = document.createElement('span');
            gameTooltip.classList.add('tooltiptext');
            gameTooltip.textContent = game.description;
            gameItem.appendChild(gameTooltip);

            gameItem.onclick = function() {
                playSound(soundEffects.buttonClick);
                openGameEmbed(game);
            };
            gameList.appendChild(gameItem);
        });

        const backButton = document.createElement('button');
        backButton.textContent = 'Back';
        backButton.style.width = '100%';
        backButton.style.padding = '10px';
        backButton.style.border = 'none';
        backButton.style.borderRadius = '5px';
        backButton.style.backgroundColor = '#dc3545';
        backButton.style.color = 'white';
        backButton.style.cursor = 'pointer';
        backButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            gameListContainer.classList.add('fadeOut');
            setTimeout(() => {
                gameListContainer.remove();
                initializeMenu();
            }, 1000);
        };
        gameListContainer.appendChild(gameList);
        gameListContainer.appendChild(backButton);
        document.body.appendChild(gameListContainer);
    }

    function openGameEmbed(game) {
        const embedContainer = document.createElement('div');
        embedContainer.id = 'embedContainer';
        embedContainer.style.position = 'fixed';
        embedContainer.style.top = '10px';
        embedContainer.style.right = '10px';
        embedContainer.style.width = `${game.width}px`; 
        embedContainer.style.height = `${game.height}px`; 
        embedContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        embedContainer.style.border = '2px solid #008CBA';
        embedContainer.style.borderRadius = '8px';
        embedContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        embedContainer.style.zIndex = '9999';
        document.body.appendChild(embedContainer);

        const iframe = document.createElement('iframe');
        iframe.src = game.url;
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';
        embedContainer.appendChild(iframe);

        const controlPanel = document.createElement('div');
        controlPanel.style.textAlign = 'center';
        controlPanel.style.padding = '10px';
        
        const widthInput = document.createElement('input');
        widthInput.type = 'number';
        widthInput.value = game.width;
        widthInput.style.width = '60px';
        controlPanel.appendChild(widthInput);

        const heightInput = document.createElement('input');
        heightInput.type = 'number';
        heightInput.value = game.height;
        heightInput.style.width = '60px';
        controlPanel.appendChild(heightInput);

        const resizeButton = document.createElement('button');
        resizeButton.textContent = 'Resize';
        resizeButton.style.padding = '5px 10px';
        resizeButton.style.margin = '5px';
        resizeButton.style.borderRadius = '5px';
        resizeButton.style.border = 'none';
        resizeButton.style.backgroundColor = '#ffc107';
        resizeButton.style.color = 'white';
        resizeButton.style.cursor = 'pointer';
        resizeButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            embedContainer.style.width = `${widthInput.value}px`;
            embedContainer.style.height = `${heightInput.value}px`;
        };
        controlPanel.appendChild(resizeButton);

        const closeEmbedButton = document.createElement('button');
        closeEmbedButton.textContent = 'Close';
        closeEmbedButton.style.padding = '5px 10px';
        closeEmbedButton.style.margin = '5px';
        closeEmbedButton.style.borderRadius = '5px';
        closeEmbedButton.style.border = 'none';
        closeEmbedButton.style.backgroundColor = '#dc3545';
        closeEmbedButton.style.color = 'white';
        closeEmbedButton.style.cursor = 'pointer';
        closeEmbedButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (confirm('Are you sure you want to close this game?')) {
                embedContainer.remove();
            }
        };
        controlPanel.appendChild(closeEmbedButton);

        const fullscreenButton = document.createElement('button');
        fullscreenButton.textContent = 'Fullscreen';
        fullscreenButton.style.padding = '5px 10px';
        fullscreenButton.style.margin = '5px';
        fullscreenButton.style.borderRadius = '5px';
        fullscreenButton.style.border = 'none';
        fullscreenButton.style.backgroundColor = '#4CAF50';
        fullscreenButton.style.color = 'white';
        fullscreenButton.style.cursor = 'pointer';
        fullscreenButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (embedContainer.requestFullscreen) {
                embedContainer.requestFullscreen();
            } else if (embedContainer.webkitRequestFullscreen) { 
                embedContainer.webkitRequestFullscreen();
            } else if (embedContainer.msRequestFullscreen) { 
                embedContainer.msRequestFullscreen();
            }
        };
        controlPanel.appendChild(fullscreenButton);

        const backgroundColorInput = document.createElement('input');
        backgroundColorInput.type = 'color';
        backgroundColorInput.value = '#ffffff';
        backgroundColorInput.style.marginLeft = '10px';
        backgroundColorInput.oninput = function() {
            embedContainer.style.backgroundColor = backgroundColorInput.value;
        };
        controlPanel.appendChild(backgroundColorInput);

        const dragButton = document.createElement('button');
        dragButton.textContent = 'Toggle Drag';
        dragButton.style.padding = '5px 10px';
        dragButton.style.margin = '5px';
        dragButton.style.borderRadius = '5px';
        dragButton.style.border = 'none';
        dragButton.style.backgroundColor = '#17a2b8';
        dragButton.style.color = 'white';
        dragButton.style.cursor = 'pointer';
        let isDraggable = false;
        dragButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (!isDraggable) {
                makeElementDraggable(embedContainer);
                isDraggable = true;
            } else {
                removeElementDraggable(embedContainer);
                isDraggable = false;
            }
        };
        controlPanel.appendChild(dragButton);

        embedContainer.appendChild(controlPanel);
    }    

    // Open website interface
    function openUnblockWebsiteInterface() {
        const frameContainer = document.createElement('div');
        frameContainer.id = 'embedWebsiteContainer';
        frameContainer.style.position = 'absolute';
        frameContainer.style.top = '10px';
        frameContainer.style.right = '10px';
        frameContainer.style.width = '600px';
        frameContainer.style.height = '400px';
        frameContainer.style.zIndex = '9999';
        frameContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        frameContainer.style.border = '2px solid #008CBA';
        frameContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        frameContainer.style.borderRadius = '8px';
        document.body.appendChild(frameContainer);

        const iframe = document.createElement('iframe');
        iframe.id = 'embedWebsiteFrame';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';
        frameContainer.appendChild(iframe);

        const controlPanel = document.createElement('div');
        controlPanel.style.margin = '5px';
        controlPanel.style.textAlign = 'center';
        frameContainer.appendChild(controlPanel);

        // Resize control inputs
        const widthInput = document.createElement('input');
        widthInput.type = 'number';
        widthInput.value = '600';
        widthInput.style.width = '60px';
        widthInput.style.margin = '5px';
        widthInput.title = 'Width';
        controlPanel.appendChild(widthInput);

        const heightInput = document.createElement('input');
        heightInput.type = 'number';
        heightInput.value = '400';
        heightInput.style.width = '60px';
        heightInput.style.margin = '5px';
        heightInput.title = 'Height';
        controlPanel.appendChild(heightInput);

        const resizeButton = document.createElement('button');
        resizeButton.textContent = 'Resize';
        resizeButton.style.padding = '5px 10px';
        resizeButton.style.margin = '5px';
        resizeButton.style.borderRadius = '5px';
        resizeButton.style.border = 'none';
        resizeButton.style.backgroundColor = '#ffa07a';
        resizeButton.style.color = 'white';
        resizeButton.style.cursor = 'pointer';
        resizeButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            const newWidth = widthInput.value + 'px';
            const newHeight = heightInput.value + 'px';
            frameContainer.style.width = newWidth;
            frameContainer.style.height = newHeight;
        };
        controlPanel.appendChild(resizeButton);

        // Toggle draggable state with a button
        const dragButton = document.createElement('button');
        dragButton.textContent = 'Enable Drag';
        dragButton.style.padding = '5px 10px';
        dragButton.style.margin = '5px';
        dragButton.style.borderRadius = '5px';
        dragButton.style.border = 'none';
        dragButton.style.backgroundColor = '#f0ad4e';
        dragButton.style.color = 'white';
        dragButton.style.cursor = 'pointer';
        let isDraggable = false;

        dragButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (!isDraggable) {
                makeElementDraggable(frameContainer);
                dragButton.textContent = 'Disable Drag';
                isDraggable = true;
            } else {
                removeElementDraggable(frameContainer);
                dragButton.textContent = 'Enable Drag';
                isDraggable = false;
            }
        };
        controlPanel.appendChild(dragButton);

        const toggleButton = document.createElement('button');
        toggleButton.textContent = 'Close';
        toggleButton.style.padding = '5px 10px';
        toggleButton.style.margin = '5px';
        toggleButton.style.borderRadius = '5px';
        toggleButton.style.border = 'none';
        toggleButton.style.backgroundColor = '#008CBA';
        toggleButton.style.color = 'white';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.transition = 'background-color 0.3s ease';
        toggleButton.onmouseover = function() {
            toggleButton.style.backgroundColor = '#005f73';
        };
        toggleButton.onmouseout = function() {
            toggleButton.style.backgroundColor = '#008CBA';
        };
        toggleButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            frameContainer.classList.add('fadeOut');
            setTimeout(() => {
                frameContainer.remove();
                initializeMenu(); // Show menu bar again
            }, 1000);
        };
        controlPanel.appendChild(toggleButton);

        const urlInput = document.createElement('input');
        urlInput.type = 'text';
        urlInput.placeholder = 'Enter YouTube URL';
        urlInput.style.width = '200px';
        urlInput.style.margin = '5px';
        urlInput.style.borderRadius = '5px';
        urlInput.style.border = '1px solid #ccc';
        urlInput.style.padding = '5px';
        controlPanel.appendChild(urlInput);

        const submitButton = document.createElement('button');
        submitButton.textContent = 'Convert';
        submitButton.style.padding = '5px 10px';
        submitButton.style.margin = '5px';
        submitButton.style.borderRadius = '5px';
        submitButton.style.border = 'none';
        submitButton.style.backgroundColor = '#4CAF50';
        submitButton.style.color = 'white';
        submitButton.style.cursor = 'pointer';
        submitButton.style.transition = 'background-color 0.3s ease';
        submitButton.onmouseover = function() {
            submitButton.style.backgroundColor = '#388e3c';
        };
        submitButton.onmouseout = function() {
            submitButton.style.backgroundColor = '#4CAF50';
        };
        submitButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            const url = urlInput.value.trim();
            if (url) {
                const videoId = new URL(url).searchParams.get('v');
                if (videoId) {
                    const frame = document.getElementById('embedWebsiteFrame');
                    frame.src = `https://www.youtube.com/embed/${videoId}`;
                    urlInput.value = '';
                    frameContainer.style.display = 'block';
                } else {
                    playSound(soundEffects.error);
                    alert('Invalid YouTube URL.');
                }
            }
        };
        controlPanel.appendChild(submitButton);
    }

    // Open console interface (the Inspect Element-like console)
    function openConsoleInterface() {
        const consoleContainer = document.createElement('div');
        consoleContainer.id = 'consoleContainer';
        document.body.appendChild(consoleContainer);

        const consoleControlPanel = document.createElement('div');
        consoleControlPanel.id = 'consoleControlPanel';
        consoleContainer.appendChild(consoleControlPanel);

        // Add console output area
        const consoleOutput = document.createElement('div');
        consoleOutput.id = 'consoleOutput';
        consoleContainer.appendChild(consoleOutput);

        // Add console input and controls
        const consoleInput = document.createElement('input');
        consoleInput.id = 'consoleInput';
        consoleInput.placeholder = 'Enter JavaScript Code';
        consoleControlPanel.appendChild(consoleInput);

        const submitButton = document.createElement('button');
        submitButton.textContent = 'Run';
        submitButton.style.padding = '5px 10px';
        submitButton.style.marginLeft = '5px';
        submitButton.style.borderRadius = '5px';
        submitButton.style.border = 'none';
        submitButton.style.backgroundColor = '#28a745';
        submitButton.style.color = 'white';
        submitButton.style.cursor = 'pointer';
        submitButton.style.transition = 'background-color 0.3s ease';
        submitButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            try {
                const result = eval(consoleInput.value);
                logToConsole(result);
            } catch (error) {
                playSound(soundEffects.error);
                logToConsole(error, true);
            }
            consoleInput.value = '';
        };
        consoleControlPanel.appendChild(submitButton);

        const clearButton = document.createElement('button');
        clearButton.textContent = 'Clear Console';
        clearButton.style.padding = '5px 10px';
        clearButton.style.marginLeft = '5px';
        clearButton.style.borderRadius = '5px';
        clearButton.style.border = 'none';
        clearButton.style.backgroundColor = '#343a40';
        clearButton.style.color = 'white';
        clearButton.style.cursor = 'pointer';
        clearButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            consoleOutput.innerHTML = '';  // Clear the console's output
        };
        consoleControlPanel.appendChild(clearButton);

        const closeButton = document.createElement('button');
        closeButton.textContent = 'Close';
        closeButton.style.padding = '5px 10px';
        closeButton.style.marginLeft = '5px';
        closeButton.style.borderRadius = '5px';
        closeButton.style.border = 'none';
        closeButton.style.backgroundColor = '#dc3545';
        closeButton.style.color = 'white';
        closeButton.style.cursor = 'pointer';
        closeButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (confirm('Are you sure you want to close the console?')) {
                consoleContainer.classList.add('fadeOut');
                setTimeout(() => {
                    consoleContainer.remove();
                    initializeMenu(); // Show menu bar again
                }, 1000);
            }
        };
        consoleControlPanel.appendChild(closeButton);

        // Resize control inputs for console
        const widthInput = document.createElement('input');
        widthInput.type = 'number';
        widthInput.value = '400';
        widthInput.style.width = '60px';
        widthInput.style.marginLeft = '5px';
        widthInput.title = 'Width';
        consoleControlPanel.appendChild(widthInput);

        const heightInput = document.createElement('input');
        heightInput.value = '400';
        heightInput.type = 'number';
        heightInput.style.width = '60px';
        heightInput.style.marginLeft = '5px';
        heightInput.title = 'Height';
        consoleControlPanel.appendChild(heightInput);

        const resizeButton = document.createElement('button');
        resizeButton.textContent = 'Resize';
        resizeButton.style.padding = '5px 10px';
        resizeButton.style.marginLeft = '5px';
        resizeButton.style.borderRadius = '5px';
        resizeButton.style.border = 'none';
        resizeButton.style.backgroundColor = '#ffc107';
        resizeButton.style.color = 'white';
        resizeButton.style.cursor = 'pointer';
        resizeButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            const newWidth = widthInput.value + 'px';
            const newHeight = heightInput.value + 'px';
            consoleContainer.style.width = newWidth;
            consoleContainer.style.height = newHeight;
        };
        consoleControlPanel.appendChild(resizeButton);

        // Toggle draggable state with a button for console
        const dragButton = document.createElement('button');
        dragButton.textContent = 'Enable Drag';
        dragButton.style.padding = '5px 10px';
        dragButton.style.marginLeft = '5px';
        dragButton.style.borderRadius = '5px';
        dragButton.style.border = 'none';
        dragButton.style.backgroundColor = '#17a2b8';
        dragButton.style.color = 'white';
        dragButton.style.cursor = 'pointer';
        let isDraggable = false;

        dragButton.onclick = function() {
            playSound(soundEffects.buttonClick);
            if (!isDraggable) {
                makeElementDraggable(consoleContainer);
                dragButton.textContent = 'Disable Drag';
                isDraggable = true;
            } else {
                removeElementDraggable(consoleContainer);
                dragButton.textContent = 'Enable Drag';
                isDraggable = false;
            }
        };
        consoleControlPanel.appendChild(dragButton);
    }

    // Function to log output in the console
    function logToConsole(message, isError = false) {
        const consoleOutput = document.getElementById('consoleOutput');
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        messageElement.style.color = isError ? 'red' : 'white';
        consoleOutput.appendChild(messageElement);
        consoleOutput.scrollTop = consoleOutput.scrollHeight;  // Auto-scroll
    }

    // Function to make an element draggable
    function makeElementDraggable(element) {
        element.classList.add('draggable');
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        element.onmousedown = function(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        };

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            element.style.top = (element.offsetTop - pos2) + "px";
            element.style.left = (element.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Function to remove draggable ability from element
    function removeElementDraggable(element) {
        element.classList.remove('draggable');
        element.onmousedown = null;
    }

    setTimeout(() => {
        splashScreen.remove();
        passwordContainer.style.display = 'flex';
    }, 5000);
})();