Update app.py

app.py

@@ -1,6 +1,5 @@
 import requests
 import gradio as gr
-from datetime import datetime
 
 # OpenWeather API details
 BASE_URL = "http://api.openweathermap.org/data/2.5/forecast?"
@@ -13,10 +12,10 @@ def get_weather(city):
 
     # Error handling
     if response.get("cod") != "200":
-        return "❌ **Invalid city name! Please enter a correct city.**"
+        return "<div class='weather-box'>❌ <b>Invalid city name! Please enter a correct city.</b></div>"
 
     weather_info = {}
-    
+
     # Extracting one data point per day
     for entry in response["list"]:
         date = entry["dt_txt"].split(" ")[0]  # Extract only the date part
@@ -29,51 +28,90 @@ def get_weather(city):
                 "Rain": f"{entry.get('rain', {}).get('3h', 0)} mm",
                 "Cloud Cover": f"{entry['clouds']['all']}%"  # Extracting cloud data
             }
-    
-    # Format output as a Markdown table
-    markdown_output = "**📅 5-Day Weather Forecast**\n\n"
-    markdown_output += "| Date       | Temperature | Humidity | Pressure | Wind Speed | Rain | Cloud Cover |\n"
-    markdown_output += "|------------|------------|----------|----------|------------|------|-------------|\n"
+
+    # Format output as an HTML table with dark, bold text
+    table_html = """
+    <div class='weather-box'>
+        <h2>📅 5-Day Weather Forecast for {}</h2>
+        <table>
+            <tr>
+                <th>Date</th>
+                <th>Temperature</th>
+                <th>Humidity</th>
+                <th>Pressure</th>
+                <th>Wind Speed</th>
+                <th>Rain</th>
+                <th>Cloud Cover</th>
+            </tr>
+    """.format(city)
 
     for date, details in weather_info.items():
-        markdown_output += f"| {date} | {details['Temperature']} | {details['Humidity']} | {details['Pressure']} | {details['Wind Speed']} | {details['Rain']} | {details['Cloud Cover']} |\n"
+        table_html += f"""
+            <tr>
+                <td>{date}</td>
+                <td>{details['Temperature']}</td>
+                <td>{details['Humidity']}</td>
+                <td>{details['Pressure']}</td>
+                <td>{details['Wind Speed']}</td>
+                <td>{details['Rain']}</td>
+                <td>{details['Cloud Cover']}</td>
+            </tr>
+        """
 
-    return markdown_output
+    table_html += "</table></div>"
 
-# **Adding Background Image**
+    return table_html
+
+# **Adding Dark-Themed Styling**
 custom_css = """
 body {
-    background: url('https://images.unsplash.com/photo-1548337138-e87d889cc369?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D.jpg') no-repeat center center fixed;
+    background: url('https://images.unsplash.com/photo-1548337138-e87d889cc369?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed;
     background-size: cover;
-    color: black;
+    color: black;  /* Set text to black */
 }
-
 .gradio-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }
-
 .weather-box {
-    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white box */
+    background: rgba(255, 255, 255, 0.85); /* White with slight transparency */
     padding: 20px;
     border-radius: 10px;
-    width: 80%;
-    max-width: 600px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    width: 85%;
+    max-width: 700px;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
     text-align: center;
+    font-weight: bold;
+}
+.weather-box table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: bold;
+}
+.weather-box th, .weather-box td {
+    border: 2px solid black;
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    color: black;
+}
+.weather-box th {
+    background-color: black;
+    color: white;
+}
+h2 {
+    color: black;
+    font-weight: bold;
 }
-
-
-
 """
 
 # Gradio Interface
 iface = gr.Interface(
     fn=get_weather,
     inputs=gr.Textbox(label="🌍 Enter City Name"),
-    outputs=gr.Markdown(),
+    outputs="html",
     title="🌤️ Weather Forecast",
     description="Enter a city name to get temperature, humidity, pressure, wind speed, rain, and cloud cover for the next **5 days**.",
     theme="default",