Update app.py

app.py

@@ -57,6 +57,8 @@ document.addEventListener("DOMContentLoaded", () => {
     // Enhanced typing animation for textarea
     const txt = document.querySelector("textarea");
     if (txt) {
+        txt.style.paddingRight = "70px"; // Make space for the button
+        
         txt.addEventListener("focus", () => {
             txt.style.transition = "all 0.3s ease";
             txt.style.transform = "translateY(-2px)";
@@ -77,38 +79,98 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     }
 
-    // Enhanced button animation
-    const btn = document.querySelector(".send-btn");
-    if (btn) {
-        btn.addEventListener("mouseenter", () => {
-            btn.style.transform = "scale(1.05) rotate(2deg)";
-            btn.style.boxShadow = "0 5px 15px rgba(0,0,0,0.3)";
-        });
-        
-        btn.addEventListener("mouseleave", () => {
-            btn.style.transform = "scale(1) rotate(0)";
-            btn.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
-        });
-        
-        btn.addEventListener("mousedown", () => {
-            btn.style.transform = "scale(0.95) rotate(-1deg)";
-        });
-        
-        btn.addEventListener("mouseup", () => {
-            btn.style.transform = "scale(1.05) rotate(2deg)";
-        });
+    // Move button inside textarea
+    setTimeout(() => {
+        const btn = document.querySelector(".send-btn");
+        const textareaContainer = document.querySelector(".input-container");
         
-        btn.addEventListener("click", () => {
-            // Ripple effect
-            const ripple = document.createElement("span");
-            ripple.classList.add("ripple-effect");
-            btn.appendChild(ripple);
+        if (btn && textareaContainer) {
+            // Position button inside textarea
+            btn.style.position = "absolute";
+            btn.style.right = "10px";
+            btn.style.bottom = "10px";
+            btn.style.zIndex = "10";
+            btn.style.marginLeft = "0";
+            btn.style.width = "50px";
+            btn.style.height = "50px";
             
-            setTimeout(() => {
-                ripple.remove();
-            }, 600);
+            // Add container for positioning
+            textareaContainer.style.position = "relative";
+        }
+    }, 100);
+
+    // Enhanced button animation
+    const addButtonAnimations = () => {
+        const btn = document.querySelector(".send-btn");
+        if (btn) {
+            btn.addEventListener("mouseenter", () => {
+                btn.style.transform = "scale(1.05)";
+                btn.style.boxShadow = "0 5px 15px rgba(0,0,0,0.3)";
+            });
+            
+            btn.addEventListener("mouseleave", () => {
+                btn.style.transform = "scale(1)";
+                btn.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+            });
+            
+            btn.addEventListener("mousedown", () => {
+                btn.style.transform = "scale(0.95)";
+            });
+            
+            btn.addEventListener("mouseup", () => {
+                btn.style.transform = "scale(1.05)";
+            });
+            
+            btn.addEventListener("click", () => {
+                // Bounce effect
+                btn.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                btn.style.transform = "scale(0.9)";
+                
+                setTimeout(() => {
+                    btn.style.transform = "scale(1)";
+                }, 500);
+                
+                // Ripple effect
+                const ripple = document.createElement("span");
+                ripple.classList.add("ripple-effect");
+                btn.appendChild(ripple);
+                
+                setTimeout(() => {
+                    ripple.remove();
+                }, 600);
+            });
+        }
+    };
+    
+    // Add button animations after a short delay
+    setTimeout(addButtonAnimations, 200);
+    
+    // Add bounce effect to all buttons
+    const addBounceToButtons = () => {
+        const allButtons = document.querySelectorAll("button");
+        allButtons.forEach(button => {
+            // Skip if already has bounce effect
+            if (button.hasAttribute("data-bounce-added")) return;
+            
+            button.setAttribute("data-bounce-added", "true");
+            
+            button.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);
+            });
         });
-    }
+    };
+    
+    // Add bounce to existing buttons
+    addBounceToButtons();
+    
+    // Observe for new buttons (like login button)
+    const buttonObserver = new MutationObserver(addBounceToButtons);
+    buttonObserver.observe(document.body, { childList: true, subtree: true });
     
     // Add subtle pulse animation to login button
     const loginBtn = document.querySelector(".gr-button.gr-login");
@@ -174,15 +236,16 @@ textarea {
     color: #fff; 
     font-size: 16px; 
     flex: 1; 
-    height: 60px; 
+    height: 70px; 
     box-sizing: border-box; 
     resize: none; 
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    width: 100%;
 }
 .send-btn { 
     border: none; 
-    border-radius: 25px; 
+    border-radius: 20px; 
     background: linear-gradient(145deg, #555, #444); 
     color: #fff; 
     width: 60px; 
@@ -192,8 +255,7 @@ textarea {
     align-items: center; 
     justify-content: center; 
     cursor: pointer; 
-    margin-left: 12px; 
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
     position: relative;
     overflow: hidden;
@@ -218,6 +280,7 @@ textarea {
 .input-container { 
     display: flex; 
     margin-top: 15px; 
+    position: relative;
 }
 .gr-chatbot { 
     border-radius: 15px; 
@@ -250,6 +313,15 @@ textarea {
         opacity: 0;
     }
 }
+/* Bounce animation */
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+    40% {transform: translateY(-10px);}
+    60% {transform: translateY(-5px);}
+}
+.bounce {
+    animation: bounce 0.8s;
+}
 /* Scrollbar styling */
 ::-webkit-scrollbar {
     width: 8px;