Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import os | |
| import requests | |
| from datetime import datetime, timedelta | |
| import pytz | |
| # 1. Page Setup | |
| st.set_page_config(page_title="SkyCast Pro", page_icon="☁️", layout="centered") | |
| # 2. Styling (Glassmorphism) | |
| st.markdown(""" | |
| <style> | |
| .stApp { background-color: #0f172a; } | |
| h1 { color: white !important; text-align: center; font-weight: 200; letter-spacing: 4px; padding-bottom: 10px; } | |
| .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: 5px 0; color: #38bdf8; } | |
| .city-name { font-size: 24px; opacity: 0.8; margin-bottom: 5px; } | |
| .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; } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| st.title("SKYCAST PRO") | |
| # 3. API Logic | |
| API_KEY = os.environ.get('Api_key') | |
| def get_weather(city_name): | |
| if not API_KEY: return {"error": "API Key missing!"} | |
| url = f"https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric" | |
| try: | |
| r = requests.get(url, timeout=10) | |
| return r.json() if r.status_code == 200 else {"error": "City not found"} | |
| except: return {"error": "Connection error"} | |
| # 4. Search & Dropdown (Duplicate City Fix) | |
| # Humne common cities ke options de diye hain taaki confusion na ho | |
| search_mode = st.radio("Search Method", ["Direct Search", "Quick Select"], horizontal=True) | |
| selected_city = "" | |
| if search_mode == "Quick Select": | |
| city_options = { | |
| "Hyderabad, Pakistan": "Hyderabad,PK", | |
| "Hyderabad, India": "Hyderabad,IN", | |
| "Karachi, Pakistan": "Karachi,PK", | |
| "Mumbai, India": "Mumbai,IN", | |
| "London, UK": "London,GB", | |
| "New York, USA": "New York,US" | |
| } | |
| choice = st.selectbox("Choose a City:", list(city_options.keys())) | |
| selected_city = city_options[choice] | |
| else: | |
| selected_city = st.text_input("Search Location", placeholder="e.g. Hyderabad,PK") | |
| # 5. Result Display | |
| if selected_city: | |
| with st.spinner("Fetching data..."): | |
| data = get_weather(selected_city) | |
| if "error" in data: | |
| st.error(data["error"]) | |
| else: | |
| # 6. CALCULATING LOCAL TIME | |
| # OpenWeather gives timezone offset in seconds from UTC | |
| timezone_offset = data['timezone'] | |
| utc_now = datetime.now(pytz.utc) | |
| local_time = utc_now + timedelta(seconds=timezone_offset) | |
| formatted_time = local_time.strftime('%H:%M | %A') | |
| # 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'] | |
| st.markdown(f""" | |
| <div class="weather-card"> | |
| <div class="city-name">{city}, {country}</div> | |
| <div style="font-size: 14px; color: #38bdf8;">Local Time: {formatted_time}</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>STATUS</div> | |
| <div style="color: white; font-size: 18px;">Live Sync</div> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| else: | |
| st.info("Search bar mein city aur country code likhen (e.g. Hyderabad,PK)") | |
| st.markdown("<p style='text-align:center; opacity:0.3; margin-top:50px;'>SkyCast Pro | Powered by OpenWeather</p>", unsafe_allow_html=True) |