Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import requests | |
| from datetime import datetime, timedelta | |
| import random | |
| # ========================= | |
| # 🔑 API Keys | |
| # ========================= | |
| WEATHER_API_KEY = "3a97c8c63350b72e8439c42e8d371b07" | |
| # ========================= | |
| # 🇧🇩 Bangladesh Divisions & Districts | |
| # ========================= | |
| BANGLADESH_LOCATIONS = { | |
| "Dhaka Division": [ | |
| "Dhaka", "Faridpur", "Gazipur", "Gopalganj", "Kishoreganj", | |
| "Madaripur", "Manikganj", "Munshiganj", "Narayanganj", "Narsingdi", | |
| "Rajbari", "Shariatpur", "Tangail" | |
| ], | |
| "Chattogram Division": [ | |
| "Chattogram", "Bandarban", "Brahmanbaria", "Chandpur", "Cumilla", | |
| "Cox's Bazar", "Feni", "Khagrachhari", "Lakshmipur", "Noakhali", | |
| "Rangamati" | |
| ], | |
| "Rajshahi Division": [ | |
| "Rajshahi", "Bogura", "Joypurhat", "Naogaon", "Natore", | |
| "Chapainawabganj", "Pabna", "Sirajganj" | |
| ], | |
| "Khulna Division": [ | |
| "Khulna", "Bagerhat", "Chuadanga", "Jessore", "Jhenaidah", | |
| "Kushtia", "Magura", "Meherpur", "Narail", "Satkhira" | |
| ], | |
| "Barishal Division": [ | |
| "Barishal", "Barguna", "Bhola", "Jhalokathi", "Patuakhali", | |
| "Pirojpur" | |
| ], | |
| "Sylhet Division": [ | |
| "Sylhet", "Habiganj", "Moulvibazar", "Sunamganj" | |
| ], | |
| "Rangpur Division": [ | |
| "Rangpur", "Dinajpur", "Gaibandha", "Kurigram", "Lalmonirhat", | |
| "Nilphamari", "Panchagarh", "Thakurgaon" | |
| ], | |
| "Mymensingh Division": [ | |
| "Mymensingh", "Jamalpur", "Netrokona", "Sherpur" | |
| ] | |
| } | |
| # ========================= | |
| # 📿 50 Moral Hadiths (English + Bengali) | |
| # ========================= | |
| HADITHS = [ | |
| { | |
| "english": "The best among you are those who have the best manners and character.", | |
| "bengali": "তোমাদের মধ্যে সর্বোত্তম সেই ব্যক্তি যার চরিত্র ও আচরণ সবচেয়ে সুন্দর।", | |
| "reference": "Sahih Bukhari", | |
| "happy_message": "Let your beautiful character shine today and spread joy to everyone you meet! 😊", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 🌙" | |
| }, | |
| { | |
| "english": "Kindness is a mark of faith, and whoever is not kind has no faith.", | |
| "bengali": "দয়া ঈমানের নিদর্শন, এবং যে দয়ালু নয় তার ঈমান নেই।", | |
| "reference": "Sahih Muslim", | |
| "happy_message": "Your kindness can change someone's entire day - be that light! ✨", | |
| "salam": "As-Salamu Alaikum! May Allah bless your day! 🤲" | |
| }, | |
| { | |
| "english": "None of you truly believes until he loves for his brother what he loves for himself.", | |
| "bengali": "তোমাদের কেউ প্রকৃত মুমিন হতে পারবে না যতক্ষণ না সে তার ভাইয়ের জন্য তাই পছন্দ করে যা নিজের জন্য পছন্দ করে।", | |
| "reference": "Sahih Bukhari & Muslim", | |
| "happy_message": "Wishing good for others brings blessings to your own life! 🌟", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullah! Peace be upon you! 🕊️" | |
| }, | |
| { | |
| "english": "A smile for your brother is charity.", | |
| "bengali": "তোমার ভাইয়ের জন্য হাসি দেখানো সদকা।", | |
| "reference": "Tirmidhi", | |
| "happy_message": "Your beautiful smile is a gift - share it generously today! 😄", | |
| "salam": "As-Salamu Alaikum! Keep smiling and spreading joy! 🌈" | |
| }, | |
| { | |
| "english": "The most beloved to Allah is he who is most beneficial to people.", | |
| "bengali": "আল্লাহর কাছে সবচেয়ে প্রিয় সেই ব্যক্তি যে মানুষের জন্য সবচেয়ে বেশি উপকারী।", | |
| "reference": "Al-Mu'jam Al-Awsat", | |
| "happy_message": "Help someone today and feel the joy of making a difference! 💫", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 🌙✨" | |
| }, | |
| { | |
| "english": "Do not belittle any good deed, even meeting your brother with a cheerful face.", | |
| "bengali": "কোনো ভালো কাজকে ছোট মনে করো না, এমনকি তোমার ভাইয়ের সাথে হাসিমুখে দেখা করাও।", | |
| "reference": "Sahih Muslim", | |
| "happy_message": "Every small act of goodness counts - start with a smile! 😊", | |
| "salam": "As-Salamu Alaikum! May your day be filled with goodness! 🌸" | |
| }, | |
| { | |
| "english": "The strong person is not the one who overpowers others, but the one who controls his anger.", | |
| "bengali": "শক্তিশালী ব্যক্তি সেই নয় যে অন্যকে পরাজিত করে, বরং সেই যে নিজের ক্রোধ নিয়ন্ত্রণ করে।", | |
| "reference": "Sahih Bukhari & Muslim", | |
| "happy_message": "True strength lies in patience and self-control! 💪", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullah! Stay strong and peaceful! 🕊️" | |
| }, | |
| { | |
| "english": "Feed the hungry, visit the sick, and free the captive.", | |
| "bengali": "ক্ষুধার্তকে খাওয়াও, অসুস্থকে দেখতে যাও এবং বন্দীকে মুক্ত করো।", | |
| "reference": "Sahih Bukhari", | |
| "happy_message": "Reach out to those in need - your care matters! 🤲", | |
| "salam": "As-Salamu Alaikum! May Allah reward your compassion! 🌟" | |
| }, | |
| { | |
| "english": "Show mercy to those on earth, and He who is in the heavens will show mercy to you.", | |
| "bengali": "পৃথিবীতে যারা আছে তাদের প্রতি দয়া করো, তাহলে আসমানে যিনি আছেন তিনি তোমার প্রতি দয়া করবেন।", | |
| "reference": "Tirmidhi", | |
| "happy_message": "Your mercy today brings divine mercy tomorrow! 🌙", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 💝" | |
| }, | |
| { | |
| "english": "He who does not show mercy to others, will not be shown mercy.", | |
| "bengali": "যে অন্যদের প্রতি দয়া করে না, তাকেও দয়া করা হবে না।", | |
| "reference": "Sahih Muslim", | |
| "happy_message": "Be kind, be merciful - it comes back to you! 🔄", | |
| "salam": "As-Salamu Alaikum! Spread mercy and love! ❤️" | |
| }, | |
| { | |
| "english": "Make things easy and do not make them difficult.", | |
| "bengali": "জিনিসগুলো সহজ করো এবং কঠিন করো না।", | |
| "reference": "Sahih Bukhari", | |
| "happy_message": "Life is easier when we help each other! 🤝", | |
| "salam": "As-Salamu Alaikum! May Allah make things easy for you! 🌈" | |
| }, | |
| { | |
| "english": "Speak good or remain silent.", | |
| "bengali": "ভালো কথা বলো অথবা চুপ থাকো।", | |
| "reference": "Sahih Bukhari & Muslim", | |
| "happy_message": "Your words have power - use them wisely and kindly! 💬", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullah! Speak with wisdom! 📿" | |
| }, | |
| { | |
| "english": "The believer is not a slanderer, nor obscene, nor harsh.", | |
| "bengali": "মুমিন ব্যক্তি নিন্দুক নয়, অশ্লীল নয়, কঠোরও নয়।", | |
| "reference": "Sahih Muslim", | |
| "happy_message": "Be gentle in your words and actions - it's beautiful! 🌺", | |
| "salam": "As-Salamu Alaikum! May your character be noble! 👑" | |
| }, | |
| { | |
| "english": "Remove harmful things from the path; this is charity.", | |
| "bengali": "পথ থেকে ক্ষতিকর জিনিস সরিয়ে দাও; এটি সদকা।", | |
| "reference": "Sahih Bukhari & Muslim", | |
| "happy_message": "Small acts of cleanliness bring great rewards! 🧹✨", | |
| "salam": "As-Salamu Alaikum! Keep your surroundings clean! 🌿" | |
| }, | |
| { | |
| "english": "Do not envy one another, do not hate one another, do not turn away from one another.", | |
| "bengali": "একে অপরকে হিংসা করো না, ঘৃণা করো না, একে অপর থেকে মুখ ফিরিয়ে নিও না।", | |
| "reference": "Sahih Muslim", | |
| "happy_message": "Celebrate others' success - there's enough blessings for everyone! 🎉", | |
| "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 💖" | |
| }, | |
| ] | |
| # ========================= | |
| # 🕌 Get Real Prayer Times from Aladhan API | |
| # ========================= | |
| def get_prayer_times(city): | |
| """Get real-time prayer times using Aladhan API for Bangladesh""" | |
| try: | |
| # Get current date | |
| today = datetime.now() | |
| date_str = today.strftime("%d-%m-%Y") | |
| # Aladhan API endpoint for city-based timings | |
| url = f"http://api.aladhan.com/v1/timingsByCity/{date_str}" | |
| params = { | |
| "city": city, | |
| "country": "Bangladesh", | |
| "method": 2 # ISNA (Islamic Society of North America) | |
| } | |
| response = requests.get(url, params=params, timeout=10) | |
| data = response.json() | |
| if data.get("code") == 200 and data.get("data"): | |
| timings = data["data"]["timings"] | |
| # Extract prayer times | |
| fajr = timings.get("Fajr", "N/A") | |
| dhuhr = timings.get("Dhuhr", "N/A") | |
| asr = timings.get("Asr", "N/A") | |
| maghrib = timings.get("Maghrib", "N/A") | |
| isha = timings.get("Isha", "N/A") | |
| sunrise = timings.get("Sunrise", "N/A") | |
| sunset = timings.get("Sunset", "N/A") | |
| # For Ramadan: Sehri ends at Fajr, Iftar starts at Maghrib | |
| return { | |
| "fajr": fajr, | |
| "sehri_end": fajr, # Sehri ends at Fajr | |
| "sunrise": sunrise, | |
| "dhuhr": dhuhr, | |
| "asr": asr, | |
| "maghrib": maghrib, | |
| "iftar_start": maghrib, # Iftar starts at Maghrib | |
| "sunset": sunset, | |
| "isha": isha, | |
| "success": True | |
| } | |
| else: | |
| return {"success": False} | |
| except Exception as e: | |
| print(f"Prayer times API error: {e}") | |
| return {"success": False} | |
| # ========================= | |
| # 🌡️ Temperature-Based Advice | |
| # ========================= | |
| def get_temperature_advice(temp, weather_main): | |
| """Generate personalized advice based on temperature and weather""" | |
| advice = [] | |
| if temp > 35: | |
| advice.append("🔥 অত্যন্ত গরম সতর্কতা!") | |
| advice.append("• দুপুর ১২টা থেকে বিকেল ৪টা পর্যন্ত ঘরের ভিতরে থাকুন") | |
| advice.append("• কেনাকাটা: ভোর ৬-৯টা অথবা সন্ধ্যা ৭-১০টায় যান") | |
| advice.append("• ইফতারের পর প্রতি ১৫-২০ মিনিটে পানি পান করুন") | |
| advice.append("• ভারী শারীরিক পরিশ্রম এড়িয়ে চলুন - বিশ্রাম নিন!") | |
| advice.append("• ঘরে থেকে কুরআন তিলাওয়াত ও পরিবারের সাথে সময় কাটান") | |
| elif temp > 30: | |
| advice.append("🌡️ গরম আবহাওয়া") | |
| advice.append("• সকালের হাঁটা: সকাল ৯টার আগে সবচেয়ে ভালো") | |
| advice.append("• কেনাকাটা: সন্ধ্যা ৬টার পর আরামদায়ক") | |
| advice.append("• হাইড্রেশন: সেহরি থেকে ইফতার পর্যন্ত ৮-১০ গ্লাস পানি") | |
| advice.append("• সন্ধ্যায় হালকা বাইরের কাজকর্ম করা যায়") | |
| advice.append("• দিনে বাইরে গেলে ছাতা ও সানস্ক্রিন ব্যবহার করুন") | |
| elif temp > 25: | |
| advice.append("☀️ মনোরম উষ্ণ আবহাওয়া") | |
| advice.append("• ইফতারের পর সন্ধ্যার হাঁটার জন্য চমৎকার (৩০-৪৫ মিনিট)") | |
| advice.append("• কেনাকাটা: যেকোনো সময় আরামদায়ক, বিকেল ৪-৮টা সবচেয়ে ভালো") | |
| advice.append("• মাঝারি বাইরের কাজকর্ম ঠিক আছে") | |
| advice.append("• পার্ক/মসজিদে পরিবারের সাথে বেড়ানোর জন্য দারুণ আবহাওয়া") | |
| advice.append("• নিয়মিত পানি পান ভুলবেন না!") | |
| elif temp > 20: | |
| advice.append("🌤️ আরামদায়ক আবহাওয়া") | |
| advice.append("• সারাদিন বাইরের কাজের জন্য আদর্শ") | |
| advice.append("• কেনাকাটা, হাঁটা, হালকা ব্যায়ামের জন্য উপযুক্ত") | |
| advice.append("• আরামদায়ক পোশাক পরিধান করুন") | |
| advice.append("• কমিউনিটি ইফতার ও সমাবেশের জন্য দারুণ") | |
| advice.append("• সুন্দর আবহাওয়া উপভোগ করুন - আল্লাহর রহমত!") | |
| elif temp > 15: | |
| advice.append("🍃 শীতল আবহাওয়া") | |
| advice.append("• সন্ধ্যার নামাজের জন্য হালকা জ্যাকেট পরুন") | |
| advice.append("• তারাবীহ'র পর হাঁটার জন্য চমৎকার আবহাওয়া") | |
| advice.append("• আত্মীয়-স্বজন দেখতে যাওয়ার জন্য ভালো") | |
| advice.append("• শীতল, সতেজ বাতাস উপভোগ করুন!") | |
| advice.append("• ইফতারে গরম খেজুর ও চা উপযুক্ত") | |
| else: | |
| advice.append("❄️ ঠান্ডা আবহাওয়া") | |
| advice.append("• মসজিদে যাওয়ার সময় গরম কাপড় পরুন") | |
| advice.append("• ঘরের ভিতরের কাজকর্ম করুন") | |
| advice.append("• সেহরি ও ইফতারে গরম স্যুপ ও পানীয়") | |
| advice.append("• বয়স্ক ও শিশুদের বিশেষ যত্ন নিন") | |
| advice.append("• তাহাজ্জুদ নামাজের জন্য উষ্ণ কম্বল 🤲") | |
| # Weather-specific advice | |
| if weather_main == "rain": | |
| advice.append("\n☔ বৃষ্টির দিনের বিশেষ:") | |
| advice.append("• তারাবীহ নামাজের জন্য ছাতা নিন") | |
| advice.append("• ঘরে থেকে ইবাদত ও জিকিরের জন্য উপযুক্ত") | |
| advice.append("• প্রচুর দোয়া করুন - বৃষ্টি বরকতময় সময়! 🤲") | |
| advice.append("• সম্ভব হলে ঘরে থাকুন, পরিবারের সাথে কুরআন পড়ুন") | |
| elif weather_main == "thunderstorm": | |
| advice.append("\n⛈️ ঝড়ের সতর্কতা:") | |
| advice.append("• একান্ত প্রয়োজন ছাড়া বাইরে যাবেন না") | |
| advice.append("• পড়ুন: সুবহানাল্লাহি ওয়া বিহামদিহি") | |
| advice.append("• পরিবারের সাথে নিরাপদে ঘরে থাকুন") | |
| advice.append("• আল্লাহর আশ্রয় প্রার্থনার জন্য উপযুক্ত সময়") | |
| elif weather_main == "clouds": | |
| advice.append("\n☁️ মেঘলা ও মনোরম:") | |
| advice.append("• কড়া রোদ নেই - কেনাকাটার জন্য চমৎকার!") | |
| advice.append("• বাইরের কাজের জন্য আরামদায়ক") | |
| advice.append("• আত্মীয়স্বজন দেখতে যাওয়ার জন্য দারুণ দিন") | |
| return "\n".join(advice) | |
| # ========================= | |
| # 🌙 Main Ramadan Dashboard | |
| # ========================= | |
| def get_ramadan_dashboard(division, district): | |
| if not division or not district: | |
| return """ | |
| <div style="text-align:center; padding:60px; background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); color:white; border-radius: 30px; font-family: 'Poppins', sans-serif;"> | |
| <h2 style="font-size: 36px; margin-bottom: 20px;">⚠️ দয়া করে বিভাগ এবং জেলা নির্বাচন করুন</h2> | |
| <p style="font-size: 20px;">Please select Division and District</p> | |
| <div style="margin-top: 30px; font-size: 50px;">🕌 🌙 ⭐</div> | |
| </div> | |
| """ | |
| # Get random daily Hadith | |
| daily_hadith = random.choice(HADITHS) | |
| # Get real prayer times | |
| prayer_times = get_prayer_times(district) | |
| # Get weather data for Bangladesh | |
| weather_url = f"http://api.openweathermap.org/data/2.5/weather?q={district},Bangladesh&appid={WEATHER_API_KEY}&units=metric" | |
| try: | |
| weather_response = requests.get(weather_url, timeout=10) | |
| weather_data = weather_response.json() | |
| except: | |
| return """ | |
| <div style="text-align:center; padding:40px; color:#ff6b6b;"> | |
| <h3>❌ আবহাওয়া সেবার সাথে সংযোগ ত্রুটি</h3> | |
| <p>Error connecting to weather service</p> | |
| </div> | |
| """ | |
| if weather_response.status_code != 200: | |
| return f""" | |
| <div style="text-align:center; padding:40px; color:#ff6b6b;"> | |
| <h3>🔍 '{district}' জেলা খুঁজে পাওয়া যায়নি!</h3> | |
| <p>District not found! Please check selection</p> | |
| </div> | |
| """ | |
| # Extract weather data | |
| temp = weather_data["main"]["temp"] | |
| feels_like = weather_data["main"]["feels_like"] | |
| humidity = weather_data["main"]["humidity"] | |
| description = weather_data["weather"][0]["description"].title() | |
| weather_main = weather_data["weather"][0]["main"].lower() | |
| wind_speed = weather_data["wind"]["speed"] | |
| # Temperature advice | |
| temp_advice = get_temperature_advice(temp, weather_main) | |
| # Weather gradients with vibrant colors | |
| weather_gradients = { | |
| "clear": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", | |
| "clouds": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", | |
| "rain": "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)", | |
| "drizzle": "linear-gradient(135deg, #fa709a 0%, #fee140 100%)", | |
| "thunderstorm": "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", | |
| "snow": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)", | |
| "mist": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)", | |
| } | |
| gradient = weather_gradients.get(weather_main, "linear-gradient(135deg, #667eea 0%, #764ba2 100%)") | |
| # Weather icons | |
| weather_icons = { | |
| "clear": "☀️", | |
| "clouds": "☁️", | |
| "rain": "🌧️", | |
| "thunderstorm": "⛈️", | |
| "snow": "❄️", | |
| "mist": "🌫️", | |
| } | |
| icon = weather_icons.get(weather_main, "🌤️") | |
| # Build HTML with enhanced animations and professional design | |
| html = f""" | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&family=Noto+Sans+Bengali:wght@400;600;700;900&family=Amiri:wght@400;700&display=swap'); | |
| @keyframes fadeInUp {{ | |
| from {{ | |
| opacity: 0; | |
| transform: translateY(60px); | |
| }} | |
| to {{ | |
| opacity: 1; | |
| transform: translateY(0); | |
| }} | |
| }} | |
| @keyframes pulse {{ | |
| 0%, 100% {{ | |
| transform: scale(1); | |
| opacity: 1; | |
| }} | |
| 50% {{ | |
| transform: scale(1.08); | |
| opacity: 0.85; | |
| }} | |
| }} | |
| @keyframes float {{ | |
| 0%, 100% {{ | |
| transform: translateY(0px) rotate(0deg); | |
| }} | |
| 50% {{ | |
| transform: translateY(-20px) rotate(5deg); | |
| }} | |
| }} | |
| @keyframes twinkle {{ | |
| 0%, 100% {{ | |
| opacity: 1; | |
| transform: scale(1); | |
| }} | |
| 50% {{ | |
| opacity: 0.2; | |
| transform: scale(0.8); | |
| }} | |
| }} | |
| @keyframes slideInLeft {{ | |
| from {{ | |
| opacity: 0; | |
| transform: translateX(-100px) rotate(-5deg); | |
| }} | |
| to {{ | |
| opacity: 1; | |
| transform: translateX(0) rotate(0deg); | |
| }} | |
| }} | |
| @keyframes slideInRight {{ | |
| from {{ | |
| opacity: 0; | |
| transform: translateX(100px) rotate(5deg); | |
| }} | |
| to {{ | |
| opacity: 1; | |
| transform: translateX(0) rotate(0deg); | |
| }} | |
| }} | |
| @keyframes glow {{ | |
| 0%, 100% {{ | |
| box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.4); | |
| }} | |
| 50% {{ | |
| box-shadow: 0 0 50px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 215, 0, 0.6); | |
| }} | |
| }} | |
| @keyframes rainbow {{ | |
| 0% {{ filter: hue-rotate(0deg); }} | |
| 100% {{ filter: hue-rotate(360deg); }} | |
| }} | |
| @keyframes bounceIn {{ | |
| 0% {{ | |
| opacity: 0; | |
| transform: scale(0.3); | |
| }} | |
| 50% {{ | |
| opacity: 1; | |
| transform: scale(1.05); | |
| }} | |
| 70% {{ | |
| transform: scale(0.9); | |
| }} | |
| 100% {{ | |
| transform: scale(1); | |
| }} | |
| }} | |
| @keyframes rotateGlow {{ | |
| 0% {{ | |
| transform: rotate(0deg); | |
| filter: brightness(1); | |
| }} | |
| 50% {{ | |
| transform: rotate(180deg); | |
| filter: brightness(1.3); | |
| }} | |
| 100% {{ | |
| transform: rotate(360deg); | |
| filter: brightness(1); | |
| }} | |
| }} | |
| .dashboard-container {{ | |
| animation: fadeInUp 1s ease-out; | |
| font-family: 'Poppins', 'Noto Sans Bengali', sans-serif; | |
| }} | |
| .card {{ | |
| background: white; | |
| border-radius: 30px; | |
| padding: 40px; | |
| margin: 30px 0; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.15); | |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| animation: fadeInUp 0.8s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| }} | |
| .card::before {{ | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); | |
| transform: rotate(45deg); | |
| animation: shimmer 3s infinite; | |
| }} | |
| @keyframes shimmer {{ | |
| 0% {{ transform: translateX(-100%) translateY(-100%) rotate(45deg); }} | |
| 100% {{ transform: translateX(100%) translateY(100%) rotate(45deg); }} | |
| }} | |
| .card:hover {{ | |
| transform: translateY(-15px) scale(1.02); | |
| box-shadow: 0 30px 80px rgba(0,0,0,0.25); | |
| }} | |
| .mosque-decoration {{ | |
| animation: float 5s ease-in-out infinite; | |
| font-size: 60px; | |
| display: inline-block; | |
| filter: drop-shadow(0 0 10px rgba(255,215,0,0.5)); | |
| }} | |
| .star {{ | |
| animation: twinkle 2s ease-in-out infinite; | |
| display: inline-block; | |
| filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); | |
| }} | |
| .crescent {{ | |
| animation: rotateGlow 6s linear infinite; | |
| display: inline-block; | |
| filter: drop-shadow(0 0 20px rgba(255,215,0,0.8)); | |
| }} | |
| .ramzan-header {{ | |
| animation: glow 3s ease-in-out infinite; | |
| position: relative; | |
| overflow: hidden; | |
| }} | |
| .ramzan-header::before {{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| animation: slide 3s infinite; | |
| }} | |
| @keyframes slide {{ | |
| 0% {{ left: -100%; }} | |
| 100% {{ left: 100%; }} | |
| }} | |
| .prayer-card {{ | |
| animation: slideInLeft 1s ease-out; | |
| }} | |
| .weather-card {{ | |
| animation: slideInRight 1s ease-out; | |
| }} | |
| .baby-decoration {{ | |
| animation: bounceIn 2s ease-out infinite; | |
| font-size: 45px; | |
| display: inline-block; | |
| filter: drop-shadow(0 0 8px rgba(255,192,203,0.6)); | |
| }} | |
| .gradient-text {{ | |
| background: linear-gradient(45deg, #f093fb 0%, #f5576c 50%, #4facfe 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: rainbow 5s linear infinite; | |
| }} | |
| .pulse-glow {{ | |
| animation: pulse 2s ease-in-out infinite; | |
| filter: drop-shadow(0 0 15px currentColor); | |
| }} | |
| </style> | |
| <div class="dashboard-container" style="max-width: 1000px; margin: 0 auto; padding: 25px; background: linear-gradient(135deg, #E8F5E9 0%, #F3E5F5 50%, #FFF9C4 100%); border-radius: 40px;"> | |
| <!-- Beautiful Ramadan Header with Advanced Decorations --> | |
| <div class="ramzan-header" style="text-align: center; background: linear-gradient(135deg, #90EE90 0%, #98FB98 50%, #00FA9A 100%); color: white; padding: 60px 40px; border-radius: 40px; margin-bottom: 35px; position: relative; overflow: hidden;"> | |
| <div style="position: absolute; top: 15px; left: 30px; font-size: 35px;"> | |
| <span class="star">🌸</span> | |
| <span class="star" style="animation-delay: 0.3s;">🌺</span> | |
| <span class="star" style="animation-delay: 0.6s;">🌼</span> | |
| <span class="star" style="animation-delay: 0.9s;">🌻</span> | |
| </div> | |
| <div style="position: absolute; top: 15px; right: 30px; font-size: 35px;"> | |
| <span class="star" style="animation-delay: 0.2s;">🌸</span> | |
| <span class="star" style="animation-delay: 0.5s;">🌺</span> | |
| <span class="star" style="animation-delay: 0.8s;">🌼</span> | |
| <span class="star" style="animation-delay: 1.1s;">🌻</span> | |
| </div> | |
| <div style="margin-bottom: 25px;"> | |
| <span class="mosque-decoration">🏛️</span> | |
| <span class="crescent" style="font-size: 70px; margin: 0 25px;">🌙</span> | |
| <span class="mosque-decoration">🏛️</span> | |
| </div> | |
| <h1 style="font-size: 58px; margin: 20px 0; text-shadow: 4px 4px 8px rgba(0,0,0,0.4); font-weight: 900; letter-spacing: 2px;"> | |
| Ramadan Mubarak 2025 | |
| </h1> | |
| <h2 style="font-size: 62px; margin: 15px 0; font-family: 'Noto Sans Bengali', sans-serif; text-shadow: 3px 3px 6px rgba(0,0,0,0.4); font-weight: 900;"> | |
| রমজান মুবারক ১৪৪৬ | |
| </h2> | |
| <div style="margin: 25px 0;"> | |
| <span class="baby-decoration">🐱</span> | |
| <span class="baby-decoration" style="animation-delay: 0.4s;">🐈</span> | |
| <span class="baby-decoration" style="animation-delay: 0.8s;">😺</span> | |
| <span class="baby-decoration" style="animation-delay: 1.2s;">😸</span> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 20px; backdrop-filter: blur(10px); margin: 20px auto; max-width: 600px;"> | |
| <p style="font-size: 28px; margin: 10px 0; opacity: 0.95; font-weight: 700;"> | |
| 🇧🇩 {district}, {division} | |
| </p> | |
| <p style="font-size: 32px; margin: 10px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 700;"> | |
| {district}, {division} | |
| </p> | |
| <p style="font-size: 20px; opacity: 0.9; margin-top: 10px;"> | |
| {datetime.now().strftime("%A, %B %d, %Y")} | {datetime.now().strftime("%I:%M %p")} | |
| </p> | |
| </div> | |
| <div style="margin-top: 30px; font-size: 32px;"> | |
| <span class="star pulse-glow">🌸</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.3s;">🌺</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.6s;">🌼</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.9s;">🌻</span> | |
| </div> | |
| </div> | |
| <!-- Real-Time Prayer Times Card --> | |
| <div class="card prayer-card" style="background: linear-gradient(135deg, #0F9D58 0%, #16C172 50%, #10B981 100%); color: white;"> | |
| <div style="text-align: center; margin-bottom: 30px;"> | |
| <h2 style="font-size: 42px; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: 800;">🕌 নামাজের সময়সূচী (Prayer Times)</h2> | |
| <p style="font-size: 20px; opacity: 0.95;">রিয়েল-টাইম সময় • Real-time for {district}, Bangladesh</p> | |
| </div> | |
| """ | |
| if prayer_times["success"]: | |
| html += f""" | |
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 35px;"> | |
| <div style="text-align: center; background: rgba(255,255,255,0.3); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); transition: all 0.3s ease; border: 2px solid rgba(255,255,255,0.4);"> | |
| <div style="font-size: 55px; margin-bottom: 15px; animation: float 3s ease-in-out infinite;">🌅</div> | |
| <h3 style="font-size: 26px; margin: 12px 0; font-weight: 700;">সেহরি শেষ (Sehri Ends)</h3> | |
| <h3 style="font-size: 24px; margin: 10px 0; font-weight: 600;">ফজর (Fajr)</h3> | |
| <p style="font-size: 44px; font-weight: 900; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{prayer_times['sehri_end']}</p> | |
| <p style="font-size: 17px; opacity: 0.95; font-weight: 600;">এই সময়ের আগে খাওয়া বন্ধ করুন</p> | |
| <p style="font-size: 16px; opacity: 0.9;">Stop eating before this time</p> | |
| </div> | |
| <div style="text-align: center; background: rgba(255,255,255,0.3); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); transition: all 0.3s ease; border: 2px solid rgba(255,255,255,0.4);"> | |
| <div style="font-size: 55px; margin-bottom: 15px; animation: float 3s ease-in-out infinite; animation-delay: 0.5s;">🌇</div> | |
| <h3 style="font-size: 26px; margin: 12px 0; font-weight: 700;">ইফতার শুরু (Iftar Starts)</h3> | |
| <h3 style="font-size: 24px; margin: 10px 0; font-weight: 600;">মাগরিব (Maghrib)</h3> | |
| <p style="font-size: 44px; font-weight: 900; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{prayer_times['iftar_start']}</p> | |
| <p style="font-size: 17px; opacity: 0.95; font-weight: 600;">এই সময়ে রোজা ভাঙ্গুন</p> | |
| <p style="font-size: 16px; opacity: 0.9;">Break your fast at this time</p> | |
| </div> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.25); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); border: 2px solid rgba(255,255,255,0.3);"> | |
| <h3 style="text-align: center; font-size: 28px; margin-bottom: 25px; font-weight: 700;">📿 দৈনিক নামাজের সময়সূচী (Daily Prayer Schedule)</h3> | |
| <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center;"> | |
| <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;"> | |
| <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">সূর্যোদয় (Sunrise)</p> | |
| <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['sunrise']}</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;"> | |
| <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">যোহর (Dhuhr)</p> | |
| <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['dhuhr']}</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;"> | |
| <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">আসর (Asr)</p> | |
| <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['asr']}</p> | |
| </div> | |
| </div> | |
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: center; margin-top: 20px;"> | |
| <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;"> | |
| <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">সূর্যাস্ত (Sunset)</p> | |
| <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['sunset']}</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;"> | |
| <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">এশা (Isha)</p> | |
| <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['isha']}</p> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| else: | |
| html += """ | |
| <div style="text-align: center; padding: 40px; background: rgba(255,255,255,0.25); border-radius: 25px; border: 2px solid rgba(255,255,255,0.3);"> | |
| <p style="font-size: 24px; font-weight: 700;">⚠️ নামাজের সময় পাওয়া যায়নি</p> | |
| <p style="font-size: 20px; opacity: 0.95; margin-top: 12px;">Could not fetch prayer times</p> | |
| <p style="font-size: 18px; opacity: 0.9; margin-top: 10px;">দয়া করে আপনার জেলার নাম চেক করুন</p> | |
| </div> | |
| """ | |
| html += f""" | |
| </div> | |
| <!-- Weather Card with Advanced Animation --> | |
| <div class="card weather-card"> | |
| <div style="text-align: center; margin-bottom: 25px;"> | |
| <h2 class="gradient-text" style="font-size: 40px; margin-bottom: 12px; font-weight: 800;">🌡️ লাইভ আবহাওয়া (Live Weather)</h2> | |
| </div> | |
| <div style="text-align: center; background: {gradient}; color: white; padding: 50px; border-radius: 30px; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.2);"> | |
| <div style="font-size: 120px; margin: 25px 0; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));"> | |
| {icon} | |
| </div> | |
| <h1 style="font-size: 84px; margin: 20px 0; font-weight: 900; text-shadow: 3px 3px 6px rgba(0,0,0,0.3);">{temp:.1f}°C</h1> | |
| <p style="font-size: 32px; margin: 15px 0; text-transform: capitalize; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{description}</p> | |
| <p style="font-size: 24px; opacity: 0.95; font-weight: 600;">অনুভূতি (Feels like) {feels_like:.1f}°C</p> | |
| <div style="margin-top: 30px; font-size: 22px; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;"> | |
| <div style="background: rgba(255,255,255,0.2); padding: 15px 30px; border-radius: 20px; backdrop-filter: blur(10px);"> | |
| <span style="font-weight: 700;">💧 আর্দ্রতা: {humidity}%</span> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.2); padding: 15px 30px; border-radius: 20px; backdrop-filter: blur(10px);"> | |
| <span style="font-weight: 700;">🌬️ বাতাস: {wind_speed} m/s</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Temperature-Based Recommendations --> | |
| <div class="card" style="animation-delay: 0.3s;"> | |
| <h2 class="gradient-text" style="font-size: 38px; margin-bottom: 30px; text-align: center; font-weight: 800;"> | |
| 💡 আপনার ব্যক্তিগত রমজান গাইড | |
| </h2> | |
| <h3 style="text-align: center; color: #FF6B6B; font-size: 28px; margin-bottom: 25px; font-weight: 700;"> | |
| Your Personalized Ramadan Guide | |
| </h3> | |
| <div style="background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 50%, #FFF0F5 100%); padding: 35px; border-radius: 25px; border-left: 8px solid #FF6B6B; box-shadow: inset 0 0 20px rgba(255,107,107,0.1);"> | |
| <div style="line-height: 2.2; white-space: pre-line; font-size: 18px; font-weight: 500; color: #2c3e50;"> | |
| {temp_advice} | |
| </div> | |
| </div> | |
| <div style="margin-top: 30px; text-align: center; background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%); padding: 25px; border-radius: 20px; border: 2px solid #2196F3;"> | |
| <p style="font-size: 20px; color: #0D47A1; font-weight: 700; line-height: 1.6;"> | |
| 💙 মনে রাখবেন: রোজার সময় আপনার স্বাস্থ্য গুরুত্বপূর্ণ। আপনার শরীরের কথা শুনুন! | |
| </p> | |
| <p style="font-size: 18px; color: #1565C0; font-weight: 600; margin-top: 10px;"> | |
| Remember: Your health is important during fasting. Listen to your body! | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Daily Hadith Card with Enhanced Design --> | |
| <div class="card" style="background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%); color: white; animation-delay: 0.4s; border: 3px solid rgba(255,255,255,0.3);"> | |
| <div style="text-align: center; margin-bottom: 35px;"> | |
| <h2 style="font-size: 44px; margin-bottom: 20px; text-shadow: 3px 3px 6px rgba(0,0,0,0.3); font-weight: 900;">📿 আজকের হাদিস (Today's Hadith)</h2> | |
| <div style="font-size: 35px; margin: 20px 0;"> | |
| <span class="star pulse-glow">🌸</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.3s;">🌺</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.6s;">🌼</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.9s;">🌻</span> | |
| </div> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.3); padding: 35px; border-radius: 25px; margin-bottom: 30px; backdrop-filter: blur(15px); border: 2px solid rgba(255,255,255,0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.2);"> | |
| <p style="font-size: 24px; line-height: 2; margin-bottom: 25px; font-style: italic; text-align: center; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);"> | |
| "{daily_hadith['english']}" | |
| </p> | |
| <div style="height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); margin: 25px 0;"></div> | |
| <p style="font-size: 22px; line-height: 2; font-family: 'Noto Sans Bengali', sans-serif; opacity: 0.98; text-align: center; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);"> | |
| "{daily_hadith['bengali']}" | |
| </p> | |
| <p style="text-align: right; font-size: 20px; margin-top: 25px; opacity: 0.95; font-weight: 700; font-style: italic;"> | |
| — {daily_hadith['reference']} | |
| </p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.25); padding: 30px; border-radius: 25px; margin-bottom: 25px; text-align: center; border: 2px solid rgba(255,255,255,0.3);"> | |
| <div style="font-size: 40px; margin-bottom: 20px;"> | |
| <span class="baby-decoration">😊</span> | |
| <span class="baby-decoration" style="animation-delay: 0.3s;">💖</span> | |
| <span class="baby-decoration" style="animation-delay: 0.6s;">🌸</span> | |
| <span class="baby-decoration" style="animation-delay: 0.9s;">🐱</span> | |
| </div> | |
| <p style="font-size: 22px; line-height: 1.8; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);"> | |
| {daily_hadith['happy_message']} | |
| </p> | |
| </div> | |
| <div style="text-align: center; background: rgba(255,255,255,0.2); padding: 30px; border-radius: 25px; border: 2px solid rgba(255,255,255,0.3);"> | |
| <p style="font-size: 30px; font-weight: 800; margin: 12px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);"> | |
| {daily_hadith['salam']} | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Beautiful Footer with Enhanced Islamic Decoration --> | |
| <div style="text-align: center; padding: 50px 40px; background: linear-gradient(135deg, #87CEEB 0%, #00BFFF 50%, #1E90FF 100%); color: white; border-radius: 30px; margin-top: 35px; box-shadow: 0 15px 50px rgba(30,144,255,0.3); position: relative; overflow: hidden;"> | |
| <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,%3Csvg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 0h100v100H0z\" fill=\"none\"/%3E%3Cpath d=\"M50 30l5 15h16l-13 9 5 15-13-9-13 9 5-15-13-9h16z\" fill=\"rgba(255,255,255,0.05)\"/%3E%3C/svg%3E'); opacity: 0.3;"></div> | |
| <div style="position: relative; z-index: 1;"> | |
| <div style="font-size: 50px; margin-bottom: 25px;"> | |
| <span class="mosque-decoration">🏛️</span> | |
| <span class="crescent" style="font-size: 60px; margin: 0 20px;">🌙</span> | |
| <span class="mosque-decoration">🏛️</span> | |
| </div> | |
| <h3 style="font-size: 32px; margin: 20px 0; font-weight: 800; text-shadow: 2px 2px 4px rgba(0,0,0,0.4);"> | |
| May Allah Accept Your Fasting & Prayers | |
| </h3> | |
| <h3 style="font-size: 36px; margin: 15px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.4);"> | |
| আল্লাহ আপনার রোজা ও নামাজ কবুল করুন | |
| </h3> | |
| <div style="margin: 30px 0; font-size: 40px;"> | |
| <span class="baby-decoration">🐱</span> | |
| <span class="baby-decoration" style="animation-delay: 0.3s;">🐈</span> | |
| <span class="baby-decoration" style="animation-delay: 0.6s;">😺</span> | |
| <span class="baby-decoration" style="animation-delay: 0.9s;">😸</span> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 20px; backdrop-filter: blur(10px); margin: 25px auto; max-width: 500px;"> | |
| <p style="font-size: 24px; opacity: 0.98; margin: 10px 0; font-weight: 700;"> | |
| Ramadan Kareem 2025! 🌙 | |
| </p> | |
| <p style="font-size: 28px; opacity: 0.98; margin: 10px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 800;"> | |
| রমজান করীম ১৪৪৬! 🌸 | |
| </p> | |
| </div> | |
| <div style="margin-top: 25px; font-size: 32px;"> | |
| <span class="star pulse-glow">🌸</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.2s;">🌺</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.4s;">🌼</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.6s;">🌻</span> | |
| <span class="star pulse-glow" style="animation-delay: 0.8s;">🌸</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| return html | |
| # ========================= | |
| # 🎨 Gradio Interface with Bangladesh Divisions & Districts | |
| # ========================= | |
| custom_css = """ | |
| .gradio-container { | |
| background: linear-gradient(135deg, #E8F5E9 0%, #F3E5F5 40%, #FFF9C4 70%, #FFEBEE 100%) !important; | |
| } | |
| footer { | |
| display: none !important; | |
| } | |
| .contain { | |
| max-width: 1200px !important; | |
| } | |
| .gr-button { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| border: none !important; | |
| color: white !important; | |
| font-weight: 600 !important; | |
| font-size: 16px !important; | |
| padding: 12px 30px !important; | |
| border-radius: 15px !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .gr-button:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4) !important; | |
| } | |
| """ | |
| def update_districts(division): | |
| """Update district dropdown based on selected division""" | |
| if division in BANGLADESH_LOCATIONS: | |
| return gr.Dropdown( | |
| choices=BANGLADESH_LOCATIONS[division], | |
| value=BANGLADESH_LOCATIONS[division][0], | |
| label=f"🏘️ জেলা নির্বাচন করুন (Select District) - {division}", | |
| interactive=True | |
| ) | |
| return gr.Dropdown(choices=[], label="🏘️ জেলা নির্বাচন করুন (Select District)", interactive=True) | |
| with gr.Blocks(css=custom_css) as demo: | |
| gr.HTML(""" | |
| <div style='text-align: center; padding: 35px; background: linear-gradient(135deg, #87CEEB 0%, #00BFFF 50%, #1E90FF 100%); color: white; border-radius: 25px; margin-bottom: 30px; box-shadow: 0 15px 40px rgba(30,144,255,0.3);'> | |
| <h1 style='font-size: 48px; margin-bottom: 20px; font-weight: 900; text-shadow: 3px 3px 6px rgba(0,0,0,0.4);'>🏛️ রমজান ড্যাশবোর্ড ২০২৫ 🌙</h1> | |
| <h2 style='font-size: 42px; margin-bottom: 20px; font-weight: 800;'>Ultimate Ramadan Dashboard 2025</h2> | |
| <p style='font-size: 22px; margin: 12px 0; font-weight: 600;'>🌸 রিয়েল-টাইম নামাজের সময় • লাইভ আবহাওয়া • দৈনিক হাদিস • স্মার্ট পরামর্শ 🌸</p> | |
| <p style='font-size: 20px; margin: 10px 0; opacity: 0.95;'>Real Prayer Times • Live Weather • Daily Hadith • Smart Advice</p> | |
| <p style='font-size: 18px; opacity: 0.95; margin-top: 15px;'>🇧🇩 সমস্ত বাংলাদেশ বিভাগ ও জেলা সমর্থিত • All Bangladesh Divisions & Districts Supported</p> | |
| <div style='margin-top: 20px; font-size: 28px;'> | |
| <span>🏛️</span> <span>🌙</span> <span>🐱</span> <span>🌸</span> <span>🐈</span> <span>🌺</span> | |
| </div> | |
| </div> | |
| """) | |
| with gr.Row(): | |
| division_dropdown = gr.Dropdown( | |
| choices=list(BANGLADESH_LOCATIONS.keys()), | |
| value="Dhaka Division", | |
| label="🗺️ বিভাগ নির্বাচন করুন (Select Division)", | |
| interactive=True | |
| ) | |
| district_dropdown = gr.Dropdown( | |
| choices=BANGLADESH_LOCATIONS["Dhaka Division"], | |
| value="Dhaka", | |
| label="🏘️ জেলা নির্বাচন করুন (Select District)", | |
| interactive=True | |
| ) | |
| submit_btn = gr.Button("🌙 রমজান ড্যাশবোর্ড দেখুন (View Ramadan Dashboard)", size="lg") | |
| output = gr.HTML(label="🌙 Your Complete Ramadan Companion") | |
| # Update districts when division changes | |
| division_dropdown.change( | |
| fn=update_districts, | |
| inputs=[division_dropdown], | |
| outputs=[district_dropdown] | |
| ) | |
| # Submit button click | |
| submit_btn.click( | |
| fn=get_ramadan_dashboard, | |
| inputs=[division_dropdown, district_dropdown], | |
| outputs=[output] | |
| ) | |
| # Auto-load on page load | |
| demo.load( | |
| fn=get_ramadan_dashboard, | |
| inputs=[division_dropdown, district_dropdown], | |
| outputs=[output] | |
| ) | |
| if __name__ == "__main__": | |
| demo.launch( | |
| share=False, | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| theme=gr.themes.Soft( | |
| primary_hue="purple", | |
| secondary_hue="blue", | |
| ), | |
| ) |