Update app.py

app.py

@@ -83,7 +83,6 @@ st.set_page_config(page_title="Newsense AI", page_icon="📰", layout="wide")
 
 #     return label_encoder.inverse_transform([category_idx])[0], cleaned_text
 
-# Custom CSS
 st.markdown(
     """
     <style>
@@ -93,20 +92,24 @@ st.markdown(
             background-repeat: no-repeat;
             background-attachment: fixed;
         }
+        
+        /* Title Styling */
         .title {
             font-size: 60px; 
             font-weight: bold; 
             color: white;
-            background: linear-gradient(60deg, #880E4F, #4A235A, #311B92, #000000);
+            background: linear-gradient(135deg, #FF6B6B, #6B7EFF, #6BFF95, #FFDE59);
             padding: 20px; 
             border-radius: 20px;
-            box-shadow: 0 8px 25px rgba(136, 14, 79, 0.5),
-                        0 4px 15px rgba(74, 35, 90, 0.6);
+            box-shadow: 0 10px 35px rgba(255, 107, 107, 0.7),
+                        0 5px 20px rgba(107, 126, 255, 0.7);
             display: inline-block;
-            margin-bottom: 20px;
+            margin-bottom: 30px;
             text-align: center;
-            animation: elegantFadeSlide 1.5s ease-out forwards;
+            animation: fadeSlide 1.5s ease-out forwards;
         }
+
+        /* Input Box Styling */
         .input-box { 
             display: flex;
             flex-direction: column;
@@ -115,63 +118,131 @@ st.markdown(
             margin: 0 auto;
             width: 80%;
         }
+
         .input-prompt {
-            font-size: 22px;
+            font-size: 24px;
             font-weight: bold;
             color: #ffffff;
             text-align: center;
-            opacity: 0.8;
+            opacity: 0.9;
+            text-shadow: 0 0 8px #6BFF95;
         }
+
+        /* Text Area Styling */
         div.stTextArea textarea {
             width: 100%;
             height: 200px;
             padding: 20px;
             border-radius: 15px;
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
+            background: rgba(0, 0, 0, 0.8);
+            color: #FFFFFF;
             font-size: 18px;
             outline: none;
-            box-shadow: 0 6px 20px rgba(136, 14, 79, 0.3);
+            box-shadow: 0 8px 25px rgba(107, 126, 255, 0.5);
             transition: all 0.5s ease;
         }
+
         div.stTextArea textarea:hover {
             transform: scale(1.05);
-            box-shadow: 0 10px 30px rgba(136, 14, 79, 0.5);
+            box-shadow: 0 12px 40px rgba(107, 126, 255, 0.8);
         }
+
+        /* Button Styling */
         .analyze-button {
-            width: 200px;
-            height: 60px;
-            border-radius: 30px;
-            background: linear-gradient(45deg, #880E4F, #4A235A, #311B92, #000000);
-            font-size: 20px; 
+            width: 220px;
+            height: 65px;
+            border-radius: 35px;
+            background: linear-gradient(45deg, #FF6B6B, #6B7EFF, #6BFF95, #FFDE59);
+            font-size: 22px; 
             font-weight: bold; 
-            color: white; 
+            color: #000000; 
             border: none;
             cursor: pointer;
             transition: all 0.4s ease;
+            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.7);
         }
+
         .analyze-button:hover {
             transform: scale(1.1);
-            box-shadow: 0 12px 35px rgba(49, 27, 146, 0.8);
+            box-shadow: 0 14px 45px rgba(255, 222, 89, 0.8);
         }
+
+        /* Result Box Styling */
         .result-box {
             text-align: center; 
-            font-size: 28px; 
+            font-size: 30px; 
             font-weight: bold;
-            color: white; 
-            background: linear-gradient(60deg, #880E4F, #4A235A, #311B92, #000000);
-            padding: 30px; 
+            color: #ffffff; 
+            background: linear-gradient(135deg, #6B7EFF, #6BFF95, #FFDE59, #FF6B6B);
+            padding: 35px; 
+            border-radius: 25px;
+            box-shadow: 0 10px 30px rgba(107, 255, 107, 0.6);
+            margin-top: 40px;
+            animation: fadeIn 1.2s ease-in;
+        }
+
+        /* Animations */
+        @keyframes fadeSlide {
+            from {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+
+st.markdown(
+    """
+    <style>
+        .title {
+            font-size: 60px; 
+            font-weight: bold; 
+            color: white;
+            background: linear-gradient(135deg, #FF6B6B, #6B7EFF, #6BFF95, #FFDE59);
+            padding: 20px; 
             border-radius: 20px;
-            box-shadow: 0 6px 20px rgba(74, 35, 90, 0.5);
-            margin-top: 30px;
+            box-shadow: 0 10px 35px rgba(255, 107, 107, 0.7),
+                        0 5px 20px rgba(107, 126, 255, 0.7);
+            display: inline-block;
+            text-align: center;
+            margin: 0 auto;  /* Center align */
+            width: fit-content;  /* Adjust width to fit content */
+            animation: fadeSlide 1.5s ease-out forwards;
+        }
+
+        @keyframes fadeSlide {
+            from {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
     </style>
+    <div class="title">📰 Newsense AI - News Classification</div>
     """,
     unsafe_allow_html=True
 )
 
-# Streamlit UI layout
-st.markdown('<div class="title">📰 Newsense AI - News Classification</div>', unsafe_allow_html=True)
 
 # Input and button section
 st.markdown('<div class="input-box">', unsafe_allow_html=True)