Update app.py

app.py

@@ -23,14 +23,14 @@ def generate_table(number):
 
 # Gradio interface
 title = """
-<h1 style='color:purple; text-shadow: 2px 2px 4px #FFA500; font-family: Comic Sans MS;'>🌟 Multiplication Table Chatbot for Kids 🌟</h1>
+<h1 style='color:purple; text-shadow: 3px 3px 8px #FF6347, 0 0 25px #FFD700; font-family: "Poppins", sans-serif; font-size: 45px; animation: bounce 2s infinite;'>🌟 Multiplication Table Chatbot for Kids 🌟</h1>
 """
 
 description = """
-<h3 style='color:orange; text-shadow: 1px 1px 2px #FF6347; font-family: Comic Sans MS;'>🎨 Welcome to the fun and colorful multiplication chatbot for kids! 🎨</h3>
-<p style='color:teal; font-size: 18px; font-family: Arial;'>
+<h3 style='color:orange; text-shadow: 2px 2px 5px #FF6347, 0 0 15px #FF4500; font-family: "Comic Sans MS", sans-serif; font-size: 28px; animation: slideIn 3s;'>🎨 Welcome to the fun and colorful multiplication chatbot for kids! 🎨</h3>
+<p style='color:blue; font-size: 22px; font-family: "Arial", sans-serif; text-shadow: 1px 1px 5px #1E90FF;'>
     Type a number to see its vibrant multiplication table!<br>
-    <span style='color:red;'>Type 0 to exit.</span>
+    <span style='color:red; font-size: 24px; font-weight: bold;'>Type <span style='color:green;'>0</span> to exit.</span>
 </p>
 """
 
@@ -63,15 +63,24 @@ with gr.Blocks() as interface:
 
 # Add custom CSS for styling
 interface.css = """
+body {
+    background: linear-gradient(135deg, #FFB6C1, #ADD8E6);
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
 #input-box input {
     background-color: #E0FFFF;
     color: #008B8B;
     font-size: 18px;
-    padding: 10px;
+    padding: 12px;
     border: 2px solid #20B2AA;
     border-radius: 8px;
     text-align: center;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
 }
+
 #output-box {
     background-color: #FDF5E6;
     color: #8B0000;
@@ -81,19 +90,54 @@ interface.css = """
     border-radius: 10px;
     overflow: auto;
 }
+
 #generate-button {
     background-color: #FFE4B5;
     color: #8B4513;
     font-size: 18px;
-    padding: 10px 20px;
+    padding: 12px 24px;
     border-radius: 10px;
     border: 2px solid #CD853F;
     cursor: pointer;
     transition: 0.3s ease;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
+
 #generate-button:hover {
     background-color: #FF6347;
     color: white;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+h1, h3, p {
+    animation: fadeIn 3s ease-out;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes slideIn {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 """
 interface.launch()