From 084eca9f89954d1964e0bfa236d63520f0723bf5 Mon Sep 17 00:00:00 2001
From: sss <planetrenox@protonmail.com>
Date: Wed, 13 Aug 2025 16:51:31 -0700
Subject: [PATCH] Update index.html

---
 index.html | 123 +++++++++--------------------------------------------
 1 file changed, 20 insertions(+), 103 deletions(-)
diff --git a/index.html b/index.html
index 67053de..7cb635f 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <title>ChatGPT — Mobile Clone (Light)</title>
-  <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    /* iOS safe area for the input dock */
     :root { --safe-bottom: env(safe-area-inset-bottom); }
     ::-webkit-scrollbar { height: 8px; width: 8px; }
     ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
@@ -17,25 +15,19 @@
   </style>
 </head>
 <body class="bg-white text-gray-900 selection:bg-amber-200/60">
-  <!-- App Shell -->
   <div class="flex flex-col h-dvh max-h-dvh">
-    <!-- Header -->
     <header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
       <div class="mx-auto w-full max-w-2xl px-4 py-3 flex items-center justify-between">
-        <button id="newChatBtn" class="text-sm font-medium px-3 py-1.5 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition">
-          New chat
+        <button id="newChatBtn" class="text-sm font-medium px-3 py-1.5 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition">New chat</button>
+        <button id="modelBadge" class="text-xs font-medium px-3 py-1.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 transition">
+          <span id="modelName">openai/gpt-4o</span>
         </button>
-        <div class="text-sm text-gray-600 truncate" id="modelBadge">
-          Model: <span class="font-semibold" id="modelName">openai/gpt-4o</span>
-        </div>
         <div class="flex items-center gap-2">
           <span class="text-[11px] text-gray-400" id="status">offline</span>
         </div>
       </div>
-    </header><!-- Messages -->
-<main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
+    </header><main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
   <div id="messages" class="mx-auto w-full max-w-2xl px-4 py-4 sm:py-6 space-y-4">
-    <!-- Placeholder intro -->
     <div class="flex gap-3">
       <div class="shrink-0 h-8 w-8 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center">🤖</div>
       <div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed">
@@ -44,54 +36,36 @@
       </div>
     </div>
   </div>
-  <div class="h-24"></div> <!-- spacer so last message isn't hidden under input dock -->
+  <div class="h-24"></div>
 </main>
 
-<!-- Input Dock -->
 <footer class="sticky bottom-0 bg-gradient-to-t from-white via-white/95 to-white/40 pt-3 pb-[calc(12px+var(--safe-bottom))] border-t border-gray-200">
   <div class="mx-auto w-full max-w-2xl px-4">
     <form id="composer" class="group relative flex items-end gap-2">
-      <textarea id="input" rows="1" placeholder="Send a message" spellcheck="true"
-        class="flex-1 resize-none rounded-2xl border border-gray-300 bg-white px-4 py-3 text-[15px] leading-6 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-300/80 focus:border-gray-300 max-h-40"></textarea>
-      <button id="sendBtn" type="submit" aria-label="Send"
-        class="shrink-0 rounded-2xl bg-amber-500 text-white h-10 w-10 inline-flex items-center justify-center shadow-sm hover:bg-amber-600 active:scale-[.98] transition disabled:opacity-40 disabled:cursor-not-allowed">
-        <!-- Send icon -->
-        <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"/>
-        </svg>
+      <textarea id="input" rows="1" placeholder="Send a message" spellcheck="true" class="flex-1 resize-none rounded-2xl border border-gray-300 bg-white px-4 py-3 text-[15px] leading-6 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-300/80 focus:border-gray-300 max-h-40"></textarea>
+      <button id="sendBtn" type="submit" aria-label="Send" class="shrink-0 rounded-2xl bg-amber-500 text-white h-10 w-10 inline-flex items-center justify-center shadow-sm hover:bg-amber-600 active:scale-[.98] transition disabled:opacity-40 disabled:cursor-not-allowed">
+        <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"/></svg>
       </button>
     </form>
     <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
       <div class="flex items-center gap-1.5">
-        <kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Enter</kbd>
-        to send • <kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Shift</kbd>+<kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Enter</kbd> for newline
+        <kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Enter</kbd> to send • <kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Shift</kbd>+<kbd class="px-1.5 py-0.5 rounded border bg-gray-50">Enter</kbd> for newline
       </div>
       <button id="clearBtn" class="underline decoration-dotted hover:text-gray-700">Clear</button>
     </div>
   </div>
 </footer>
 
-<!-- Corner Controls (bottom-left) -->
 <div class="fixed bottom-[calc(68px+var(--safe-bottom))] left-3 flex flex-col gap-2">
   <button id="setApiBtn" title="Set OpenRouter API key" class="h-10 w-10 rounded-full bg-gray-100 border border-gray-200 shadow-sm hover:bg-gray-200 active:scale-[.98] transition flex items-center justify-center">
-    <!-- User icon -->
     <svg viewBox="0 0 24 24" class="h-5 w-5 text-gray-700" fill="none" stroke="currentColor" stroke-width="1.6">
       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>
       <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 20.25a8.25 8.25 0 0115 0"/>
     </svg>
   </button>
-  <button id="setModelBtn" title="Set model" class="h-10 w-10 rounded-full bg-emerald-50 border border-emerald-200 shadow-sm hover:bg-emerald-100 active:scale-[.98] transition flex items-center justify-center">
-    <!-- Bot icon -->
-    <svg viewBox="0 0 24 24" class="h-5 w-5 text-emerald-700" fill="none" stroke="currentColor" stroke-width="1.6">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6M4 11h16v4a5 5 0 01-5 5H9a5 5 0 01-5-5v-4z"/>
-      <path stroke-linecap="round" stroke-linejoin="round" d="M9 3h6v4H9z"/>
-      <circle cx="9" cy="14" r="1"/><circle cx="15" cy="14" r="1"/>
-    </svg>
-  </button>
 </div>
 
   </div>  <script>
-    // === State ===
     const el = {
       chat: document.getElementById('chat'),
       messages: document.getElementById('messages'),
@@ -104,7 +78,6 @@
       modelName: document.getElementById('modelName'),
       modelBadge: document.getElementById('modelBadge'),
       setApiBtn: document.getElementById('setApiBtn'),
-      setModelBtn: document.getElementById('setModelBtn'),
     };
 
     const store = {
@@ -114,35 +87,22 @@
       set model(v) { localStorage.setItem('openrouter_model', v || 'openai/gpt-4o'); el.modelName.textContent = store.model; },
     };
 
-    const state = {
-      messages: [], // {role: 'user'|'assistant'|'system', content: string}
-      busy: false,
-      controller: null,
-    };
+    const state = { messages: [], busy: false, controller: null };
 
-    // === UI Helpers ===
     function addMessage(role, content) {
       const row = document.createElement('div');
       row.className = 'flex gap-3';
-
       const avatar = document.createElement('div');
       avatar.className = 'shrink-0 h-8 w-8 rounded-full flex items-center justify-center ' + (role === 'user' ? 'bg-blue-100 text-blue-700' : 'bg-emerald-100 text-emerald-700');
       avatar.textContent = role === 'user' ? '🧑' : '🤖';
-
       const bubble = document.createElement('div');
       bubble.className = 'rounded-2xl px-4 py-3 text-[15px] leading-relaxed whitespace-pre-wrap ' + (role === 'user' ? 'bg-blue-50 border border-blue-100' : 'bg-gray-100');
       bubble.textContent = content;
-
       row.appendChild(avatar);
       row.appendChild(bubble);
       el.messages.appendChild(row);
-
-      // Keep internal transcript (for API calls)
       state.messages.push({ role, content });
-
-      // Auto-scroll
       queueMicrotask(() => el.chat.scrollTo({ top: el.chat.scrollHeight, behavior: 'smooth' }));
-
       return bubble;
     }
 
@@ -168,12 +128,7 @@
       if (intro) {
         const introRow = document.createElement('div');
         introRow.className = 'flex gap-3';
-        introRow.innerHTML = `
-          <div class="shrink-0 h-8 w-8 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center">🤖</div>
-          <div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed">
-            <div class="font-semibold text-gray-800 mb-1">New chat</div>
-            You're in a fresh conversation. Ask away.
-          </div>`;
+        introRow.innerHTML = `<div class="shrink-0 h-8 w-8 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center">🤖</div><div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed"><div class="font-semibold text-gray-800 mb-1">New chat</div>You're in a fresh conversation. Ask away.</div>`;
         el.messages.appendChild(introRow);
       }
     }
@@ -184,37 +139,21 @@
       el.status.className = 'text-[11px] ' + (online ? 'text-emerald-600' : 'text-gray-400');
     }
 
-    // === Comms ===
     async function askOpenRouter() {
       const apiKey = store.apiKey;
       const model = store.model;
       if (!apiKey) {
-        // Local demo reply
-        return {
-          ok: true,
-          text: localDemoReply(state.messages[state.messages.length - 1]?.content || '')
-        };
+        return { ok: true, text: localDemoReply(state.messages[state.messages.length - 1]?.content || '') };
       }
-
       try {
         state.controller = new AbortController();
         const res = await fetch('https://openrouter.ai/api/v1/chat/completions', {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + apiKey,
-          },
-          body: JSON.stringify({
-            model,
-            messages: state.messages.filter(m => m.role !== 'system'),
-            stream: false,
-          }),
+          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
+          body: JSON.stringify({ model, messages: state.messages.filter(m => m.role !== 'system'), stream: false }),
           signal: state.controller.signal,
         });
-        if (!res.ok) {
-          const err = await res.text();
-          throw new Error(err || ('HTTP ' + res.status));
-        }
+        if (!res.ok) throw new Error(await res.text() || ('HTTP ' + res.status));
         const data = await res.json();
         const choice = data.choices?.[0]?.message?.content?.trim() || '(no content)';
         return { ok: true, text: choice };
@@ -227,18 +166,12 @@
     }
 
     function localDemoReply(prompt) {
-      // Very tiny offline echo with a dash of personality
-      const tips = [
-        'Tip: set an OpenRouter API key (bottom-left) to go truly online.',
-        'Pro move: tap the bot icon to pick a different model.',
-        'New chats are stateless here—no history is kept.',
-      ];
+      const tips = [ 'Tip: set an OpenRouter API key (bottom-left) to go truly online.', 'Pro move: click the model badge to change model.', 'New chats are stateless here—no history is kept.' ];
       const tip = tips[Math.floor(Math.random() * tips.length)];
       const mirrored = prompt.split(/\s+/).slice(0, 24).join(' ');
       return `Local demo mode. You said: "${mirrored}"\n\n${tip}`;
     }
 
-    // === Events ===
     el.composer.addEventListener('submit', async (e) => {
       e.preventDefault();
       if (state.busy) return;
@@ -246,32 +179,25 @@
       if (!text) return;
       el.input.value = '';
       el.input.style.height = 'auto';
-
       addMessage('user', text);
       state.busy = true;
       el.sendBtn.disabled = true;
       const thinking = addThinkingBubble();
-
       const res = await askOpenRouter();
       thinking.textContent = res.text;
-
-      // Replace thinking bubble with final assistant bubble style
       thinking.className = 'rounded-2xl px-4 py-3 text-[15px] leading-relaxed bg-gray-100 text-gray-800 whitespace-pre-wrap';
       state.messages[state.messages.length - 1] = { role: 'assistant', content: res.text };
-
       el.sendBtn.disabled = false;
       state.busy = false;
       queueMicrotask(() => el.chat.scrollTo({ top: el.chat.scrollHeight, behavior: 'smooth' }));
     });
 
-    // Auto-resize textarea
     el.input.addEventListener('input', () => {
       el.input.style.height = 'auto';
-      const h = Math.min(el.input.scrollHeight, 160); // cap at 160px
+      const h = Math.min(el.input.scrollHeight, 160);
       el.input.style.height = h + 'px';
     });
 
-    // Enter to send, Shift+Enter for new line
     el.input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
@@ -279,30 +205,21 @@
       }
     });
 
-    // Clear chat
     el.clearBtn.addEventListener('click', () => clearChat(false));
-
-    // New chat (fresh intro)
     el.newChatBtn.addEventListener('click', () => clearChat(true));
-
-    // Set API key
     el.setApiBtn.addEventListener('click', () => {
       const current = store.apiKey ? '********' : '';
       const input = prompt('Enter OpenRouter API key (stored locally):', current);
-      if (input === null) return; // cancel
+      if (input === null) return;
       store.apiKey = input === '********' ? store.apiKey : (input.trim());
       alert(store.apiKey ? 'API key saved locally.' : 'API key cleared.');
     });
-
-    // Set Model
-    el.setModelBtn.addEventListener('click', () => {
+    el.modelBadge.addEventListener('click', () => {
       const input = prompt('Enter model name (e.g., openai/gpt-4o):', store.model);
       if (input === null) return;
-      const name = input.trim() || 'openai/gpt-4o';
-      store.model = name;
+      store.model = input.trim() || 'openai/gpt-4o';
     });
 
-    // Init
     updateStatus();
     el.modelName.textContent = store.model;
   </script></body>
