Update News_app.py

News_app.py

@@ -29,19 +29,18 @@ def set_background(local_image_path):
     
     bg_image_style = f"""
     <style>
-    .stApp {{
-        background-image: url("data:image/png;base64,{encoded_string}");
-        background-size: cover;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-    }}
+        .stApp {{
+            background-image: url(data:image/{"png"};base64,{encoded_string});
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
     </style>
     """
     st.markdown(bg_image_style, unsafe_allow_html=True)
 
 # Call this function with the path to your image
-set_background(r"Images/bkg3.jpg")  # Replace with the actual image path
+set_background(r"Images/bkg4.jpg")  # Replace with the actual image path
 
 # Initialize stopwords and lemmatizer
 stop_words = set(stopwords.words('english')).union({"pm"})
@@ -83,7 +82,7 @@ def predict_category(text):
     category_idx = np.argmax(prediction, axis=1)[0]
     return label_encoder.inverse_transform([category_idx])[0]
 
-# Enhanced UI
+# UI
 st.markdown(
     """
     <style>
@@ -91,40 +90,28 @@ st.markdown(
         background-color: #f8f9fa;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
+    
     .title {
-        color: #ffffff; /* White text for contrast */
-        font-size: 2.8em; /* Slightly larger font */
+        color: #ffffff;
+        font-size: 2.4em;
         text-align: center;
         font-weight: 700;
         margin-bottom: 15px;
-        text-transform: uppercase; /* Makes it more prominent */
-        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Adds a dark glow */
+        text-transform: uppercase;
+        text-shadow: 2px 2px 8px rgba(0, 0, 0, 1.0);
         padding: 10px;
-        border: 3px solid rgba(255, 255, 255, 0.8); /* White border to highlight */
-        border-radius: 10px;
-        display: inline-block;
-        background-color: rgba(0, 0, 0, 0.2); /* Slight dark tint for readability */
     }
-
+    
     .subtitle {
+        color: #ffff;
+        font-size: 1.3em;
         text-align: center;
-        font-size: 1.3em; /* Slightly larger for readability */
-        color: #fff; /* White text */
         font-weight: 600;
-        margin-bottom: 25px;
-        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); /* Dark shadow for better contrast */
+        margin-bottom: 15px;
+        text-shadow: 1px 1px 6px rgba(0, 0, 0, 1.0);
         padding: 5px;
-        border-radius: 5px;
-        display: inline-block;
-    }
-
-    .text-area textarea {
-        font-size: 16px;
-        border: 2px solid #bdc3c7;
-        border-radius: 8px;
-        padding: 12px;
-        background-color: #ecf0f1;
     }
+    
     .classify-button {
         background-color: #3498db;
         color: white;
@@ -140,29 +127,65 @@ st.markdown(
     .classify-button:hover {
         background-color: #2980b9;
     }
+    
     .result-box {
-        background-color: rgba(255, 255, 255, 0.1); /* 20% transparency */
+        background: linear-gradient(135deg, rgba(52, 152, 219, 1), rgba(231, 76, 60, 1)); /* Intense Blue-Red */
         padding: 20px;
-        border-radius: 8px;
+        border-radius: 10px;
         text-align: center;
         margin-top: 30px;
-        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-        backdrop-filter: blur(10px); /* Optional: Adds a blur effect for better visibility */
-        border: 2px solid rgba(255, 255, 255, 0.5); /* Optional: A subtle white border */
+        position: relative;
+        overflow: hidden;
+        border: 2px solid rgba(20, 30, 48, 0.9);
+        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    }
+
+    /* Hover Effect */
+    .result-box:hover {
+        transform: scale(1.05);
+        box-shadow: 0px 15px 40px rgba(52, 152, 219, 1), 0px 15px 40px rgba(231, 76, 60, 1);
+    }
+    
+    /* Light Reflection for Glossy Look */
+    .result-box::before {
+        content: "";
+        position: absolute;
+        top: -100%;
+        left: -100%;
+        width: 250%;
+        height: 250%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0) 70%);
+        opacity: 0.6;
+        transform: rotate(-25deg);
+        animation: shine 3s infinite linear;
+    }
+    
+    /* Shimmer Animation */
+    @keyframes shine {
+        0% { top: -150%; left: -150%; }
+        100% { top: 150%; left: 150%; }
     }
     .result-text {
-        font-size: 1.5em;
-        color: #0c1e38; /* Darker color for better visibility */
-        font-weight: 1000;
-        text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.7); /* Adds a subtle glow effect */
+        font-size: 1.8em;
+        color: #ffffff; /* Darker color for better visibility */
+        font-weight: 900;
+        text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+        animation: fadeIn 0.8s ease-in-out;
     }
+    
     .warning-box {
-        background-color: #ffcccc;
-        padding: 15px;
-        border-radius: 5px;
+        background: linear-gradient(135deg, rgba(255, 77, 77, 0.8), rgba(255, 165, 0, 0.7)); /* Smooth red-orange gradient */
+        padding: 18px;
+        border-radius: 10px;
         text-align: center;
-        color: #c0392b;
-        margin-top: 20px;
+        color: white;
+        font-weight: bold;
+        font-size: 1.2em;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+        margin-top: 25px;
+        border: 2px solid rgba(255, 77, 77, 0.9);
+        box-shadow: 0px 8px 15px rgba(255, 0, 0, 0.4);
+        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     }
     </style>
     """,