Update index.html

index.html

@@ -33,7 +33,7 @@
 
   <div id="debug-banner" class="hidden fixed top-0 left-0 right-0 z-50 bg-red-600/90 text-white text-xs p-2 text-center font-mono"></div>
 
-  <!-- Menu Toggle -->
+  <!-- Menu Toggle Button -->
   <div class="fixed top-3 left-3 z-30">
     <button type="button" id="menu-btn" class="p-2.5 rounded-xl bg-zinc-900/90 backdrop-blur-md border border-zinc-800 text-zinc-300 hover:text-white active:scale-95 transition shadow-lg cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 pointer-events-none">
@@ -47,7 +47,7 @@
   <!-- Sidebar Drawer -->
   <aside id="drawer" style="transform: translateX(-100%); transition: transform 0.25s ease;" class="fixed inset-y-0 left-0 w-72 bg-[#18181b] border-r border-zinc-800 z-50 flex flex-col justify-between p-4 shadow-2xl">
     <div class="flex-1 flex flex-col overflow-hidden">
-      <!-- Header -->
+      <!-- Drawer Header -->
       <div class="flex items-center justify-between pb-3 mb-3 border-b border-zinc-800">
         <div class="flex items-center gap-2">
           <div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center font-bold text-white text-sm">अ</div>
@@ -55,37 +55,8 @@
         </div>
         <button type="button" id="close-drawer" class="text-zinc-400 hover:text-white p-1 text-sm font-bold cursor-pointer">✕</button>
       </div>
-      <!-- Account Badge -->
-<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3 mb-3">
-  <div class="flex items-center justify-between">
-    <div class="truncate mr-2">
-      <p id="user-display" class="text-xs font-medium text-zinc-300 truncate">Guest User</p>
-      <p id="user-plan" class="text-[11px] font-semibold text-emerald-400">Plan: Free</p>
-      <p id="sync-status" class="text-[10px] text-zinc-500">Local Session</p>
-    </div>
-    <div class="flex items-center gap-1.5 shrink-0">
-      <button type="button" id="upgrade-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg text-xs transition cursor-pointer hidden">
-        Upgrade
-      </button>
-      <button type="button" id="auth-action-btn" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-medium transition cursor-pointer">
-        Login
-      </button>
-    </div>
-  </div>
 
-  <!-- Credit / Quota Progress Bar -->
-  <div id="usage-container" class="mt-2.5 pt-2 border-t border-zinc-800/80">
-    <div class="flex items-center justify-between text-[10px] font-medium text-zinc-400">
-      <span>Daily Quota</span>
-      <span id="usage-count-text">0 / 10</span>
-    </div>
-    <div class="w-full bg-zinc-800 rounded-full h-1.5 mt-1 overflow-hidden">
-      <div id="usage-progress-bar" class="h-full bg-emerald-500 rounded-full transition-all duration-300" style="width: 0%;"></div>
-    </div>
-  </div>
-</div>
-
-      <!-- Account Badge (Top Placement) -->
+      <!-- Single Account Badge with Quota Bar -->
       <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3 mb-3">
         <div class="flex items-center justify-between">
           <div class="truncate mr-2">
@@ -102,6 +73,17 @@
             </button>
           </div>
         </div>
+
+        <!-- Quota Progress Bar -->
+        <div id="usage-container" class="mt-2.5 pt-2 border-t border-zinc-800/80">
+          <div class="flex items-center justify-between text-[10px] font-medium text-zinc-400">
+            <span>Daily Quota</span>
+            <span id="usage-count-text">0 / 10</span>
+          </div>
+          <div class="w-full bg-zinc-800 rounded-full h-1.5 mt-1 overflow-hidden">
+            <div id="usage-progress-bar" class="h-full bg-emerald-500 rounded-full transition-all duration-300" style="width: 0%;"></div>
+          </div>
+        </div>
       </div>
 
       <!-- New Chat Button -->
@@ -110,7 +92,7 @@
         New Chat
       </button>
 
-      <!-- Thread List -->
+      <!-- Thread History -->
       <div class="flex-1 flex flex-col min-h-0">
         <div class="flex items-center justify-between px-1 mb-2">
           <p class="text-[11px] font-medium text-zinc-400">Conversations</p>
@@ -290,7 +272,7 @@
             <span class="text-[10px] uppercase font-bold text-emerald-400">Plus</span>
             <p id="plus-price" class="text-lg font-bold text-white mt-1">₹99<span class="text-xs text-zinc-500 font-normal">/mo</span></p>
             <ul class="text-[11px] text-zinc-400 space-y-1.5 mt-2">
-              <li>✓ 3X Message Limit</li>
+              <li>✓ 100 Messages / day</li>
               <li>✓ Fast Response Rate</li>
               <li>✓ Unlimited Voice Notes</li>
             </ul>
@@ -309,7 +291,7 @@
             <ul class="text-[11px] text-zinc-400 space-y-1.5 mt-2">
               <li>✓ Unlimited Messages</li>
               <li>✓ Okafwr 2.1 (Gemini 3.7)</li>
-              <li>✓ Extended Memory Depth</li>
+              <li>✓ Deep Memory & Long Answers</li>
             </ul>
           </div>
           <button type="button" id="buy-pro-btn" class="mt-4 w-full py-2 bg-amber-500 hover:bg-amber-400 text-black rounded-lg text-xs font-semibold transition cursor-pointer">
@@ -320,26 +302,6 @@
     </div>
   </div>
 
-  <!-- Account Badge -->
-<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3 mb-3">
-  <div class="flex items-center justify-between">
-    <div class="truncate mr-2">
-      <p id="user-display" class="text-xs font-medium text-zinc-300 truncate">Guest User</p>
-      <p id="user-plan" class="text-[11px] font-semibold text-emerald-400">Plan: Free</p>
-      <p id="sync-status" class="text-[10px] text-zinc-500">Local Session</p>
-    </div>
-    <div class="flex items-center gap-1.5 shrink-0">
-      <button type="button" id="upgrade-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg text-xs transition cursor-pointer hidden">
-        Upgrade
-      </button>
-      <button type="button" id="auth-action-btn" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-medium transition cursor-pointer">
-        Login
-      </button>
-    </div>
-  </div>
-
-
-
   <script src="app.js"></script>
 </body>
 </html>