Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', () => { | |
| const browserFrame = document.getElementById('browser-frame'); | |
| // Proxy configuration | |
| let proxyEnabled = false; | |
| let vpnEnabled = false; | |
| // Update status indicators | |
| function updateStatus() { | |
| const proxyStatus = document.querySelector('custom-navbar').shadowRoot.getElementById('proxy-status'); | |
| const vpnStatus = document.querySelector('custom-navbar').shadowRoot.getElementById('vpn-status'); | |
| proxyStatus.innerHTML = ` | |
| <i data-feather="shield" class="status-icon"></i> | |
| <span>Proxy: ${proxyEnabled ? 'On' : 'Off'}</span> | |
| `; | |
| vpnStatus.innerHTML = ` | |
| <i data-feather="lock" class="status-icon"></i> | |
| <span>VPN: ${vpnEnabled ? 'On' : 'Off'}</span> | |
| `; | |
| feather.replace(); | |
| } | |
| // Load URL with error handling | |
| function loadUrl(url, useProxy = false) { | |
| try { | |
| browserFrame.classList.add('loading'); | |
| // Validate URL | |
| if (!url.startsWith('http://') && !url.startsWith('https://')) { | |
| url = 'https://' + url; | |
| } | |
| // Create new URL object to validate | |
| new URL(url); | |
| if (useProxy || vpnEnabled) { | |
| // Use a better proxy solution | |
| const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`; | |
| fetch(proxyUrl) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.contents) { | |
| browserFrame.srcdoc = data.contents; | |
| proxyEnabled = true; | |
| } else { | |
| throw new Error('Proxy request failed'); | |
| } | |
| }) | |
| .catch(() => { | |
| // Fallback to direct if proxy fails | |
| browserFrame.src = url; | |
| proxyEnabled = false; | |
| }); | |
| } else { | |
| browserFrame.src = url; | |
| proxyEnabled = false; | |
| } | |
| browserFrame.onload = () => { | |
| browserFrame.classList.remove('loading'); | |
| updateStatus(); | |
| }; | |
| browserFrame.onerror = () => { | |
| browserFrame.classList.remove('loading'); | |
| browserFrame.srcdoc = ` | |
| <html><body style="color:white;padding:2rem;background:#0F0F0F;"> | |
| <h1 style="color:#FF0000;">Failed to load page</h1> | |
| <p>Could not load ${url}</p> | |
| <p>Try enabling proxy/VPN or check your connection</p> | |
| </body></html> | |
| `; | |
| updateStatus(); | |
| }; | |
| } catch (error) { | |
| browserFrame.classList.remove('loading'); | |
| browserFrame.srcdoc = ` | |
| <html><body style="color:white;padding:2rem;background:#0F0F0F;"> | |
| <h1 style="color:#FF0000;">Invalid URL</h1> | |
| <p>${url} is not a valid web address</p> | |
| <p>Please enter a complete URL like "https://example.com"</p> | |
| </body></html> | |
| `; | |
| } | |
| } | |
| // Handle navigation from tabs component | |
| document.addEventListener('navigate', (e) => { | |
| const { url, useProxy } = e.detail; | |
| loadUrl(url, useProxy); | |
| }); | |
| // Handle toggle VPN | |
| document.addEventListener('click', (e) => { | |
| if (e.target.closest('#toggle-vpn')) { | |
| vpnEnabled = !vpnEnabled; | |
| updateStatus(); | |
| } | |
| }); | |
| // Handle clear data | |
| document.addEventListener('click', (e) => { | |
| if (e.target.closest('#clear-data')) { | |
| if (confirm('Clear all browsing data (cookies, cache, etc.)?')) { | |
| browserFrame.src = 'about:blank'; | |
| setTimeout(() => { | |
| loadUrl('https://www.google.com'); | |
| }, 500); | |
| } | |
| } | |
| }); | |
| // Initialize | |
| loadUrl('https://www.google.com'); | |
| updateStatus(); | |
| feather.replace(); | |
| }); | |