From c05629a0f96b24e320de1009854590de2058e235 Mon Sep 17 00:00:00 2001 From: Kondareddy Date: Fri, 24 Oct 2025 09:44:41 +0530 Subject: [PATCH 1/3] Fix mobile responsive UI for about page stats section --- frontend/about/about.css | 68 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/frontend/about/about.css b/frontend/about/about.css index 47f9f58..42ec8e1 100644 --- a/frontend/about/about.css +++ b/frontend/about/about.css @@ -428,8 +428,29 @@ section { .hero-content h1 { font-size: 2rem; } + .hero-content p { + font-size: 1rem; + padding: 0 1rem; + } .stats-grid { - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr; + gap: 1.5rem; + padding: 0 1rem; + } + .stat-card { + padding: 1.5rem; + } + .stat-number { + font-size: 2.5rem; + } + .stat-label { + font-size: 0.95rem; + } + .section-header h2 { + font-size: 1.8rem; + } + .features-grid, .vision-mission-grid, .team-grid { + grid-template-columns: 1fr; } .timeline::before { left: 0; @@ -441,4 +462,49 @@ section { .timeline-dot { left: 0; } + .floating-icons span { + font-size: 1.5rem; + } + .overview-content { + padding: 1.5rem; + font-size: 1rem; + } } + +@media (max-width: 480px) { + .hero-content h1 { + font-size: 1.6rem; + } + .hero-content p { + font-size: 0.9rem; + padding: 0 1rem; + } + .container { + padding: 0 15px; + } + .stat-number { + font-size: 2rem; + } + .section-header h2 { + font-size: 1.5rem; + } + .scroll-button { + padding: 8px 16px; + font-size: 0.9rem; + } + section { + padding: 3rem 0; + } + .feature-icon { + width: 60px; + height: 60px; + font-size: 1.7rem; + } + .feature-card h4 { + font-size: 1.1rem; + } + .team-image { + font-size: 3rem; + height: 200px; + } +} \ No newline at end of file From c72f4dea14067b24f6ef57142b64712e57d5a8b4 Mon Sep 17 00:00:00 2001 From: Kondareddy Date: Fri, 24 Oct 2025 10:00:02 +0530 Subject: [PATCH 2/3] Add comprehensive documentation page for WardhaMetroFlow --- frontend/documentation/documentation.html | 955 ++++++++++++++++++++++ 1 file changed, 955 insertions(+) create mode 100644 frontend/documentation/documentation.html diff --git a/frontend/documentation/documentation.html b/frontend/documentation/documentation.html new file mode 100644 index 0000000..b5fbc03 --- /dev/null +++ b/frontend/documentation/documentation.html @@ -0,0 +1,955 @@ + + + + + + Documentation - WardhaMetroFlow + + + + + +
+ +
+

📚 WardhaMetroFlow Documentation

+

An AI-powered metro simulation for Wardha city offering smart route planning, real-time traffic monitoring, and intelligent transit management for a smarter future.

+
+ Smart Metro System + AI Powered + Multi-Platform + Real-Time Analytics +
+
+ +
+ + + + +
+ +
+

Project Overview

+

WardhaMetroFlow is a comprehensive AI-powered metro simulation platform designed specifically for Wardha city, Maharashtra, India. This innovative project demonstrates how artificial intelligence and modern technology can revolutionize urban mobility and public transportation management in emerging smart cities.

+ +
+ +
+ Vision: To create smarter, more efficient, and commuter-friendly metro systems that leverage AI for real-time traffic optimization, predictive passenger flow analysis, intelligent route planning, and proactive congestion management. +
+
+ +

🎯 Project Goals

+
    +
  • Transform urban mobility through smart, AI-driven transit solutions
    • +
  • Reduce travel time and congestion with intelligent route optimization
    • +
  • Enhance commuter experience with real-time information and predictions
    • +
  • Support city planners with data-driven insights for infrastructure development
    • +
  • Promote sustainable and eco-friendly public transportation
    • +
  • Create an accessible platform for research and innovation in urban mobility
    • +
+ +
+
+ 15 + Metro Stations +
+
+ 85% + AI Accuracy +
+
+ 24/7 + Real-Time Monitoring +
+
+ 100% + Smart Integration +
+
+
+ + +
+

Key Features

+ +
+
+

Smart Route Planning

+

AI-powered route optimization that finds the fastest path between stations, considering real-time congestion and traffic patterns.

+
+ +
+

Real-Time Updates

+

Live arrival times, platform information, and delay notifications to keep passengers informed at every step.

+
+ +
+

Congestion Heatmaps

+

Visual representation of crowd levels across all stations, helping commuters choose less crowded travel times.

+
+ +
+

AI Predictions

+

Machine learning models predict passenger flow, helping optimize metro operations and resource allocation.

+
+ +
+

Interactive Maps

+

Detailed metro network maps with station information, connections, and real-time train locations.

+
+ +
+

Fare Estimation

+

Transparent distance-based fare calculator with journey time estimates and route comparisons.

+
+ +
+

Analytics Dashboard

+

Comprehensive insights for administrators including passenger trends, peak hours, and system performance.

+
+ +
+

Multi-Language Support

+

Available in English and Marathi to serve diverse communities and improve accessibility.

+
+
+
+ + +
+

System Views

+

WardhaMetroFlow offers two comprehensive views designed for different user needs:

+ +

🚇 Passenger View

+
+ +
+ The Passenger View is designed for daily commuters and travelers who want to plan their journeys efficiently. +
+
+ +
+
+

Route Planner

+
    +
  • Select origin and destination stations
    • +
  • View multiple route options
    • +
  • Compare travel times and distances
    • +
  • Get step-by-step directions
    • +
+
+ +
+

Smart Suggestions

+
    +
  • AI-recommended fastest routes
    • +
  • Alternative paths during congestion
    • +
  • Best travel time recommendations
    • +
  • Platform and coach information
    • +
+
+ +
+

Journey Simulation

+
    +
  • Visual journey progress tracking
    • +
  • Real-time location updates
    • +
  • Estimated time of arrival
    • +
  • Connection information
    • +
+
+ +
+

Mobile Experience

+
    +
  • Fully responsive design
    • +
  • Touch-optimized interface
    • +
  • Offline station information
    • +
  • Quick access features
    • +
+
+
+ +

⚙️ Admin View

+
+ +
+ The Admin View provides comprehensive tools for metro operators to monitor, manage, and optimize the entire transit system. +
+
+ +
+
+

Traffic Monitoring

+
    +
  • Real-time passenger flow tracking
    • +
  • Station-wise congestion levels
    • +
  • Peak hour identification
    • +
  • Historical trend analysis
    • +
+
+ +
+

Station Management

+
    +
  • Add/edit/delete station information
    • +
  • Update connectivity and routes
    • +
  • Manage station facilities
    • +
  • Control operational status
    • +
+
+ +
+

AI Predictions

+
    +
  • Passenger flow forecasting
    • +
  • Congestion prediction models
    • +
  • Capacity planning insights
    • +
  • Demand pattern analysis
    • +
+
+ +
+

Alert System

+
    +
  • Automated congestion alerts
    • +
  • System performance warnings
    • +
  • Maintenance notifications
    • +
  • Emergency broadcast capability
    • +
+
+
+
+ + +
+

AI & Machine Learning

+

WardhaMetroFlow leverages cutting-edge artificial intelligence and machine learning technologies to provide intelligent transit solutions.

+ +

🔮 Machine Learning Models

+ +
+
+

Passenger Flow Prediction

+

Algorithm: Random Forest Regressor

+

Accuracy: ~85% on test data

+

Features: Hour of day, day of week, station ID, historical patterns

+

Purpose: Predict passenger count at specific times to optimize operations

+
+ +
+

Route Optimization

+

Algorithm: Dijkstra's Shortest Path

+

Features: Distance, congestion levels, transfer points

+

Updates: Dynamic routing based on current conditions

+

Purpose: Find optimal routes between any two stations

+
+ +
+

Congestion Analysis

+

Technology: Folium + Streamlit

+

Visualization: Color-coded heat maps

+

Updates: Live refresh every 30 seconds

+

Purpose: Real-time visualization of station congestion

+
+ +
+

Time Series Forecasting

+

Method: Historical pattern analysis

+

Data: 1000+ passenger records

+

Patterns: Peak hours, weekends, special events

+

Purpose: Long-term capacity planning

+
+
+ +
+ +
+ Model Training: Our AI models are trained on synthetic passenger data that mirrors real-world patterns including rush hours (7-9 AM, 5-7 PM with 2.5x multiplier) and weekend variations (30% reduction). +
+
+
+ + +
+

Wardha Metro Network

+

The Wardha Metro network connects 15 strategically located stations across the city, covering major residential, commercial, and educational hubs.

+ +
+ +
+ Network Coverage: The metro network spans across Wardha city with stations positioned to serve maximum population density and key landmarks including hospitals, educational institutions, commercial centers, and residential areas. +
+
+ +

🚉 Major Stations

+
    +
  • Datta Meghe Institute: Educational hub serving university campus and surrounding areas
    • +
  • Wardha Junction: Main railway connectivity and city center
    • +
  • Bajaj Square: Commercial district and shopping area
    • +
  • Civil Hospital: Healthcare facility access
    • +
  • Sawangi: Residential and medical college area
    • +
  • Master Colony: Residential neighborhood
    • +
  • Ram Nagar: Mixed-use development zone
    • +
+ +

🔗 Connectivity Features

+
    +
  • All stations interconnected with efficient routing
    • +
  • Multiple transfer points for flexible travel
    • +
  • Integration with existing bus and auto networks
    • +
  • Park and ride facilities at major stations
    • +
  • Last-mile connectivity options
    • +
+
+ + +
+

Project Benefits

+ +
+
+

For Commuters

+
    +
  • Reduced travel time with optimized routes
    • +
  • Real-time information and updates
    • +
  • Predictable and reliable transit
    • +
  • Cost-effective transportation
    • +
  • Enhanced safety and comfort
    • +
+
+ +
+

For City Development

+
    +
  • Reduced traffic congestion
    • +
  • Lower carbon emissions
    • +
  • Improved air quality
    • +
  • Economic growth stimulus
    • +
  • Enhanced urban connectivity
    • +
+
+ +
+

For Administrators

+
    +
  • Data-driven decision making
    • +
  • Efficient resource allocation
    • +
  • Predictive maintenance
    • +
  • Better capacity planning
    • +
  • Cost optimization
    • +
+
+ +
+

For Research

+
    +
  • Urban mobility studies
    • +
  • AI/ML application testing
    • +
  • Transportation modeling
    • +
  • Smart city research
    • +
  • Innovation platform
    • +
+
+
+
+ + +
+

Future Scope & Enhancements

+

WardhaMetroFlow is designed with scalability and future growth in mind. Here are planned enhancements:

+ +

🚀 Upcoming Features

+
+
+

Mobile Applications

+

Native iOS and Android apps with offline capabilities, push notifications, and digital ticketing

+
+ +
+

Voice Assistant

+

Voice-enabled route planning and real-time updates for hands-free operation and accessibility

+
+ +
+

Digital Ticketing

+

QR code-based tickets, mobile wallets, and contactless payment integration

+
+ +
+

Personalization

+

User profiles with favorite routes, travel history, and personalized recommendations

+
+ +
+

IoT Integration

+

Smart sensors for real-time crowd detection, temperature monitoring, and facility management

+
+ +
+

API Marketplace

+

Public APIs for third-party developers to build innovative transit applications

+
+
+ +

🌟 Long-term Vision

+
    +
  • Integration with other Indian smart cities for unified transit planning
    • +
  • Advanced ML models using deep learning and neural networks
    • +
  • Autonomous train operations with AI-driven control systems
    • +
  • Green energy integration with solar-powered stations
    • +
  • Virtual reality station tours and navigation assistance
    • +
  • Blockchain-based transparent fare management
    • +
  • Integration with ride-sharing and bike-sharing services
    • +
+ +
+ +
+ Community Driven: This is an open-source project and we welcome contributions from developers, designers, and transit enthusiasts to help shape the future of urban mobility. +
+
+
+ + +
+

🚀 Experience WardhaMetroFlow

+

+ Explore the future of smart urban transportation. Plan your journey, analyze traffic patterns, or dive into the AI models powering intelligent transit. +

+
+ + Passenger View + + + Admin Dashboard + + + Home Page + +
+

+ © 2025 WardhaMetroFlow | Built with ❤️ for Smarter Cities +

+
+
+
+ + + + \ No newline at end of file From c1aa08fecc680df7320b178dd739019e3012b834 Mon Sep 17 00:00:00 2001 From: Kondareddy Date: Sun, 26 Oct 2025 19:27:02 +0530 Subject: [PATCH 3/3] Add comprehensive documentation page for WardhaMetroFlow --- frontend/documentation/documentation.css | 384 ++++++++++++++++ frontend/documentation/documentation.html | 527 +--------------------- frontend/documentation/documentation.js | 100 ++++ 3 files changed, 492 insertions(+), 519 deletions(-) create mode 100644 frontend/documentation/documentation.css create mode 100644 frontend/documentation/documentation.js diff --git a/frontend/documentation/documentation.css b/frontend/documentation/documentation.css new file mode 100644 index 0000000..b9af424 --- /dev/null +++ b/frontend/documentation/documentation.css @@ -0,0 +1,384 @@ +:root { + --primary: #ea580c; + --primary-dark: #c2410c; + --secondary: #16a34a; + --accent: #3b82f6; + --text-dark: #1e293b; + --text-light: #64748b; + --bg-light: #f9fafb; + --bg-white: #ffffff; + --border: #e2e8f0; + --code-bg: #f1f5f9; + --success: #10b981; + --warning: #f59e0b; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background: var(--bg-light); + color: var(--text-dark); + line-height: 1.7; +} + +/* Scroll Progress */ +.scroll-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 4px; + background: var(--primary); + z-index: 1000; + transition: width 0.1s; +} + +/* Header */ +.doc-header { + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: white; + padding: 3rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +.doc-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.doc-header h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + position: relative; + z-index: 1; +} + +.doc-header p { + font-size: 1.1rem; + opacity: 0.95; + position: relative; + z-index: 1; + max-width: 800px; + margin: 0 auto; +} + +.badges { + margin-top: 1.5rem; + display: flex; + gap: 0.5rem; + justify-content: center; + flex-wrap: wrap; +} + +.badge { + background: rgba(255,255,255,0.2); + padding: 0.4rem 1rem; + border-radius: 20px; + font-size: 0.85rem; + backdrop-filter: blur(10px); +} + +/* Layout */ +.doc-container { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 280px 1fr; + gap: 2rem; + padding: 2rem; +} + +/* Sidebar */ +.sidebar { + position: sticky; + top: 2rem; + height: fit-content; + background: var(--bg-white); + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.sidebar h3 { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-light); + margin-bottom: 1rem; +} + +.sidebar nav ul { + list-style: none; +} + +.sidebar nav ul li { + margin-bottom: 0.5rem; +} + +.sidebar nav ul li a { + color: var(--text-dark); + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 0.8rem; + border-radius: 6px; + transition: all 0.2s; + font-size: 0.95rem; +} + +.sidebar nav ul li a:hover, +.sidebar nav ul li a.active { + background: var(--primary); + color: white; + transform: translateX(5px); +} + +.sidebar nav ul li a i { + width: 20px; + font-size: 0.9rem; +} + +/* Main Content */ +.main-content { + background: var(--bg-white); + border-radius: 12px; + padding: 2.5rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.section { + margin-bottom: 3rem; + scroll-margin-top: 2rem; +} + +.section h2 { + font-size: 2rem; + margin-bottom: 1rem; + color: var(--text-dark); + display: flex; + align-items: center; + gap: 0.5rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--primary); +} + +.section h2 i { + color: var(--primary); +} + +.section h3 { + font-size: 1.5rem; + margin: 2rem 0 1rem; + color: var(--text-dark); +} + +.section h4 { + font-size: 1.2rem; + margin: 1.5rem 0 0.8rem; + color: var(--text-dark); +} + +.section p { + margin-bottom: 1rem; + color: var(--text-light); + line-height: 1.8; +} + +.section ul, .section ol { + margin: 1rem 0 1rem 1.5rem; + color: var(--text-light); +} + +.section li { + margin-bottom: 0.5rem; +} + +/* Feature Grid */ +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; + margin: 2rem 0; +} + +.feature-card { + background: var(--bg-light); + padding: 1.5rem; + border-radius: 10px; + border-left: 4px solid var(--primary); + transition: all 0.3s; +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(234, 88, 12, 0.15); +} + +.feature-card h4 { + margin: 0 0 0.5rem 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.feature-card p { + margin: 0; + font-size: 0.95rem; +} + +.feature-card ul { + margin: 0.5rem 0 0 1rem; + padding: 0; +} + +.feature-card li { + font-size: 0.9rem; + margin-bottom: 0.3rem; +} + +/* Alert Boxes */ +.alert { + padding: 1rem 1.5rem; + border-radius: 8px; + margin: 1.5rem 0; + display: flex; + align-items: start; + gap: 1rem; +} + +.alert i { + font-size: 1.2rem; + margin-top: 0.2rem; +} + +.alert-info { + background: #dbeafe; + color: #1e40af; + border-left: 4px solid var(--accent); +} + +.alert-success { + background: #d1fae5; + color: #065f46; + border-left: 4px solid var(--secondary); +} + +.alert-warning { + background: #fef3c7; + color: #92400e; + border-left: 4px solid var(--warning); +} + +/* Stats Grid */ +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin: 2rem 0; +} + +.stat-card { + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: white; + padding: 2rem; + border-radius: 10px; + text-align: center; + transition: all 0.3s; +} + +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3); +} + +.stat-number { + font-size: 2.5rem; + font-weight: 700; + display: block; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 1rem; + opacity: 0.9; +} + +/* Quick Links */ +.quick-links { + display: flex; + gap: 1rem; + margin: 2rem 0; + flex-wrap: wrap; +} + +.quick-link { + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: white; + padding: 1rem 1.5rem; + border-radius: 8px; + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + transition: all 0.3s; + font-weight: 500; +} + +.quick-link:hover { + transform: translateY(-3px); + box-shadow: 0 5px 20px rgba(234, 88, 12, 0.3); +} + +/* Responsive */ +@media (max-width: 1024px) { + .doc-container { + grid-template-columns: 1fr; + } + + .sidebar { + position: static; + margin-bottom: 2rem; + } +} + +@media (max-width: 768px) { + .doc-header h1 { + font-size: 1.8rem; + } + + .doc-container { + padding: 1rem; + } + + .main-content { + padding: 1.5rem; + } + + .section h2 { + font-size: 1.5rem; + } + + .feature-grid, + .stats-grid { + grid-template-columns: 1fr; + } + + .badges { + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/frontend/documentation/documentation.html b/frontend/documentation/documentation.html index b5fbc03..672acda 100644 --- a/frontend/documentation/documentation.html +++ b/frontend/documentation/documentation.html @@ -6,393 +6,7 @@ Documentation - WardhaMetroFlow - - +
@@ -408,7 +22,6 @@

📚 WardhaMetroFlow Documentation

- -
-

Project Overview

WardhaMetroFlow is a comprehensive AI-powered metro simulation platform designed specifically for Wardha city, Maharashtra, India. This innovative project demonstrates how artificial intelligence and modern technology can revolutionize urban mobility and public transportation management in emerging smart cities.

- +
@@ -468,10 +79,9 @@

🎯 Project Goals

-

Key Features

- +

Smart Route Planning

@@ -515,7 +125,6 @@

Multi-Language Support

-

System Views

WardhaMetroFlow offers two comprehensive views designed for different user needs:

@@ -586,6 +195,7 @@

Traffic Monitoring

  • Station-wise congestion levels
  • Peak hour identification
  • Historical trend analysis
    • +
  • AI-recommended fastest routes
    • @@ -621,13 +231,12 @@

    Alert System

    -

    AI & Machine Learning

    WardhaMetroFlow leverages cutting-edge artificial intelligence and machine learning technologies to provide intelligent transit solutions.

    🔮 Machine Learning Models

    - +

    Passenger Flow Prediction

    @@ -636,7 +245,7 @@

    Passenger Flow Prediction

    Features: Hour of day, day of week, station ID, historical patterns

    Purpose: Predict passenger count at specific times to optimize operations

    - +

    Route Optimization

    Algorithm: Dijkstra's Shortest Path

    @@ -644,7 +253,7 @@

    Route Optimization

    Updates: Dynamic routing based on current conditions

    Purpose: Find optimal routes between any two stations

    - +

    Congestion Analysis

    Technology: Folium + Streamlit

    @@ -670,7 +279,6 @@

    Time Series Forecasting

    -

    Wardha Metro Network

    The Wardha Metro network connects 15 strategically located stations across the city, covering major residential, commercial, and educational hubs.

    @@ -703,7 +311,6 @@

    🔗 Connectivity Features

    -

    Project Benefits

    @@ -754,7 +361,6 @@

    For Research

    -

    Future Scope & Enhancements

    WardhaMetroFlow is designed with scalability and future growth in mind. Here are planned enhancements:

    @@ -811,7 +417,6 @@

    🌟 Long-term Vision

    -

    🚀 Experience WardhaMetroFlow

    @@ -835,121 +440,5 @@

    🚀 Experience Ward

    - - + \ No newline at end of file diff --git a/frontend/documentation/documentation.js b/frontend/documentation/documentation.js new file mode 100644 index 0000000..6796d94 --- /dev/null +++ b/frontend/documentation/documentation.js @@ -0,0 +1,100 @@ +// Scroll Progress Bar +window.addEventListener('scroll', () => { + const winScroll = document.body.scrollTop || document.documentElement.scrollTop; + const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrolled = (winScroll / height) * 100; + document.getElementById('scrollProgress').style.width = scrolled + '%'; +}); + +// Smooth Scroll for Navigation +document.querySelectorAll('.sidebar a').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + + // Remove active class from all links + document.querySelectorAll('.sidebar a').forEach(link => link.classList.remove('active')); + + // Add active class to clicked link + this.classList.add('active'); + + // Smooth scroll to section + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); +}); + +// Update active link on scroll +window.addEventListener('scroll', () => { + const sections = document.querySelectorAll('.section'); + const navLinks = document.querySelectorAll('.sidebar a'); + + let current = ''; + sections.forEach(section => { + // The offsetTop should be compared to a position slightly above the viewport + const sectionTop = section.offsetTop; + if (pageYOffset >= sectionTop - 100) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === '#' + current) { + link.classList.add('active'); + } + }); +}); + +// Animation on scroll for feature cards and alerts +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, { threshold: 0.1 }); + +document.querySelectorAll('.feature-card, .stat-card, .alert').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'all 0.6s ease'; + observer.observe(el); +}); + +// Observe stat cards for counter animation +const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const numberElement = entry.target.querySelector('.stat-number'); + const text = numberElement.textContent; + const isPercentage = text.includes('%'); + const number = parseInt(text.replace(/[^0-9]/g, '')); + + // Reset number for animation + numberElement.textContent = '0' + (isPercentage ? '%' : ''); + + setTimeout(() => { + let current = 0; + const increment = number / 50; // 50 steps + const timer = setInterval(() => { + current += increment; + if (current >= number) { + numberElement.textContent = number + (isPercentage ? '%' : ''); + clearInterval(timer); + } else { + numberElement.textContent = Math.floor(current) + (isPercentage ? '%' : ''); + } + }, 30); // 30ms interval + }, 200); + + statsObserver.unobserve(entry.target); + } + }); +}, { threshold: 0.5 }); + +document.querySelectorAll('.stat-card').forEach(card => { + statsObserver.observe(card); +}); \ No newline at end of file