Update index.html

index.html

@@ -89,8 +89,11 @@
             <button onclick="login()">Login</button>
             <p id="login-error" style="color: red;"></p>
         </div>
-    </header>
-  <p id="promptCountDisplay">Prompt used Count: </p>
+   main>
+        <h1>Prompt Usage Counter</h1>
+        <p id="promptCountDisplay">Prompt used Count: </p>
+        <button id="checkPromptCountButton" onclick="showPromptCount()">Check Prompt Count</button>
+       
         <h2>Reset Prompts</h2>
     </header>
 
@@ -136,15 +139,17 @@
                     document.getElementById("login-error").innerText = error.message;
                 });
         }
-        // Monitor authentication state and display the prompt count
-        auth.onAuthStateChanged(async (user) => {
+       // Function to display prompt count on button press
+        async function showPromptCount() {
+            const user = auth.currentUser;
             if (user) {
                 const promptCount = await countPromptsUsage(user.uid);
-                document.getElementById("promptCountDisplay").textContent = `Prompt used Count: ${promptCount}`;
+                alert(`You have used ${promptCount} prompts.`);
             } else {
-                document.getElementById("promptCountDisplay").textContent = "Please log in to see your prompt count.";
+                alert("Please log in to check your prompt count.");
             }
-        });
+        }
+
         // Function to count the usage of prompts for a specific user
         async function countPromptsUsage(userId) {
             try {