Update app.py

app.py

@@ -33,7 +33,7 @@ def calculate_weight(earth_weight, planet):
 def main():
     with gr.Blocks(css="""
         .gradio-container {
-            background: url('https://papers.co/wallpaper/papers.co-vx41-digital-wallpaper-grunge-pattern-background-29-wallpaper.jpg') no-repeat center center fixed;
+            background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrpx_alD_MY29yHYIZryYkBbT-LB-Kb1PpdhDmhb4MPfAIX2WCfOIhYW_6WaxAmR6LW5U&usqp=CAU') no-repeat center center fixed;
             background-size: cover;
             min-height: 100vh;
         }
@@ -56,7 +56,33 @@ def main():
             50% { color: #feb47b; }
             100% { color: #00b4d8; }
         }
+
+        /* Balloon Animation */
+        .balloon {
+            position: absolute;
+            bottom: 0;
+            animation: rise 6s ease-in-out forwards, float 4s ease-in-out infinite;
+        }
+
+        @keyframes rise {
+            0% { bottom: 0; opacity: 1; }
+            100% { bottom: 90%; opacity: 0; }
+        }
+
+        @keyframes float {
+            0% { transform: translateX(0); }
+            50% { transform: translateX(30px); }
+            100% { transform: translateX(0); }
+        }
+
+        .balloon-text {
+            font-size: 1.5rem;
+            color: white;
+            text-align: center;
+            font-weight: bold;
+        }
     """) as demo:
+
         gr.Markdown("# Weight Calculator on Different Planets")
         gr.Markdown("Enter your weight on Earth and choose a planet to find your weight on it.")
         
@@ -68,7 +94,27 @@ def main():
 
         # Submit button and interaction
         button = gr.Button("Calculate Weight")
+        
+        # Function to trigger balloon effect using JavaScript
+        def trigger_balloon_effect():
+            return """
+                const balloonCount = 5;  // Number of balloons to show
+                for (let i = 0; i < balloonCount; i++) {
+                    let balloon = document.createElement('div');
+                    balloon.classList.add('balloon');
+                    balloon.style.left = Math.random() * 100 + 'vw';  // Random horizontal position
+                    let balloonText = document.createElement('div');
+                    balloonText.classList.add('balloon-text');
+                    balloonText.textContent = '🎈';  // Emoji or custom text for the balloon
+                    balloon.appendChild(balloonText);
+                    document.body.appendChild(balloon);
+                    setTimeout(() => balloon.remove(), 6000);  // Remove balloon after animation
+                }
+            """
+        
+        # Connect button click to calculate weight and trigger the balloon effect
         button.click(calculate_weight, inputs=[earth_weight_input, planet_input], outputs=output)
+        button.click(trigger_balloon_effect)
 
     demo.launch()