Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', () => { | |
| const browserFrame = document.getElementById('browser-frame'); | |
| const proxyForm = document.querySelector('custom-proxy-form'); | |
| // Default page to load | |
| loadUrl('https://www.google.com'); | |
| // Handle URL loading | |
| 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) { | |
| // Use a reliable proxy service (cors-anywhere requires activation) | |
| const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`; | |
| fetch(proxyUrl) | |
| .then(response => response.json()) | |
| .then(data => { | |
| const proxyDocument = browserFrame.contentDocument || browserFrame.contentWindow.document; | |
| proxyDocument.open(); | |
| proxyDocument.write(data.contents); | |
| proxyDocument.close(); | |
| document.querySelector('.proxy-indicator').classList.remove('hidden'); | |
| }) | |
| .catch(error => { | |
| console.error('Proxy error:', error); | |
| browserFrame.src = url; // Fallback to direct load | |
| document.querySelector('.proxy-indicator').classList.add('hidden'); | |
| }); | |
| } else { | |
| browserFrame.src = url; | |
| document.querySelector('.proxy-indicator').classList.add('hidden'); | |
| } | |
| // Remove loading class when page is loaded | |
| browserFrame.onload = () => { | |
| browserFrame.classList.remove('loading'); | |
| }; | |
| browserFrame.onerror = () => { | |
| browserFrame.classList.remove('loading'); | |
| browserFrame.srcdoc = ` | |
| <html><body style="color:white;padding:2rem;"> | |
| <h1>Failed to load page</h1> | |
| <p>Could not load ${url}</p> | |
| <p>Try enabling proxy or check your connection</p> | |
| </body></html> | |
| `; | |
| }; | |
| } catch (error) { | |
| console.error('URL loading error:', error); | |
| browserFrame.classList.remove('loading'); | |
| browserFrame.srcdoc = ` | |
| <html><body style="color:white;padding:2rem;"> | |
| <h1>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 proxy form submission | |
| proxyForm.addEventListener('proxy-submit', (e) => { | |
| const { url, useProxy } = e.detail; | |
| loadUrl(url, useProxy); | |
| }); | |
| // Handle quick link clicks | |
| document.addEventListener('quick-link-click', (e) => { | |
| loadUrl(e.detail.url, e.detail.useProxy); | |
| }); | |
| // VPN toggle functionality | |
| const toggleVpnButtons = document.querySelectorAll('#toggle-vpn'); | |
| let vpnActive = false; | |
| toggleVpnButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| vpnActive = !vpnActive; | |
| const indicator = document.querySelector('.proxy-indicator'); | |
| if (vpnActive) { | |
| indicator.classList.remove('hidden'); | |
| indicator.innerHTML = `<i data-feather="shield" class="proxy-icon"></i> VPN Active`; | |
| feather.replace(); | |
| } else { | |
| indicator.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Clear data functionality | |
| const clearDataButtons = document.querySelectorAll('#clear-data'); | |
| clearDataButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| try { | |
| // Attempt to clear browser data | |
| if (confirm('Clear all browsing data (cookies, cache, etc.)?')) { | |
| const browserFrame = document.getElementById('browser-frame'); | |
| browserFrame.src = 'about:blank'; | |
| setTimeout(() => { | |
| loadUrl('https://www.google.com'); | |
| alert('Browser data cleared!'); | |
| }, 500); | |
| } | |
| } catch (e) { | |
| alert('Could not clear data due to browser restrictions'); | |
| } | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| }); | |