templates/index.html

{% extends "base.html" %}

{% block title %}Farm Management Portal - AI-Powered Farming Solutions{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="bg-success text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-4 fw-bold">
                    <i class="fas fa-seedling me-3"></i>Farm Management Portal
                </h1>
                <p class="lead">AI-Powered farming solutions with daily recommendations, weather integration, and automated SMS alerts</p>
                <p class="mb-4">
                    <i class="fas fa-brain me-2"></i>Powered by Gemini 2.0 Flash AI
                    <span class="mx-3">|</span>
                    <i class="fas fa-sms me-2"></i>Twilio SMS Integration
                    <span class="mx-3">|</span>
                    <i class="fas fa-cloud me-2"></i>Real-time Weather Data
                </p>
            </div>
            <div class="col-md-4 text-center">
                {% if current_user.is_authenticated %}
                    <a href="{{ url_for('farmer_dashboard') }}" class="btn btn-light btn-lg me-2">
                        <i class="fas fa-tachometer-alt me-2"></i>Dashboard
                    </a>
                    <a href="{{ url_for('add_farm') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-plus me-2"></i>Add Farm
                    </a>
                {% else %}
                    <a href="{{ url_for('farmer_register') }}" class="btn btn-light btn-lg me-2">
                        <i class="fas fa-user-plus me-2"></i>Register
                    </a>
                    <a href="{{ url_for('farmer_login') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-sign-in-alt me-2"></i>Login
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="container py-5">
    <div class="row text-center mb-5">
        <div class="col-12">
            <h2 class="mb-3">Smart Farming Features</h2>
            <p class="lead text-muted">Experience the future of agriculture with our AI-powered platform</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-primary mb-3">
                        <i class="fas fa-brain fa-3x"></i>
                    </div>
                    <h5 class="card-title">AI-Powered Advisory</h5>
                    <p class="card-text">Get personalized daily farming recommendations using Gemini 2.0 Flash AI technology, tailored to your crops, soil, and weather conditions.</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-success mb-3">
                        <i class="fas fa-sms fa-3x"></i>
                    </div>
                    <h5 class="card-title">SMS Notifications</h5>
                    <p class="card-text">Receive daily farming tasks and weather alerts directly on your mobile phone via SMS, ensuring you never miss important activities.</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-info mb-3">
                        <i class="fas fa-cloud-sun fa-3x"></i>
                    </div>
                    <h5 class="card-title">Weather Integration</h5>
                    <p class="card-text">Real-time weather data and forecasts integrated with farming recommendations to optimize your agricultural activities.</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-warning mb-3">
                        <i class="fas fa-seedling fa-3x"></i>
                    </div>
                    <h5 class="card-title">Multi-Crop Management</h5>
                    <p class="card-text">Manage multiple crops with specific recommendations for each, including sowing, irrigation, fertilization, and harvesting schedules.</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-danger mb-3">
                        <i class="fas fa-mountain fa-3x"></i>
                    </div>
                    <h5 class="card-title">Soil Analysis</h5>
                    <p class="card-text">Track soil parameters including pH, NPK levels, and moisture content to get precise fertilizer and irrigation recommendations.</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 text-center border-0 shadow-sm">
                <div class="card-body">
                    <div class="feature-icon text-secondary mb-3">
                        <i class="fas fa-shield-alt fa-3x"></i>
                    </div>
                    <h5 class="card-title">Secure Platform</h5>
                    <p class="card-text">Aadhaar-based farmer authentication and secure data management with admin controls for system monitoring and management.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- How It Works Section -->
<div class="bg-light py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="mb-3">How It Works</h2>
                <p class="lead text-muted">Simple steps to smart farming</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-3 mb-4 text-center">
                <div class="mb-3">
                    <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                        <span class="h4 mb-0">1</span>
                    </div>
                </div>
                <h5>Register & Setup</h5>
                <p class="text-muted">Create your account with Aadhaar ID and add your farm details including location and crop types.</p>
            </div>
            
            <div class="col-md-3 mb-4 text-center">
                <div class="mb-3">
                    <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                        <span class="h4 mb-0">2</span>
                    </div>
                </div>
                <h5>Soil & Weather Data</h5>
                <p class="text-muted">Input soil parameters and let our system fetch real-time weather data for your farm location.</p>
            </div>
            
            <div class="col-md-3 mb-4 text-center">
                <div class="mb-3">
                    <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                        <span class="h4 mb-0">3</span>
                    </div>
                </div>
                <h5>AI Recommendations</h5>
                <p class="text-muted">Receive daily AI-generated farming tasks and advice based on your specific conditions.</p>
            </div>
            
            <div class="col-md-3 mb-4 text-center">
                <div class="mb-3">
                    <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                        <span class="h4 mb-0">4</span>
                    </div>
                </div>
                <h5>SMS Alerts</h5>
                <p class="text-muted">Get daily SMS notifications with tasks to do and avoid, keeping you informed on the go.</p>
            </div>
        </div>
    </div>
</div>

<!-- Call to Action -->
<div class="bg-success text-white py-5">
    <div class="container text-center">
        <h2 class="mb-4">Ready to Transform Your Farming?</h2>
        <p class="lead mb-4">Join thousands of farmers using AI-powered recommendations for better yields</p>
        <div class="row justify-content-center">
            <div class="col-md-6">
                {% if not current_user.is_authenticated %}
                <a href="{{ url_for('farmer_register') }}" class="btn btn-light btn-lg me-3">
                    <i class="fas fa-rocket me-2"></i>Get Started Free
                </a>
                <a href="{{ url_for('farmer_login') }}" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-sign-in-alt me-2"></i>Login
                </a>
                {% else %}
                <a href="{{ url_for('farmer_dashboard') }}" class="btn btn-light btn-lg me-3">
                    <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                </a>
                <a href="{{ url_for('add_farm') }}" class="btn btn-outline-light btn-lg">
                    <i class="fas fa-plus me-2"></i>Add New Farm
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Statistics Section -->
<div class="py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 mb-4">
                <h3 class="text-primary">AI-Powered</h3>
                <p class="text-muted">Gemini 2.0 Flash Integration</p>
            </div>
            <div class="col-md-3 mb-4">
                <h3 class="text-success">Real-time</h3>
                <p class="text-muted">Weather & Soil Monitoring</p>
            </div>
            <div class="col-md-3 mb-4">
                <h3 class="text-info">24/7</h3>
                <p class="text-muted">SMS Alert System</p>
            </div>
            <div class="col-md-3 mb-4">
                <h3 class="text-warning">Multi-Crop</h3>
                <p class="text-muted">Support for All Crop Types</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}