Visions | Xbox cloud gaming

(function() {
    // Create the UI container
    const uiContainer = document.createElement('div');
    uiContainer.style.cssText = `
        position: fixed; top: 20px; right: 20px; width: 380px;
        background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
        border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.9), inset 0 0 15px rgba(255,255,255,0.08);
        z-index: 9999; font-family: 'Segoe UI', Arial, sans-serif; color: #ececec; padding: 20px;
        border: 2px solid #606060; transition: transform 0.3s;
    `;
    uiContainer.addEventListener('mouseover', () => uiContainer.style.transform = 'scale(1.02)');
    uiContainer.addEventListener('mouseout', () => uiContainer.style.transform = 'scale(1)');
    document.body.appendChild(uiContainer);

    // Tab navigation
    const tabGroups = {
        'Vision': ['Thermal (I)', 'Night (K)', 'X-Ray (J)', 'Predator (H)', 'Invert (G)', 'Neon (F)', 'Grayscale (T)', 'Normal (Y)'],
        'Zoom': ['Zoom In (O)', 'Zoom Out (L)', 'Pan Left (Shift+O)', 'Pan Right (Shift+L)'],
        'Overlays': ['Crosshair (P)', 'Grid (N)', 'Radar (M)', 'Heatmap (Shift+P)', 'Compass (Shift+N)'],
        'Tools': ['Speed (PageUp)', 'Slow (PageDown)', 'Freeze (Home)', 'FPS (End)', 'Ghost Mode (Shift+PageUp)', 'Pulse (Shift+PageDown)', 'Glow Edges (Shift+Home)'],
        'Reset': ['Reset All (U)']
    };
    const tabNav = document.createElement('div');
    tabNav.style.cssText = `
        display: flex; justify-content: space-around; background: linear-gradient(90deg, #252525, #3a3a3a);
        border-radius: 12px 12px 0 0; padding: 12px; border-bottom: 2px solid #666; box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    `;
    uiContainer.appendChild(tabNav);

    const contentArea = document.createElement('div');
    contentArea.style.cssText = `
        padding: 20px; background: linear-gradient(145deg, #222222, #2c2c2c);
        border-radius: 0 0 12px 12px; min-height: 240px; border-top: 2px solid #666;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    `;
    uiContainer.appendChild(contentArea);

    // Create tabs
    const tabElements = [];
    Object.keys(tabGroups).forEach((group, index) => {
        const tab = document.createElement('button');
        tab.innerText = group;
        tab.style.cssText = `
            background: linear-gradient(135deg, #3f3f3f, #505050); border: none; color: #fff; padding: 10px 16px;
            cursor: pointer; flex: 1; margin: 0 4px; border-radius: 8px; transition: all 0.3s; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.4);
        `;
        tab.addEventListener('mouseover', () => { tab.style.background = 'linear-gradient(135deg, #606060, #777777)'; tab.style.transform = 'scale(1.06)'; });
        tab.addEventListener('mouseout', () => { tab.style.background = tab === activeTab ? 'linear-gradient(135deg, #505050, #606060)' : 'linear-gradient(135deg, #3f3f3f, #505050)'; tab.style.transform = 'scale(1)'; });
        tab.addEventListener('click', () => switchTab(group));
        tabNav.appendChild(tab);
        tabElements.push(tab);
    });

    let activeTabIndex = 0;
    let activeTab = tabElements[activeTabIndex];
    activeTab.style.background = 'linear-gradient(135deg, #505050, #606060)';

    // Content display
    function switchTab(group) {
        contentArea.innerHTML = `<h3 style="margin: 0 0 15px; font-size: 20px; color: #00eaff; text-shadow: 0 0 8px rgba(0,234,255,0.6);">${group}</h3>`;
        const list = document.createElement('ul');
        list.style.cssText = `list-style: none; padding: 0; margin: 0;`;
        tabGroups[group].forEach(item => {
            const li = document.createElement('li');
            li.innerText = item;
            li.style.cssText = `padding: 8px 0; border-bottom: 1px solid #404040; font-size: 15px; transition: all 0.2s; background: rgba(255,255,255,0.02); margin-bottom: 2px; border-radius: 4px;`;
            li.addEventListener('mouseover', () => { li.style.color = '#00eaff'; li.style.background = 'rgba(255,255,255,0.05)'; });
            li.addEventListener('mouseout', () => { li.style.color = '#ececec'; li.style.background = 'rgba(255,255,255,0.02)'; });
            list.appendChild(li);
        });
        contentArea.appendChild(list);
        activeTab = tabElements[Object.keys(tabGroups).indexOf(group)];
        activeTabIndex = Object.keys(tabGroups).indexOf(group);
        tabElements.forEach(tab => tab.style.background = tab === activeTab ? 'linear-gradient(135deg, #505050, #606060)' : 'linear-gradient(135deg, #3f3f3f, #505050)');
    }

    // Initial tab
    switchTab('Vision');
    const status = document.createElement('p');
    status.style.cssText = `margin-top: 15px; font-size: 13px; color: #ccc; background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0.2)); padding: 8px; border-radius: 6px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);`;
    contentArea.appendChild(status);

    // Target game canvas or body
    const gameCanvas = document.querySelector('canvas') || document.body;

    // State variables
    let states = {
        thermal: false, night: false, xray: false, predator: false, invert: false, neon: false, grayscale: false,
        zoomLevel: 1, panX: 0, crosshair: false, grid: false, radar: false, heatmap: false, compass: false,
        speed: false, slow: false, freeze: false, fps: false, ghost: false, pulse: false, glow: false
    };
    let crosshairEl = null, gridEl = null, radarEl = null, heatmapEl = null, compassEl = null, fpsEl = null;

    // Update status
    function updateStatus() {
        status.innerText = `Thermal: ${states.thermal ? 'ON' : 'OFF'} | Night: ${states.night ? 'ON' : 'OFF'} | X-Ray: ${states.xray ? 'ON' : 'OFF'} |
            Predator: ${states.predator ? 'ON' : 'OFF'} | Invert: ${states.invert ? 'ON' : 'OFF'} | Neon: ${states.neon ? 'ON' : 'OFF'} |
            Grayscale: ${states.grayscale ? 'ON' : 'OFF'} | Zoom: ${states.zoomLevel}x | Pan: ${states.panX}px | Crosshair: ${states.crosshair ? 'ON' : 'OFF'}`;
    }
    updateStatus();

    // Keybind handlers
    document.addEventListener('keydown', (e) => {
        const key = e.key.toLowerCase();
        const shift = e.shiftKey;

        // Arrow key navigation
        if (e.key === 'ArrowRight' && activeTabIndex < tabElements.length - 1) {
            activeTabIndex++;
            switchTab(Object.keys(tabGroups)[activeTabIndex]);
        } else if (e.key === 'ArrowLeft' && activeTabIndex > 0) {
            activeTabIndex--;
            switchTab(Object.keys(tabGroups)[activeTabIndex]);
        }

        const resetFilters = () => {
            states.thermal = states.night = states.xray = states.predator = states.invert = states.neon = states.grayscale = false;
            gameCanvas.style.filter = states.glow ? 'drop-shadow(0 0 5px #00ff00)' : '';
        };

        switch (true) {
            // Vision Modes
            case key === 'i': resetFilters(); states.thermal = !states.thermal; gameCanvas.style.filter = states.thermal ? 'contrast(1.5) hue-rotate(90deg) brightness(1.2)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'k': resetFilters(); states.night = !states.night; gameCanvas.style.filter = states.night ? 'brightness(0.8) sepia(0.3) hue-rotate(120deg)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'j': resetFilters(); states.xray = !states.xray; gameCanvas.style.filter = states.xray ? 'contrast(2) brightness(1.5) saturate(0.5)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'h': resetFilters(); states.predator = !states.predator; gameCanvas.style.filter = states.predator ? 'hue-rotate(180deg) contrast(1.8) saturate(2)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'g': resetFilters(); states.invert = !states.invert; gameCanvas.style.filter = states.invert ? 'invert(1)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'f': resetFilters(); states.neon = !states.neon; gameCanvas.style.filter = states.neon ? 'contrast(2) brightness(1.3) hue-rotate(270deg)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 't': resetFilters(); states.grayscale = !states.grayscale; gameCanvas.style.filter = states.grayscale ? 'grayscale(1)' : states.glow ? 'drop-shadow(0 0 5px #00ff00)' : ''; break;
            case key === 'y': resetFilters(); break; // Normal vision

            // Zoom
            case key === 'o' && !shift: states.zoomLevel += 0.5; gameCanvas.style.transform = `scale(${states.zoomLevel}) translateX(${states.panX}px)`; break;
            case key === 'l' && !shift: states.zoomLevel = Math.max(1, states.zoomLevel - 0.5); gameCanvas.style.transform = `scale(${states.zoomLevel}) translateX(${states.panX}px)`; break;
            case key === 'o' && shift: states.panX -= 50; gameCanvas.style.transform = `scale(${states.zoomLevel}) translateX(${states.panX}px)`; break;
            case key === 'l' && shift: states.panX += 50; gameCanvas.style.transform = `scale(${states.zoomLevel}) translateX(${states.panX}px)`; break;

            // Overlays
            case key === 'p' && !shift: // Enhanced Crosshair
                if (!crosshairEl) {
                    crosshairEl = document.createElement('div');
                    crosshairEl.style.cssText = `
                        position: fixed; top: 50%; left: 50%; width: 34px; height: 34px;
                        background: radial-gradient(circle, rgba(255,0,0,0.9) 15%, transparent 60%);
                        border: 2px solid #ff4444; border-radius: 50%; transform: translate(-50%, -50%);
                        z-index: 10000; pointer-events: none; box-shadow: 0 0 12px rgba(255,0,0,0.6);
                    `;
                    const innerLines = document.createElement('div');
                    innerLines.style.cssText = `
                        position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
                        background: linear-gradient(90deg, transparent 40%, #ff4444 40%, #ff4444 60%, transparent 60%),
                                    linear-gradient(0deg, transparent 40%, #ff4444 40%, #ff4444 60%, transparent 60%);
                        transform: translate(-50%, -50%);
                    `;
                    crosshairEl.appendChild(innerLines);
                    document.body.appendChild(crosshairEl);
                }
                states.crosshair = !states.crosshair; crosshairEl.style.display = states.crosshair ? 'block' : 'none'; break;
            case key === 'n' && !shift: // Grid
                if (!gridEl) {
                    gridEl = document.createElement('div');
                    gridEl.style.cssText = `position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,255,0,0.25) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0,255,0,0.25) 20px); z-index: 10000; pointer-events: none;`;
                    document.body.appendChild(gridEl);
                }
                states.grid = !states.grid; gridEl.style.display = states.grid ? 'block' : 'none'; break;
            case key === 'm' && !shift: // Radar
                if (!radarEl) {
                    radarEl = document.createElement('div');
                    radarEl.style.cssText = `position: fixed; bottom: 20px; right: 420px; width: 110px; height: 110px; border: 2px solid #00ff00; border-radius: 50%; background: radial-gradient(circle, rgba(0,255,0,0.25), transparent); z-index: 10000; pointer-events: none; box-shadow: 0 0 10px rgba(0,255,0,0.5);`;
                    document.body.appendChild(radarEl);
                }
                states.radar = !states.radar; radarEl.style.display = states.radar ? 'block' : 'none'; break;
            case key === 'p' && shift: // Heatmap Overlay
                if (!heatmapEl) {
                    heatmapEl = document.createElement('div');
                    heatmapEl.style.cssText = `position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,100,0,0.2), rgba(255,0,0,0.1), transparent); z-index: 10000; pointer-events: none;`;
                    document.body.appendChild(heatmapEl);
                }
                states.heatmap = !states.heatmap; heatmapEl.style.display = states.heatmap ? 'block' : 'none'; break;
            case key === 'n' && shift: // Compass
                if (!compassEl) {
                    compassEl = document.createElement('div');
                    compassEl.style.cssText = `position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border: 2px solid #ffffff; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); z-index: 10000; pointer-events: none; text-align: center; color: #fff; font-size: 16px; line-height: 80px;`;
                    compassEl.innerText = 'N';
                    document.body.appendChild(compassEl);
                }
                states.compass = !states.compass; compassEl.style.display = states.compass ? 'block' : 'none'; break;

            // Tools
            case key === 'pageup' && !shift: states.speed = !states.speed; document.body.style.transition = states.speed ? 'all 0.1s' : ''; break;
            case key === 'pagedown' && !shift: states.slow = !states.slow; document.body.style.transition = states.slow ? 'all 0.5s' : ''; break;
            case key === 'home' && !shift: states.freeze = !states.freeze; gameCanvas.style.pointerEvents = states.freeze ? 'none' : 'auto'; break;
            case key === 'end' && !shift: // FPS Counter
                if (!fpsEl) {
                    fpsEl = document.createElement('div');
                    fpsEl.style.cssText = `position: fixed; top: 20px; left: 20px; color: #ffff00; z-index: 10000; font-size: 15px; background: rgba(0,0,0,0.6); padding: 6px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5);`;
                    document.body.appendChild(fpsEl);
                    let lastTime = performance.now(), frames = 0;
                    function updateFPS() {
                        const now = performance.now();
                        frames++;
                        if (now - lastTime >= 1000) {
                            fpsEl.innerText = `FPS: ${frames}`;
                            frames = 0;
                            lastTime = now;
                        }
                        if (states.fps) requestAnimationFrame(updateFPS);
                    }
                    updateFPS();
                }
                states.fps = !states.fps; fpsEl.style.display = states.fps ? 'block' : 'none'; break;
            case key === 'pageup' && shift: // Ghost Mode (semi-transparent)
                states.ghost = !states.ghost; gameCanvas.style.opacity = states.ghost ? '0.7' : '1'; break;
            case key === 'pagedown' && shift: // Pulse Effect
                states.pulse = !states.pulse;
                if (states.pulse) {
                    gameCanvas.style.animation = 'pulse 1.5s infinite';
                    gameCanvas.style.cssText += `@-webkit-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.85; } 100% { opacity: 1; } }`;
                } else {
                    gameCanvas.style.animation = '';
                }
                break;
            case key === 'home' && shift: // Glow Edges
                states.glow = !states.glow; gameCanvas.style.filter = states.glow ? 'drop-shadow(0 0 5px #00ff00)' : (states.thermal || states.night || states.xray || states.predator || states.invert || states.neon || states.grayscale ? gameCanvas.style.filter : ''); break;

            // Reset All
            case key === 'u':
                Object.keys(states).forEach(k => states[k] = k === 'zoomLevel' ? 1 : k === 'panX' ? 0 : false);
                gameCanvas.style.filter = gameCanvas.style.transform = document.body.style.transition = gameCanvas.style.opacity = gameCanvas.style.animation = '';
                gameCanvas.style.pointerEvents = 'auto';
                [crosshairEl, gridEl, radarEl, heatmapEl, compassEl, fpsEl].forEach(el => { if (el) el.style.display = 'none'; });
                break;
        }
        updateStatus();
    });

    console.log('Maxed-out UI with new features and Chromebook binds injected! Enjoy, Shady Shark.');
})();