shaheedgot/bluetooth-remote-pro-keyboard-mouse-magic

1 2// Global error handler3window.addEventListener('error', (event) => {4    console.error('Global error:', event.error);5    showErrorToast('An unexpected error occurred');6    event.preventDefault();7});8 9// Network status monitoring10let isOnline = navigator.onLine;11window.addEventListener('online', () => {12    isOnline = true;13    showSuccessToast('Connection restored');14});15window.addEventListener('offline', () => {16    isOnline = false;17    showErrorToast('Connection lost - working offline');18});19 20// Toast notification system21function showToast(message, type = 'info') {22    const toast = document.createElement('div');23    toast.className = `toast toast-${type}`;24    toast.textContent = message;25    document.body.appendChild(toast);26    27    setTimeout(() => {28        toast.classList.add('show');29    }, 10);30    31    setTimeout(() => {32        toast.classList.remove('show');33        setTimeout(() => toast.remove(), 300);34    }, 3000);35}36 37function showErrorToast(message) {38    showToast(message, 'error');39}40 41function showSuccessToast(message) {42    showToast(message, 'success');43}44 45// View transition API for smooth transitions46function navigateWithTransition(url) {47    if (!document.startViewTransition) {48        window.location.href = url;49        return;50    }51    52    document.startViewTransition(() => {53        window.location.href = url;54    });55}56 57document.addEventListener('DOMContentLoaded', () => {58// Initialize connection status59    const btStatus = document.getElementById('bt-status');60    const wifiStatus = document.getElementById('wifi-status');61    const btConnectBtn = document.getElementById('bt-connect');62    const wifiConnectBtn = document.getElementById('wifi-connect');63    64    // Simulate connection states65    let btConnected = false;66    let wifiEnabled = false;67    68    // Handle Bluetooth connection69    btConnectBtn.addEventListener('click', () => {70        if (btConnected) {71            disconnectBluetooth();72        } else {73            connectBluetooth();74        }75    });76    77    // Handle Wi-Fi connection78    wifiConnectBtn.addEventListener('click', () => {79        if (wifiEnabled) {80            disableWifi();81        } else {82            enableWifi();83        }84    });85    86    function connectBluetooth() {87        // Show loading state88        btStatus.textContent = 'Connecting...';89        btStatus.classList.remove('connected');90        btConnectBtn.disabled = true;91        92        // Simulate connection delay93        setTimeout(() => {94            btConnected = true;95            btStatus.textContent = 'Connected';96            btStatus.classList.add('connected');97            btConnectBtn.textContent = 'Disconnect';98            btConnectBtn.disabled = false;99            100            // Add connection animation101            btStatus.parentElement.classList.add('animate-pulse');102            setTimeout(() => {103                btStatus.parentElement.classList.remove('animate-pulse');104            }, 2000);105        }, 1500);106    }107    108    function disconnectBluetooth() {109        btStatus.textContent = 'Disconnecting...';110        btConnectBtn.disabled = true;111        112        setTimeout(() => {113            btConnected = false;114            btStatus.textContent = 'Disconnected';115            btStatus.classList.remove('connected');116            btConnectBtn.textContent = 'Connect';117            btConnectBtn.disabled = false;118        }, 1000);119    }120    121    function enableWifi() {122        wifiStatus.textContent = 'Enabling...';123        wifiConnectBtn.disabled = true;124        125        setTimeout(() => {126            wifiEnabled = true;127            wifiStatus.textContent = 'Enabled';128            wifiStatus.classList.add('connected');129            wifiConnectBtn.textContent = 'Disable';130            wifiConnectBtn.disabled = false;131        }, 1000);132    }133    134    function disableWifi() {135        wifiStatus.textContent = 'Disabling...';136        wifiConnectBtn.disabled = true;137        138        setTimeout(() => {139            wifiEnabled = false;140            wifiStatus.textContent = 'Disabled';141            wifiStatus.classList.remove('connected');142            wifiConnectBtn.textContent = 'Enable';143            wifiConnectBtn.disabled = false;144        }, 1000);145    }146    // Enhanced mode tabs with view transitions147    const modeTabs = document.querySelectorAll('.mode-tab');148    const modeContents = document.querySelectorAll('.mode-content');149    150    modeTabs.forEach(tab => {151        tab.addEventListener('click', () => {152            if (tab.classList.contains('active')) return;153            154            const transition = document.startViewTransition?.(() => {155                modeTabs.forEach(t => t.classList.remove('active'));156                tab.classList.add('active');157                158                modeContents.forEach(content => {159                    content.classList.remove('active');160                    content.style.opacity = '0';161                });162                163                const mode = tab.textContent.toLowerCase();164                const targetContent = document.getElementById(`${mode}-mode`);165                targetContent.classList.add('active');166                targetContent.style.opacity = '1';167            }) || Promise.resolve().then(() => {168                modeTabs.forEach(t => t.classList.remove('active'));169                tab.classList.add('active');170                171                modeContents.forEach(content => content.classList.remove('active'));172                document.getElementById(`${mode}-mode`).classList.add('active');173            });174            175            transition?.ready.then(() => {176                const x = tab.getBoundingClientRect().left;177                document.documentElement.animate(178                    [179                        { '--x': `${x}px` },180                        { '--x': `${x}px` }181                    ],182                    {183                        duration: 300,184                        pseudoElement: '::view-transition-new(root)'185                    }186                );187            });188        });189    });190// Initialize feather icons191    feather.replace();192    193    // Add hover effects to quick action buttons194    const quickActionBtns = document.querySelectorAll('.quick-action-btn');195    quickActionBtns.forEach(btn => {196        btn.addEventListener('mouseenter', () => {197            btn.style.transform = 'translateY(-4px)';198        });199        btn.addEventListener('mouseleave', () => {200            btn.style.transform = '';201        });202    });203});