Only Wikipedia is working. The UI is trash. Make it red and black and the main screen is what you search with a tab for configuration. Please fix the proxy and literally everything that is broken.

components/navbar.js

@@ -1,97 +1,74 @@
+
 class CustomNavbar extends HTMLElement {
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    display: block;
-                    width: 100%;
-                    background-color: rgba(17, 24, 39, 0.95);
-                    backdrop-filter: blur(8px);
-                    position: sticky;
-                    top: 0;
-                    z-index: 50;
-                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                }
-                .nav-container {
-                    max-width: 100%;
-                    margin: 0 auto;
-                    padding: 0.75rem 1rem;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                }
-                .logo {
-                    display: flex;
-                    align-items: center;
-                    font-weight: 700;
-                    font-size: 1.25rem;
-                }
-                .logo-icon {
-                    margin-right: 0.5rem;
-                    color: #60a5fa;
-                }
-                .nav-items {
-                    display: flex;
-                    align-items: center;
-                    gap: 1rem;
-                }
-                .nav-link {
-                    display: flex;
-                    align-items: center;
-                    padding: 0.5rem 1rem;
-                    border-radius: 0.375rem;
-                    transition: all 0.2s;
-                    color: rgba(156, 163, 175, 1);
-                    font-weight: 500;
-                }
-                .nav-link:hover {
-                    color: white;
-                    background-color: rgba(31, 41, 55, 0.5);
-                }
-                .proxy-indicator {
-                    display: flex;
-                    align-items: center;
-                    padding: 0.25rem 0.75rem;
-                    border-radius: 9999px;
-                    background-color: rgba(59, 130, 246, 0.1);
-                    color: #60a5fa;
-                    font-size: 0.875rem;
-                    margin-right: 1rem;
-                }
-                .proxy-icon {
-                    margin-right: 0.25rem;
-                    width: 0.875rem;
-                    height: 0.875rem;
-                }
-            </style>
-            <div class="nav-container">
-                <a href="/" class="logo">
-                    <i data-feather="anchor" class="logo-icon"></i>
-                    ProxyPirate
-                </a>
-                
-                <div class="nav-items">
-                    <div class="proxy-indicator hidden">
-                        <i data-feather="shield" class="proxy-icon"></i>
-                        Proxy Active
-                    </div>
-                    <a href="/" class="nav-link">
-                        <i data-feather="home" class="mr-2"></i>
-                        Home
-                    </a>
-                    <a href="javascript:void(0)" class="nav-link" id="toggle-vpn">
-                        <i data-feather="shield" class="mr-2"></i>
-                        VPN
-                    </a>
-                    <a href="javascript:void(0)" class="nav-link" id="clear-cookies">
-                        <i data-feather="trash-2" class="mr-2"></i>
-                        Clear Data
-                    </a>
-</div>
-            </div>
-        `;
-    }
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          background-color: #0F0F0F;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          border-bottom: 1px solid #8B0000;
+        }
+        .nav-container {
+          max-width: 100%;
+          margin: 0 auto;
+          padding: 1rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.5rem;
+          color: #FF0000;
+          text-decoration: none;
+        }
+        .logo-icon {
+          margin-right: 0.5rem;
+          color: #FF0000;
+        }
+        .status {
+          display: flex;
+          align-items: center;
+          font-size: 0.875rem;
+        }
+        .status-item {
+          margin-left: 1rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          background: #1F1F1F;
+          color: #FF0000;
+          display: flex;
+          align-items: center;
+        }
+        .status-icon {
+          margin-right: 0.25rem;
+        }
+      </style>
+      <div class="nav-container">
+        <a href="/" class="logo">
+          <i data-feather="droplet" class="logo-icon"></i>
+          BloodProxy
+        </a>
+        <div class="status">
+          <div class="status-item" id="proxy-status">
+            <i data-feather="shield" class="status-icon"></i>
+            <span>Proxy: Off</span>
+          </div>
+          <div class="status-item" id="vpn-status">
+            <i data-feather="lock" class="status-icon"></i>
+            <span>VPN: Off</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
 }
 
-customElements.define('custom-navbar', CustomNavbar);
+customElements.define('custom-navbar', CustomNavbar);

components/tabs.js

@@ -0,0 +1,164 @@
+class CustomTabs extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-bottom: 1rem;
+        }
+        .tabs-container {
+          display: flex;
+          border-bottom: 2px solid #8B0000;
+        }
+        .tab {
+          padding: 0.75rem 1.5rem;
+          background: #0F0F0F;
+          color: #7F7F7F;
+          border: none;
+          border-radius: 0.5rem 0.5rem 0 0;
+          margin-right: 0.5rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+        }
+        .tab:hover {
+          color: #FF0000;
+        }
+        .tab.active {
+          background: #8B0000;
+          color: white;
+        }
+        .tab i {
+          margin-right: 0.5rem;
+        }
+        .tab-close {
+          margin-left: 0.5rem;
+          width: 16px;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          opacity: 0.7;
+        }
+        .tab-close:hover {
+          background: rgba(255,255,255,0.2);
+          opacity: 1;
+        }
+        .tab-content {
+          display: none;
+          padding: 1rem;
+          background: #0F0F0F;
+          border-radius: 0 0.5rem 0.5rem 0.5rem;
+        }
+        .tab-content.active {
+          display: block;
+        }
+      </style>
+      <div class="tabs-container">
+        <button class="tab active" data-tab="browser">
+          <i data-feather="compass"></i> Browser
+        </button>
+        <button class="tab" data-tab="settings">
+          <i data-feather="settings"></i> Settings
+        </button>
+        <button class="tab" data-tab="privacy">
+          <i data-feather="shield"></i> Privacy
+        </button>
+      </div>
+      
+      <div id="browser-content" class="tab-content active">
+        <div class="flex mb-4">
+          <input 
+            type="text" 
+            id="url-input" 
+            class="flex-1 bg-black border border-blood rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blood" 
+            placeholder="Enter URL (e.g. https://example.com)"
+          >
+          <button id="go-button" class="bg-blood px-4 py-2 rounded-r-lg font-bold hover:bg-red-800">
+            GO
+          </button>
+        </div>
+      </div>
+      
+      <div id="settings-content" class="tab-content">
+        <div class="space-y-4">
+          <div class="flex items-center">
+            <input type="checkbox" id="proxy-toggle" class="rounded bg-black border-blood text-blood">
+            <label for="proxy-toggle" class="ml-2">Enable Proxy</label>
+          </div>
+          <div id="proxy-settings" class="hidden">
+            <div class="mb-2">
+              <label class="block text-sm mb-1">Proxy Server</label>
+              <input type="text" id="proxy-server" class="w-full bg-black border border-blood rounded px-3 py-2 text-white">
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div id="privacy-content" class="tab-content">
+        <div class="space-y-3">
+          <button id="clear-data" class="w-full bg-black hover:bg-blood border border-blood rounded px-4 py-2 flex items-center">
+            <i data-feather="trash-2" class="mr-2"></i> Clear Browsing Data
+          </button>
+          <button id="toggle-vpn" class="w-full bg-black hover:bg-blood border border-blood rounded px-4 py-2 flex items-center">
+            <i data-feather="lock" class="mr-2"></i> Toggle VPN
+          </button>
+        </div>
+      </div>
+    `;
+
+    // Tab switching
+    const tabs = this.shadowRoot.querySelectorAll('.tab');
+    const contents = this.shadowRoot.querySelectorAll('.tab-content');
+    
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        tabs.forEach(t => t.classList.remove('active'));
+        contents.forEach(c => c.classList.remove('active'));
+        
+        tab.classList.add('active');
+        const tabId = tab.getAttribute('data-tab');
+        this.shadowRoot.getElementById(`${tabId}-content`).classList.add('active');
+        feather.replace();
+      });
+    });
+
+    // Proxy toggle
+    const proxyToggle = this.shadowRoot.getElementById('proxy-toggle');
+    const proxySettings = this.shadowRoot.getElementById('proxy-settings');
+    
+    proxyToggle.addEventListener('change', () => {
+      proxySettings.classList.toggle('hidden', !proxyToggle.checked);
+    });
+
+    // URL navigation
+    const urlInput = this.shadowRoot.getElementById('url-input');
+    const goButton = this.shadowRoot.getElementById('go-button');
+    
+    const handleNavigation = () => {
+      const url = urlInput.value.trim();
+      const useProxy = proxyToggle.checked;
+      
+      if (url) {
+        this.dispatchEvent(new CustomEvent('navigate', {
+          detail: { url, useProxy },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    
+    goButton.addEventListener('click', handleNavigation);
+    urlInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') handleNavigation();
+    });
+
+    feather.replace();
+  }
+}
+
+customElements.define('custom-tabs', CustomTabs);

index.html

@@ -1,57 +1,46 @@
+
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ProxyPirate Browser 🏴‍☠️</title>
+    <title>BloodProxy Browser 🩸</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        blood: '#8B0000',
+                        dark: '#0F0F0F',
+                        accent: '#FF0000'
+                    }
+                }
+            }
+        }
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="components/navbar.js"></script>
-    <script src="components/proxy-form.js"></script>
-    <script src="components/quick-links.js"></script>
+    <script src="components/tabs.js"></script>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
+<body class="bg-dark text-white min-h-screen">
     <custom-navbar></custom-navbar>
     
-    <main class="container mx-auto px-4 py-8">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <div class="lg:col-span-2">
-                <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
-                    <iframe 
-                        id="browser-frame"
-                        class="w-full h-[70vh] border-0"
-                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-                        allowfullscreen
-                    ></iframe>
-                </div>
-                
-                <custom-proxy-form class="mt-6"></custom-proxy-form>
-            </div>
-            
-            <div class="lg:col-span-1">
-                <custom-quick-links></custom-quick-links>
-                
-                <div class="bg-gray-800 rounded-xl p-6 mt-6">
-                    <h2 class="text-xl font-bold mb-4 flex items-center">
-                        <i data-feather="shield" class="mr-2"></i> Privacy Tools
-                    </h2>
-                    <div class="space-y-3">
-                    <a href="javascript:void(0)" class="flex items-center text-blue-400 hover:text-blue-300" id="toggle-vpn">
-                        <i data-feather="lock" class="mr-2"></i> Toggle VPN
-                    </a>
-                    <a href="javascript:void(0)" class="flex items-center text-blue-400 hover:text-blue-300" id="clear-data">
-                        <i data-feather="eye-off" class="mr-2"></i> Clear Data
-                    </a>
-                    <a href="https://privacytests.org" target="_blank" class="flex items-center text-blue-400 hover:text-blue-300">
-                        <i data-feather="shield" class="mr-2"></i> Privacy Test
-                    </a>
-</div>
-                </div>
-            </div>
+    <main class="container mx-auto px-4 py-4">
+        <custom-tabs></custom-tabs>
+        
+        <div class="bg-black rounded-lg overflow-hidden shadow-lg shadow-blood/50">
+            <iframe 
+                id="browser-frame"
+                class="w-full h-[80vh] border-0"
+                sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                allowfullscreen
+            ></iframe>
         </div>
     </main>
+    
     <script src="script.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,118 +1,122 @@
 
 document.addEventListener('DOMContentLoaded', () => {
-    const browserFrame = document.getElementById('browser-frame');
-    const proxyForm = document.querySelector('custom-proxy-form');
+  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');
     
-    // Default page to load
-    loadUrl('https://www.google.com');
+    proxyStatus.innerHTML = `
+      <i data-feather="shield" class="status-icon"></i>
+      <span>Proxy: ${proxyEnabled ? 'On' : 'Off'}</span>
+    `;
     
-    // 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 more reliable proxy service
-                const proxyUrl = `https://cors-anywhere.herokuapp.com/${url}`;
-                browserFrame.src = proxyUrl;
-                document.querySelectorAll('.proxy-indicator').forEach(el => el.classList.remove('hidden'));
+    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 {
-                browserFrame.src = url;
-                document.querySelectorAll('.proxy-indicator').forEach(el => el.classList.add('hidden'));
+              throw new Error('Proxy request failed');
             }
-            
-            // 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;background:#111827;">
-                        <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;background:#111827;">
-                    <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>
-            `;
-        }
+          })
+          .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 proxy form submission
-    proxyForm.addEventListener('proxy-submit', (e) => {
-        const { url, useProxy } = e.detail;
-        loadUrl(url, useProxy);
-});
-
-// Event delegation for dynamically added elements
-document.addEventListener('click', (e) => {
+  }
+  
+  // 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')) {
-        const vpnActive = document.querySelector('.proxy-indicator').classList.contains('hidden');
-        document.querySelectorAll('.proxy-indicator').forEach(el => {
-            vpnActive ? el.classList.remove('hidden') : el.classList.add('hidden');
-            el.innerHTML = `<i data-feather="shield" class="proxy-icon"></i> ${vpnActive ? 'VPN Active' : 'Proxy Active'}`;
-        });
-        feather.replace();
+      vpnEnabled = !vpnEnabled;
+      updateStatus();
     }
-});
-// 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, #clear-cookies');
-    clearDataButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            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);
-            }
-        });
-    });
-    // Initialize feather icons and reload after content changes
-    const initFeather = () => {
-        feather.replace();
-        setTimeout(() => feather.replace(), 500); // Double init to catch dynamic elements
-    };
-    initFeather();
+  });
+  
+  // 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();
 });