Update app.py

app.py

@@ -1,75 +1,106 @@
 import streamlit as st
-import streamlit.components.v1 as components
 import os
 import requests
+from datetime import datetime
 
-# 1. Page Config
+# 1. Page Setup
 st.set_page_config(page_title="SkyCast Pro", page_icon="☁️", layout="centered")
 
-# 2. Path Settings
-parent_dir = os.path.dirname(os.path.abspath(__file__))
-# Directly pointing to your index.html
-html_path = os.path.join(parent_dir, "frontend", "dist", "index.html")
-
-# 3. Secure API Key
-API_KEY = os.environ.get('Api_key')
-
-# 4. Custom Styling for Streamlit UI
+# 2. Styling (Glassmorphism Effect)
 st.markdown("""
     <style>
     .stApp { background-color: #0f172a; }
-    h1 { color: white !important; text-align: center; font-weight: 200; letter-spacing: 5px; }
-    .stTextInput>div>div>input {
-        background-color: rgba(255,255,255,0.05) !important;
-        color: white !important;
-        border-radius: 10px !important;
+    h1 { color: white !important; text-align: center; font-weight: 200; letter-spacing: 4px; padding-bottom: 20px; }
+    .weather-card {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 20px;
+        padding: 30px;
+        color: white;
+        text-align: center;
+        margin-top: 20px;
     }
+    .temp-large { font-size: 80px; font-weight: bold; margin: 10px 0; color: #38bdf8; }
+    .city-name { font-size: 24px; opacity: 0.8; }
+    .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
+    .detail-item { font-size: 14px; opacity: 0.7; }
+    .stTextInput>div>div>input { background: rgba(255,255,255,0.05) !important; color: white !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.2) !important; }
     </style>
     """, unsafe_allow_html=True)
 
 st.title("SKYCAST PRO")
 
-# 5. API Logic
-def get_weather(city):
-    if not API_KEY: return None
-    url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric"
-    try:
-        r = requests.get(url)
-        return r.json() if r.status_code == 200 else None
-    except: return None
+# 3. Secure API Logic
+API_KEY = os.environ.get('Api_key')
 
-# 6. Main Interaction
-city_input = st.text_input("Search Location", placeholder="Enter City (e.g. Karachi)...")
+@st.cache_data(ttl=300) # 5 minute cache to make it faster
+def get_weather(city_name):
+    if not API_KEY:
+        return {"error": "API Key missing in Secrets!"}
+    
+    # solving duplicate city issue: specifying units and limit
+    url = f"https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric"
+    
+    try:
+        response = requests.get(url, timeout=10)
+        if response.status_code == 200:
+            return response.json()
+        elif response.status_code == 404:
+            return {"error": "City not found. Try adding country code (e.g. Hyderabad, IN or Hyderabad, PK)"}
+        else:
+            return {"error": "Weather service currently busy."}
+    except:
+        return {"error": "Connection Timeout. Please check your internet."}
 
-if os.path.exists(html_path):
-    with open(html_path, 'r', encoding='utf-8') as f:
-        html_content = f.read()
+# 4. Input UI
+city_query = st.text_input("", placeholder="Enter City (e.g. Karachi, PK or London, UK)...")
 
-    # Weather Data logic
-    if city_input:
-        data = get_weather(city_input)
-        if data:
-            # Injecting data directly into the HTML via JavaScript
-            js_data = f"""
-            <script>
-                window.weatherData = {{
-                    city: "{data['name']}",
-                    temp: {round(data['main']['temp'])},
-                    condition: "{data['weather'][0]['description'].title()}"
-                }};
-                // Trigger React update if your app is listening to window.weatherData
-                window.dispatchEvent(new Event('storage')); 
-            </script>
-            """
-            full_html = html_content + js_data
-            components.html(full_html, height=500)
+if city_query:
+    with st.spinner("Fetching Live Data..."):
+        data = get_weather(city_query)
+        
+        if "error" in data:
+            st.error(data["error"])
         else:
-            st.error("City not found.")
-    else:
-        # Initial view
-        components.html(html_content, height=500)
+            # Extracting Details
+            city = data['name']
+            country = data['sys']['country']
+            temp = round(data['main']['temp'])
+            feels_like = round(data['main']['feels_like'])
+            desc = data['weather'][0]['description'].title()
+            humidity = data['main']['humidity']
+            wind = data['wind']['speed']
+            icon = data['weather'][0]['icon']
+            
+            # Weather Display Card
+            st.markdown(f"""
+                <div class="weather-card">
+                    <div class="city-name">{city}, {country}</div>
+                    <img src="http://openweathermap.org/img/wn/{icon}@2x.png" alt="icon">
+                    <div class="temp-large">{temp}°C</div>
+                    <div style="font-size: 18px; margin-bottom: 10px;">{desc}</div>
+                    <div class="details-grid">
+                        <div class="detail-item">
+                            <div>FEELS LIKE</div>
+                            <div style="color: white; font-size: 18px;">{feels_like}°C</div>
+                        </div>
+                        <div class="detail-item">
+                            <div>HUMIDITY</div>
+                            <div style="color: white; font-size: 18px;">{humidity}%</div>
+                        </div>
+                        <div class="detail-item">
+                            <div>WIND SPEED</div>
+                            <div style="color: white; font-size: 18px;">{wind} m/s</div>
+                        </div>
+                        <div class="detail-item">
+                            <div>LOCAL TIME</div>
+                            <div style="color: white; font-size: 18px;">{datetime.now().strftime('%H:%M')}</div>
+                        </div>
+                    </div>
+                </div>
+            """, unsafe_allow_html=True)
 else:
-    st.error("Frontend file not found. Check if frontend/dist/index.html exists.")
+    st.info("Please enter a city name to see live weather details.")
 
-st.markdown("---")
-st.caption("Securely Powered by React + OpenWeather API")
+st.markdown("<br><br><p style='text-align:center; opacity:0.5; color:white; font-size:12px;'>SkyCast Pro v2.0 | Real-time Data Sync</p>", unsafe_allow_html=True)