Spaces:

Adieee5
/

ajnjdnjpek

Running

App Files Files Community

Adieee5 commited on Apr 16

Commit

3672af3

1 Parent(s): 07d9c40

Index theme

Browse files

Files changed (1) hide show

templates/index.html +39 -24

templates/index.html CHANGED Viewed

@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>University Assistant</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet"
-        href="{{ url_for('static', filename='style.css') }}">
     <script>
         tailwind.config = {
@@ -16,38 +17,51 @@
     </script>
 </head>
-<body class="bg-zinc-100 dark:bg-slate-950 text-black dark:text-white flex items-center justify-center min-h-screen">
-    <div class="flex w-full flex-col overflow-hidden border border-slate-800 dark:border-gray-700 shadow-lg rounded-lg h-screen">
         <div class="flex flex-col flex-grow overflow-hidden">
             <div id="chat-container" class="flex-grow overflow-y-auto p-3 space-y-3 bg-zinc-100 dark:bg-slate-950">
             </div>
-            <div class="border-t p-2 border-slate-800 dark:border-slate-800">
                 <div class="flex gap-2">
                     <input id="chat-input"
-                        class="flex-grow rounded-md border border-slate-800 dark:border-slate-800 dark:bg-slate-950 bg-zinc-100 dark:bg-slate-800 px-3 py-1 text-sm text-black dark:text-white focus:outline-none"
                         type="text" placeholder="Type your question here..." />
-                    <button id="send-button"
-                        class="rounded-md bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">➤</button>
                 </div>
             </div>
         </div>
     </div>
     <script>
-        window.addEventListener("message", (event) => {
-          // Temporarily allow all origins for testing
-          // Later: if (event.origin !== "https://juit-ai-assistant.vercel.app") return;
-          const { type, theme } = event.data;
-          if (type === "set-theme" && (theme === "light" || theme === "dark")) {
-            // Set theme via class or attribute
-            document.documentElement.classList.toggle("dark", theme === "dark");
-            document.body.classList.toggle("dark", theme === "dark");
-            console.log("Theme set to:", theme);
-          }
         });
         const API_BASE_URL = window.location.origin;
         const chatContainer = document.getElementById("chat-container");
@@ -73,7 +87,8 @@
                 // Use complete URLs for images
                 const baseUrl = window.location.origin;
-                avatar.src = msg.isUser ? `${baseUrl}/static/profile.png` : `${baseUrl}/static/JUIT_icon.png`;
                 avatar.alt = msg.isUser ? "User" : "Bot";
                 avatar.onerror = function () {
@@ -87,7 +102,7 @@
                 msgDiv.className = `max-w-[75%] break-words rounded-md px-3 py-1 text-sm ${
                     msg.isUser
                         ? "bg-blue-600 text-white rounded-tr-none"
-                        : "bg-gray-200 text-black dark:bg-gray-700 dark:text-white rounded-tl-none"
                 }`;
                 msgDiv.innerText = msg.text;
                 bubble.appendChild(avatar);
@@ -99,8 +114,8 @@
                 typing.className = "flex items-start gap-2";
                 typing.innerHTML = `
                     <img src="../static/JUIT_icon.png" alt="Bot" class="h-9 w-9 rounded-full object-cover" />
-                    <div class="max-w-[75%] rounded-md rounded-tl-none bg-gray-200 dark:bg-gray-700 px-3 py-1 text-sm">
-                    <div class="dot-typing text-black dark:text-white">
                         <span>.</span><span>.</span><span>.</span>
                     </div>
                     </div>

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>University Assistant</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- <link rel="stylesheet"
+        href="{{ url_for('static', filename='style.css') }}"> -->
+    <link rel="stylesheet" href="../static/style.css">
     <script>
         tailwind.config = {
     </script>
 </head>
+<body class="bg-zinc-100 text-black dark:bg-slate-950 dark:text-white flex items-center justify-center min-h-screen">
+    <div
+        class="flex w-full flex-col overflow-hidden  border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg h-screen relative">
+        <!-- Theme Toggle Icon -->
+        <button id="theme-toggle"
+            class="absolute top-2 right-2 z-20 flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-black dark:text-white shadow transition-all"
+            title="Toggle Theme">
+            🌓
+        </button>
         <div class="flex flex-col flex-grow overflow-hidden">
             <div id="chat-container" class="flex-grow overflow-y-auto p-3 space-y-3 bg-zinc-100 dark:bg-slate-950">
+                <!-- Chat messages will appear here -->
             </div>
+            <div class="border-t p-2 border-gray-300 dark:border-slate-800">
                 <div class="flex gap-2">
                     <input id="chat-input"
+                        class="flex-grow rounded-md border border-gray-300 dark:border-slate-800 bg-white dark:bg-slate-800 px-3 py-1 text-sm text-black dark:text-white focus:outline-none"
                         type="text" placeholder="Type your question here..." />
+                    <button id="send-button" class="rounded-md bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
+                        ➤
+                    </button>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        const toggleButton = document.getElementById("theme-toggle");
+        toggleButton.addEventListener("click", () => {
+            document.documentElement.classList.toggle("dark");
+            // Optional: save preference
+            if (document.documentElement.classList.contains("dark")) {
+                localStorage.setItem("theme", "dark");
+            } else {
+                localStorage.setItem("theme", "light");
+            }
         });
+        // Optional: load theme from localStorage
+        if (localStorage.getItem("theme") === "dark") {
+            document.documentElement.classList.add("dark");
+        }
         const API_BASE_URL = window.location.origin;
         const chatContainer = document.getElementById("chat-container");
                 // Use complete URLs for images
                 const baseUrl = window.location.origin;
+                // avatar.src = msg.isUser ? `${baseUrl}/static/profile.png` : `${baseUrl}/static/JUIT_icon.png`;
+                avatar.src = msg.isUser ? `../static/profile.png` : `../static/JUIT_icon.png`;
                 avatar.alt = msg.isUser ? "User" : "Bot";
                 avatar.onerror = function () {
                 msgDiv.className = `max-w-[75%] break-words rounded-md px-3 py-1 text-sm ${
                     msg.isUser
                         ? "bg-blue-600 text-white rounded-tr-none"
+                        : "bg-gray-200 text-black light:bg-gray-700 light:text-white rounded-tl-none"
                 }`;
                 msgDiv.innerText = msg.text;
                 bubble.appendChild(avatar);
                 typing.className = "flex items-start gap-2";
                 typing.innerHTML = `
                     <img src="../static/JUIT_icon.png" alt="Bot" class="h-9 w-9 rounded-full object-cover" />
+                    <div class="max-w-[75%] rounded-md rounded-tl-none bg-gray-200 light:bg-gray-700 px-3 py-1 text-sm">
+                    <div class="dot-typing text-black light:text-white">
                         <span>.</span><span>.</span><span>.</span>
                     </div>
                     </div>