Update static/index.html

static/index.html

@@ -109,21 +109,17 @@ href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
     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;
@@ -131,22 +127,18 @@ href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
     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 */
@@ -154,7 +146,6 @@ href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
   width: 100%;
   box-sizing: border-box;
 }
-
 /* Force-neutralize the default <pre> block settings wrapper */
 pre, .ai-response-container {
   background: transparent !important;
@@ -163,11 +154,9 @@ pre, .ai-response-container {
   border: none !important;
   box-shadow: none !important;
 }
-
 .ai-response table{
     border-collapse:collapse;
 }
-
 .ai-response th,
 .ai-response td{
     border:1px solid #ddd;
@@ -196,7 +185,7 @@ pre, .ai-response-container {
       </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">
-  Create A Free Account
+  Sign Up For Free
 </button>
     </div>
   </nav>
@@ -396,13 +385,10 @@ class="w-5 h-5"
   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");
@@ -411,14 +397,11 @@ class="w-5 h-5"
       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}
@@ -427,9 +410,7 @@ class="w-5 h-5"
     } 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));
@@ -437,54 +418,41 @@ class="w-5 h-5"
             // 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;
@@ -506,9 +474,7 @@ const response = await fetch("/ai-bridge.php", {
         session_id: sessionId
     })
 });
-
     const data = await response.json();
-
     if (data.response) {
         currentChat.messages.push({
             content: data.response,
@@ -526,10 +492,8 @@ const response = await fetch("/ai-bridge.php", {
         sender: "ai"
     });
 }
-
 renderMessages();
   }
-
   function updateSendButton() {
     const hasText = chatInput.innerText.trim().length > 0;
     const hasImages = chatInput.querySelector("img");
@@ -541,7 +505,6 @@ renderMessages();
       sendBtn.classList.add("text-gray-500", "hover:bg-gray-200");
     }
   }
-
   dropZone.addEventListener("dragover", e => {
     e.preventDefault();
     dropZone.classList.add("drag-over");
@@ -568,7 +531,6 @@ renderMessages();
       }
     }
   });
-
   sendBtn.addEventListener("click", sendMessage);
   chatInput.addEventListener("input", updateSendButton);
   chatInput.addEventListener("keydown", e => {
@@ -577,14 +539,12 @@ renderMessages();
       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();
@@ -596,23 +556,19 @@ renderMessages();
         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 {
@@ -624,7 +580,6 @@ renderMessages();
           </button>
         </li>
       `).join("");
-
       chatList.querySelectorAll("button").forEach(btn => {
         btn.addEventListener("click", e => {
           const id = Number(e.currentTarget.getAttribute("data-id"));
@@ -639,50 +594,17 @@ renderMessages();
         });
       });
     }
-
     chatModal.classList.remove("hidden");
   });
-
   closeModalBtn.addEventListener("click", () => {
     chatModal.classList.add("hidden");
   });
-
   showPage('chat-page');
   updateSendButton();
   renderMessages();
-
   // ✅ New Chat button works
   newChatBtn.addEventListener("click", createNewChat);
 });
-
-       // Stripe Checkout Portal Handshake Logic
-    document.getElementById('checkout-button').addEventListener('click', async () => {
-        const button = document.getElementById('checkout-button');
-        button.disabled = true;
-        button.innerText = 'Connecting...';
-
-        try {
-            // Forces your frontend button to talk safely to the root app server
-const response = await fetch(window.location.origin + '/create-checkout-session', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' }
-            });
-            
-            const data = await response.json();
-            
-            if (data.url) {
-                window.location.href = data.url;
-            } else {
-                alert('Unable to connect to your Stripe subscription endpoint.');
-                button.disabled = false;
-                button.innerText = 'Create A Free Account';
-            }
-        } catch (error) {
-            console.error('Stripe Handshake Fail:', error);
-            alert('Could not establish connection with backend handler.');
-            button.disabled = false;
-            button.innerText = 'Create A Free Account';
-        }
     });
         
 function showPage(pageId) {