Update index.html

DevEchoX2 · web-flow · commit 3b3138b6f949 · 2026-01-05T16:47:05.000-05:00
diff --git a/index.html b/index.html
@@ -3,16 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vision Browser</title>
+    <title>Vision</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         :root {
-            --bg: #000000;
-            --nav-bg: #0d0d0d;
-            --tab-active: #0d0d0d;
+            --bg: #0a0a0a;
+            --nav-bg: #0f0f0f;
+            --tab-active: #0f0f0f;
             --text-main: #ffffff;
-            --text-dim: #555555;
-            --border: rgba(255, 255, 255, 0.04);
+            --text-dim: #777777;
+            --border: rgba(255, 255, 255, 0.06);
+            --input-gray: #121212;
         }
 
         body {
@@ -60,7 +61,7 @@
             border-radius: 10px 10px 0 0;
         }
 
-        .tab:hover { color: #888; }
+        .tab:hover { color: #aaa; }
 
         .tab.active {
             background: var(--tab-active);
@@ -145,22 +146,22 @@
             align-items: center;
             justify-content: center;
             border-radius: 6px;
-            color: #444;
+            color: #555;
             transition: all 0.2s;
         }
 
         .nav-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
 
         .address-box {
             position: relative;
-            width: 720px;
+            width: 950px;
             margin: 0 auto;
         }
 
         .address-bar {
             width: 100%;
             height: 32px;
-            background: #050505;
+            background: var(--input-gray);
             border: 1px solid var(--border);
             border-radius: 16px;
             padding: 0 32px;
@@ -172,17 +173,17 @@
         }
 
         .address-bar:focus {
-            border-color: #333;
+            border-color: #444;
             color: #fff;
-            background: #000;
+            background: #1a1a1a;
         }
 
         .address-icon {
             position: absolute;
             left: 12px;
             top: 50%;
             transform: translateY(-50%);
-            color: #333;
+            color: #444;
         }
 
         .viewport {
@@ -211,7 +212,7 @@
             justify-content: center;
             margin-bottom: 6px;
             margin-left: 20px;
-            color: #333;
+            color: #444;
             border-radius: 4px;
             transition: all 0.2s;
         }
@@ -238,9 +239,8 @@
             <div class="address-icon">
                 <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
             </div>
-            <input type="text" id="address-input" class="address-bar" placeholder="Search with Vision or type a URL" autocomplete="off" spellcheck="false">
+            <input type="text" id="address-input" class="address-bar" placeholder="Search Vision" autocomplete="off" spellcheck="false">
         </div>
-
         <div style="width: 100px;"></div>
     </div>
 
@@ -263,7 +263,9 @@
             const val = input.trim();
             if (!val) return 'newtab.html';
 
-            if (val.startsWith('http://') || val.startsWith('https://')) {
+            if (val.startsWith('https://')) {
+                return `/active/embed.html?url=${val}`;
+            } else if (val.startsWith('http://')) {
                 return `/active/embed.html?url=${val}`;
             } else if (val.includes('.') && !val.includes(' ')) {
                 return `/active/embed.html?url=https://${val}`;
@@ -274,18 +276,19 @@
 
         function getDisplayUrl(url) {
             if (url === 'newtab.html') return '';
-            if (url.includes('url=https://')) {
-                return decodeURIComponent(url.split('url=https://')[1]);
-            }
+            let target = url;
             if (url.includes('url=')) {
-                return decodeURIComponent(url.split('url=')[1]);
+                target = decodeURIComponent(url.split('url=')[1]);
             }
-            return url;
+            return target.replace(/^https?:\/\//, '');
         }
 
         function extractDomain(url) {
             try {
-                const target = url.includes('url=') ? decodeURIComponent(url.split('url=')[1]) : url;
+                let target = url;
+                if (url.includes('url=')) {
+                    target = decodeURIComponent(url.split('url=')[1]);
+                }
                 if (!target.startsWith('http')) return 'google.com';
                 return new URL(target).hostname;
             } catch (e) { return 'google.com'; }
@@ -370,7 +373,7 @@
                 const currentTab = tabs.find(t => t.id === activeTabId);
                 
                 currentTab.url = resolved;
-                currentTab.title = getDisplayUrl(resolved) || 'Loading...';
+                currentTab.title = getDisplayUrl(resolved) || 'Vision';
                 currentTab.favicon = FAVICON_SERVICE + extractDomain(resolved);
                 
                 document.getElementById(`iframe-${activeTabId}`).src = resolved;
@@ -390,12 +393,12 @@
             if (e.data && e.data.type === 'meta-update') {
                 const t = tabs.find(x => x.id === activeTabId);
                 if (t) {
-                    t.title = e.data.title || t.title;
+                    if (e.data.title) t.title = e.data.title;
                     if (e.data.url) {
                         t.url = e.data.url;
                         addressInput.value = getDisplayUrl(t.url);
                     }
-                    t.favicon = FAVICON_SERVICE + extractDomain(t.url);
+                    t.favicon = FAVICON_SERVICE + extractDomain(t.url || '');
                     renderTabs();
                 }
             }
