Update index.html

index.html

@@ -15,7 +15,7 @@
     </script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
-    <style>:root{color-scheme:dark}html,body{height:100%}html{font-size:14px}
+    <style>:root{color-scheme:dark}html,body{height:100%}html{font-size:12px}
       .bubble table{width:100%;border-collapse:collapse;margin-top:.5rem}
       .bubble th,.bubble td{border:1px solid rgba(255,255,255,.15);padding:.5rem;vertical-align:top}
       .bubble th{background:rgba(255,255,255,.06);font-weight:600}
@@ -35,19 +35,19 @@
       <!-- Main -->
       <div class="flex-1 flex flex-col min-w-0">
         <header class="sticky top-0 z-40 border-b border-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/70">
-          <div class="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
+          <div class="px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between gap-4">
             <div class="inline-flex items-center gap-2">
-              <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-brand/20 text-brand">
+              <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand/20 text-brand">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path d="M4 5a2 2 0 0 1 2-2h1l1-1h6l1 1h1a2 2 0 0 1 2 2v3H4V5Zm0 5h16v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7Zm5 2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"/></svg>
               </span>
-              <span class="text-lg font-extrabold tracking-tight">MultiModel AI</span>
+              <span class="text-base font-extrabold tracking-tight">MultiModel AI</span>
             </div>
             <div id="tabs" class="inline-flex rounded-lg bg-white/5 p-0.5 text-white/70 text-xs font-medium border border-white/10 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
-              <button data-tab="All" class="tab px-2 py-0.5 rounded bg-white/10 text-white">All</button>
-              <button data-tab="Gemini" class="tab px-2 py-0.5 rounded hover:bg-white/10">Gemini</button>
-              <button data-tab="OpenAi" class="tab px-2 py-0.5 rounded hover:bg-white/10">OpenAi</button>
-              <button data-tab="Meta" class="tab px-2 py-0.5 rounded hover:bg-white/10">Meta</button>
-              <button data-tab="Alibaba" class="tab px-2 py-0.5 rounded hover:bg-white/10">Alibaba</button>
+              <button data-tab="All" class="tab px-1.5 py-0.5 rounded bg-white/10 text-white">All</button>
+              <button data-tab="Gemini" class="tab px-1.5 py-0.5 rounded hover:bg-white/10">Gemini</button>
+              <button data-tab="OpenAi" class="tab px-1.5 py-0.5 rounded hover:bg-white/10">OpenAi</button>
+              <button data-tab="Meta" class="tab px-1.5 py-0.5 rounded hover:bg-white/10">Meta</button>
+              <button data-tab="Alibaba" class="tab px-1.5 py-0.5 rounded hover:bg-white/10">Alibaba</button>
             </div>
           </div>
         </header>
@@ -58,43 +58,43 @@
           <!-- Chat area -->
           <div id="chat" class="relative flex-1 overflow-hidden">
             <!-- Mobile panes -->
-            <div id="mobile-panes" class="lg:hidden h-full overflow-y-auto p-4 pb-28 relative scroll-area">
-              <div id="pane-All" class="pane flex flex-col gap-4"></div>
-              <div id="pane-Gemini" class="pane hidden flex flex-col gap-4"></div>
-              <div id="pane-OpenAi" class="pane hidden flex flex-col gap-4"></div>
-              <div id="pane-Meta" class="pane hidden flex flex-col gap-4"></div>
-              <div id="pane-Alibaba" class="pane hidden flex flex-col gap-4"></div>
+            <div id="mobile-panes" class="lg:hidden h-full overflow-y-auto p-2.5 pb-20 relative scroll-area">
+              <div id="pane-All" class="pane flex flex-col gap-3"></div>
+              <div id="pane-Gemini" class="pane hidden flex flex-col gap-3"></div>
+              <div id="pane-OpenAi" class="pane hidden flex flex-col gap-3"></div>
+              <div id="pane-Meta" class="pane hidden flex flex-col gap-3"></div>
+              <div id="pane-Alibaba" class="pane hidden flex flex-col gap-3"></div>
             </div>
 
             <!-- Desktop 4 columns -->
-            <div id="grid" class="hidden lg:grid grid-cols-1 xl:grid-cols-4 gap-4 h-full p-4 pb-24 scroll-area">
+            <div id="grid" class="hidden lg:grid grid-cols-1 xl:grid-cols-4 gap-3 h-full p-3 pb-20 scroll-area">
               <!-- Column template instances -->
               <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
-                <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500/30 to-sky-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/google/ffffff" alt="Gemini" class="h-4 w-4"/></span><span class="font-semibold">Gemini</span></div>
-                <div id="col-Gemini" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
+                <div class="h-10 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500/30 to-sky-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/google/ffffff" alt="Gemini" class="h-4 w-4"/></span><span class="font-semibold">Gemini</span></div>
+                <div id="col-Gemini" class="flex-1 overflow-y-auto p-2.5 pb-20 flex flex-col gap-2 scroll-area"></div>
               </div>
               <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
-                <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-emerald-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/openai/ffffff" alt="OpenAI" class="h-4 w-4"/></span><span class="font-semibold">OpenAi</span></div>
-                <div id="col-OpenAi" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
+                <div class="h-10 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-emerald-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/openai/ffffff" alt="OpenAI" class="h-4 w-4"/></span><span class="font-semibold">OpenAi</span></div>
+                <div id="col-OpenAi" class="flex-1 overflow-y-auto p-2.5 pb-20 flex flex-col gap-2 scroll-area"></div>
               </div>
               <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
-                <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-blue-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/meta/ffffff" alt="Meta" class="h-4 w-4"/></span><span class="font-semibold">Meta</span></div>
-                <div id="col-Meta" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
+                <div class="h-10 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-blue-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/meta/ffffff" alt="Meta" class="h-4 w-4"/></span><span class="font-semibold">Meta</span></div>
+                <div id="col-Meta" class="flex-1 overflow-y-auto p-2.5 pb-20 flex flex-col gap-2 scroll-area"></div>
               </div>
               <div class="col flex flex-col rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
-                <div class="h-12 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-amber-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/alibabacloud/ffffff" alt="Alibaba" class="h-4 w-4"/></span><span class="font-semibold">Alibaba</span></div>
-                <div id="col-Alibaba" class="flex-1 overflow-y-auto p-3 pb-24 flex flex-col gap-3 scroll-area"></div>
+                <div class="h-10 border-b border-white/10 px-3 flex items-center gap-2"><span class="h-7 w-7 inline-flex items-center justify-center rounded-full bg-amber-500/30 ring-1 ring-white/10"><img src="https://cdn.simpleicons.org/alibabacloud/ffffff" alt="Alibaba" class="h-4 w-4"/></span><span class="font-semibold">Alibaba</span></div>
+                <div id="col-Alibaba" class="flex-1 overflow-y-auto p-2.5 pb-20 flex flex-col gap-2 scroll-area"></div>
               </div>
             </div>
 
             <!-- Composer -->
-            <div class="absolute bottom-0 left-0 right-0 border-t border-white/10 bg-neutral-950/80 backdrop-blur p-3">
+            <div class="absolute bottom-0 left-0 right-0 border-t border-white/10 bg-neutral-950/80 backdrop-blur p-2">
               <div class="relative max-w-5xl mx-auto">
-                <textarea id="prompt" rows="2" class="w-full rounded-lg bg-white/5 border border-white/10 pl-3 pr-64 py-3 text-sm placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-brand" placeholder="Press Enter to send • Shift+Enter for newline"></textarea>
-                <button id="send" class="absolute right-3 bottom-5 inline-flex h-10 items-center gap-2 justify-center rounded-lg bg-gradient-to-r from-[#22c55e] to-[#16a34a] px-5 text-sm font-semibold text-black shadow-lg shadow-emerald-500/20 hover:brightness-105 active:translate-y-[1px] focus:outline-none focus:ring-2 focus:ring-emerald-400/60 transition-all">Send
+                <textarea id="prompt" rows="2" class="w-full rounded-lg bg-white/5 border border-white/10 pl-3 pr-56 py-2 text-sm placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-brand" placeholder="Press Enter to send • Shift+Enter for newline"></textarea>
+                <button id="send" class="absolute right-3 bottom-5 inline-flex h-9 items-center gap-2 justify-center rounded-lg bg-gradient-to-r from-[#22c55e] to-[#16a34a] px-5 text-sm font-semibold text-black shadow-lg shadow-emerald-500/20 hover:brightness-105 active:translate-y-[1px] focus:outline-none focus:ring-2 focus:ring-emerald-400/60 transition-all">Send
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="M3 12l18-9-9 18-1.8-6.2L3 12z"/></svg>
 </button>
-                <button id="setPrompt" class="absolute right-36 bottom-5 inline-flex h-10 items-center gap-2 justify-center rounded-lg bg-white/10 px-3 text-sm font-medium text-white hover:bg-white/15 border border-white/10 backdrop-blur-sm transition-all"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="M11 2l1.5 3.5L16 7l-3.5 1.5L11 12l-1.5-3.5L6 7l3.5-1.5L11 2zM18 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg> Set Prompt</button>
+                <button id="setPrompt" class="absolute right-36 bottom-5 inline-flex h-9 items-center gap-2 justify-center rounded-lg bg-white/10 px-3 text-sm font-medium text-white hover:bg-white/15 border border-white/10 backdrop-blur-sm transition-all"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="M11 2l1.5 3.5L16 7l-3.5 1.5L11 12l-1.5-3.5L6 7l3.5-1.5L11 2zM18 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg> Set Prompt</button>
               </div>
             </div>
           </div>
@@ -115,7 +115,7 @@
     </div>
 
     <template id="msg-template">
-      <div class="msg group flex items-start gap-3">
+      <div class="msg group flex items-start gap-2">
         <div class="avatar h-8 w-8 shrink-0 rounded-full bg-white/10 flex items-center justify-center text-xs font-semibold"></div>
         <div class="max-w-[85%]">
           <div class="header flex items-center gap-2 mb-1">
@@ -123,7 +123,7 @@
             <span class="time text-xs text-white/50"></span>
             <button class="copy ml-auto hidden md:inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-white/5 border border-white/10 text-xs hover:bg-white/10 transition-opacity opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5"><path d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/></svg>Copy</button>
           </div>
-          <div class="bubble rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap"></div>
+          <div class="bubble rounded-2xl px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap"></div>
         </div>
       </div>
     </template>