Update app.py

app.py

@@ -162,8 +162,9 @@ document.addEventListener("DOMContentLoaded", () => {
     // Add button animations after a short delay
     setTimeout(addButtonAnimations, 200);
     
-    // Add bounce effect to all buttons
-    const addBounceToButtons = () => {
+    // Add bounce effect to all buttons and interactive elements
+    const addBounceToElements = () => {
+        // All buttons
         const allButtons = document.querySelectorAll("button");
         allButtons.forEach(button => {
             // Skip if already has bounce effect
@@ -180,14 +181,93 @@ document.addEventListener("DOMContentLoaded", () => {
                 }, 500);
             });
         });
+        
+        // Chat messages
+        const chatMessages = document.querySelectorAll(".chat-message");
+        chatMessages.forEach(message => {
+            if (message.hasAttribute("data-bounce-added")) return;
+            
+            message.setAttribute("data-bounce-added", "true");
+            
+            message.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.98)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        });
+        
+        // Textarea
+        const textareas = document.querySelectorAll("textarea");
+        textareas.forEach(textarea => {
+            if (textarea.hasAttribute("data-bounce-added")) return;
+            
+            textarea.setAttribute("data-bounce-added", "true");
+            
+            textarea.addEventListener("click", function() {
+                this.style.transition = "transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.99)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 300);
+            });
+        });
+        
+        // Login button
+        const loginBtn = document.querySelector(".gr-button.gr-login");
+        if (loginBtn && !loginBtn.hasAttribute("data-bounce-added")) {
+            loginBtn.setAttribute("data-bounce-added", "true");
+            
+            loginBtn.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.95)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        }
+        
+        // Startup message
+        const startupMsg = document.querySelector(".startup-message");
+        if (startupMsg && !startupMsg.hasAttribute("data-bounce-added")) {
+            startupMsg.setAttribute("data-bounce-added", "true");
+            
+            startupMsg.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.98)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        }
+        
+        // Chatbot container
+        const chatbotContainer = document.querySelector(".gr-chatbot");
+        if (chatbotContainer && !chatbotContainer.hasAttribute("data-bounce-added")) {
+            chatbotContainer.setAttribute("data-bounce-added", "true");
+            
+            chatbotContainer.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.995)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        }
     };
     
-    // Add bounce to existing buttons
-    addBounceToButtons();
+    // Add bounce to existing elements
+    addBounceToElements();
     
-    // Observe for new buttons (like login button)
-    const buttonObserver = new MutationObserver(addBounceToButtons);
-    buttonObserver.observe(document.body, { childList: true, subtree: true });
+    // Observe for new elements
+    const elementObserver = new MutationObserver(addBounceToElements);
+    elementObserver.observe(document.body, { childList: true, subtree: true });
     
     // Add subtle pulse animation to login button
     const loginBtn = document.querySelector(".gr-button.gr-login");
@@ -219,6 +299,10 @@ body {
     background: linear-gradient(145deg, #0f0f0f, #1a1a1a); 
     box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
     overflow: hidden;
+    transition: transform 0.3s ease;
+}
+.gradio-container:active {
+    transform: scale(0.995);
 }
 .chat-message { 
     border-radius: 20px; 
@@ -229,6 +313,7 @@ body {
     opacity: 0;
     transition: all 0.3s ease;
     box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+    cursor: pointer;
 }
 .chat-message.user { 
     background: linear-gradient(145deg, #252525, #1f1f1f); 
@@ -252,6 +337,7 @@ body {
     margin: 20px 0;
     display: flex;
     justify-content: center;
+    cursor: pointer;
 }
 .startup-content {
     display: flex;
@@ -261,6 +347,7 @@ body {
     border-radius: 20px;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
     max-width: 80%;
+    transition: transform 0.3s ease;
 }
 .startup-icon {
     font-size: 32px;
@@ -302,6 +389,7 @@ textarea {
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     width: 100%;
+    cursor: pointer;
 }
 .send-btn { 
     border: none; 
@@ -332,6 +420,7 @@ textarea {
     padding: 14px 24px; 
     transition: all 0.3s ease !important;
     border: none !important;
+    cursor: pointer !important;
 }
 .gr-button.gr-login:hover { 
     background: linear-gradient(145deg, #444, #333) !important; 
@@ -349,6 +438,8 @@ textarea {
     padding: 15px;
     box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
     min-height: 400px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
 }
 .gr-box { 
     border-radius: 15px;