Spaces:

afaceuser09
/

InfinityGRM

Runtime error

App Files Files Community

afaceuser09 commited on 3 days ago

Commit

4af7e95

verified ·

1 Parent(s): 8f58604

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +1967 -596

static/index.html CHANGED Viewed

@@ -1,625 +1,1996 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Infinity GRM</title>
-  <link rel="stylesheet"
-href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/marked-katex-extension/lib/index.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-  body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif;
-  transition: all 0.5s ease-in-out;
-}
-.chat-content-scroll::-webkit-scrollbar {
-  width: 8px;
-}
-.chat-content-scroll::-webkit-scrollbar-track {
-  background: #ffffff;
-}
-.chat-content-scroll::-webkit-scrollbar-thumb {
-  background: #e0e0e0;
-  border-radius: 4px;
-}
-.input-shadow {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 4px 0 rgba(0, 0, 0, 0.07);
-}
-.send-btn-active {
-  background-color: #000000;
-  color: #fff;
-}
-.drop-zone.drag-over {
-  background-color: #f0f4f8;
-  border-color: #1a73e8;
-}
-#chat-input-div {
-  max-height: 96px;
-  overflow-y: auto;
-  min-height: 96px;
-  padding: 12px 16px;
-}
-#chat-input-div img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin-top: 8px;
-}
-[contentEditable=true]:empty:before {
-  content: attr(data-placeholder);
-  color: #9ca3af;
-  pointer-events: none;
-  display: block;
-}
-#messages {
-  height: calc(100vh - 56px);
-  overflow-y: auto;
-}
-/* Voice button listening state */
-#voice-btn.listening {
-  color: #000000 !important;
-  background-color: #e0e0e0 !important;
-}
-/* Siri pulse animation */
-@keyframes siri-pulse {
-  0%, 100% {
-    transform: scale(1);
-    filter: drop-shadow(0 0 3px rgb(120, 160, 255));
-    opacity: 0.9;
-  }
-  50% {
-    transform: scale(1.1);
-    filter: drop-shadow(0 0 12px rgb(120, 160, 255));
-    opacity: 1;
-  }
-}
-.siri-animate {
-  animation: siri-pulse 1.5s ease-in-out infinite;
-  opacity: 1 !important;
-}
-/* Image positioned inside input bar */
-#siri-anim-image {
-  transition: opacity 0.3s ease;
-  opacity: 0;
-  pointer-events: none;
-}
-/* Plus and switch chat buttons container */
-.chat-control-buttons {
-  position: fixed;
-  bottom: 1rem;
-  left: 1rem;
-  display: flex;
-  gap: 0.5rem;
-  z-index: 60;
-}
-.ai-response{
-    max-width:900px;
-    margin:40px auto;
-    background:white;
-    padding:40px;
-    border-radius:0;
-    box-shadow:none;
-    line-height:1.8;
-    font-size:16px;
-}
-.ai-response p{
-    margin:1em 0;
-}
-.ai-response ul,
-.ai-response ol{
-    margin:1em 0;
-    padding-left:2rem;
-}
-.ai-response li{
-    margin:.5em 0;
-}
-.ai-response pre{
-    overflow:auto;
-    padding:16px;
-    border-radius:10px;
-    background:#111827;
-    color:white;
-}
-/* Gradio-style Clean Code Blocks */
-.ai-response code {
-  font-family: Consolas, Montserrat, monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  display: block;
-  /* Gradio Color Palette Variables */
-  background-color: #F1F3F5; /* Soft gray background (neutral-50) */
-  color: #000000; /* Dark charcoal text color (neutral-700) */
-  /* Borders and Edges */
-  border: 1px solid #e5e7eb; /* Soft border color (neutral-200) */
-  border-radius: 8px; /* Clean rounded panel corners */
-  /* Sizing and Real Estate */
-  padding: 12px 16px; /* Precise internal spatial layout */
-  margin: 0; /* Ensures the code drops completely flush to its frame */
-  overflow-x: auto; /* Clean horizontal scrollbar mechanism */
-  width: 100%;
-  box-sizing: border-box;
-}
-/* Force-neutralize the default <pre> block settings wrapper */
-pre, .ai-response-container {
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 8px 0 !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-.ai-response table{
-    border-collapse:collapse;
-}
-.ai-response th,
-.ai-response td{
-    border:1px solid #ddd;
-    padding:8px;
 }
 </style>
 </head>
 <body>
-  <!-- Top Bar -->
-  <nav
-    class="fixed top-0 left-0 right-0 bg-white flex items-center justify-between px-1 h-14 z-50"
-  >
-    <div>
-      <img
-        src="https://copilot.microsoft.com/th/id/BCO.cc808577-1db9-4523-90a6-be7b2abee261.png"
-        alt="Logo"
-        class="h-20 w-auto object-contain"
-      />
-    </div>
-    <div class="flex space-x-3">
-      <a
-        href="login.html"
-        class="bg-black text-white px-4 py-2 rounded-full border-2 border-black hover:bg-black transition-colors duration-200 inline-flex items-center justify-center"
-      >
-        Log In
-      </a>
-      <!-- Stripe Subscription Navbar Trigger Element -->
-<button id="checkout-button" class="bg-white text-gray-800 px-4 py-2 rounded-full border-2 border-gray-200 hover:bg-gray-100 transition-colors duration-200 inline-flex items-center justify-center font-medium cursor-pointer">
-  Sign Up For Free
-</button>
-    </div>
-  </nav>
-  <!-- CHAT PAGE -->
-  <div
-    id="chat-page"
-    class="w-full flex flex-col justify-center items-center h-screen pt-14 overflow-hidden transition-all duration-500 hidden"
-    data-state="initial"
-  >
-    <!-- Main Chat Area -->
-    <div
-      id="messages"
-      class="hidden flex-grow overflow-y-auto px-4 sm:px-16 md:px-24 lg:px-48 py-8 chat-content-scroll w-full max-w-7xl mx-auto"
     >
-      <div class="w-full max-w-6xl mx-auto space-y-8">
-        <!-- Messages populated here -->
-      </div>
-    </div>
-    <!-- Input Area -->
-    <div id="input-area" class="w-full p-4 transition-all duration-500 max-w-3xl">
-      <div class="flex flex-col items-center">
-        <h1
-          id="infinity-ai-text"
-          class="text-3xl font-semibold mb-6 transition-opacity duration-300"
         >
-          Infinity GRM
-        </h1>
-        <div
-          id="drop-zone"
-          class="relative flex items-end bg-white rounded-xl border border-gray-300 input-shadow w-full max-w-xl transition-colors duration-200"
         >
-          <img
-            id="siri-anim-image"
-            src="https://copilot.microsoft.com/th/id/BCO.e89797dc-19f9-4b01-b660-67d68d16fd2f.png"
-            alt="Siri Animation"
-            class="absolute bottom-2 left-4 w-10 h-10 object-contain"
-          />
-          <div
-            id="chat-input-div"
-            contentEditable="true"
-            data-placeholder="Ask me anything..."
-            class="flex-grow p-3 pl-16 pr-20 bg-transparent text-gray-800 focus:outline-none resize-none overflow-y-auto rounded-xl"
-          ></div>
-          <button
-            id="voice-btn"
-            class="absolute right-12 bottom-2 w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-200 p-2 transition-colors duration-200"
-            title="Voice Input"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-5 h-5"
             >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 1.5a3 3 0 00-3 3v7a3 3 0 006 0v-7a3 3 0 00-3-3z"
-              />
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M19.5 10.5v1.5a6 6 0 01-12 0v-1.5"
-              />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v3" />
-            </svg>
-           <button
-id="send-btn"
-class="absolute right-2 bottom-2 w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-200 p-2 transition-colors duration-200"
->
-<svg
-xmlns="http://www.w3.org/2000/svg"
-fill="none"
-viewBox="0 0 24 24"
-stroke-width="1.5"
-stroke="currentColor"
-class="w-5 h-5"
->
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
-              />
-            </svg>
-          </button>
-        </div>
-        <p class="text-center text-xs text-gray-400 mt-2">
-          Infinity GRM can make mistakes. Check important info.
-        </p>
-      </div>
-    </div>
-  </div>
-<!-- LOGIN PAGE -->
-  <div id="login-page" class="flex items-center justify-center h-screen hidden">
-    <div class="bg-white p-8 rounded-xl input-shadow w-full max-w-sm">
-      <h1 class="text-3xl font-semibold text-center mb-6">Log In</h1>
-      <form id="login-form" action="#" method="POST" onsubmit="return false;">
-        <div class="mb-4">
-          <label for="login-email" class="block text-sm font-medium text-gray-700">Email Address</label>
-          <input
-            type="email"
-            id="login-email"
-            name="email"
-            class="mt-1 block w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-1 focus:ring-black-500"
-            required
-          />
-        </div>
-        <div class="mb-6">
-          <label for="login-password" class="block text-sm font-medium text-gray-700">Password</label>
-          <input
-            type="password"
-            id="login-password"
-            name="password"
-            class="mt-1 block w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500"
-            required
-          />
-        </div>
-        <div>
-          <button
-            type="submit"
-            class="w-full py-2 px-4 bg-black text-white rounded-full hover:bg-black transition-colors duration-200"
-          >
-            Log In
-          </button>
         </div>
-      </form>
-      <p class="mt-6 text-center text-sm">
-        Don't have an account?
-        <button
-          onclick="showPage('signup-page')"
-          class="text-black hover:underline"
-        >
-          Sign Up For Free
-        </button>
-      </p>
-      <p class="mt-2 text-center text-sm">
-        <button
-          onclick="showPage('chat-page')"
-          class="text-black hover:underline"
         >
-          Back to chat
-        </button>
-      </p>
-    </div>
-  </div>
-  <!-- Chat Control Buttons -->
-  <div class="chat-control-buttons">
-    <button id="new-chat-btn"
-      class="w-10 h-10 rounded-full bg-black text-white flex items-center justify-center shadow-lg hover:bg-gray-900 transition-colors"
-      title="New Chat" aria-label="Create New Chat"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-        class="w-6 h-6">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-      </svg>
-    </button>
-    <button id="switch-chat-btn"
-      class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center shadow-lg hover:bg-gray-300 transition-colors"
-      title="Switch Chat" aria-label="Switch Chat"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-        class="w-6 h-6">
-        <path stroke-linecap="round" stroke-linejoin="round"
-          d="M4 17v1a2 2 0 002 2h12a2 2 0 002-2v-1M4 7V6a2 2 0 012-2h12a2 2 0 012 2v1M8 10h8M8 14h8" />
-      </svg>
-    </button>
-  </div>
-  <!-- Switch Chat Modal -->
-  <div id="chat-modal" class="hidden fixed inset-0 z-50 bg-black bg-opacity-40 flex justify-center items-center">
-    <div class="bg-white p-6 rounded-xl shadow-lg w-80">
-      <h3 class="font-semibold text-lg mb-3">Your Chats</h3>
-      <ul id="chat-list" class="space-y-2"></ul>
-      <!-- Updated class to 'rounded-full' for completely rounded sides -->
-      <button id="close-modal" class="mt-4 px-4 py-1 rounded-full bg-black text-white hover:bg-black w-full">Close</button>
-    </div>
-  </div>
-      <script>
-        if (typeof markedKatex !== "undefined") {
-    marked.use(markedKatex({
-        throwOnError: false
-    }));
-}
-  document.addEventListener("DOMContentLoaded", () => {
-  const chatPage = document.getElementById("chat-page");
-  const chatInput = document.getElementById("chat-input-div");
-  const sendBtn = document.getElementById("send-btn");
-  const voiceBtn = document.getElementById("voice-btn");
-  const messagesContainerWrapper = document.getElementById("messages");
-  const messagesContainer = document.querySelector("#messages .max-w-3xl") || messagesContainerWrapper.querySelector("div");
-  const infinityAiText = document.getElementById("infinity-ai-text");
-  const dropZone = document.getElementById("drop-zone");
-  const siriImage = document.getElementById("siri-anim-image");
-  const newChatBtn = document.getElementById("new-chat-btn");
-  const switchChatBtn = document.getElementById("switch-chat-btn");
-  const chatModal = document.getElementById("chat-modal");
-  const chatList = document.getElementById("chat-list");
-  const closeModalBtn = document.getElementById("close-modal");
-  // Chat management variables
-  let chats = [];
-  let currentChat = { id: Date.now(), messages: [] };
-  const sessionId = "session_" + Math.random().toString(36).substring(2, 9);
-  function showMessagesArea() {
-    if (chatPage.getAttribute("data-state") === "initial") {
-      chatPage.classList.remove("justify-center", "items-center");
-      chatPage.classList.add("justify-between", "flex-col", "items-center");
-      messagesContainerWrapper.classList.remove("hidden");
-      chatPage.setAttribute("data-state", "expanded");
-    }
-  }
-  function addMessage(content, sender) {
-    const wrapper = document.createElement("div");
-    if (sender === "user") {
-        // User message stays as a bubble on the right
-        wrapper.className = "flex justify-end";
-        wrapper.innerHTML = `
-            <div class="bg-gray-100 rounded-xl p-4 max-w-xl">
-                ${content}
-            </div>
-        `;
-    } else {
-        // AI response is centered like a document
-        wrapper.className = "w-full flex justify-center";
-        let html = content;
-        // If Markdown libraries are loaded, render Markdown + sanitize
-        if (typeof marked !== "undefined" && typeof DOMPurify !== "undefined") {
-            html = DOMPurify.sanitize(marked.parse(content));
-        } else {
-            // Fallback: preserve line breaks
-            html = content.replace(/\n/g, "<br>");
-        }
-        wrapper.innerHTML = `
-            <div class="ai-response">
-                ${html}
             </div>
-        `;
     }
-    messagesContainer.appendChild(wrapper);
-    messagesContainerWrapper.scrollTop = messagesContainerWrapper.scrollHeight;
-}
-  function renderMessages() {
-    messagesContainer.innerHTML = "";
-    currentChat.messages.forEach(({ content, sender }) => addMessage(content, sender));
-    messagesContainerWrapper.scrollTop = messagesContainerWrapper.scrollHeight;
-  }
-  // ✅ FIXED: always save chats (even empty ones)
-  function saveCurrentChat() {
-    const existingIndex = chats.findIndex(c => c.id === currentChat.id);
-    if (existingIndex > -1) {
-      chats[existingIndex] = { ...currentChat };
-    } else {
-      chats.push({ ...currentChat });
     }
-  }
-  function createNewChat() {
-    saveCurrentChat();
-    currentChat = { id: Date.now(), messages: [] };
-    // ✅ ensure new chat is immediately logged
-    chats.push({ ...currentChat });
-renderMessages();
-    infinityAiText.style.opacity = '1';
-    chatPage.classList.remove("justify-between", "flex-col", "items-center");
-    chatPage.classList.add("justify-center", "items-center");
-    messagesContainerWrapper.classList.add("hidden");
-    chatPage.setAttribute("data-state", "initial");
-  }
-  async function sendMessage() {
-    const userMessageContent = chatInput.innerHTML.trim();
-    if (userMessageContent.length === 0) return;
-    showMessagesArea();
-    currentChat.messages.push({ content: userMessageContent, sender: "user" });
-    renderMessages();
-    chatInput.innerHTML = "";
-    updateSendButton();
-    infinityAiText.style.opacity = "0";
     try {
-    // Change line 813 to call your secure server script instead:
-const response = await fetch("/ai-bridge.php", {
-    method: "POST",
-    headers: {
-        "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-        message: userMessageContent,
-        session_id: sessionId
-    })
-});
-    const data = await response.json();
-    if (data.response) {
-        currentChat.messages.push({
-            content: data.response,
-            sender: "ai"
-        });
-    } else if (data.error) {
-        currentChat.messages.push({
-            content: "Error: " + data.error,
-            sender: "ai"
-        });
     }
-} catch (err) {
-    currentChat.messages.push({
-        content: "Failed to connect to the server.",
-        sender: "ai"
     });
 }
-renderMessages();
-  }
-  function updateSendButton() {
-    const hasText = chatInput.innerText.trim().length > 0;
-    const hasImages = chatInput.querySelector("img");
-    if (hasText || hasImages) {
-      sendBtn.classList.add("send-btn-active");
-      sendBtn.classList.remove("text-gray-500", "hover:bg-gray-200");
-    } else {
-      sendBtn.classList.remove("send-btn-active");
-      sendBtn.classList.add("text-gray-500", "hover:bg-gray-200");
     }
-  }
-  dropZone.addEventListener("dragover", e => {
-    e.preventDefault();
-    dropZone.classList.add("drag-over");
-  });
-  dropZone.addEventListener("dragleave", () => {
-    dropZone.classList.remove("drag-over");
-  });
-  dropZone.addEventListener("drop", e => {
-    e.preventDefault();
-    dropZone.classList.remove("drag-over");
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-      for (const file of files) {
-        if (file.type.startsWith("image/")) {
-          const reader = new FileReader();
-          reader.onload = ev => {
-            const img = document.createElement("img");
-            img.src = ev.target.result;
-            chatInput.appendChild(img);
-            updateSendButton();
-          };
-          reader.readAsDataURL(file);
-        }
-      }
     }
-  });
-  sendBtn.addEventListener("click", sendMessage);
-  chatInput.addEventListener("input", updateSendButton);
-  chatInput.addEventListener("keydown", e => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      if (sendBtn.classList.contains("send-btn-active")) sendMessage();
     }
-  });
-  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-  if (!SpeechRecognition) {
-    voiceBtn.style.display = "none";
-  } else {
-    const recognition = new SpeechRecognition();
-    recognition.lang = "en-US";
-    voiceBtn.addEventListener("click", () => {
-      if (voiceBtn.classList.contains("listening")) {
-        recognition.stop();
-        voiceBtn.classList.remove("listening");
-        siriImage.classList.remove("siri-animate");
-      } else {
-        recognition.start();
-        voiceBtn.classList.add("listening");
-        siriImage.classList.add("siri-animate");
-      }
-    });
-    recognition.onresult = event => {
-      const transcript = event.results[0][0].transcript;
-      chatInput.innerText += (chatInput.innerText ? " " : "") + transcript;
-      updateSendButton();
-    };
-    recognition.onend = () => {
-      voiceBtn.classList.remove("listening");
-      siriImage.classList.remove("siri-animate");
-    };
-  }
-  // Chat Modal
-  switchChatBtn.addEventListener("click", () => {
-    saveCurrentChat();
-    if (chats.length === 0) {
-      chatList.innerHTML = `<li class='text-gray-400 text-sm'>No saved chats.</li>`;
-    } else {
-      chatList.innerHTML = chats.map(chat => `
-        <li>
-          <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200"
-            data-id="${chat.id}">
-            Chat #${chat.id.toString().slice(-4)}
-          </button>
-        </li>
-      `).join("");
-      chatList.querySelectorAll("button").forEach(btn => {
-        btn.addEventListener("click", e => {
-          const id = Number(e.currentTarget.getAttribute("data-id"));
-          const chat = chats.find(c => c.id === id);
-          if (chat) {
-            currentChat = { ...chat };
-            renderMessages();
-            chatModal.classList.add("hidden");
-            infinityAiText.style.opacity = "0";
-            showMessagesArea();
-          }
-        });
-      });
     }
-    chatModal.classList.remove("hidden");
-  });
-  closeModalBtn.addEventListener("click", () => {
-    chatModal.classList.add("hidden");
-  });
-  showPage('chat-page');
-  updateSendButton();
-  renderMessages();
-  // ✅ New Chat button works
-  newChatBtn.addEventListener("click", createNewChat);
-});
-    });
-function showPage(pageId) {
-  ['chat-page', 'login-page', 'signup-page'].forEach(id => {
-    const el = document.getElementById(id);
-    if (el) {
-      if (id === pageId) {
-        el.classList.remove('hidden');
-      } else {
-        el.classList.add('hidden');
-      }
     }
-  });
 }
-window.showPage = showPage;
-      </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Infinity GRM</title>
+<style>
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+html {
+    scroll-behavior: smooth;
+}
+body {
+    overflow-x: hidden;
+    background: #fff;
+}
+/* =========================
+   HEADER
+========================= */
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    background: #fff;
+    z-index: 1000;
+    transition: background-color 0.3s ease;
+}
+header.dark {
+    background: #000;
+}
+.logo img {
+    height: 50px;
+    width: auto;
+    display: block;
+}
+.nav {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 40px;
+}
+.nav a {
+    color: #000;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 15px;
+    transition: color 0.3s ease;
+}
+header.dark .nav a {
+    color: #fff;
+}
+/* =========================
+   ACCOUNT
+========================= */
+.account {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: #000;
+    display: grid;
+    place-items: center;
+    text-decoration: none;
+}
+.account svg {
+    width: 23px;
+    height: 23px;
+    display: block;
+    fill: #fff;
+}
+header.dark .account {
+    background: #fff;
+}
+header.dark .account svg {
+    fill: #000;
+}
+/* =========================
+   MAIN
+========================= */
+main {
+    min-height: 100vh;
+    padding-top: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+/* =========================
+   HOME
+========================= */
+.home {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+h1 {
+    font-size: 4rem;
+    margin-bottom: 30px;
+}
+/* =========================
+   INPUT BAR
+========================= */
+.input {
+    width: min(680px, 90%);
+    min-height: 68px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 18px;
+    box-shadow:
+        0 5px 25px rgba(0, 0, 0, 0.05);
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+.input:focus-within {
+    border-color: #aaa;
+    box-shadow:
+        0 5px 25px rgba(0, 0, 0, 0.08);
+}
+/* =========================
+   TEXT INPUT
+========================= */
+.edit {
+    width: 100%;
+    min-height: 66px;
+    max-height: 180px;
+    padding:
+        18px
+        105px
+        18px
+        18px;
+    outline: none;
+    border: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: 16px;
+    line-height: 1.4;
+    color: #111;
+    cursor: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+    /*
+        Makes the contenteditable behave
+        consistently after being cleared.
+    */
+    caret-color: #000;
+}
+.edit:focus {
+    outline: none;
+}
+/* =========================
+   ASK ME ANYTHING PLACEHOLDER
+========================= */
+/*
+    Because this is contenteditable rather
+    than a normal input, we use ::before.
+    When the element is completely empty,
+    "Ask me anything..." appears.
+    Your JavaScript must clear the element
+    with innerHTML = "" after sending.
+*/
+.edit:empty::before {
+    content: attr(data-placeholder);
+    color: #aaa;
+    pointer-events: none;
+    user-select: none;
+}
+/*
+    Keep the placeholder visible when the
+    contenteditable receives focus.
+*/
+.edit:focus:empty::before {
+    color: #aaa;
+}
+/* =========================
+   BUTTON RESET
+========================= */
+button {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    -webkit-appearance: none;
+    appearance: none;
+}
+/* =========================
+   MICROPHONE
+========================= */
+.voice {
+    position: absolute;
+    right: 52px;
+    bottom: 14px;
+    width: 38px;
+    height: 38px;
+    min-width: 38px;
+    min-height: 38px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #777;
+    background: transparent;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        transform 0.15s ease;
+}
+.voice:hover {
+    background: #eee;
+    color: #333;
+}
+.voice:active {
+    transform: scale(0.94);
+}
+.voice.active {
+    background: #eee;
+    color: #000;
+}
+/* =========================
+   SEND / UP ARROW
+========================= */
+/*
+    INACTIVE STATE
+    This matches the gray circle from
+    your reference image.
+    It appears even when the input is empty.
+*/
+.send {
+    position: absolute;
+    right: 10px;
+    bottom: 14px;
+    width: 38px;
+    height: 38px;
+    min-width: 38px;
+    min-height: 38px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #b3b3b3;
+    color: #fff;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        transform 0.15s ease;
+}
+/*
+    INACTIVE HOVER
+*/
+.send:hover {
+    background: #a5a5a5;
+    color: #fff;
+}
+/*
+    CLICK
+*/
+.send:active {
+    transform: scale(0.94);
+}
+/*
+    ACTIVE STATE
+    JavaScript adds .active when the
+    user enters text.
+*/
+.send.active {
+    background: #000;
+    color: #fff;
+}
+/*
+    ACTIVE HOVER
+*/
+.send.active:hover {
+    background: #222;
+    color: #fff;
+}
+/* =========================
+   SVG ICONS
+========================= */
+.voice svg,
+.send svg {
+    display: block;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    max-width: 20px;
+    max-height: 20px;
+    flex-shrink: 0;
+    overflow: visible;
+}
+.voice svg {
+    width: 21px;
+    height: 21px;
+    min-width: 21px;
+    min-height: 21px;
+    max-width: 21px;
+    max-height: 21px;
+}
+.voice svg path,
+.send svg path {
+    fill: none;
+    stroke: currentColor;
+    vector-effect: non-scaling-stroke;
+}
+/* =========================
+   MISSION BUTTON
+========================= */
+.mission-btn {
+    margin-top: 20px;
+    padding:
+        15px
+        35px;
+    border-radius: 50px;
+    background: #000;
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+}
+.mission-btn:hover {
+    background: #222;
+    transform: translateY(-1px);
+}
+/* =========================
+   CHAT
+========================= */
+.chat {
+    display: none;
+    position: fixed;
+    top: 80px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    flex-direction: column;
+    background: #fff;
+    z-index: 500;
+    /*
+        Prevent the page itself from scrolling.
+    */
+    overflow: hidden;
+}
+/* =========================
+   CHAT MESSAGES
+========================= */
+.messages {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding:
+        35px
+        20px
+        150px;
+    /*
+        Keep scrolling inside the messages
+        area instead of moving the webpage.
+    */
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+}
+.messages-inner {
+    max-width: 850px;
+    margin: 0 auto;
+}
+/* =========================
+   MESSAGE
+========================= */
+.message {
+    display: flex;
+    margin-bottom: 25px;
+}
+/* =========================
+   USER MESSAGE
+========================= */
+.user {
+    justify-content: flex-end;
+}
+.user div {
+    max-width: 70%;
+    background: #f1f1f1;
+    padding:
+        12px
+        17px;
+    border-radius:
+        20px
+        20px
+        6px
+        20px;
+    color: #111;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+/* =========================
+   AI MESSAGE
+========================= */
+.ai div {
+    max-width: 85%;
+    color: #111;
+    line-height: 1.7;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+/* =========================
+   CHAT BOTTOM INPUT
+========================= */
+.bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    padding:
+        15px
+        20px
+        22px;
+    background:
+        linear-gradient(
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, 0.95) 40%,
+            #fff 70%
+        );
+    z-index: 10;
+}
+/*
+    Keep the chat input white.
+*/
+.bottom .input {
+    width: min(680px, 100%);
+    background: #fff;
+}
+/*
+    The same gray inactive send button
+    applies to the chat input.
+*/
+.bottom .send {
+    background: #b3b3b3;
+    color: #fff;
+}
+.bottom .send:hover {
+    background: #a5a5a5;
+    color: #fff;
+}
+.bottom .send.active {
+    background: #000;
+    color: #fff;
+}
+.bottom .send.active:hover {
+    background: #222;
+    color: #fff;
+}
+/* =========================
+   MISSION
+========================= */
+#mission {
+    min-height: 100vh;
+    background: #000;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding:
+        100px
+        10%;
+}
+#mission h2 {
+    font-size: 4rem;
+    margin-bottom: 30px;
+}
+#mission p {
+    max-width: 900px;
+    font-size: 1.2rem;
+    line-height: 1.9;
+}
+/* =========================
+   MOBILE
+========================= */
+@media (max-width: 700px) {
+    header {
+        height: 70px;
+        padding:
+            0
+            15px;
+    }
+    .logo img {
+        height: 42px;
+    }
+    .nav {
+        gap: 15px;
+    }
+    .nav a {
+        font-size: 12px;
+    }
+    .account {
+        width: 42px;
+        height: 42px;
+    }
+    main {
+        padding-top: 70px;
+    }
+    h1 {
+        font-size: 2.5rem;
+    }
+    .input {
+        width: 92%;
+        min-height: 64px;
+    }
+    .edit {
+        min-height: 62px;
+        padding:
+            17px
+            105px
+            17px
+            16px;
+    }
+    .chat {
+        top: 70px;
+    }
+    .messages {
+        padding:
+            30px
+            15px
+            150px;
+    }
+    .user div {
+        max-width: 85%;
+    }
+    .ai div {
+        max-width: 92%;
+    }
+    #mission {
+        padding:
+            80px
+            8%;
+    }
+    #mission h2 {
+        font-size: 2.5rem;
+    }
+    #mission p {
+        font-size: 1rem;
+        line-height: 1.7;
+    }
 }
 </style>
 </head>
 <body>
+<!-- =========================
+     HEADER
+========================= -->
+<header id="header">
+    <a
+        class="logo"
+        href="index.html"
     >
+        <img
+            src="https://copilot.microsoft.com/th/id/BCO.cc808577-1db9-4523-90a6-be7b2abee261.png"
+            alt="InfinityGRM"
         >
+    </a>
+    <nav class="nav">
+        <a href="index.html">
+            Home
+        </a>
+        <a href="labs.html">
+            Labs
+        </a>
+    </nav>
+    <a
+        href="signup.html"
+        class="account"
+        aria-label="Account"
+    >
+        <svg
+            viewBox="0 0 24 24"
+            aria-hidden="true"
         >
+            <path d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.34 0-10 1.68-10 5v3h20v-3c0-3.32-6.66-5-10-5z"/>
+        </svg>
+    </a>
+</header>
+<!-- =========================
+     MAIN
+========================= -->
+<main>
+    <!-- =========================
+         HOME
+    ========================= -->
+    <section
+        class="home"
+        id="home"
+    >
+        <h1>
+            InfinityGRM
+        </h1>
+        <div class="input">
+            <!-- HOME INPUT -->
+            <div
+                id="input"
+                class="edit"
+                contenteditable="true"
+                role="textbox"
+                aria-label="Ask me anything"
+                data-placeholder="Ask me anything..."
+            ></div>
+            <!-- HOME DICTATION -->
+            <button
+                id="voice"
+                class="voice"
+                type="button"
+                aria-label="Dictate"
+                title="Dictate"
             >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M12 1.5a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0v-7a3 3 0 0 0-3-3z"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M19.5 10.5v1.5a7.5 7.5 0 0 1-15 0v-1.5"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                    />
+                    <path
+                        d="M12 19.5v3"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                    />
+                </svg>
+            </button>
+            <!-- HOME SEND -->
+            <button
+                id="send"
+                class="send"
+                type="button"
+                aria-label="Send"
+                title="Send"
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M12 19V5m0 0-6 6m6-6 6 6"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </button>
         </div>
+        <!-- MISSION BUTTON -->
+        <a
+            href="#mission"
+            class="mission-btn"
         >
+            Our Mission
+        </a>
+    </section>
+    <!-- =========================
+         CHAT
+    ========================= -->
+    <section
+        class="chat"
+        id="chat"
     >
+        <!-- MESSAGE AREA -->
+        <div
+            class="messages"
+            id="messagesContainer"
+        >
+            <div
+                class="messages-inner"
+                id="messages"
+            ></div>
+        </div>
+        <!-- =========================
+             CHAT INPUT
+        ========================= -->
+        <div class="bottom">
+            <div class="input">
+                <!-- CHAT INPUT -->
+                <div
+                    id="chatInput"
+                    class="edit"
+                    contenteditable="true"
+                    role="textbox"
+                    aria-label="Ask me anything"
+                    data-placeholder="Ask me anything..."
+                ></div>
+                <!-- CHAT DICTATION -->
+                <button
+                    id="chatVoice"
+                    class="voice"
+                    type="button"
+                    aria-label="Dictate"
+                    title="Dictate"
+                >
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M12 1.5a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0v-7a3 3 0 0 0-3-3z"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                        <path
+                            d="M19.5 10.5v1.5a7.5 7.5 0 0 1-15 0v-1.5"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                        />
+                        <path
+                            d="M12 19.5v3"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                        />
+                    </svg>
+                </button>
+                <!-- CHAT SEND -->
+                <button
+                    id="chatSend"
+                    class="send"
+                    type="button"
+                    aria-label="Send"
+                    title="Send"
+                >
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M12 19V5m0 0-6 6m6-6 6 6"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
             </div>
+        </div>
+    </section>
+</main>
+<!-- =========================
+     MISSION
+========================= -->
+<section id="mission">
+    <h2>
+        Our Mission
+    </h2>
+    <p>
+        Our mission is to develop safe superintelligence that elevates and
+        benefits all of humanity. We believe in building advanced AI systems,
+        infrastructure, and breakthroughs that empower individuals and help
+        shape a flourishing future. Every contribution allows us to continue
+        pioneering new frontiers, supporting ambitious research, and ensuring
+        that the rewards of technological progress make a lasting difference
+        for communities around the world.
+    </p>
+</section>
+<script>
+/* =========================
+   ELEMENTS
+========================= */
+const header =
+    document.getElementById("header");
+const mission =
+    document.getElementById("mission");
+const home =
+    document.getElementById("home");
+const chat =
+    document.getElementById("chat");
+const input =
+    document.getElementById("input");
+const send =
+    document.getElementById("send");
+const chatInput =
+    document.getElementById("chatInput");
+const chatSend =
+    document.getElementById("chatSend");
+const messages =
+    document.getElementById("messages");
+const messagesContainer =
+    document.getElementById("messagesContainer");
+const voice =
+    document.getElementById("voice");
+const chatVoice =
+    document.getElementById("chatVoice");
+/* =========================
+   CHAT STATE
+========================= */
+/*
+    This tells the header whether the user
+    is currently inside the chat.
+    When true, the header will ALWAYS remain white.
+*/
+let chatActive = false;
+/* =========================
+   SESSION ID
+========================= */
+/*
+    One session ID is created for the entire
+    browser session.
+    This allows multiple questions to belong
+    to the same conversation.
+*/
+const sessionId =
+    "session_" +
+    Math.random()
+        .toString(36)
+        .slice(2) +
+    "_" +
+    Date.now();
+/* =========================
+   HEADER
+========================= */
+function updateHeader() {
+    /*
+        CRITICAL FIX:
+        If chat is open, never turn the header black.
+        The user can scroll through 50+ messages and
+        the header will stay white.
+    */
+    if (chatActive) {
+        header.classList.remove("dark");
+        return;
     }
+    /*
+        Normal homepage behavior.
+        The header becomes black when the Mission
+        section reaches the top of the viewport.
+    */
+    const missionTop =
+        mission.getBoundingClientRect().top;
+    header.classList.toggle(
+        "dark",
+        missionTop <= 100
+    );
+}
+/*
+    Listen for normal page scrolling.
+    This does NOT affect the header while chatActive
+    is true.
+*/
+window.addEventListener(
+    "scroll",
+    updateHeader
+);
+/*
+    Initial header state.
+*/
+window.addEventListener(
+    "load",
+    updateHeader
+);
+/* =========================
+   GET CLEAN TEXT
+========================= */
+function getInputText(element) {
+    return element.innerText
+        .replace(/\u200B/g, "")
+        .replace(/\u00A0/g, " ")
+        .trim();
+}
+/* =========================
+   CLEAR CONTENTEDITABLE
+========================= */
+function clearInput(element) {
+    /*
+        innerHTML = "" is important.
+        contenteditable browsers can insert <br>
+        elements that would otherwise prevent
+        :empty from working correctly.
+    */
+    element.innerHTML = "";
+    element.textContent = "";
+}
+/* =========================
+   BUTTON STATE
+========================= */
+function updateButton(
+    inputElement,
+    buttonElement
+) {
+    const text =
+        getInputText(inputElement);
+    buttonElement.classList.toggle(
+        "active",
+        text.length > 0
+    );
+}
+/* =========================
+   ADD MESSAGE
+========================= */
+function addMessage(
+    text,
+    type
+) {
+    const message =
+        document.createElement("div");
+    message.className =
+        "message " + type;
+    const content =
+        document.createElement("div");
+    content.textContent =
+        text;
+    message.appendChild(
+        content
+    );
+    messages.appendChild(
+        message
+    );
+    /*
+        Scroll ONLY the chat message area.
+        This is important because the page itself
+        should not move when new messages arrive.
+    */
+    requestAnimationFrame(() => {
+        messagesContainer.scrollTop =
+            messagesContainer.scrollHeight;
+    });
+}
+/* =========================
+   SHOW CHAT
+========================= */
+function showChat() {
+    /*
+        Mark chat as active FIRST.
+        This prevents the header scroll handler
+        from turning it black.
+    */
+    chatActive = true;
+    /*
+        Immediately force the header white.
+    */
+    header.classList.remove(
+        "dark"
+    );
+    /*
+        Hide homepage.
+    */
+    home.style.display =
+        "none";
+    /*
+        Show chat.
+    */
+    chat.style.display =
+        "flex";
+    /*
+        Prevent the main document from scrolling
+        while the chat is active.
+    */
+    document.body.style.overflow =
+        "hidden";
+    /*
+        Focus the chat input.
+    */
+    requestAnimationFrame(() => {
+        chatInput.focus();
+    });
+}
+/* =========================
+   SEND MESSAGE
+========================= */
+async function sendMessage(
+    inputElement,
+    buttonElement
+) {
+    const text =
+        getInputText(inputElement);
+    /*
+        Do nothing if empty.
+    */
+    if (!text) {
+        return;
     }
+    /*
+        Open chat.
+    */
+    showChat();
+    /*
+        Add user's message immediately.
+    */
+    addMessage(
+        text,
+        "user"
+    );
+    /*
+        Clear the input.
+        This makes the placeholder
+        "Ask me anything..."
+        appear again.
+    */
+    clearInput(
+        inputElement
+    );
+    /*
+        Reset send button.
+    */
+    updateButton(
+        inputElement,
+        buttonElement
+    );
     try {
+        const response = await fetch(
+    "ai-bridge.php",
+    {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            message: text,
+            session_id: sessionId
+        })
+    }
+);
+        /*
+            Check HTTP status.
+        */
+        if (!response.ok) {
+            throw new Error(
+                "Server returned " +
+                response.status
+            );
+        }
+        /*
+            Convert response to JSON.
+        */
+        const data =
+            await response.json();
+        /*
+            Add AI response.
+        */
+        addMessage(
+            data.response ||
+            (
+                "Error: " +
+                (
+                    data.error ||
+                    "No response"
+                )
+            ),
+            "ai"
+        );
+    } catch (error) {
+        console.error(
+            "Chat error:",
+            error
+        );
+        addMessage(
+            "Failed to connect to the server.",
+            "ai"
+        );
     }
+    /*
+        ALWAYS reset the chat input.
+        This guarantees the placeholder is
+        visible after the AI responds.
+    */
+    clearInput(
+        chatInput
+    );
+    updateButton(
+        chatInput,
+        chatSend
+    );
+    /*
+        Keep the chat input ready for
+        another question.
+    */
+    requestAnimationFrame(() => {
+        chatInput.focus();
     });
 }
+/* =========================
+   HOME INPUT
+========================= */
+input.addEventListener(
+    "input",
+    () => {
+        updateButton(
+            input,
+            send
+        );
     }
+);
+/* =========================
+   CHAT INPUT
+========================= */
+chatInput.addEventListener(
+    "input",
+    () => {
+        updateButton(
+            chatInput,
+            chatSend
+        );
     }
+);
+/* =========================
+   SEND BUTTON
+========================= */
+send.addEventListener(
+    "click",
+    () => {
+        sendMessage(
+            input,
+            send
+        );
     }
+);
+chatSend.addEventListener(
+    "click",
+    () => {
+        sendMessage(
+            chatInput,
+            chatSend
+        );
     }
+);
+/* =========================
+   ENTER TO SEND
+========================= */
+input.addEventListener(
+    "keydown",
+    event => {
+        /*
+            Enter = send
+            Shift + Enter = new line
+        */
+        if (
+            event.key === "Enter" &&
+            !event.shiftKey
+        ) {
+            event.preventDefault();
+            sendMessage(
+                input,
+                send
+            );
+        }
+    }
+);
+chatInput.addEventListener(
+    "keydown",
+    event => {
+        /*
+            Enter = send
+            Shift + Enter = new line
+        */
+        if (
+            event.key === "Enter" &&
+            !event.shiftKey
+        ) {
+            event.preventDefault();
+            sendMessage(
+                chatInput,
+                chatSend
+            );
+        }
+    }
+);
+/* =========================
+   DICTATION
+========================= */
+function setupDictation(
+    button,
+    targetInput,
+    targetSendButton
+) {
+    const SpeechRecognition =
+        window.SpeechRecognition ||
+        window.webkitSpeechRecognition;
+    /*
+        Browser doesn't support speech recognition.
+    */
+    if (!SpeechRecognition) {
+        button.addEventListener(
+            "click",
+            () => {
+                alert(
+                    "Voice dictation is not supported in this browser."
+                );
+            }
+        );
+        return;
     }
+    const recognition =
+        new SpeechRecognition();
+    recognition.continuous =
+        false;
+    recognition.interimResults =
+        false;
+    recognition.lang =
+        "en-US";
+    /* =========================
+       START
+    ========================= */
+    button.addEventListener(
+        "click",
+        () => {
+            try {
+                recognition.start();
+                button.classList.add(
+                    "active"
+                );
+            } catch (error) {
+                console.log(
+                    "Speech recognition:",
+                    error
+                );
+            }
+        }
+    );
+    /* =========================
+       RESULT
+    ========================= */
+    recognition.addEventListener(
+        "result",
+        event => {
+            const transcript =
+                event
+                    .results[0][0]
+                    .transcript;
+            /*
+                Add dictated text.
+            */
+            const existing =
+                getInputText(
+                    targetInput
+                );
+            if (existing) {
+                targetInput.innerText =
+                    existing +
+                    " " +
+                    transcript;
+            } else {
+                targetInput.innerText =
+                    transcript;
+            }
+            /*
+                Update send button.
+            */
+            updateButton(
+                targetInput,
+                targetSendButton
+            );
+            /*
+                Focus input.
+            */
+            targetInput.focus();
+        }
+    );
+    /* =========================
+       END
+    ========================= */
+    recognition.addEventListener(
+        "end",
+        () => {
+            button.classList.remove(
+                "active"
+            );
+        }
+    );
+    /* =========================
+       ERROR
+    ========================= */
+    recognition.addEventListener(
+        "error",
+        error => {
+            console.log(
+                "Dictation error:",
+                error
+            );
+            button.classList.remove(
+                "active"
+            );
+        }
+    );
 }
+/* =========================
+   ENABLE HOME DICTATION
+========================= */
+setupDictation(
+    voice,
+    input,
+    send
+);
+/* =========================
+   ENABLE CHAT DICTATION
+========================= */
+setupDictation(
+    chatVoice,
+    chatInput,
+    chatSend
+);
+/* =========================
+   INITIAL STATE
+========================= */
+clearInput(
+    input
+);
+clearInput(
+    chatInput
+);
+updateButton(
+    input,
+    send
+);
+updateButton(
+    chatInput,
+    chatSend
+);
+/*
+    Make sure the header starts white.
+*/
+header.classList.remove(
+    "dark"
+);
+</script>
 </body>
 </html>