import gradio as gr import pandas as pd from datetime import datetime # Enhanced CSS with premium design and maximum readability custom_css = """ /* Light mode variables with enhanced contrast */ :root { --primary-green: #1a4d2e; --secondary-green: #2d5a3d; --tertiary-green: #4a7c59; --accent-green: #6bb26b; --light-green: #8bc68b; --forest-green: #0f2818; --mint-green: #9dd49d; --emerald-green: #50c878; --neon-green: #39ff14; /* High contrast text colors */ --text-primary: #0d1a0d; --text-secondary: #1a2e1a; --text-accent: #2d5a3d; --text-light: #ffffff; --text-muted: #4a7c59; /* Enhanced background colors */ --bg-primary: #ffffff; --bg-secondary: #f8fdf8; --bg-tertiary: #ecf8ec; --bg-card: #ffffff; --bg-hover: #e8f5e8; --bg-gradient: linear-gradient(135deg, #f8fdf8 0%, #ecf8ec 100%); /* Enhanced shadows and effects */ --border-color: #6bb26b; --shadow-light: rgba(26, 77, 46, 0.08); --shadow-medium: rgba(26, 77, 46, 0.15); --shadow-heavy: rgba(26, 77, 46, 0.25); --shadow-glow: 0 0 30px rgba(57, 255, 20, 0.3); } /* Dark mode variables */ @media (prefers-color-scheme: dark) { :root { --primary-green: #4a9d4a; --secondary-green: #6bb26b; --tertiary-green: #8bc68b; --accent-green: #9dd49d; --light-green: #b8e6b8; --forest-green: #2d5a3d; --mint-green: #6b9279; --emerald-green: #7fbc7f; /* Text colors for dark mode */ --text-primary: #e8f5e8; --text-secondary: #d0e8d0; --text-light: #ffffff; /* Background colors for dark mode */ --bg-primary: #1a1f1a; --bg-secondary: #212621; --bg-tertiary: #2d332d; --bg-card: #262b26; --bg-hover: #333833; /* Border and shadow for dark mode */ --border-color: #6bb26b; --shadow-light: rgba(74, 157, 74, 0.15); --shadow-medium: rgba(74, 157, 74, 0.25); --shadow-heavy: rgba(74, 157, 74, 0.35); } } /* Global body styling */ body { background: var(--bg-primary) !important; color: var(--text-primary) !important; transition: all 0.3s ease; } /* Gradio container styling */ .gradio-container { background: var(--bg-primary) !important; color: var(--text-primary) !important; } /* Header styling with enhanced green gradients */ .header-container { background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 50%, var(--tertiary-green) 100%); color: var(--text-light); padding: 3rem 2rem; text-align: center; margin-bottom: 2rem; border-radius: 16px; box-shadow: 0 8px 32px var(--shadow-heavy); border: 1px solid var(--accent-green); position: relative; overflow: hidden; } .header-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); pointer-events: none; } .header-title { font-size: 3rem; font-weight: 800; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .header-subtitle { font-size: 1.4rem; opacity: 0.95; margin-bottom: 1rem; font-weight: 500; } /* Enhanced feature cards */ .feature-card { background: var(--bg-card); border: 2px solid var(--accent-green); border-radius: 16px; padding: 2rem; margin: 1.5rem 0; box-shadow: 0 6px 20px var(--shadow-light); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--mint-green), transparent); opacity: 0.1; transition: left 0.6s ease; } .feature-card:hover::before { left: 100%; } .feature-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 40px var(--shadow-medium); border-color: var(--emerald-green); } .feature-title { color: var(--primary-green); font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 12px; } .feature-description { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.2rem; font-size: 1.1rem; } .feature-list { color: var(--text-secondary); margin-left: 1.5rem; line-height: 1.8; } /* Enhanced coming soon section */ .coming-soon { background: linear-gradient(135deg, var(--forest-green) 0%, var(--primary-green) 50%, var(--secondary-green) 100%); color: var(--text-light); padding: 3rem; border-radius: 20px; text-align: center; margin: 3rem 0; box-shadow: 0 10px 40px var(--shadow-heavy); border: 2px solid var(--emerald-green); position: relative; overflow: hidden; } .coming-soon::before { content: '🌟'; position: absolute; top: 20px; right: 20px; font-size: 2rem; opacity: 0.3; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.6; } } .coming-soon-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } /* Enhanced founder section */ .founder-section { background: var(--bg-secondary); border: 3px solid var(--accent-green); border-radius: 16px; padding: 2.5rem; margin: 3rem 0; box-shadow: 0 8px 30px var(--shadow-light); position: relative; } .founder-section::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary-green), var(--accent-green), var(--emerald-green), var(--primary-green)); border-radius: 16px; z-index: -1; opacity: 0.1; } .founder-title { color: var(--primary-green); font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; } /* Enhanced button styling */ .demo-button { background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%) !important; color: var(--text-light) !important; border: 2px solid var(--accent-green) !important; padding: 15px 30px !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 1.1rem !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px var(--shadow-light) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .demo-button:hover { background: linear-gradient(135deg, var(--secondary-green) 0%, var(--tertiary-green) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px var(--shadow-medium) !important; border-color: var(--emerald-green) !important; } /* Enhanced stats/how-to-use grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 3rem 0; } .stat-card { background: var(--bg-card); border: 2px solid var(--accent-green); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: all 0.3s ease; box-shadow: 0 6px 20px var(--shadow-light); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-green), var(--accent-green), var(--emerald-green)); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px var(--shadow-medium); border-color: var(--emerald-green); } .stat-number { color: var(--primary-green); font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; text-shadow: 1px 1px 2px var(--shadow-light); } .stat-label { color: var(--text-secondary); font-size: 1rem; margin-top: 0.8rem; line-height: 1.6; font-weight: 500; } /* Section headers */ h2 { color: var(--primary-green) !important; font-weight: 700 !important; text-shadow: 1px 1px 2px var(--shadow-light) !important; } /* Responsive design */ @media (max-width: 768px) { .header-title { font-size: 2.2rem; } .stats-grid { grid-template-columns: 1fr; gap: 1rem; } .feature-card { padding: 1.5rem; } } /* Scrollbar styling */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--accent-green); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-green); } """ def create_main_content(): return """
🌾 Shafaq's AgriWeather Hub
Real-time Weather Data & Smart Farming Assistant

Empowering farmers with precision agriculture through intelligent weather insights and crop management tools

""" def create_features_section(): return """
🌤️ Real-Time Weather Dashboard
Get comprehensive weather data tailored for agricultural needs with location-specific insights for optimal farming decisions.
• Live temperature, humidity, and precipitation data
• Wind speed and pressure monitoring
• UV index and visibility tracking
• 7-day detailed weather forecasts
• Agricultural weather alerts and warnings
🤖 AgriBot Assistant
Your personal farming advisor powered by AI, providing expert guidance on irrigation, crop management, and seasonal planning.
• Smart irrigation scheduling recommendations
• Crop-specific growing advice and tips
• Pest and disease identification support
• Soil health and nutrient management guidance
• Seasonal farming calendar and reminders
🌱 Crop Intelligence System
Discover the best crops for your region with detailed growing guides and environmental condition matching.
• Region-specific crop recommendations
• Detailed growing conditions and requirements
• Seasonal planting and harvesting schedules
• Yield optimization strategies
• Market price trends and analysis
""" def create_coming_soon_section(): return """
🚀 Coming Soon: Advanced Features
🔬 AI-Powered Plant Doctor
Advanced plant identification system that helps diagnose diseases, identify pests, and provides detailed treatment recommendations with step-by-step cure guides

📱 Mobile App with Offline Capabilities
Take AgriWeather Hub with you to the field, even without internet connectivity

🌍 Community Farming Network
Connect with local farmers, share insights, and access cooperative farming resources
""" def create_founder_section(): return """
👨‍🌾 Meet the Visionary Behind AgriWeather Hub
Shafaq is a passionate agricultural technology innovator with a deep understanding of modern farming challenges. With a background in both technology and agriculture, Shafaq recognized the critical need for accessible, intelligent farming tools that could help farmers make data-driven decisions.

🎯 Vision: "To democratize precision agriculture by making advanced weather intelligence and farming insights accessible to farmers of all scales, from smallholder farms to large agricultural enterprises."

🚀 Mission: Bridging the gap between traditional farming wisdom and modern technology to create sustainable, profitable, and environmentally conscious agricultural practices.

🌟 Background:
• 🎓 Agricultural Engineering & Data Science
• 🌾 5+ years in precision agriculture research
• 💡 Multiple agricultural innovation awards
• 🤝 Collaborated with farming communities across diverse climates
• 🌱 Advocate for sustainable farming practices
""" def create_how_to_use_section(): return """
1️⃣
Enter Your Location
Simply input your city or coordinates to get localized weather data
2️⃣
Choose Your Crops
Select from our extensive crop database for personalized recommendations
3️⃣
Get Smart Insights
Receive AI-powered farming advice and weather-based recommendations
4️⃣
Take Action
Implement suggested irrigation, planting, and harvesting schedules
""" def launch_demo(): return "🚀 Launching AgriWeather Hub Demo... Please wait while we redirect you to the full application!" def connect_with_founder(): # JavaScript to open LinkedIn in new tab linkedin_url = "https://www.linkedin.com/in/shafaq-mandha-a0b2a4280/" js_code = f""" """ return js_code # Create the Gradio interface with gr.Blocks(css=custom_css, title="Shafaq's AgriWeather Hub") as demo: # Main header gr.HTML(create_main_content()) # How to Use section gr.HTML("

📋 How to Use AgriWeather Hub

") gr.HTML(create_how_to_use_section()) # Features section with gr.Row(): with gr.Column(): gr.HTML("

🌟 Core Features

") gr.HTML(create_features_section()) # Coming soon section gr.HTML(create_coming_soon_section()) # About founder section gr.HTML(create_founder_section()) # Action buttons with gr.Row(): with gr.Column(): gr.HTML(""" """) with gr.Column(): gr.HTML(""" """) # Footer with premium styling gr.HTML("""

🌾 Shafaq's AgriWeather Hub - Cultivating Tomorrow's Agriculture Today ✨

© 2024 AgriWeather Hub. All rights reserved. | Made with ❤️ for farmers worldwide

🌍 Sustainable • 📊 Data-Driven • 🤝 Community-Focused • 🔬 Innovation-Led
""") if __name__ == "__main__": demo.launch( server_name="0.0.0.0", server_port=7860, share=True, show_error=True )