Update app.py

app.py

@@ -161,18 +161,37 @@ st.markdown(
         }
         
         .result-box {
-            text-align: center; 
-            font-size: 28px; 
+            font-size: 22px;
             font-weight: bold;
-            background: linear-gradient(60deg, #880E4F, #4A235A, #311B92, #000000);
-            color: white; 
-            padding: 30px; 
-            border-radius: 20px;
-            display: inline-block; 
-            margin-top: 30px;
-            box-shadow: 0 6px 20px rgba(74, 35, 90, 0.5),
-                        0 3px 15px rgba(136, 14, 79, 0.4),
-                        inset 0 2px 10px rgba(49, 27, 146, 0.3);
+            color: white;
+            text-align: center;
+            background: linear-gradient(135deg, #6a11cb, #2575fc, #ff6a00, #ffcc00);
+            background-size: 400% 400%;
+            animation: gradientAnimation 6s ease infinite;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5),
+                        0 0 25px rgba(255, 105, 180, 0.7),
+                        0 0 35px rgba(0, 191, 255, 0.7);
+            transition: all 0.4s ease-in-out;
+        }
+        .result-box:hover {
+            transform: scale(1.08) rotate(1deg);
+            box-shadow: 0 0 25px rgba(0, 0, 0, 0.7),
+                        0 0 35px rgba(255, 105, 180, 0.9),
+                        0 0 45px rgba(0, 191, 255, 0.9);
+        }
+        
+        @keyframes gradientAnimation {
+            0% {
+                background-position: 0% 50%;
+            }
+            50% {
+                background-position: 100% 50%;
+            }
+            100% {
+                background-position: 0% 50%;
+            }
         }
     </style>
     """,
@@ -241,6 +260,29 @@ def predict_category(text):
 
 # ✅ Streamlit UI
 st.title("AI-Powered News Categorization")
+st.markdown("""
+    <style>
+    .title-box {
+        font-size: 48px;
+        font-weight: bold;
+        text-align: center;
+        background: linear-gradient(135deg, #ff7e5f, #feb47b, #86a8e7, #91eac9);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: gradientAnimation 6s ease infinite;
+        margin-bottom: 30px;
+    }
+    
+    @keyframes gradientAnimation {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+    }
+    </style>
+    
+    <div class="title-box">AI-Powered News Categorization</div>
+""", unsafe_allow_html=True)
+
 
 input_text = st.text_area("Enter News Article:", height=200)