merge is to the full script please with everything and fixes animations and css and functions all button notes weathers and all the others

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>
        /* Basic Reset */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* General Text and Background Styles */
        body {
            font-family: Arial, sans-serif;
            overflow: hidden;
            background-color: #f4f4f9;
            color: #333;
        }

        /* Full-Screen Sections */
        #splashScreen, #passwordContainer, #outroMessage, #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }

        /* Loading Screen Styles */
        #loadingScreen {
            background-color: #282c34;
            color: #ffffff;
            flex-direction: column;
        }

        #loadingBarContainer {
            width: 80%;
            background-color: #555;
            border-radius: 10px;
            overflow: hidden;
            margin: 20px 0;
        }

        #loadingBar {
            height: 20px;
            width: 0;
            background-color: #00d1b2;
            transition: width 0.3s ease;
        }

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

        /* Animation Definitions */
        @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 outroExit {
            0% { opacity: 0; }
            100% { opacity: 1; background-color: #111; }
        }

        @keyframes menuFadeOut {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(20px); }
        }

        /* Splash Screen Style */
        #splashScreen {
            background-color: #1d1f20;
            color: #00d1b2;
            font-size: 4em;
            animation: splashEntrance 5s forwards;
        }

        /* Password Entry Styles */
        #passwordContainer {
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
        }

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

        /* Menu and Button 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;
        }

        /* Menu Styles */
        #menuContainer {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 300px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            z-index: 9999;
        }

        .menu-header {
            background-color: #f44336;
            color: white;
            padding: 10px;
            text-align: center;
            font-weight: bold;
        }

        .menu-buttons {
            padding: 10px;
        }

        .menu-button {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            border: none;
            outline: none;
            transition: background-color 0.3s ease;
        }

        .menu-button:hover {
            background-color: #ddd;
        }

        /* Outro Message Styles */
        #outroMessage {
            background-color: #111;
            color: #fff;
            opacity: 0;
            animation: outroExit 3s forwards;
            flex-direction: column;
        }

        .fadeOut {
            animation: menuFadeOut 1s forwards;
        }

        /* Console Interface Styles */
        #consoleContainer {
            width: 400px;
            height: 400px;
            position: fixed;
            bottom: 10px;
            right: 10px;
            z-index: 10000;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #008CBA;
            border-radius: 8px;
        }

        #consoleControlPanel {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
            background: #f7f7f7;
            border-bottom: 1px solid #ccc;
        }

        #consoleOutput {
            background-color: #282c34;
            color: #ffffff;
            font-family: monospace;
            padding: 10px;
            overflow-y: scroll;
            height: calc(100% - 65px);
        }

        #consoleInput {
            width: calc(100% - 130px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- Loading Screen HTML -->
    <div id="loadingScreen">
        <h1>Loading BM Launcher...</h1>
        <div id="loadingBarContainer">
            <div id="loadingBar"></div>
        </div>
        <div id="loadingLogs"></div>
    </div>

    <!-- Splash Screen HTML -->
    <div id="splashScreen" style="display: none;">BM 4.0 Launcher</div>

    <!-- Password Entry HTML -->
    <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>

    <!-- Outro Message HTML -->
    <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>
        // Main IIFE for encapsulated code
        (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',
            };

            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.' }
            ];

            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('submitPassword').onclick = function() {
                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() {
                const menuContainer = document.createElement('div');
                menuContainer.id = 'menuContainer';
                menuContainer.innerHTML = `
                    <div class="menu-header">BM Launcher Menu</div>
                    <div class="menu-buttons"></div>
                `;
                document.body.appendChild(menuContainer);

                const buttons = [
                    { text: 'Games', color: '#ffc107', handler: openGamesList, tooltip: 'View available games' },
                    { text: 'Convert YouTube URL', color: '#008CBA', handler: openUnblockWebsiteInterface, tooltip: 'Convert and view YouTube content' },
                    { text: 'Inspect Element', color: '#FF5733', handler: openConsoleInterface, tooltip: 'Open developer tools' },
                    { text: 'Notes', color: '#4CAF50', handler: openNotes, tooltip: 'Your personal notes' },
                    { text: 'Weather', color: '#FF6347', handler: fetchWeather, tooltip: 'View current weather' },
                    { text: 'Calendar', color: '#6A5ACD', handler: openCalendar, tooltip: 'See your events' },
                ];

                buttons.forEach(button => {
                    const btn = document.createElement('button');
                    btn.textContent = button.text;
                    btn.className = 'menu-button tooltip';
                    btn.style.backgroundColor = button.color;
                    btn.onclick = () => {
                        playSound(soundEffects.buttonClick);
                        menuContainer.classList.add('fadeOut');
                        setTimeout(() => {
                            menuContainer.style.display = 'none';
                            button.handler();
                        }, 1000);
                    };

                    const tooltip = document.createElement('span');
                    tooltip.className = 'tooltiptext';
                    tooltip.textContent = button.tooltip;
                    btn.appendChild(tooltip);

                    menuContainer.querySelector('.menu-buttons').appendChild(btn);
                });
            }

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

            // 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 capability
            function removeElementDraggable(element) {
                element.classList.remove('draggable');
                element.onmousedown = null;
            }

            // New additional features
            function openNotes() {
                alert('Notes application functionality here.');
                // Add notes application interface here
            }

            function fetchWeather() {
                alert('Weather fetching functionality here.');
                // Integrate with weather API and display data
            }

            function openCalendar() {
                alert('Calendar interface functionality here.');
                // Build a calendar viewing application
            }

            function showOutro() {
                const outro = document.getElementById('outroMessage');
                playSound(soundEffects.outro);
                outro.style.display = 'flex';
                setTimeout(() => {
                    outro.style.display = 'none';
                }, 5000);
            }

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

            // Autostart sound and loading sequence
            setTimeout(() => {
                const splashScreen = document.getElementById('splashScreen');
                splashScreen.remove();
                document.getElementById('passwordContainer').style.display = 'flex';
            }, 5000);
        })();
    </script>
</body>
</html>