merge script and turn this into a HTML website add the stuff for everything

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BM Launcher</title>
    <style>
        /* Loading screen styles */
        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #282c34;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            font-family: Arial, sans-serif;
        }
        
        #loadingBarContainer {
            width: 80%;
            background-color: #555;
            border-radius: 10px;
            overflow: hidden;
            margin: 20px 0;
        }
        
        #loadingBar {
            height: 20px;
            width: 0;
            background-color: #00d1b2;
        }

        #loadingLogs {
            height: 200px;
            overflow-y: auto;
            background-color: #333;
            color: #fff;
            width: 80%;
            padding: 10px;
            border-radius: 5px;
            font-size: 0.8em;
        }

        /* Splash screen styles */
        @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); }
        }

        #splashScreen {
            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: 9000;
            background-color: #1d1f20;
            color: #00d1b2;
            animation: splashEntrance 5s forwards;
            cursor: pointer;
        }

        /* Password entry styles */
        #passwordContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 8000;
        }

        #passwordEntry {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            text-align: center;
        }

        /* Menu styles */
        .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;
        }

        /* Outro styles */
        @keyframes outroExit {
            0% { opacity: 0; }
            100% { opacity: 1; background-color: #111; }
        }

        #outroMessage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #111;
            color: #fff;
            opacity: 0;
            animation: outroExit 3s forwards;
            z-index: 7500;
            flex-direction: column;
        }

        .fadeOut {
            animation: menuFadeOut 1s forwards;
        }

        @keyframes menuFadeOut {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(20px); }
        }
    </style>
</head>
<body>
    <div id="loadingScreen">
        <h1>Loading BM Launcher...</h1>
        <div id="loadingBarContainer">
            <div id="loadingBar"></div>
        </div>
        <div id="loadingLogs"></div>
    </div>
    <div id="splashScreen" style="display: none;">BM 4.0 Launcher</div>
    <div id="passwordContainer">
        <div id="passwordEntry">
            <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;">Submit</button>
        </div>
    </div>
    <div id="outroMessage" style="display: none;">
        <div>Goodbye!</div>
        <div>Hope to see you soon!</div>
        <div>Take care!</div>
        <div>You rock! 🎸</div>
    </div>

    <script>
        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',
        };

        let passwordAttempts = 0;

        window.onload = () => {
            playSound(soundEffects.intro);
            simulateLoadingProcess();
        };

        function simulateLoadingProcess() {
            const loadingBar = document.getElementById('loadingBar');
            const loadingLogs = document.getElementById('loadingLogs');
            let loadedPercentage = 0;

            const loadingInterval = setInterval(() => {
                loadedPercentage += 10;
                loadingBar.style.width = `${loadedPercentage}%`;
                const log = document.createElement('div');
                log.textContent = `Loaded: ${loadedPercentage}%`;
                loadingLogs.appendChild(log);

                if (loadedPercentage >= 100) {
                    clearInterval(loadingInterval);
                    setTimeout(() => {
                        document.getElementById('loadingScreen').style.display = 'none';
                        document.getElementById('splashScreen').style.display = 'flex';

                        setTimeout(() => {
                            document.getElementById('splashScreen').style.display = 'none';
                            document.getElementById('passwordContainer').style.display = 'flex';
                        }, 5000);
                    }, 500);
                }
            }, 300);
        }

        document.getElementById('splashScreen').onclick = () => {
            document.getElementById('splashScreen').style.display = 'none';
            document.getElementById('passwordContainer').style.display = 'flex';
        };

        document.getElementById('submitPassword').onclick = () => {
            playSound(soundEffects.buttonClick);
            const passwordInput = document.getElementById('passwordInput').value;
            if (passwordInput === 'dja101') {
                document.getElementById('passwordContainer').style.display = 'none';
                initializeMenu();
            } else {
                playSound(soundEffects.error);
                passwordAttempts++;
                alert('Incorrect password!');
                if (passwordAttempts >= 3) {
                    document.getElementById('passwordContainer').style.display = 'none';
                    showLockoutMessage();
                }
            }
        }

        function showLockoutMessage() {
            playSound(soundEffects.error);
            document.getElementById('outroMessage').style.display = 'flex';
        }

        function initializeMenu() {
            // Implementation for initializing the menu
            // Include code based on the previous menu setup
        }

        function playSound(sound) {
            if (sound) {
                new Audio(sound).play();
            }
        }
        
        // Implement other functions based on the previous setup
    </script>
</body>
</html>