Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on 27 days ago

Commit

51fbb6a

verified ·

1 Parent(s): f5ccb89

Update index.html

Browse files

Files changed (1) hide show

index.html +36 -24

index.html CHANGED Viewed

@@ -1,7 +1,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>CODE VED | Engineered by Divy Patel</title>
     <meta name="description" content="CODE VED - 202 Billion Parameter Enterprise AI System">
@@ -47,9 +48,13 @@
         * { box-sizing: border-box; margin: 0; padding: 0; }
-        body {
             font-family: var(--font-ui); background-color: var(--bg-main); color: var(--text-primary);
-            height: 100vh; display: flex; overflow: hidden; -webkit-font-smoothing: antialiased;
         }
         button { background: none; border: none; cursor: pointer; color: inherit; font-family: inherit; }
@@ -65,6 +70,7 @@
         .sidebar {
             width: 260px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-light);
             display: flex; flex-direction: column; transition: transform 0.3s ease, width 0.3s ease; z-index: 100;
         }
         .sidebar.collapsed { margin-left: -260px; }
@@ -89,17 +95,19 @@
         .user-sub { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-top: 2px; }
         /* --- MAIN WORKSPACE --- */
-        .main-area { flex: 1; display: flex; flex-direction: column; position: relative; background: var(--bg-main); transition: 0.3s; }
-        .top-bar { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; position: absolute; width: 100%; top: 0; z-index: 10; }
         .btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; }
         .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
-        .btn-icon svg { width: 18px; height: 18px; } /* Reduced hamburger size */
         .model-selector { font-size: 14px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
         /* --- CHAT CONTAINER --- */
-        .chat-container { flex: 1; overflow-y: auto; padding: 70px 20px 120px; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }
         .welcome-center { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.5s ease; }
         .welcome-center img { width: 70px; height: 70px; border-radius: 18px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
@@ -125,8 +133,9 @@
         .chat-img-preview { max-width: 250px; border-radius: var(--radius-md); border: 1px solid var(--border-light); margin-bottom: 10px; }
         /* --- INPUT DOCK --- */
-        .input-dock { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 60%, rgba(255,255,255,0)); padding: 20px; display: flex; justify-content: center; z-index: 20; }
-        .input-container { width: 100%; max-width: 760px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 8px 12px; display: flex; flex-direction: column; transition: 0.2s; }
         .input-container:focus-within { border-color: var(--border-focus); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
         .file-preview-bar { display: none; padding: 8px 8px 12px; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; }
@@ -135,30 +144,31 @@
         .file-preview-name { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
         .btn-remove-file { width: 24px; height: 24px; border-radius: 50%; background: #ffe6e6; color: #cc0000; display: flex; align-items: center; justify-content: center; }
-        .input-row { display: flex; align-items: flex-end; gap: 8px; }
         .tools-left { display: flex; gap: 4px; }
-        .tool-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; position: relative; }
         .tool-btn:hover { background: #e5e5e5; color: var(--text-primary); }
         .tool-btn svg { width: 18px; height: 18px; }
         .tool-btn.recording { color: #e60000; animation: pulse 1.5s infinite; }
-        .chat-input { flex: 1; padding: 7px 4px; font-size: 15px; resize: none; max-height: 150px; min-height: 24px; color: var(--text-primary); line-height: 1.5; }
         .chat-input::placeholder { color: var(--text-tertiary); }
-        .btn-send { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-color); color: #fff; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
         .btn-send svg { width: 16px; height: 16px; transform: translateX(-1px); }
         .btn-send:hover { background: #000; transform: translateY(-1px); }
         .btn-send:disabled { background: #ccc; cursor: not-allowed; transform: none; }
         .hidden-input { display: none; }
-        .dropdown-menu { position: absolute; bottom: 45px; left: 0; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 2px; min-width: 180px; z-index: 100; }
         .dropdown-menu.active { display: flex; animation: fadeIn 0.2s; }
         .dropdown-item { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; }
         .dropdown-item:hover { background: var(--bg-hover); }
-        /* --- SECURE AUTHENTICATION MODAL (RESTORED) --- */
         .auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 2000; }
-        .auth-modal { background: #fff; width: 100%; max-width: 400px; border-radius: var(--radius-md); padding: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; }
         .auth-close { position: absolute; top: 16px; right: 16px; color: var(--text-secondary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; }
         .auth-close:hover { background: var(--bg-hover); color: var(--text-primary); }
@@ -216,13 +226,14 @@
             .sidebar { position: absolute; left: 0; height: 100%; box-shadow: 5px 0 20px rgba(0,0,0,0.05); }
             .sidebar.collapsed { left: -260px; margin-left: 0; }
             .workspace-panel.active { width: 100%; position: absolute; top:0; left:0; height:100%; z-index: 1000; }
         }
     </style>
 </head>
 <body>
     <!-- SIDEBAR -->
-    <aside class="sidebar" id="sidebar">
         <div class="sidebar-header">
             <button class="btn-icon" onclick="UI.toggleSidebar()" title="Close Sidebar">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
@@ -252,7 +263,7 @@
     <!-- MAIN AREA -->
     <main class="main-area">
         <header class="top-bar">
-            <button class="btn-icon" onclick="UI.toggleSidebar()" title="Open Menu" id="btnMenuOpen" style="display:none;">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
             </button>
             <div class="model-selector">CODE VED 202B</div>
@@ -384,7 +395,7 @@
         // --- 1. CONFIG & STATE ---
         const Config = {
             GAS_URL: "https://script.google.com/macros/s/AKfycbz5vrlB4GrfkfBVYdQ52IQweIXC1cNDwKuTUorxdAiOdSSIrH55mzJlaz9kq1Y94ot5/exec",
-            API_ENDPOINT: "/api/chat", // Fallback for testing
             LOGO: "https://i.ibb.co/MyYStcGP/TIRANGA-20260613-131924-0000.png"
         };
@@ -409,7 +420,7 @@
                 btnOpen.style.display = sb.classList.contains('collapsed') ? 'flex' : 'none';
             },
             toggleAttachMenu: () => document.getElementById('attachMenu').classList.toggle('active'),
-            autoGrow: (el) => { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 150) + 'px'; },
             scrollToBottom: () => { const c = document.getElementById('chatContainer'); c.scrollTop = c.scrollHeight; },
             escape: (s) => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'),
             showAuthMsg: (msg, isError=true) => {
@@ -575,7 +586,7 @@
                     } else {
                         r.onload = (e) => {
                             let data = e.target.result;
-                            // Safe HTML sanitization for LLM parsing
                             if(file.name.endsWith('.html')) {
                                 data = data.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "\n[SCRIPT SANITIZED]\n");
                             }
@@ -628,7 +639,7 @@
             }
         };
-        // --- 6. WORKSPACE PRO MAX (EXECUTION) ---
         const Workspace = {
             open: (id) => {
                 State.currentWs = id;
@@ -824,9 +835,10 @@
         window.onload = () => {
             Auth.init();
-            if(window.innerWidth > 900) document.getElementById('sidebar').classList.remove('collapsed');
         };
     </script>
 </body>
-</html>

+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>CODE VED | Engineered by Divy Patel</title>
     <meta name="description" content="CODE VED - 202 Billion Parameter Enterprise AI System">
         * { box-sizing: border-box; margin: 0; padding: 0; }
+        /* BUG FIX: Changed from 100vh to 100dvh for mobile/tablet browser compatibility */
+        html, body {
+            height: 100%;
+            height: 100dvh;
+            width: 100vw;
             font-family: var(--font-ui); background-color: var(--bg-main); color: var(--text-primary);
+            display: flex; overflow: hidden; -webkit-font-smoothing: antialiased;
         }
         button { background: none; border: none; cursor: pointer; color: inherit; font-family: inherit; }
         .sidebar {
             width: 260px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-light);
             display: flex; flex-direction: column; transition: transform 0.3s ease, width 0.3s ease; z-index: 100;
+            height: 100%;
         }
         .sidebar.collapsed { margin-left: -260px; }
         .user-sub { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-top: 2px; }
         /* --- MAIN WORKSPACE --- */
+        /* BUG FIX: Ensures the main area doesn't push the input dock down */
+        .main-area { flex: 1; display: flex; flex-direction: column; position: relative; background: var(--bg-main); transition: 0.3s; height: 100%; overflow: hidden; }
+        .top-bar { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light); background: var(--bg-main); z-index: 10; flex-shrink: 0; }
         .btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; }
         .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
+        .btn-icon svg { width: 18px; height: 18px; }
         .model-selector { font-size: 14px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
         /* --- CHAT CONTAINER --- */
+        /* BUG FIX: Proper flex and padding so it scrolls correctly above the input */
+        .chat-container { flex: 1; overflow-y: auto; padding: 40px 20px 20px; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }
         .welcome-center { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.5s ease; }
         .welcome-center img { width: 70px; height: 70px; border-radius: 18px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
         .chat-img-preview { max-width: 250px; border-radius: var(--radius-md); border: 1px solid var(--border-light); margin-bottom: 10px; }
         /* --- INPUT DOCK --- */
+        /* BUG FIX: Changed from absolute position to standard flex-shrink so it never overlaps or hides */
+        .input-dock { flex-shrink: 0; padding: 15px 20px 25px; background: var(--bg-main); border-top: 1px solid var(--border-light); display: flex; justify-content: center; z-index: 20; width: 100%; }
+        .input-container { width: 100%; max-width: 760px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 8px 12px; display: flex; flex-direction: column; transition: 0.2s; position: relative; }
         .input-container:focus-within { border-color: var(--border-focus); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
         .file-preview-bar { display: none; padding: 8px 8px 12px; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; }
         .file-preview-name { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
         .btn-remove-file { width: 24px; height: 24px; border-radius: 50%; background: #ffe6e6; color: #cc0000; display: flex; align-items: center; justify-content: center; }
+        .input-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
         .tools-left { display: flex; gap: 4px; }
+        .tool-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; position: relative; flex-shrink: 0; }
         .tool-btn:hover { background: #e5e5e5; color: var(--text-primary); }
         .tool-btn svg { width: 18px; height: 18px; }
         .tool-btn.recording { color: #e60000; animation: pulse 1.5s infinite; }
+        .chat-input { flex: 1; padding: 7px 4px; font-size: 15px; resize: none; max-height: 120px; min-height: 24px; color: var(--text-primary); line-height: 1.5; }
         .chat-input::placeholder { color: var(--text-tertiary); }
+        .btn-send { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-color); color: #fff; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }
         .btn-send svg { width: 16px; height: 16px; transform: translateX(-1px); }
         .btn-send:hover { background: #000; transform: translateY(-1px); }
         .btn-send:disabled { background: #ccc; cursor: not-allowed; transform: none; }
         .hidden-input { display: none; }
+        /* Adjusted dropdown position */
+        .dropdown-menu { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 2px; min-width: 180px; z-index: 100; }
         .dropdown-menu.active { display: flex; animation: fadeIn 0.2s; }
         .dropdown-item { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; }
         .dropdown-item:hover { background: var(--bg-hover); }
+        /* --- SECURE AUTHENTICATION MODAL --- */
         .auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 2000; }
+        .auth-modal { background: #fff; width: 90%; max-width: 400px; border-radius: var(--radius-md); padding: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; }
         .auth-close { position: absolute; top: 16px; right: 16px; color: var(--text-secondary); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; }
         .auth-close:hover { background: var(--bg-hover); color: var(--text-primary); }
             .sidebar { position: absolute; left: 0; height: 100%; box-shadow: 5px 0 20px rgba(0,0,0,0.05); }
             .sidebar.collapsed { left: -260px; margin-left: 0; }
             .workspace-panel.active { width: 100%; position: absolute; top:0; left:0; height:100%; z-index: 1000; }
+            .input-dock { padding: 10px 15px 15px; } /* Slightly tighter padding for phones */
         }
     </style>
 </head>
 <body>
     <!-- SIDEBAR -->
+    <aside class="sidebar collapsed" id="sidebar">
         <div class="sidebar-header">
             <button class="btn-icon" onclick="UI.toggleSidebar()" title="Close Sidebar">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
     <!-- MAIN AREA -->
     <main class="main-area">
         <header class="top-bar">
+            <button class="btn-icon" onclick="UI.toggleSidebar()" title="Open Menu" id="btnMenuOpen">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
             </button>
             <div class="model-selector">CODE VED 202B</div>
         // --- 1. CONFIG & STATE ---
         const Config = {
             GAS_URL: "https://script.google.com/macros/s/AKfycbz5vrlB4GrfkfBVYdQ52IQweIXC1cNDwKuTUorxdAiOdSSIrH55mzJlaz9kq1Y94ot5/exec",
+            API_ENDPOINT: "/api/chat", // Your backend endpoint
             LOGO: "https://i.ibb.co/MyYStcGP/TIRANGA-20260613-131924-0000.png"
         };
                 btnOpen.style.display = sb.classList.contains('collapsed') ? 'flex' : 'none';
             },
             toggleAttachMenu: () => document.getElementById('attachMenu').classList.toggle('active'),
+            autoGrow: (el) => { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 120) + 'px'; },
             scrollToBottom: () => { const c = document.getElementById('chatContainer'); c.scrollTop = c.scrollHeight; },
             escape: (s) => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'),
             showAuthMsg: (msg, isError=true) => {
                     } else {
                         r.onload = (e) => {
                             let data = e.target.result;
+                            // Safe HTML sanitization
                             if(file.name.endsWith('.html')) {
                                 data = data.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "\n[SCRIPT SANITIZED]\n");
                             }
             }
         };
+        // --- 6. WORKSPACE PRO MAX ---
         const Workspace = {
             open: (id) => {
                 State.currentWs = id;
         window.onload = () => {
             Auth.init();
+            // Ensures sidebar layout doesn't break chat input
+            if(window.innerWidth > 900) { document.getElementById('btnMenuOpen').style.display = 'none'; document.getElementById('sidebar').classList.remove('collapsed'); }
         };
     </script>
 </body>
+</html>