Upload 136 files

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+web/backend/python/blast_db/biostream_db.ndb filter=lfs diff=lfs merge=lfs -text
+web/backend/python/blast_db/biostream_db.ntf filter=lfs diff=lfs merge=lfs -text
+web/public/sounds/bird-call.mp3 filter=lfs diff=lfs merge=lfs -text
+web/public/sounds/forest-ambience.mp3 filter=lfs diff=lfs merge=lfs -text
+web/public/sounds/industrial-hum.mp3 filter=lfs diff=lfs merge=lfs -text
+web/public/sounds/river.mp3 filter=lfs diff=lfs merge=lfs -text

web/backend/SETUP.md

@@ -0,0 +1,403 @@
+# 🧪 Aqua-Lens Backend Setup Guide
+
+## Overview
+
+The Aqua-Lens backend provides enhanced processing capabilities using multiple programming languages for maximum accuracy and performance.
+
+## 🏗️ Architecture
+
+- **Node.js** - API server and coordination
+- **Python** - AI-powered image analysis with OpenCV
+- **C++** - High-performance image preprocessing
+- **SQLite** - Comprehensive data storage
+
+## 🚀 Quick Setup
+
+### 1. Install Node.js Dependencies
+```bash
+cd web/backend
+npm install
+```
+
+### 2. Setup Python Environment
+```bash
+# Install Python dependencies
+pip install -r python/requirements.txt
+
+# Or using virtual environment
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+pip install -r python/requirements.txt
+```
+
+### 3. Build C++ Components (Optional)
+```bash
+# Install OpenCV (Ubuntu/Debian)
+sudo apt-get install libopencv-dev
+
+# Install OpenCV (macOS)
+brew install opencv
+
+# Build the image processor
+cd cpp
+make
+```
+
+### 4. Initialize Database
+```bash
+npm run init-db
+```
+
+### 5. Start the Server
+```bash
+npm start
+# Or for development
+npm run dev
+```
+
+## 📋 Dependencies
+
+### Node.js Packages
+- `express` - Web server framework
+- `multer` - File upload handling
+- `sqlite3` - Database interface
+- `sharp` - Image processing
+- `cors` - Cross-origin requests
+- `uuid` - Unique ID generation
+
+### Python Packages
+- `opencv-python` - Computer vision
+- `Pillow` - Image processing
+- `numpy` - Numerical computing
+- `scipy` - Scientific computing
+- `scikit-image` - Image analysis
+
+### C++ Dependencies
+- `OpenCV 4.x` - Computer vision library
+- `g++` - C++ compiler
+- `make` - Build system
+
+## 🔧 Configuration
+
+### Environment Variables
+Create a `.env` file in the backend directory:
+```env
+PORT=5000
+NODE_ENV=development
+DATABASE_PATH=./database/water_quality.db
+UPLOAD_DIR=./uploads
+TEMP_DIR=./temp
+```
+
+### API Endpoints
+
+#### POST /api/analyze-water
+Upload and analyze water test strip image
+- **Body**: FormData with image file
+- **Response**: Water quality analysis results
+
+#### GET /api/water-map
+Get water quality map data
+- **Query**: lat, lng, radius
+- **Response**: Array of water quality points
+
+#### GET /api/alerts
+Get contamination alerts
+- **Query**: lat, lng, radius, severity
+- **Response**: Array of active alerts
+
+#### GET /api/health
+System health check
+- **Response**: Service status information
+
+## 🧪 Testing
+
+### Test Python Analysis
+```bash
+cd python
+python water_analysis.py ../test_images/sample.jpg tap_water
+```
+
+### Test C++ Processing
+```bash
+cd cpp
+make test
+```
+
+### Test API Endpoints
+```bash
+# Health check
+curl http://localhost:5000/api/health
+
+# Upload test image
+curl -X POST -F "image=@test.jpg" -F "waterSource=Tap Water" \
+  http://localhost:5000/api/analyze-water
+```
+
+## 🐳 Docker Setup (Optional)
+
+### Build Docker Image
+```bash
+docker build -t aqua-lens-backend .
+```
+
+### Run Container
+```bash
+docker run -p 5000:5000 -v $(pwd)/database:/app/database aqua-lens-backend
+```
+
+## 🔍 Troubleshooting
+
+### Common Issues
+
+#### Python Dependencies
+```bash
+# If OpenCV installation fails
+pip install opencv-python-headless
+
+# For ARM-based systems (M1 Mac)
+pip install opencv-python --no-binary opencv-python
+```
+
+#### C++ Compilation
+```bash
+# If OpenCV not found
+export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:$PKG_CONFIG_PATH
+
+# Alternative compilation
+g++ -std=c++11 -o image_processor image_processor.cpp \
+  -lopencv_core -lopencv_imgproc -lopencv_imgcodecs
+```
+
+#### Database Issues
+```bash
+# Reset database
+rm database/water_quality.db
+npm run init-db
+```
+
+## 📊 Performance Optimization
+
+### Image Processing
+- Images are automatically resized to 800x600 for faster processing
+- JPEG quality set to 95% for optimal balance
+- Temporary files cleaned up after 5 seconds
+
+### Database Optimization
+- Indexes on location, timestamp, and quality fields
+- Automatic cleanup of old temporary data
+- Connection pooling for concurrent requests
+
+### Memory Management
+- Sharp image processing with automatic memory cleanup
+- Python process spawning with proper cleanup
+- C++ RAII for resource management
+
+## 🔒 Security Features
+
+- File type validation for uploads
+- File size limits (10MB max)
+- Input sanitization
+- Rate limiting
+- CORS configuration
+- Helmet security headers
+
+## 📈 Monitoring
+
+### Logs
+- Server logs to console
+- Error tracking with stack traces
+- Performance metrics logging
+- Database query logging
+
+### Health Checks
+- Service availability monitoring
+- Database connection status
+- Python/C++ component availability
+- Memory and CPU usage tracking
+
+## 🚀 Production Deployment
+
+### Environment Setup
+```bash
+NODE_ENV=production
+PORT=80
+DATABASE_PATH=/data/water_quality.db
+```
+
+### Process Management
+```bash
+# Using PM2
+npm install -g pm2
+pm2 start server.js --name aqua-lens-backend
+
+# Using systemd
+sudo systemctl enable aqua-lens-backend
+sudo systemctl start aqua-lens-backend
+```
+
+### Reverse Proxy (Nginx)
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+    
+    location /api/ {
+        proxy_pass http://localhost:5000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+## 📚 API Documentation
+
+Full API documentation available at:
+- Swagger UI: `http://localhost:5000/api-docs`
+- OpenAPI spec: `http://localhost:5000/api/openapi.json`
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create feature branch
+3. Add tests for new functionality
+4. Ensure all tests pass
+5. Submit pull request
+
+## 📄 License
+
+MIT License - see LICENSE file for details
+
+---
+
+*For frontend-only usage, the system works completely without the backend using the self-contained JavaScript analysis engine.*
+
+
+
+
+
+
+
+
+
+# 🌿 EcoSpire Backend Setup Guide
+
+## Overview
+
+The EcoSpire backend is a high-performance, multi-language system designed to power a suite of environmental intelligence tools. It uses a Node.js coordinator to manage specialized Python and C++ services for maximum accuracy.
+
+## 🏗️ Architecture
+
+-   **Node.js** - Main API server and request coordination.
+-   **Python** - AI-powered analysis for computer vision (AquaLens), audio (BiodiversityEar), and bioinformatics (Bio-Stream AI).
+-   **C++** - High-performance image preprocessing for AquaLens.
+-   **SQLite** - Lightweight and comprehensive data storage.
+-   **NCBI BLAST+** - Scientific engine for DNA sequence analysis.
+
+## 🚀 Quick Setup
+
+### 1. Install Node.js Dependencies
+```bash
+cd web/backend
+npm install
+2. Setup Python Environment
+code
+Bash
+# It is highly recommended to use a virtual environment
+python -m venv venv
+# On Windows:
+venv\Scripts\activate
+# On Mac/Linux:
+source venv/bin/activate
+
+# Install all Python dependencies
+pip install -r python/requirements.txt
+3. Install Scientific Toolkit (for Bio-Stream AI)
+The Bio-Stream AI tool requires the NCBI BLAST+ command-line toolkit for its analysis engine.
+Download: Get the installer from the official NCBI BLAST website.
+Install: Run the installer. Crucially, during setup, you must check the box to "Add BLAST to the system PATH". This allows the backend to find and use the tool.
+Verify: After installation, open a new terminal and run makeblastdb -version. You should see a version number printed.
+4. Build Bio-Stream AI Database
+Bio-Stream AI uses a custom DNA database. To build it, run the following commands from the web/backend/ directory:
+code
+Bash
+# Navigate to the database source directory
+cd python/blast_db
+
+# (On Windows) Combine the sample DNA files
+copy *.fasta custom_database.fasta
+# (On Mac/Linux)
+cat *.fasta > custom_database.fasta
+
+# Build the database
+makeblastdb -in "custom_database.fasta" -dbtype nucl -out "biostream_db"
+Note: If makeblastdb fails due to a space in your project path, please use the "temporary folder" method documented in the BioStreamAI-README.md.
+5. Build C++ Components (Optional for AquaLens)
+code
+Bash
+# For detailed instructions, see the "Troubleshooting" section below.
+cd cpp
+make
+6. Initialize Database
+This creates the water_quality.db file for AquaLens data.
+code
+Bash
+npm run init-db
+7. Start the Server
+code
+Bash
+# For development with live reloading
+npm run dev
+
+# For production
+npm start```
+
+## 📋 Dependencies
+
+### Node.js Packages
+-   `express` - Web server framework
+-   `multer` - File upload handling
+-   `sqlite3` - Database interface
+-   `sharp` - Image processing
+-   `cors` - Cross-origin requests
+-   `uuid` - Unique ID generation
+
+### Python Packages
+-   `opencv-python` - Computer vision
+-   `Pillow` - Image processing
+-   `numpy` - Numerical computing
+-   `scipy` - Scientific computing
+-   `scikit-image` - Image analysis
+-   `librosa` - Audio analysis
+-   `biopython` - Toolkit for bioinformatics
+
+### C++ Dependencies
+-   `OpenCV 4.x` - Computer vision library
+-   `g++` / `make` - Build tools
+
+## 🔧 Configuration
+
+Create a `.env` file in the `web/backend` directory:
+```env
+PORT=5000
+NODE_ENV=development
+DATABASE_PATH=./database/water_quality.db
+UPLOAD_DIR=./uploads
+TEMP_DIR=./temp
+📡 API Endpoints
+POST /api/analyze-water
+Tool: AquaLens
+Body: FormData with image file
+Response: Water quality analysis results
+POST /api/analyze-audio
+Tool: BiodiversityEar
+Body: FormData with audioFile
+Response: Acoustic biodiversity analysis report
+POST /api/analyze-dna
+Tool: Bio-Stream AI
+Body: FormData with dnaFile
+Response: A full ecosystem health and species identification report.
+GET /api/water-map
+Tool: AquaLens
+Query: lat, lng, radius
+Response: Array of water quality data points for mapping

web/backend/cpp/Makefile

@@ -0,0 +1,79 @@
+# Aqua-Lens C++ Image Processor Makefile
+
+CXX = g++
+CXXFLAGS = -std=c++11 -O3 -Wall -Wextra
+TARGET = image_processor
+SOURCE = image_processor.cpp
+
+# Try to detect OpenCV installation
+OPENCV_VERSION := $(shell pkg-config --exists opencv4 && echo "opencv4" || echo "opencv")
+OPENCV_CFLAGS := $(shell pkg-config --cflags $(OPENCV_VERSION) 2>/dev/null)
+OPENCV_LIBS := $(shell pkg-config --libs $(OPENCV_VERSION) 2>/dev/null)
+
+# Fallback if pkg-config doesn't work
+ifeq ($(OPENCV_LIBS),)
+    OPENCV_LIBS = -lopencv_core -lopencv_imgproc -lopencv_imgcodecs
+endif
+
+# Build target
+$(TARGET): $(SOURCE)
+	@echo "Building Aqua-Lens Image Processor..."
+	@echo "OpenCV Version: $(OPENCV_VERSION)"
+	$(CXX) $(CXXFLAGS) $(OPENCV_CFLAGS) -o $(TARGET) $(SOURCE) $(OPENCV_LIBS)
+	@echo "Build complete: $(TARGET)"
+
+# Clean target
+clean:
+	rm -f $(TARGET)
+	@echo "Cleaned build files"
+
+# Install dependencies (Ubuntu/Debian)
+install-deps-ubuntu:
+	sudo apt-get update
+	sudo apt-get install -y build-essential cmake pkg-config
+	sudo apt-get install -y libopencv-dev libopencv-contrib-dev
+
+# Install dependencies (macOS with Homebrew)
+install-deps-macos:
+	brew install opencv pkg-config
+
+# Install dependencies (Windows with vcpkg)
+install-deps-windows:
+	@echo "For Windows, install OpenCV using vcpkg:"
+	@echo "vcpkg install opencv[contrib]:x64-windows"
+	@echo "Then compile with: make windows"
+
+# Windows build (requires vcpkg)
+windows:
+	$(CXX) $(CXXFLAGS) -I"$(VCPKG_ROOT)/installed/x64-windows/include" \
+		-L"$(VCPKG_ROOT)/installed/x64-windows/lib" \
+		-o $(TARGET).exe $(SOURCE) \
+		-lopencv_core -lopencv_imgproc -lopencv_imgcodecs
+
+# Test the processor
+test: $(TARGET)
+	@echo "Testing image processor..."
+	@if [ -f "test_image.jpg" ]; then \
+		./$(TARGET) test_image.jpg test_output.jpg; \
+	else \
+		echo "No test image found. Place a test image as 'test_image.jpg' to test."; \
+	fi
+
+# Help
+help:
+	@echo "Aqua-Lens C++ Image Processor Build System"
+	@echo ""
+	@echo "Targets:"
+	@echo "  $(TARGET)           - Build the image processor"
+	@echo "  clean              - Remove build files"
+	@echo "  test               - Test the processor with test_image.jpg"
+	@echo "  install-deps-ubuntu - Install dependencies on Ubuntu/Debian"
+	@echo "  install-deps-macos  - Install dependencies on macOS"
+	@echo "  install-deps-windows - Show Windows installation instructions"
+	@echo "  windows            - Build for Windows (requires vcpkg)"
+	@echo "  help               - Show this help message"
+	@echo ""
+	@echo "Usage:"
+	@echo "  ./$(TARGET) <input_image> <output_image>"
+
+.PHONY: clean install-deps-ubuntu install-deps-macos install-deps-windows windows test help

web/backend/cpp/image_processor.cpp

@@ -0,0 +1,243 @@
+/*
+ * Aqua-Lens High-Performance Image Processor
+ * C++ implementation for advanced image preprocessing
+ * Optimized for test strip color analysis
+ */
+
+#include <opencv2/opencv.hpp>
+#include <opencv2/imgproc.hpp>
+#include <opencv2/imgcodecs.hpp>
+#include <iostream>
+#include <vector>
+#include <string>
+#include <cmath>
+#include <algorithm>
+
+class TestStripProcessor {
+private:
+    cv::Mat originalImage;
+    cv::Mat processedImage;
+    
+public:
+    TestStripProcessor() {}
+    
+    bool loadImage(const std::string& imagePath) {
+        originalImage = cv::imread(imagePath, cv::IMREAD_COLOR);
+        if (originalImage.empty()) {
+            std::cerr << "Error: Could not load image " << imagePath << std::endl;
+            return false;
+        }
+        return true;
+    }
+    
+    void preprocessImage() {
+        cv::Mat temp;
+        originalImage.copyTo(temp);
+        
+        // Step 1: Noise reduction using bilateral filter
+        cv::bilateralFilter(temp, processedImage, 9, 75, 75);
+        
+        // Step 2: Enhance contrast using CLAHE (Contrast Limited Adaptive Histogram Equalization)
+        cv::Mat lab;
+        cv::cvtColor(processedImage, lab, cv::COLOR_BGR2Lab);
+        
+        std::vector<cv::Mat> labChannels;
+        cv::split(lab, labChannels);
+        
+        cv::Ptr<cv::CLAHE> clahe = cv::createCLAHE(2.0, cv::Size(8, 8));
+        clahe->apply(labChannels[0], labChannels[0]);
+        
+        cv::merge(labChannels, lab);
+        cv::cvtColor(lab, processedImage, cv::COLOR_Lab2BGR);
+        
+        // Step 3: Color correction and white balance
+        correctWhiteBalance();
+        
+        // Step 4: Sharpen the image
+        sharpenImage();
+        
+        // Step 5: Normalize lighting conditions
+        normalizeLighting();
+    }
+    
+    void correctWhiteBalance() {
+        cv::Mat temp;
+        processedImage.copyTo(temp);
+        
+        // Simple white balance using gray world assumption
+        cv::Scalar meanBGR = cv::mean(temp);
+        double meanGray = (meanBGR[0] + meanBGR[1] + meanBGR[2]) / 3.0;
+        
+        std::vector<cv::Mat> channels;
+        cv::split(temp, channels);
+        
+        // Adjust each channel
+        for (int i = 0; i < 3; i++) {
+            if (meanBGR[i] > 0) {
+                double scale = meanGray / meanBGR[i];
+                channels[i] *= scale;
+            }
+        }
+        
+        cv::merge(channels, processedImage);
+    }
+    
+    void sharpenImage() {
+        cv::Mat kernel = (cv::Mat_<float>(3, 3) << 
+                         0, -1, 0,
+                         -1, 5, -1,
+                         0, -1, 0);
+        
+        cv::Mat sharpened;
+        cv::filter2D(processedImage, sharpened, -1, kernel);
+        processedImage = sharpened;
+    }
+    
+    void normalizeLighting() {
+        cv::Mat temp;
+        processedImage.copyTo(temp);
+        
+        // Convert to HSV for better lighting control
+        cv::Mat hsv;
+        cv::cvtColor(temp, hsv, cv::COLOR_BGR2HSV);
+        
+        std::vector<cv::Mat> hsvChannels;
+        cv::split(hsv, hsvChannels);
+        
+        // Normalize the V (brightness) channel
+        cv::equalizeHist(hsvChannels[2], hsvChannels[2]);
+        
+        cv::merge(hsvChannels, hsv);
+        cv::cvtColor(hsv, processedImage, cv::COLOR_HSV2BGR);
+    }
+    
+    std::vector<cv::Rect> detectTestStripRegions() {
+        std::vector<cv::Rect> regions;
+        
+        cv::Mat gray, binary;
+        cv::cvtColor(processedImage, gray, cv::COLOR_BGR2GRAY);
+        
+        // Use adaptive thresholding to find colored regions
+        cv::adaptiveThreshold(gray, binary, 255, cv::ADAPTIVE_THRESH_GAUSSIAN_C, 
+                             cv::THRESH_BINARY_INV, 11, 2);
+        
+        // Find contours
+        std::vector<std::vector<cv::Point>> contours;
+        std::vector<cv::Vec4i> hierarchy;
+        cv::findContours(binary, contours, hierarchy, cv::RETR_EXTERNAL, cv::CHAIN_APPROX_SIMPLE);
+        
+        // Filter contours by area and aspect ratio
+        for (const auto& contour : contours) {
+            cv::Rect boundingRect = cv::boundingRect(contour);
+            double area = cv::contourArea(contour);
+            double aspectRatio = (double)boundingRect.width / boundingRect.height;
+            
+            // Filter based on reasonable test strip pad characteristics
+            if (area > 100 && area < 10000 && aspectRatio > 0.5 && aspectRatio < 3.0) {
+                regions.push_back(boundingRect);
+            }
+        }
+        
+        // Sort regions by position (left to right, top to bottom)
+        std::sort(regions.begin(), regions.end(), [](const cv::Rect& a, const cv::Rect& b) {
+            if (abs(a.y - b.y) < 50) { // Same row
+                return a.x < b.x;
+            }
+            return a.y < b.y;
+        });
+        
+        return regions;
+    }
+    
+    cv::Vec3b extractAverageColor(const cv::Rect& region) {
+        cv::Mat roi = processedImage(region);
+        cv::Scalar meanColor = cv::mean(roi);
+        return cv::Vec3b(meanColor[0], meanColor[1], meanColor[2]);
+    }
+    
+    bool saveProcessedImage(const std::string& outputPath) {
+        if (processedImage.empty()) {
+            std::cerr << "Error: No processed image to save" << std::endl;
+            return false;
+        }
+        
+        std::vector<int> compression_params;
+        compression_params.push_back(cv::IMWRITE_JPEG_QUALITY);
+        compression_params.push_back(95);
+        
+        return cv::imwrite(outputPath, processedImage, compression_params);
+    }
+    
+    void analyzeColorAccuracy() {
+        // Calculate color distribution and quality metrics
+        cv::Mat hsv;
+        cv::cvtColor(processedImage, hsv, cv::COLOR_BGR2HSV);
+        
+        std::vector<cv::Mat> hsvChannels;
+        cv::split(hsv, hsvChannels);
+        
+        // Calculate histogram for each channel
+        int histSize = 256;
+        float range[] = {0, 256};
+        const float* histRange = {range};
+        
+        cv::Mat hHist, sHist, vHist;
+        cv::calcHist(&hsvChannels[0], 1, 0, cv::Mat(), hHist, 1, &histSize, &histRange);
+        cv::calcHist(&hsvChannels[1], 1, 0, cv::Mat(), sHist, 1, &histSize, &histRange);
+        cv::calcHist(&hsvChannels[2], 1, 0, cv::Mat(), vHist, 1, &histSize, &histRange);
+        
+        // Output color analysis results
+        std::cout << "Color Analysis Complete:" << std::endl;
+        std::cout << "Image Size: " << processedImage.cols << "x" << processedImage.rows << std::endl;
+        std::cout << "Processing: Enhanced contrast, white balance, sharpening applied" << std::endl;
+    }
+};
+
+int main(int argc, char* argv[]) {
+    if (argc != 3) {
+        std::cerr << "Usage: " << argv[0] << " <input_image> <output_image>" << std::endl;
+        return -1;
+    }
+    
+    std::string inputPath = argv[1];
+    std::string outputPath = argv[2];
+    
+    TestStripProcessor processor;
+    
+    // Load the image
+    if (!processor.loadImage(inputPath)) {
+        return -1;
+    }
+    
+    std::cout << "Processing image: " << inputPath << std::endl;
+    
+    // Process the image
+    processor.preprocessImage();
+    
+    // Detect test strip regions
+    std::vector<cv::Rect> regions = processor.detectTestStripRegions();
+    std::cout << "Detected " << regions.size() << " test strip regions" << std::endl;
+    
+    // Analyze color accuracy
+    processor.analyzeColorAccuracy();
+    
+    // Save the processed image
+    if (processor.saveProcessedImage(outputPath)) {
+        std::cout << "Processed image saved to: " << outputPath << std::endl;
+        return 0;
+    } else {
+        std::cerr << "Failed to save processed image" << std::endl;
+        return -1;
+    }
+}
+
+/*
+Compilation instructions:
+g++ -std=c++11 -o image_processor image_processor.cpp `pkg-config --cflags --libs opencv4`
+
+Or if opencv4 is not available:
+g++ -std=c++11 -o image_processor image_processor.cpp -lopencv_core -lopencv_imgproc -lopencv_imgcodecs
+
+For Windows with vcpkg:
+g++ -std=c++11 -o image_processor.exe image_processor.cpp -I"C:/vcpkg/installed/x64-windows/include" -L"C:/vcpkg/installed/x64-windows/lib" -lopencv_core -lopencv_imgproc -lopencv_imgcodecs
+*/

web/backend/database/init.sql

@@ -0,0 +1,224 @@
+-- Aqua-Lens Water Quality Database Schema
+-- SQLite database initialization script
+
+-- Main water tests table
+CREATE TABLE IF NOT EXISTS water_tests (
+    id TEXT PRIMARY KEY,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+    user_id TEXT,
+    latitude REAL,
+    longitude REAL,
+    water_source TEXT NOT NULL,
+    image_path TEXT,
+    
+    -- Water quality parameters
+    ph REAL NOT NULL,
+    chlorine REAL NOT NULL,
+    nitrates INTEGER NOT NULL,
+    hardness INTEGER NOT NULL,
+    alkalinity INTEGER NOT NULL,
+    bacteria INTEGER NOT NULL DEFAULT 0,
+    
+    -- Analysis results
+    overall_quality TEXT NOT NULL,
+    safety_level TEXT NOT NULL,
+    confidence REAL NOT NULL DEFAULT 95.0,
+    processing_time REAL,
+    alerts TEXT, -- JSON array of alerts
+    color_analysis TEXT, -- JSON object with color data
+    
+    -- Metadata
+    strip_type TEXT DEFAULT 'multi-parameter',
+    calibration_used TEXT DEFAULT 'standard',
+    lighting_conditions TEXT,
+    image_quality_score REAL,
+    
+    -- Indexing for performance
+    FOREIGN KEY(user_id) REFERENCES users(id)
+);
+
+-- Water quality alerts table
+CREATE TABLE IF NOT EXISTS water_alerts (
+    id TEXT PRIMARY KEY,
+    test_id TEXT NOT NULL,
+    alert_type TEXT NOT NULL, -- 'contamination', 'ph_warning', 'bacteria', etc.
+    severity TEXT NOT NULL,   -- 'low', 'medium', 'high', 'critical'
+    message TEXT NOT NULL,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+    latitude REAL,
+    longitude REAL,
+    resolved BOOLEAN DEFAULT FALSE,
+    resolved_timestamp DATETIME,
+    
+    FOREIGN KEY(test_id) REFERENCES water_tests(id)
+);
+
+-- User profiles table (optional)
+CREATE TABLE IF NOT EXISTS users (
+    id TEXT PRIMARY KEY,
+    username TEXT UNIQUE,
+    email TEXT UNIQUE,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    location_name TEXT,
+    default_latitude REAL,
+    default_longitude REAL,
+    test_count INTEGER DEFAULT 0,
+    last_test_date DATETIME
+);
+
+-- Calibration data for improving accuracy
+CREATE TABLE IF NOT EXISTS calibration_data (
+    id TEXT PRIMARY KEY,
+    parameter TEXT NOT NULL, -- 'ph', 'chlorine', etc.
+    color_rgb TEXT NOT NULL, -- JSON array [r, g, b]
+    actual_value REAL NOT NULL,
+    confidence REAL DEFAULT 100.0,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+    source TEXT DEFAULT 'lab_verified', -- 'lab_verified', 'user_reported', 'estimated'
+    
+    -- For machine learning model training
+    image_path TEXT,
+    lighting_condition TEXT,
+    strip_brand TEXT
+);
+
+-- Water source locations for mapping
+CREATE TABLE IF NOT EXISTS water_sources (
+    id TEXT PRIMARY KEY,
+    name TEXT NOT NULL,
+    type TEXT NOT NULL, -- 'well', 'lake', 'river', 'tap', etc.
+    latitude REAL NOT NULL,
+    longitude REAL NOT NULL,
+    description TEXT,
+    last_tested DATETIME,
+    average_quality TEXT,
+    test_count INTEGER DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Community reports and feedback
+CREATE TABLE IF NOT EXISTS community_reports (
+    id TEXT PRIMARY KEY,
+    test_id TEXT,
+    user_id TEXT,
+    report_type TEXT NOT NULL, -- 'accuracy_feedback', 'contamination_report', 'false_positive'
+    message TEXT,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+    latitude REAL,
+    longitude REAL,
+    status TEXT DEFAULT 'pending', -- 'pending', 'verified', 'dismissed'
+    
+    FOREIGN KEY(test_id) REFERENCES water_tests(id),
+    FOREIGN KEY(user_id) REFERENCES users(id)
+);
+
+-- System performance metrics
+CREATE TABLE IF NOT EXISTS system_metrics (
+    id TEXT PRIMARY KEY,
+    metric_name TEXT NOT NULL,
+    metric_value REAL NOT NULL,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+    details TEXT -- JSON object with additional data
+);
+
+-- Create indexes for better query performance
+CREATE INDEX IF NOT EXISTS idx_water_tests_location ON water_tests(latitude, longitude);
+CREATE INDEX IF NOT EXISTS idx_water_tests_timestamp ON water_tests(timestamp);
+CREATE INDEX IF NOT EXISTS idx_water_tests_quality ON water_tests(overall_quality, safety_level);
+CREATE INDEX IF NOT EXISTS idx_water_tests_user ON water_tests(user_id);
+
+CREATE INDEX IF NOT EXISTS idx_alerts_location ON water_alerts(latitude, longitude);
+CREATE INDEX IF NOT EXISTS idx_alerts_severity ON water_alerts(severity, resolved);
+CREATE INDEX IF NOT EXISTS idx_alerts_timestamp ON water_alerts(timestamp);
+
+CREATE INDEX IF NOT EXISTS idx_calibration_parameter ON calibration_data(parameter);
+CREATE INDEX IF NOT EXISTS idx_water_sources_location ON water_sources(latitude, longitude);
+
+-- Insert some sample calibration data
+INSERT OR IGNORE INTO calibration_data (id, parameter, color_rgb, actual_value, source) VALUES
+('cal_ph_1', 'ph', '[255, 0, 0]', 4.0, 'lab_verified'),
+('cal_ph_2', 'ph', '[255, 140, 0]', 6.0, 'lab_verified'),
+('cal_ph_3', 'ph', '[255, 255, 0]', 7.0, 'lab_verified'),
+('cal_ph_4', 'ph', '[0, 255, 0]', 8.0, 'lab_verified'),
+('cal_ph_5', 'ph', '[0, 0, 255]', 9.0, 'lab_verified'),
+
+('cal_chlorine_1', 'chlorine', '[255, 255, 255]', 0.0, 'lab_verified'),
+('cal_chlorine_2', 'chlorine', '[255, 182, 193]', 1.0, 'lab_verified'),
+('cal_chlorine_3', 'chlorine', '[255, 105, 180]', 2.0, 'lab_verified'),
+('cal_chlorine_4', 'chlorine', '[220, 20, 60]', 4.0, 'lab_verified'),
+
+('cal_nitrates_1', 'nitrates', '[255, 255, 255]', 0, 'lab_verified'),
+('cal_nitrates_2', 'nitrates', '[255, 192, 203]', 10, 'lab_verified'),
+('cal_nitrates_3', 'nitrates', '[255, 105, 180]', 25, 'lab_verified'),
+('cal_nitrates_4', 'nitrates', '[255, 69, 0]', 50, 'lab_verified');
+
+-- Create a view for easy water quality mapping
+CREATE VIEW IF NOT EXISTS water_quality_map AS
+SELECT 
+    wt.id,
+    wt.latitude,
+    wt.longitude,
+    wt.water_source,
+    wt.overall_quality,
+    wt.safety_level,
+    wt.ph,
+    wt.chlorine,
+    wt.nitrates,
+    wt.timestamp,
+    CASE 
+        WHEN wt.safety_level = 'Unsafe' THEN 'red'
+        WHEN wt.overall_quality = 'Poor' THEN 'orange'
+        WHEN wt.overall_quality = 'Fair' THEN 'yellow'
+        WHEN wt.overall_quality = 'Good' THEN 'lightgreen'
+        ELSE 'green'
+    END as marker_color,
+    COUNT(wa.id) as alert_count
+FROM water_tests wt
+LEFT JOIN water_alerts wa ON wt.id = wa.test_id AND wa.resolved = FALSE
+WHERE wt.latitude IS NOT NULL AND wt.longitude IS NOT NULL
+GROUP BY wt.id
+ORDER BY wt.timestamp DESC;
+
+-- Create a view for recent alerts
+CREATE VIEW IF NOT EXISTS recent_alerts AS
+SELECT 
+    wa.*,
+    wt.water_source,
+    wt.overall_quality,
+    wt.ph,
+    wt.chlorine,
+    wt.nitrates
+FROM water_alerts wa
+JOIN water_tests wt ON wa.test_id = wt.id
+WHERE wa.resolved = FALSE
+ORDER BY wa.timestamp DESC;
+
+-- Trigger to update user test count
+CREATE TRIGGER IF NOT EXISTS update_user_test_count
+AFTER INSERT ON water_tests
+FOR EACH ROW
+WHEN NEW.user_id IS NOT NULL
+BEGIN
+    UPDATE users 
+    SET test_count = test_count + 1,
+        last_test_date = NEW.timestamp
+    WHERE id = NEW.user_id;
+END;
+
+-- Trigger to create alerts for unsafe water
+CREATE TRIGGER IF NOT EXISTS create_safety_alerts
+AFTER INSERT ON water_tests
+FOR EACH ROW
+WHEN NEW.safety_level = 'Unsafe'
+BEGIN
+    INSERT INTO water_alerts (id, test_id, alert_type, severity, message, latitude, longitude)
+    VALUES (
+        'alert_' || NEW.id,
+        NEW.id,
+        'contamination',
+        'high',
+        'Unsafe water quality detected: ' || NEW.overall_quality,
+        NEW.latitude,
+        NEW.longitude
+    );
+END;

web/backend/database/schema.sql

@@ -0,0 +1,298 @@
+-- EcoSpire Database Schema
+-- Complete database structure for production deployment
+
+-- Users table
+CREATE TABLE users (
+    id SERIAL PRIMARY KEY,
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password_hash VARCHAR(255) NOT NULL,
+    name VARCHAR(255) NOT NULL,
+    avatar_url VARCHAR(500),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    is_active BOOLEAN DEFAULT true,
+    email_verified BOOLEAN DEFAULT false,
+    last_login TIMESTAMP,
+    preferences JSONB DEFAULT '{}'::jsonb
+);
+
+-- User sessions
+CREATE TABLE user_sessions (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    session_token VARCHAR(255) UNIQUE NOT NULL,
+    expires_at TIMESTAMP NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    ip_address INET,
+    user_agent TEXT
+);
+
+-- Environmental data
+CREATE TABLE environmental_data (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    data_type VARCHAR(50) NOT NULL, -- 'air_quality', 'water_quality', 'biodiversity', etc.
+    location_lat DECIMAL(10, 8),
+    location_lon DECIMAL(11, 8),
+    data_values JSONB NOT NULL,
+    confidence_score DECIMAL(5, 2),
+    source VARCHAR(100), -- 'user_input', 'api', 'sensor', etc.
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    is_public BOOLEAN DEFAULT false
+);
+
+-- E-waste items
+CREATE TABLE ewaste_items (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    device_type VARCHAR(100) NOT NULL,
+    brand VARCHAR(100),
+    model VARCHAR(200),
+    condition VARCHAR(50),
+    storage_capacity VARCHAR(50),
+    accessories TEXT[],
+    estimated_value_min INTEGER,
+    estimated_value_max INTEGER,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    recycled_at TIMESTAMP,
+    recycling_method VARCHAR(100)
+);
+
+-- Upcycling projects
+CREATE TABLE upcycling_projects (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    item_type VARCHAR(100),
+    material VARCHAR(100),
+    condition VARCHAR(100),
+    skill_level VARCHAR(50),
+    time_required VARCHAR(100),
+    estimated_cost VARCHAR(50),
+    instructions JSONB,
+    materials_needed TEXT[],
+    tools_needed TEXT[],
+    sustainability_impact TEXT,
+    images TEXT[],
+    is_completed BOOLEAN DEFAULT false,
+    is_public BOOLEAN DEFAULT false,
+    likes_count INTEGER DEFAULT 0,
+    saves_count INTEGER DEFAULT 0,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    completed_at TIMESTAMP
+);
+
+-- Biodiversity recordings
+CREATE TABLE biodiversity_recordings (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    location_lat DECIMAL(10, 8),
+    location_lon DECIMAL(11, 8),
+    habitat_type VARCHAR(100),
+    region VARCHAR(100),
+    audio_file_url VARCHAR(500),
+    duration_seconds INTEGER,
+    detected_species JSONB,
+    biodiversity_metrics JSONB,
+    confidence_score DECIMAL(5, 2),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    is_verified BOOLEAN DEFAULT false
+);
+
+-- Water quality tests
+CREATE TABLE water_quality_tests (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    location_lat DECIMAL(10, 8),
+    location_lon DECIMAL(11, 8),
+    water_source VARCHAR(100),
+    test_method VARCHAR(50), -- 'image_analysis', 'test_strip', 'manual'
+    ph_level DECIMAL(4, 2),
+    chlorine_level DECIMAL(6, 3),
+    nitrate_level DECIMAL(6, 3),
+    hardness_level INTEGER,
+    alkalinity_level INTEGER,
+    bacteria_count INTEGER,
+    turbidity DECIMAL(5, 2),
+    overall_quality VARCHAR(50),
+    safety_level VARCHAR(50),
+    confidence_score DECIMAL(5, 2),
+    image_url VARCHAR(500),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Carbon footprint tracking
+CREATE TABLE carbon_activities (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    activity_type VARCHAR(100) NOT NULL, -- 'transport', 'energy', 'food', 'waste'
+    activity_name VARCHAR(200) NOT NULL,
+    amount DECIMAL(10, 3),
+    unit VARCHAR(50),
+    co2_equivalent DECIMAL(10, 3), -- kg CO2
+    date_recorded DATE NOT NULL,
+    location VARCHAR(200),
+    notes TEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Smart farming data
+CREATE TABLE farming_data (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    location_lat DECIMAL(10, 8),
+    location_lon DECIMAL(11, 8),
+    farm_size DECIMAL(10, 2),
+    crop_type VARCHAR(100),
+    soil_moisture DECIMAL(5, 2),
+    soil_temperature DECIMAL(5, 2),
+    soil_ph DECIMAL(4, 2),
+    ndvi DECIMAL(4, 3),
+    precipitation DECIMAL(6, 2),
+    temperature DECIMAL(5, 2),
+    humidity DECIMAL(5, 2),
+    wind_speed DECIMAL(5, 2),
+    growing_degree_days INTEGER,
+    pest_pressure INTEGER,
+    disease_risk INTEGER,
+    recommendations TEXT[],
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Air quality monitoring
+CREATE TABLE air_quality_data (
+    id SERIAL PRIMARY KEY,
+    location_lat DECIMAL(10, 8) NOT NULL,
+    location_lon DECIMAL(11, 8) NOT NULL,
+    city_name VARCHAR(200),
+    country VARCHAR(100),
+    aqi INTEGER,
+    pm25 DECIMAL(6, 2),
+    pm10 DECIMAL(6, 2),
+    o3 DECIMAL(6, 2),
+    no2 DECIMAL(6, 2),
+    so2 DECIMAL(6, 2),
+    co DECIMAL(6, 2),
+    temperature DECIMAL(5, 2),
+    humidity DECIMAL(5, 2),
+    pressure DECIMAL(7, 2),
+    wind_speed DECIMAL(5, 2),
+    wind_direction INTEGER,
+    visibility DECIMAL(5, 2),
+    uv_index INTEGER,
+    data_source VARCHAR(100),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- User achievements
+CREATE TABLE user_achievements (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    achievement_type VARCHAR(100) NOT NULL,
+    achievement_name VARCHAR(200) NOT NULL,
+    description TEXT,
+    points_earned INTEGER DEFAULT 0,
+    badge_icon VARCHAR(100),
+    earned_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    is_public BOOLEAN DEFAULT true
+);
+
+-- Community projects
+CREATE TABLE community_projects (
+    id SERIAL PRIMARY KEY,
+    creator_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    category VARCHAR(100),
+    location VARCHAR(200),
+    funding_goal INTEGER,
+    funding_raised INTEGER DEFAULT 0,
+    start_date DATE,
+    end_date DATE,
+    status VARCHAR(50) DEFAULT 'active',
+    impact_metrics JSONB,
+    images TEXT[],
+    website_url VARCHAR(500),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- User interactions (likes, saves, shares)
+CREATE TABLE user_interactions (
+    id SERIAL PRIMARY KEY,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    target_type VARCHAR(50) NOT NULL, -- 'project', 'recording', 'test', etc.
+    target_id INTEGER NOT NULL,
+    interaction_type VARCHAR(50) NOT NULL, -- 'like', 'save', 'share', 'comment'
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(user_id, target_type, target_id, interaction_type)
+);
+
+-- System analytics
+CREATE TABLE system_analytics (
+    id SERIAL PRIMARY KEY,
+    event_type VARCHAR(100) NOT NULL,
+    event_data JSONB,
+    user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    session_id VARCHAR(255),
+    ip_address INET,
+    user_agent TEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- API usage tracking
+CREATE TABLE api_usage (
+    id SERIAL PRIMARY KEY,
+    api_name VARCHAR(100) NOT NULL,
+    endpoint VARCHAR(200),
+    user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    request_count INTEGER DEFAULT 1,
+    response_time_ms INTEGER,
+    status_code INTEGER,
+    error_message TEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_users_email ON users(email);
+CREATE INDEX idx_users_created_at ON users(created_at);
+CREATE INDEX idx_environmental_data_user_id ON environmental_data(user_id);
+CREATE INDEX idx_environmental_data_type ON environmental_data(data_type);
+CREATE INDEX idx_environmental_data_location ON environmental_data(location_lat, location_lon);
+CREATE INDEX idx_environmental_data_created_at ON environmental_data(created_at);
+CREATE INDEX idx_ewaste_items_user_id ON ewaste_items(user_id);
+CREATE INDEX idx_ewaste_items_device_type ON ewaste_items(device_type);
+CREATE INDEX idx_upcycling_projects_user_id ON upcycling_projects(user_id);
+CREATE INDEX idx_upcycling_projects_public ON upcycling_projects(is_public);
+CREATE INDEX idx_biodiversity_recordings_user_id ON biodiversity_recordings(user_id);
+CREATE INDEX idx_biodiversity_recordings_location ON biodiversity_recordings(location_lat, location_lon);
+CREATE INDEX idx_water_quality_tests_user_id ON water_quality_tests(user_id);
+CREATE INDEX idx_carbon_activities_user_id ON carbon_activities(user_id);
+CREATE INDEX idx_carbon_activities_date ON carbon_activities(date_recorded);
+CREATE INDEX idx_farming_data_user_id ON farming_data(user_id);
+CREATE INDEX idx_air_quality_location ON air_quality_data(location_lat, location_lon);
+CREATE INDEX idx_air_quality_created_at ON air_quality_data(created_at);
+CREATE INDEX idx_user_achievements_user_id ON user_achievements(user_id);
+CREATE INDEX idx_community_projects_status ON community_projects(status);
+CREATE INDEX idx_user_interactions_user_id ON user_interactions(user_id);
+CREATE INDEX idx_user_interactions_target ON user_interactions(target_type, target_id);
+CREATE INDEX idx_system_analytics_event_type ON system_analytics(event_type);
+CREATE INDEX idx_system_analytics_created_at ON system_analytics(created_at);
+CREATE INDEX idx_api_usage_api_name ON api_usage(api_name);
+CREATE INDEX idx_api_usage_created_at ON api_usage(created_at);
+
+-- Create triggers for updated_at timestamps
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_community_projects_updated_at BEFORE UPDATE ON community_projects
+    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

web/backend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ecospire-backend",
+  "version": "1.0.0",
+  "description": "Backend server for the EcoSpire Environmental Intelligence Platform",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "keywords": [
+    "nodejs",
+    "express",
+    "environment",
+    "ai"
+  ],
+  "author": "EcoSpire Team",
+  "license": "MIT",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "multer": "^1.4.5-lts.1",
+    "sharp": "^0.32.6",
+    "sqlite3": "^5.1.6",
+    "uuid": "^9.0.1"
+  }
+}

web/backend/python/audio_analyzer.py

@@ -0,0 +1,102 @@
+import sys
+import json
+import time
+import random
+import librosa  # The new library for real audio analysis
+import numpy as np # The library for numerical operations
+
+# --- This is our new "intelligence" factor ---
+# We'll consider any audio with average energy below this threshold as silence.
+# You can experiment with this value; lower values make it more sensitive to quiet sounds.
+SILENCE_THRESHOLD = 0.001
+
+def get_mock_species_data(species_name):
+    """
+    Returns a rich, detailed data structure for a given species name.
+    This simulates a database lookup for species information.
+    """
+    all_species = {
+        "European Robin": { "scientificName": "Erithacus rubecula", "icon": "🐦", "conservationStatus": "Least Concern", "description": "A small insectivorous passerine bird. Known for its bright orange-red breast.", "habitat": "Woodlands, parks, gardens", "frequency": "2-6 kHz", "callType": "Melodic song", "sound": "Clear, warbling notes" },
+        "Great Tit": { "scientificName": "Parus major", "icon": "🐦", "conservationStatus": "Least Concern", "description": "A distinctive bird with a black head and neck, prominent white cheeks, and a black stripe down its yellow front.", "habitat": "Deciduous woodland, gardens", "frequency": "3-7 kHz", "callType": "Repetitive two-note song", "sound": "'Teacher-teacher' sound" },
+        "Common Nightingale": { "scientificName": "Luscinia megarhynchos", "icon": "🎶", "conservationStatus": "Least Concern", "description": "A small passerine bird best known for its powerful and beautiful song.", "habitat": "Dense scrub and woodland", "frequency": "1-8 kHz", "callType": "Complex, rich song", "sound": "Crescendo of notes" },
+        "Red-winged Blackbird": { "scientificName": "Agelaius phoeniceus", "icon": "⚫", "conservationStatus": "Least Concern", "description": "A passerine bird of the family Icteridae. Males are black with a red and yellow shoulder patch.", "habitat": "Marshes, wetlands", "frequency": "2-4 kHz", "callType": "Gurgling song", "sound": "'Conk-la-ree' sound" }
+    }
+    return all_species.get(species_name, { "scientificName": "Unknown", "icon": "❓", "conservationStatus": "Unknown", "description": "Could not identify species.", "habitat": "Unknown", "frequency": "N/A", "callType": "N/A", "sound": "N/A" })
+
+def analyze_audio_file(file_path):
+    """
+    A smarter simulation of AI audio analysis.
+    It now performs REAL energy analysis to detect silence.
+    """
+    # --- REAL ANALYSIS STEP ---
+    # Load the audio file using librosa. This gives us the raw sound wave (y)
+    # and the sample rate (sr).
+    y, sr = librosa.load(file_path, sr=None, mono=True, res_type='kaiser_fast')
+
+    # Calculate the Root Mean Square (RMS) energy, a measure of average volume.
+    rms_energy = np.sqrt(np.mean(y**2))
+
+    # --- INTELLIGENT DECISION STEP ---
+    # If the energy is below our silence threshold, return a specific "silent" result.
+    if rms_energy < SILENCE_THRESHOLD:
+        return {
+            "confidence": 95,
+            "analysisQuality": "High",
+            "detectedSpecies": [], # Return an empty list of species
+            "biodiversityMetrics": {
+                "biodiversityScore": 0,
+                "shannonIndex": 0,
+                "ecosystemHealth": "Unknown (Silence)"
+            },
+            "acousticFeatures": { "duration": librosa.get_duration(y=y, sr=sr), "sampleRate": sr },
+            "recommendations": [
+                "No significant audio was detected in this recording.",
+                "Try recording in a location with more natural sounds.",
+                "Ensure your microphone is working and not covered."
+            ]
+        }
+
+    # --- SIMULATION STEP (if sound is detected) ---
+    # If the audio is NOT silent, we proceed with our previous simulation.
+    time.sleep(random.uniform(1.5, 2.5)) # Simulate processing time
+
+    possible_species = ["European Robin", "Great Tit", "Common Nightingale", "Red-winged Blackbird"]
+    num_detected = random.randint(1, 3)
+    detected_species_names = random.sample(possible_species, num_detected)
+
+    detected_species_results = []
+    for species_name in detected_species_names:
+        species_data = get_mock_species_data(species_name)
+        species_data["name"] = species_name
+        species_data["confidence"] = random.randint(75, 98)
+        detected_species_results.append(species_data)
+
+    biodiversity_score = 60 + len(detected_species_results) * 15 + random.randint(-5, 5)
+    ecosystem_health = "Excellent" if biodiversity_score > 85 else "Good" if biodiversity_score > 70 else "Fair"
+    shannon_index = round(1.2 + len(detected_species_results) * 0.2 + random.uniform(-0.1, 0.1), 2)
+
+    return {
+        "confidence": random.randint(85, 99),
+        "analysisQuality": "High",
+        "detectedSpecies": detected_species_results,
+        "biodiversityMetrics": {
+            "biodiversityScore": biodiversity_score,
+            "shannonIndex": shannon_index,
+            "ecosystemHealth": ecosystem_health
+        },
+        "acousticFeatures": { "duration": librosa.get_duration(y=y, sr=sr), "sampleRate": sr },
+        "recommendations": [
+            "This area shows healthy species diversity.",
+            "Consider conservation efforts for nearby wetlands.",
+            "Continue monitoring during migratory seasons."
+        ]
+    }
+
+if __name__ == "__main__":
+    try:
+        audio_file_path = sys.argv[1]
+        analysis_data = analyze_audio_file(audio_file_path)
+        print(json.dumps(analysis_data, indent=4))
+    except Exception as e:
+        print(f"Error in Python script: {e}", file=sys.stderr)
+        sys.exit(1)

web/backend/python/blast_db/biostream_db.ndb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bbe8194a25836998c96b70c10f49657c14706ad0044289b3e56ac7f983ab180c
+size 500000

web/backend/python/blast_db/biostream_db.njs

@@ -0,0 +1,22 @@
+{
+  "version": "1.2",
+  "dbname": "biostream_db",
+  "dbtype": "Nucleotide",
+  "db-version": 5,
+  "description": "custom_database.fasta",
+  "number-of-letters": 2228,
+  "number-of-sequences": 2,
+  "last-updated": "2025-08-21T21:16:00",
+  "number-of-volumes": 1,
+  "bytes-total": 1001052,
+  "bytes-to-cache": 695,
+  "files": [
+    "biostream_db.ndb",
+    "biostream_db.nhr",
+    "biostream_db.nin",
+    "biostream_db.not",
+    "biostream_db.nsq",
+    "biostream_db.ntf",
+    "biostream_db.nto"
+  ]
+}

web/backend/python/blast_db/biostream_db.ntf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:811fcc1c59308d9bfc396b93a0d861101454290622bd4ce6f8abc450cf05593f
+size 500000

web/backend/python/dna_analyzer.py

@@ -0,0 +1,108 @@
+# FILE: web/backend/python/dna_analyzer.py (FINAL VERSION - Shows ID and Name)
+
+import sys
+import json
+import subprocess
+import os
+
+def get_species_details(blast_id):
+    """
+    Looks up the ugly BLAST ID and returns a rich data structure
+    containing the pretty name and other info.
+    """
+    species_info_db = {
+        "KY045437.1": {
+            "species": "Salmo trutta",
+            "commonName": "Brown Trout",
+            "kingdom": "Animalia",
+            "phylum": "Chordata",
+            "ecologicalRole": "Top predator",
+            "conservationStatus": "Least Concern",
+            "indicators": ["Healthy fish population", "Good water quality"]
+        },
+        "LC143821.1": {
+            "species": "Escherichia coli",
+            "commonName": "E. coli",
+            "kingdom": "Bacteria",
+            "phylum": "Proteobacteria",
+            "ecologicalRole": "Decomposer",
+            "conservationStatus": "Pathogen Indicator",
+            "indicators": ["Fecal contamination", "Health risk"]
+        }
+    }
+    
+    for known_id, data in species_info_db.items():
+        if known_id in blast_id:
+            # --- THIS IS THE CHANGE ---
+            # We add the raw blast_id to the data we return.
+            data['blastId'] = blast_id 
+            return data
+            
+    # If we don't find a match, we still return the ID.
+    return {"species": blast_id, "commonName": "Unknown Species", "blastId": blast_id}
+
+def run_real_dna_analysis(file_path):
+    try:
+        script_dir = os.path.dirname(__file__)
+        blast_db_dir = os.path.join(script_dir, 'blast_db')
+        db_name = 'biostream_db'
+        output_path = os.path.join(script_dir, '..', 'temp', f"{os.path.basename(file_path)}.csv")
+        absolute_input_path = os.path.abspath(file_path)
+
+        blast_command = [
+            'blastn', '-query', absolute_input_path, '-db', db_name,
+            '-out', output_path, '-outfmt', "10 sseqid pident", '-subject_besthit'
+        ]
+        
+        process = subprocess.run(
+            blast_command, check=True, capture_output=True, text=True, cwd=blast_db_dir
+        )
+
+        species_hits = {}
+        if not os.path.exists(output_path):
+             return {"error": "BLAST did not produce an output file."}
+
+        with open(output_path, 'r') as f:
+            for line in f:
+                parts = line.strip().split(',')
+                if len(parts) < 2: continue
+                species_id, identity = parts[0], float(parts[1])
+                if species_id not in species_hits:
+                    species_hits[species_id] = {'count': 0, 'total_identity': 0}
+                species_hits[species_id]['count'] += 1
+                species_hits[species_id]['total_identity'] += identity
+
+        if not species_hits:
+             return { "detectedSpecies": [], "biodiversityMetrics": { "biodiversityScore": 0, "ecosystemHealth": "No Match Found" }}
+
+        detected_species_list = []
+        for species_id, data in species_hits.items():
+            details = get_species_details(species_id)
+            avg_identity = data['total_identity'] / data['count']
+            
+            details['confidence'] = round(avg_identity, 2)
+            details['abundance'] = "Medium"
+            details['dnaFragments'] = data['count']
+            detected_species_list.append(details)
+
+        os.remove(output_path)
+        
+        return {
+            "detectedSpecies": detected_species_list,
+            "biodiversityMetrics": { "speciesRichness": len(detected_species_list), "biodiversityScore": 85, "ecosystemHealth": "Good"},
+            "waterQualityAssessment": { "overallQuality": "Good", "recommendations": ["Analysis complete."] }
+        }
+
+    except subprocess.CalledProcessError as e:
+        return {"error": f"BLAST analysis failed. Details: {e.stderr}"}
+    except Exception as e:
+        return {"error": f"An error occurred in Python: {str(e)}"}
+
+if __name__ == "__main__":
+    try:
+        dna_file_path = sys.argv[1]
+        analysis_report = run_real_dna_analysis(dna_file_path)
+        print(json.dumps(analysis_report))
+    except Exception as e:
+        print(json.dumps({"error": str(e)}), file=sys.stderr)
+        sys.exit(1)

web/backend/python/ewaste_analyzer.py

@@ -0,0 +1,253 @@
+# FILE: web/backend/python/ewaste_analyzer.py
+
+import sys
+import json
+from datetime import datetime
+
+# --- FULL DATABASE AND MULTIPLIERS (FROM YOUR JS UTILITY) ---
+device_database = {
+    'smartphones': {
+        'brands': {
+            'Apple': {
+                'models': {
+                    'iPhone 15 Pro Max': {'basePrice': 800, 'releaseYear': 2023},
+                    'iPhone 15 Pro': {'basePrice': 700, 'releaseYear': 2023},
+                    'iPhone 15': {'basePrice': 500, 'releaseYear': 2023},
+                    'iPhone 14 Pro Max': {'basePrice': 650, 'releaseYear': 2022},
+                    'iPhone 14 Pro': {'basePrice': 550, 'releaseYear': 2022},
+                    'iPhone 14': {'basePrice': 400, 'releaseYear': 2022},
+                    'iPhone 13 Pro Max': {'basePrice': 500, 'releaseYear': 2021},
+                    'iPhone 13 Pro': {'basePrice': 450, 'releaseYear': 2021},
+                    'iPhone 13': {'basePrice': 350, 'releaseYear': 2021},
+                    'iPhone 12 Pro Max': {'basePrice': 400, 'releaseYear': 2020},
+                    'iPhone 12 Pro': {'basePrice': 350, 'releaseYear': 2020},
+                    'iPhone 12': {'basePrice': 280, 'releaseYear': 2020},
+                    'iPhone 11 Pro Max': {'basePrice': 300, 'releaseYear': 2019},
+                    'iPhone 11 Pro': {'basePrice': 250, 'releaseYear': 2019},
+                    'iPhone 11': {'basePrice': 200, 'releaseYear': 2019},
+                    'iPhone XS Max': {'basePrice': 200, 'releaseYear': 2018},
+                    'iPhone XS': {'basePrice': 180, 'releaseYear': 2018},
+                    'iPhone XR': {'basePrice': 150, 'releaseYear': 2018},
+                    'iPhone X': {'basePrice': 120, 'releaseYear': 2017},
+                    'iPhone 8 Plus': {'basePrice': 100, 'releaseYear': 2017},
+                    'iPhone 8': {'basePrice': 80, 'releaseYear': 2017},
+                    'iPhone 7 Plus': {'basePrice': 70, 'releaseYear': 2016},
+                    'iPhone 7': {'basePrice': 50, 'releaseYear': 2016}
+                }
+            },
+            'Samsung': {
+                'models': {
+                    'Galaxy S24 Ultra': {'basePrice': 600, 'releaseYear': 2024},
+                    'Galaxy S24+': {'basePrice': 500, 'releaseYear': 2024},
+                    'Galaxy S24': {'basePrice': 400, 'releaseYear': 2024},
+                    'Galaxy S23 Ultra': {'basePrice': 500, 'releaseYear': 2023},
+                    'Galaxy S23+': {'basePrice': 400, 'releaseYear': 2023},
+                    'Galaxy S23': {'basePrice': 320, 'releaseYear': 2023},
+                    'Galaxy S22 Ultra': {'basePrice': 400, 'releaseYear': 2022},
+                    'Galaxy S22+': {'basePrice': 320, 'releaseYear': 2022},
+                    'Galaxy S22': {'basePrice': 250, 'releaseYear': 2022},
+                    'Galaxy S21 Ultra': {'basePrice': 350, 'releaseYear': 2021},
+                    'Galaxy S21+': {'basePrice': 280, 'releaseYear': 2021},
+                    'Galaxy S21': {'basePrice': 220, 'releaseYear': 2021},
+                    'Galaxy Note 20 Ultra': {'basePrice': 300, 'releaseYear': 2020},
+                    'Galaxy Note 20': {'basePrice': 250, 'releaseYear': 2020},
+                    'Galaxy S20 Ultra': {'basePrice': 280, 'releaseYear': 2020},
+                    'Galaxy S20+': {'basePrice': 220, 'releaseYear': 2020},
+                    'Galaxy S20': {'basePrice': 180, 'releaseYear': 2020},
+                    'Galaxy Note 10+': {'basePrice': 200, 'releaseYear': 2019},
+                    'Galaxy Note 10': {'basePrice': 170, 'releaseYear': 2019},
+                    'Galaxy S10+': {'basePrice': 150, 'releaseYear': 2019},
+                    'Galaxy S10': {'basePrice': 120, 'releaseYear': 2019}
+                }
+            },
+            'Google': {
+                'models': {
+                    'Pixel 8 Pro': {'basePrice': 450, 'releaseYear': 2023},
+                    'Pixel 8': {'basePrice': 350, 'releaseYear': 2023},
+                    'Pixel 7 Pro': {'basePrice': 350, 'releaseYear': 2022},
+                    'Pixel 7': {'basePrice': 280, 'releaseYear': 2022},
+                    'Pixel 6 Pro': {'basePrice': 280, 'releaseYear': 2021},
+                    'Pixel 6': {'basePrice': 220, 'releaseYear': 2021},
+                    'Pixel 5': {'basePrice': 150, 'releaseYear': 2020},
+                    'Pixel 4 XL': {'basePrice': 120, 'releaseYear': 2019},
+                    'Pixel 4': {'basePrice': 100, 'releaseYear': 2019}
+                }
+            },
+            'OnePlus': {
+                'models': {
+                    'OnePlus 12': {'basePrice': 400, 'releaseYear': 2024},
+                    'OnePlus 11': {'basePrice': 320, 'releaseYear': 2023},
+                    'OnePlus 10 Pro': {'basePrice': 280, 'releaseYear': 2022},
+                    'OnePlus 9 Pro': {'basePrice': 220, 'releaseYear': 2021},
+                    'OnePlus 9': {'basePrice': 180, 'releaseYear': 2021},
+                    'OnePlus 8 Pro': {'basePrice': 150, 'releaseYear': 2020},
+                    'OnePlus 8': {'basePrice': 120, 'releaseYear': 2020}
+                }
+            }
+        }
+    },
+    'laptops': {
+        'brands': {
+            'Apple': {
+                'models': {
+                    'MacBook Pro 16" M3': {'basePrice': 1800, 'releaseYear': 2023},
+                    'MacBook Pro 14" M3': {'basePrice': 1400, 'releaseYear': 2023},
+                    'MacBook Air M3': {'basePrice': 900, 'releaseYear': 2024},
+                    'MacBook Pro 16" M2': {'basePrice': 1500, 'releaseYear': 2022},
+                    'MacBook Pro 14" M2': {'basePrice': 1200, 'releaseYear': 2022},
+                    'MacBook Air M2': {'basePrice': 800, 'releaseYear': 2022},
+                    'MacBook Pro 16" M1': {'basePrice': 1200, 'releaseYear': 2021},
+                    'MacBook Pro 14" M1': {'basePrice': 1000, 'releaseYear': 2021},
+                    'MacBook Air M1': {'basePrice': 650, 'releaseYear': 2020},
+                    'MacBook Pro 16" Intel': {'basePrice': 800, 'releaseYear': 2019},
+                    'MacBook Pro 13" Intel': {'basePrice': 600, 'releaseYear': 2020},
+                    'MacBook Air Intel': {'basePrice': 400, 'releaseYear': 2020}
+                }
+            },
+            'Dell': {
+                'models': {
+                    'XPS 15 (2024)': {'basePrice': 1000, 'releaseYear': 2024},
+                    'XPS 13 (2024)': {'basePrice': 800, 'releaseYear': 2024},
+                    'XPS 15 (2023)': {'basePrice': 900, 'releaseYear': 2023},
+                    'XPS 13 (2023)': {'basePrice': 700, 'releaseYear': 2023},
+                    'XPS 15 (2022)': {'basePrice': 800, 'releaseYear': 2022},
+                    'XPS 13 (2022)': {'basePrice': 600, 'releaseYear': 2022},
+                    'Inspiron 15 7000': {'basePrice': 400, 'releaseYear': 2023},
+                    'Inspiron 14 5000': {'basePrice': 300, 'releaseYear': 2023},
+                    'Latitude 7420': {'basePrice': 500, 'releaseYear': 2021},
+                    'Latitude 5520': {'basePrice': 350, 'releaseYear': 2021}
+                }
+            },
+            'HP': {
+                'models': {
+                    'Spectre x360 16': {'basePrice': 900, 'releaseYear': 2023},
+                    'Spectre x360 14': {'basePrice': 700, 'releaseYear': 2023},
+                    'EliteBook 850 G9': {'basePrice': 600, 'releaseYear': 2022},
+                    'Pavilion 15': {'basePrice': 350, 'releaseYear': 2023},
+                    'Envy 13': {'basePrice': 450, 'releaseYear': 2022},
+                    'ProBook 450 G9': {'basePrice': 400, 'releaseYear': 2022}
+                }
+            },
+            'Lenovo': {
+                'models': {
+                    'ThinkPad X1 Carbon Gen 11': {'basePrice': 1000, 'releaseYear': 2023},
+                    'ThinkPad X1 Carbon Gen 10': {'basePrice': 850, 'releaseYear': 2022},
+                    'ThinkPad T14 Gen 4': {'basePrice': 600, 'releaseYear': 2023},
+                    'ThinkPad T14 Gen 3': {'basePrice': 500, 'releaseYear': 2022},
+                    'IdeaPad 5 Pro': {'basePrice': 400, 'releaseYear': 2023},
+                    'Legion 5 Pro': {'basePrice': 800, 'releaseYear': 2023},
+                    'Yoga 9i': {'basePrice': 700, 'releaseYear': 2023}
+                }
+            },
+            'ASUS': {
+                'models': {
+                    'ZenBook Pro 16X': {'basePrice': 1200, 'releaseYear': 2023},
+                    'ZenBook 14': {'basePrice': 600, 'releaseYear': 2023},
+                    'ROG Zephyrus G15': {'basePrice': 900, 'releaseYear': 2023},
+                    'VivoBook S15': {'basePrice': 400, 'releaseYear': 2023},
+                    'TUF Gaming A15': {'basePrice': 500, 'releaseYear': 2023}
+                }
+            }
+        }
+    },
+    'tablets': {
+        'brands': {
+            'Apple': {
+                'models': {
+                    'iPad Pro 12.9" M4': {'basePrice': 800, 'releaseYear': 2024},
+                    'iPad Pro 11" M4': {'basePrice': 650, 'releaseYear': 2024},
+                    'iPad Air M2': {'basePrice': 450, 'releaseYear': 2024},
+                    'iPad Pro 12.9" M2': {'basePrice': 700, 'releaseYear': 2022},
+                    'iPad Pro 11" M2': {'basePrice': 550, 'releaseYear': 2022},
+                    'iPad Air M1': {'basePrice': 400, 'releaseYear': 2022},
+                    'iPad 10th Gen': {'basePrice': 250, 'releaseYear': 2022},
+                    'iPad 9th Gen': {'basePrice': 200, 'releaseYear': 2021},
+                    'iPad mini 6': {'basePrice': 350, 'releaseYear': 2021}
+                }
+            },
+            'Samsung': {
+                'models': {
+                    'Galaxy Tab S9 Ultra': {'basePrice': 700, 'releaseYear': 2023},
+                    'Galaxy Tab S9+': {'basePrice': 550, 'releaseYear': 2023},
+                    'Galaxy Tab S9': {'basePrice': 450, 'releaseYear': 2023},
+                    'Galaxy Tab S8 Ultra': {'basePrice': 600, 'releaseYear': 2022},
+                    'Galaxy Tab S8+': {'basePrice': 450, 'releaseYear': 2022},
+                    'Galaxy Tab S8': {'basePrice': 350, 'releaseYear': 2022},
+                    'Galaxy Tab A8': {'basePrice': 150, 'releaseYear': 2022}
+                }
+            },
+            'Microsoft': {
+                'models': {
+                    'Surface Pro 10': {'basePrice': 800, 'releaseYear': 2024},
+                    'Surface Pro 9': {'basePrice': 650, 'releaseYear': 2022},
+                    'Surface Pro 8': {'basePrice': 550, 'releaseYear': 2021},
+                    'Surface Go 4': {'basePrice': 300, 'releaseYear': 2023},
+                    'Surface Go 3': {'basePrice': 250, 'releaseYear': 2021}
+                }
+            }
+        }
+    }
+}
+
+condition_multipliers = {
+    'Like New': 0.9, 'Excellent': 0.8, 'Good': 0.65,
+    'Fair': 0.45, 'Poor': 0.25, 'For Parts': 0.15
+}
+
+storage_multipliers = {
+    '16GB': 0.7, '32GB': 0.8, '64GB': 0.9, '128GB': 1.0,
+    '256GB': 1.15, '512GB': 1.3, '1TB': 1.5, '2TB': 1.8
+}
+
+def calculate_price(device_type, brand, model, condition, storage, accessories):
+    device = device_database.get(device_type, {}).get('brands', {}).get(brand, {}).get('models', {}).get(model)
+    if not device:
+        raise ValueError(f"Device not found in database: {brand} {model}")
+
+    base_price = device['basePrice']
+    current_year = datetime.now().year
+    device_age = current_year - device['releaseYear']
+
+    if device_age <= 3:
+      age_multiplier = max(0.4, 1 - (device_age * 0.1))
+    else:
+      age_multiplier = max(0.2, 0.7 - ((device_age - 3) * 0.05))
+
+    condition_multiplier = condition_multipliers.get(condition, 0.5)
+    storage_multiplier = storage_multipliers.get(storage, 1.0)
+    
+    estimated_value = base_price * age_multiplier * condition_multiplier * storage_multiplier
+    
+    accessory_bonus = 0
+    if 'Original Box' in accessories: accessory_bonus += estimated_value * 0.05
+    if 'Charger' in accessories: accessory_bonus += estimated_value * 0.03
+    if 'Cables' in accessories: accessory_bonus += estimated_value * 0.02
+    if 'Manual' in accessories: accessory_bonus += estimated_value * 0.01
+    if 'Case/Cover' in accessories: accessory_bonus += estimated_value * 0.02
+    estimated_value += accessory_bonus
+    
+    return {
+        'minPrice': round(estimated_value * 0.85),
+        'maxPrice': round(estimated_value * 1.15),
+        'estimatedValue': round(estimated_value)
+    }
+
+def get_full_analysis(form_data):
+    price_result = calculate_price(
+        form_data.get('deviceType'),
+        form_data.get('brand'),
+        form_data.get('model'),
+        form_data.get('condition'),
+        form_data.get('storage', '128GB'),
+        form_data.get('accessories', [])
+    )
+    return {"priceAnalysis": price_result}
+
+if __name__ == "__main__":
+    try:
+        form_data = json.load(sys.stdin)
+        analysis_data = get_full_analysis(form_data)
+        print(json.dumps(analysis_data))
+    except Exception as e:
+        print(json.dumps({"error": str(e)}), file=sys.stderr)
+        sys.exit(1)

web/backend/python/phantom_footprint_analyzer.py

@@ -0,0 +1,121 @@
+# FILE: web/backend/python/phantom_footprint_analyzer.py (UPGRADED with better AI)
+
+import sys
+import json
+import random
+
+# --- UPGRADED KNOWLEDGE BASE ---
+# We've added more categories and more specific data
+product_category_db = {
+    "small_electronics": {
+        "return_rate_percent": (20, 35), "packaging_waste_grams": (300, 800),
+        "carbon_footprint_kg": (15, 40), "water_usage_liters": (3000, 12000),
+        "base_weight_kg": 0.3,
+        "recommendations": [
+            "Look for brands with strong repairability scores to extend the product's life.",
+            "Consider purchasing refurbished electronics to reduce manufacturing demand.",
+            "Check for certifications like EPEAT or Energy Star for efficiency."
+        ]
+    },
+    "fashion": {
+        "return_rate_percent": (25, 45), "packaging_waste_grams": (100, 400),
+        "carbon_footprint_kg": (10, 30), "water_usage_liters": (2500, 8000),
+        "base_weight_kg": 0.8,
+        "recommendations": [
+            "High return rates often indicate poor sizing. Check user reviews for sizing accuracy.",
+            "Choose natural, sustainably sourced fibers like organic cotton or Tencel.",
+            "Wash clothes in cold water to save energy and extend their lifespan."
+        ]
+    },
+    "small_appliance": {
+        "return_rate_percent": (10, 20), "packaging_waste_grams": (800, 2500),
+        "carbon_footprint_kg": (20, 60), "water_usage_liters": (1000, 5000),
+        "base_weight_kg": 2.5,
+        "recommendations": [
+            "Prioritize energy and water efficiency ratings to save on long-term running costs.",
+            "Measure your space carefully before ordering to avoid return shipping.",
+            "Check if the manufacturer has a take-back program for your old appliance."
+        ]
+    },
+    # --- NEW, MORE ACCURATE CATEGORY ---
+    "large_appliance": {
+        "return_rate_percent": (5, 15), "packaging_waste_grams": (3000, 8000),
+        "carbon_footprint_kg": (80, 250), "water_usage_liters": (4000, 10000),
+        "base_weight_kg": 8.0, # Much heavier
+        "recommendations": [
+            "For large appliances, repair is almost always the most eco-friendly option.",
+            "Ensure the product has a high energy-efficiency rating as its lifetime energy use is a major impact.",
+            "Confirm the retailer will recycle your old appliance upon delivery."
+        ]
+    },
+    "default": { # Fallback for unknown items
+        "return_rate_percent": (15, 30), "packaging_waste_grams": (200, 600),
+        "carbon_footprint_kg": (20, 50), "water_usage_liters": (2000, 6000),
+        "base_weight_kg": 1.0,
+        "recommendations": ["Consider buying from local retailers to reduce shipping emissions.", "Look for minimal packaging options."]
+    }
+}
+
+transport_co2_kg_per_km_per_kg = 0.00018
+shipping_distances_km = { "China": 12000, "Vietnam": 13500, "India": 14000, "Colombia": 4500, "USA": 1500, "Germany": 8000 }
+
+# --- UPGRADED "AI" - More Keywords, Better Logic ---
+def extract_info_from_url(url):
+    """
+    A smarter simulation to identify product, category, and origin from a URL.
+    """
+    url_lower = url.lower() # Convert URL to lowercase for easier searching
+    
+    # Check for specific, high-impact items first
+    if "vacuum" in url_lower or "navigator" in url_lower or "cleaner" in url_lower:
+        return "Vacuum Cleaner", "large_appliance", "China"
+        
+    # Check for other categories
+    if "headphone" in url_lower or "speaker" in url_lower or "case" in url_lower or "tracker" in url_lower:
+        return "Electronic Accessory", "small_electronics", "China"
+    if "shoe" in url_lower or "backpack" in url_lower or "shirt" in url_lower:
+        return "Fashion Apparel", "fashion", "Vietnam"
+    if "coffee" in url_lower or "lamp" in url_lower or "blender" in url_lower:
+        return "Small Home Appliance", "small_appliance", "Germany"
+    
+    # A better default fallback
+    return "General Product", "default", "China"
+
+# --- The rest of the file (analyze_phantom_footprint and the main block) remains the same ---
+def analyze_phantom_footprint(url):
+    product_name, category, origin_country = extract_info_from_url(url)
+    category_data = product_category_db[category]
+    distance = shipping_distances_km.get(origin_country, 8000)
+    transport_co2 = distance * category_data['base_weight_kg'] * transport_co2_kg_per_km_per_kg
+    manufacturing_co2 = random.randint(*category_data["carbon_footprint_kg"])
+    total_co2_footprint = manufacturing_co2 + transport_co2
+    hidden_impacts = {
+        "returnRate": random.randint(*category_data["return_rate_percent"]),
+        "packagingWaste": random.randint(*category_data["packaging_waste_grams"]),
+        "carbonFootprint": manufacturing_co2,
+        "waterUsage": random.randint(*category_data["water_usage_liters"])
+    }
+    score = (hidden_impacts["returnRate"] * 0.5 + total_co2_footprint * 0.5 + hidden_impacts["packagingWaste"] / 100)
+    report = {
+        "productName": product_name, "originCountry": origin_country,
+        "impactScore": min(99, int(score)),
+        "phantomFootprint": {
+            "totalCO2EquivalentKg": round(total_co2_footprint, 2),
+            "breakdown": {"manufacturingCO2Kg": manufacturing_co2, "transportCO2Kg": round(transport_co2, 2)},
+            "hiddenWaterUsageLiters": hidden_impacts['waterUsage'],
+            "productionWasteKg": round(hidden_impacts['packagingWaste'] / 1000, 2)
+        },
+        "insights": category_data["recommendations"]
+    }
+    return report
+
+if __name__ == "__main__":
+    try:
+        input_data = json.load(sys.stdin)
+        url = input_data.get('url')
+        if not url: raise ValueError("Missing product URL.")
+        analysis_report = analyze_phantom_footprint(url)
+        print(json.dumps(analysis_report))
+    except Exception as e:
+        print(json.dumps({"error": str(e)}), file=sys.stderr)
+        sys.exit(1)

web/backend/python/requirements.txt

@@ -0,0 +1,9 @@
+opencv-python==4.8.1.78
+numpy==1.24.3
+Pillow==10.0.1
+Flask==2.3.3
+Flask-CORS==4.0.0
+scikit-image==0.21.0
+scipy==1.11.3
+biopython==1.83
+librosa==0.10.1

web/backend/python/water_analysis.py

@@ -0,0 +1,138 @@
+import sys
+import json
+import cv2
+import numpy as np
+from skimage import color as skimage_color
+import os
+
+class WaterQualityAnalyzer:
+    def __init__(self):
+       self.lab_calibration = {
+    'ph': [
+        ((54, 81, 69), 4.0),
+        ((63, 60, 59), 5.0),
+        ((75, 24, 79), 6.0),
+        ((88, -8, 86), 6.5),
+        ((97, -15, 94), 7.0),
+        ((91, -26, 85), 7.5),
+        ((88, -76, 81), 8.0),
+        ((91, -48, -14), 8.5),
+        ((54, 57, -100), 9.0),
+    ],
+    'chlorine': [
+        ((100, 0, 0), 0.0),
+        ((97, 5, 2), 0.5),
+        ((91, 15, 5), 1.0),
+        ((76, 34, 4), 2.0),
+        ((60, 49, -4), 3.0),
+        ((54, 69, 36), 4.0),
+    ],
+    'nitrates': [
+        ((100, 0, 0), 0),
+        ((97, 6, 4), 5),
+        ((92, 14, 6), 10),
+        ((76, 33, 5), 25),
+        ((63, 60, 58), 50),
+    ],
+    'hardness': [
+        ((100, 0, 0), 0),
+        ((98, -3, 3), 50),
+        ((91, -21, 20), 100),
+        ((88, -76, 81), 150),
+        ((54, -39, 36), 200),
+        ((46, -51, 49), 300),
+    ],
+    'alkalinity': [
+        ((100, 0, 0), 0),
+        ((98, -9, 0), 40),
+        ((91, -16, -11), 80),
+        ((91, -48, -14), 120),
+        ((87, -42, -15), 160),
+        ((60, -29, -29), 240),
+    ],
+    'bacteria': [
+        ((100, 0, 0), 0),
+        ((97, -1, 12), 0.5),
+        ((97, -15, 94), 1),
+    ],
+}
+
+
+
+    def _color_distance_lab(self, lab1, lab2):
+        return np.sqrt(np.sum((np.array(lab1) - np.array(lab2)) ** 2))
+
+    def analyze_parameter(self, avg_lab_color, parameter):
+        if parameter not in self.lab_calibration: return 0, 0
+        calibration_data = self.lab_calibration[parameter]
+        if not calibration_data: return 0, 0
+        
+        distances = [(self._color_distance_lab(avg_lab_color, cal_lab), value) for cal_lab, value in calibration_data]
+        distances.sort()
+        
+        closest_dist, best_value = distances[0]
+        confidence = max(0, 100 - (closest_dist * 2.5))
+        
+        if len(distances) >= 2:
+            d1, v1 = distances[0]
+            d2, v2 = distances[1]
+            if (d1 + d2) == 0: return v1, confidence
+            weight1 = d2 / (d1 + d2)
+            weight2 = d1 / (d1 + d2)
+            interpolated_value = v1 * weight1 + v2 * weight2
+            return interpolated_value, confidence
+        
+        return best_value, confidence
+
+    def analyze_water_quality(self, image_path, water_source='unknown'):
+        image = cv2.imread(image_path)
+        if image is None: raise ValueError(f"Could not load image: {image_path}")
+        
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+        height = image_rgb.shape[0]
+        pad_height = height // 6
+        regions_of_interest = [image_rgb[i * pad_height:(i + 1) * pad_height, :] for i in range(6)]
+
+        parameter_names = ['ph', 'chlorine', 'nitrates', 'hardness', 'alkalinity', 'bacteria']
+        results, confidences = {}, {}
+
+        for i, param in enumerate(parameter_names):
+            roi_rgb = regions_of_interest[i]
+            roi_lab = skimage_color.rgb2lab(roi_rgb)
+            avg_lab_color = np.mean(roi_lab.reshape(-1, 3), axis=0)
+            value, confidence = self.analyze_parameter(avg_lab_color, param)
+            results[param] = value
+            confidences[param] = round(confidence)
+            
+        overall_confidence = round(np.mean(list(confidences.values())))
+
+        return {
+            "ph": results.get('ph', 0), "chlorine": results.get('chlorine', 0),
+            "nitrates": results.get('nitrates', 0), "hardness": results.get('hardness', 0),
+            "alkalinity": results.get('alkalinity', 0), "bacteria": results.get('bacteria', 0),
+            "confidence": overall_confidence, "individualConfidences": confidences,
+            "processingMethod": "Python CV (LAB Space)",
+        }
+
+def main():
+    if len(sys.argv) < 2:
+        print(json.dumps({"error": "No image path provided"}), file=sys.stderr)
+        sys.exit(1)
+    
+    image_path = sys.argv[1]
+    water_source = sys.argv[2] if len(sys.argv) > 2 else 'unknown'
+    
+    if not os.path.exists(image_path):
+        print(json.dumps({"error": f"Image file not found: {image_path}"}), file=sys.stderr)
+        sys.exit(1)
+    
+    try:
+        analyzer = WaterQualityAnalyzer()
+        results = analyzer.analyze_water_quality(image_path, water_source)
+        print(json.dumps(results, indent=4))
+    except Exception as e:
+        print(json.dumps({"error": str(e)}), file=sys.stderr)
+        sys.exit(1)
+
+if __name__ == "__main__":
+    main()

web/backend/results/.gitkeep

@@ -0,0 +1 @@
+ 

web/backend/uploads/.gitkeep

@@ -0,0 +1 @@
+ 

web/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "greenplus-by-gxs-web",
+  "version": "2.0.0",
+  "description": "GreenPlus by GXS - Environmental Intelligence Hub with Enhanced UI/UX",
+  "private": true,
+  "dependencies": {
+    "idb": "^8.0.3",
+    "lucide-react": "^0.539.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "tone": "^15.1.22",
+    "web-vitals": "^3.3.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "GENERATE_SOURCEMAP=false WASM=0 react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

web/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#2E7D32" />
+    <meta name="description" content="GreenPlus by GXS - Your environmental companion for a sustainable future" />
+    <title>GreenPlus by GXS - Save the Planet</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

web/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "GreenPlus by GXS",
+  "name": "GreenPlus by GXS - Environmental Action Platform",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#2E7D32",
+  "background_color": "#F5F5F5"
+}

web/public/sounds/bird-call.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f080cd3ef7eeeb5af924169721554d0dbfb05faf5019ba90b019fdc60643d56f
+size 6815242

web/public/sounds/forest-ambience.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56f7a425f4d45356641586642a9f51ba6bba4b46208dd4ff5ed76e915b696fef
+size 2413440

web/public/sounds/industrial-hum.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0efc2ee25714b10ce986fb54c48fc571d16d5ae5c631caf185e00daf72b229ab
+size 632160

web/public/sounds/river.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:11ecd37d5a586689f387c83d91ea362bbc4207ac7e68d5457c9c0cfdef09e32a
+size 3843552

web/src/App.css

@@ -0,0 +1,514 @@
+/* Grid Layouts for Dashboard */
+.grid {
+  display: grid;
+  gap: 20px;
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+/* Card Component */
+.card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Card content that grows to push button to bottom */
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-description {
+  flex: 1;
+  margin-bottom: 20px;
+}
+
+.card-button {
+  margin-top: auto;
+  transition: all 0.2s ease;
+}
+
+.card-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .grid-3, .grid-4 {
+    grid-template-columns: 1fr;
+  }
+  
+  .card {
+    padding: 16px;
+  }
+}
+
+/* Main App Container */
+.terra-app {
+  display: flex;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Sidebar */
+.terra-sidebar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  color: #333;
+  transition: width 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 100;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.terra-sidebar.open {
+  width: 280px;
+}
+
+.terra-sidebar.closed {
+  width: 70px;
+}
+
+/* Logo Section */
+.terra-logo {
+  padding: 24px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  min-height: 90px;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.logo-icon {
+  font-size: 2.5rem;
+}
+
+.logo-text h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: #2E7D32;
+}
+
+.logo-text p {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+/* Navigation */
+.terra-nav {
+  flex: 1;
+  padding: 16px 0;
+  overflow-y: auto;
+}
+
+.terra-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.terra-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.terra-nav::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  margin: 3px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  color: #333;
+}
+
+.nav-item:hover {
+  background: rgba(46, 125, 50, 0.1);
+  transform: translateX(2px);
+}
+
+.nav-item.active {
+  background: rgba(46, 125, 50, 0.15);
+  border-left: 3px solid #2E7D32;
+  color: #2E7D32;
+}
+
+.nav-icon {
+  font-size: 1.5rem;
+  margin-right: 14px;
+  min-width: 28px;
+  text-align: center;
+}
+
+.nav-content {
+  flex: 1;
+}
+
+.nav-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  display: block;
+  margin-bottom: 3px;
+}
+
+.nav-desc {
+  font-size: 0.75rem;
+  opacity: 0.7;
+  color: #666;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.footer-stats {
+  display: flex;
+  gap: 16px;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+
+.stat-icon {
+  font-size: 1.3rem;
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #2E7D32;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  color: #666;
+}
+
+/* Main Content */
+.terra-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #f8fdf8 0%, #f0f9f0 100%);
+}
+
+/* Header */
+.terra-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(76, 175, 80, 0.1);
+  padding: 24px 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.header-left {
+  flex: 1;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 0 0 8px 0;
+  color: #2d5016;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.title-icon {
+  font-size: 2.2rem;
+}
+
+.page-subtitle {
+  margin: 0;
+  color: #4a7c23;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-stats {
+  display: flex;
+  gap: 20px;
+}
+
+.header-stat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(76, 175, 80, 0.1);
+  padding: 16px 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(76, 175, 80, 0.2);
+  transition: all 0.3s ease;
+}
+
+.header-stat:hover {
+  background: rgba(76, 175, 80, 0.15);
+  transform: translateY(-2px);
+}
+
+.header-stat span {
+  font-size: 1.6rem;
+}
+
+.header-stat > div > div:first-child {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: #2d5016;
+}
+
+.header-stat > div > div:last-child {
+  font-size: 0.8rem;
+  color: #4a7c23;
+  font-weight: 500;
+}
+
+/* Content Area */
+.terra-content {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  background: transparent;
+}
+
+.terra-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.terra-content::-webkit-scrollbar-track {
+  background: rgba(76, 175, 80, 0.1);
+  border-radius: 4px;
+}
+
+.terra-content::-webkit-scrollbar-thumb {
+  background: rgba(76, 175, 80, 0.3);
+  border-radius: 4px;
+}
+
+.terra-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(76, 175, 80, 0.5);
+}
+
+/* Page Transition Animation */
+.terra-content > * {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .terra-sidebar.open {
+    width: 260px;
+  }
+  
+  .header-stats {
+    gap: 16px;
+  }
+  
+  .header-stat {
+    padding: 12px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .terra-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  .terra-sidebar.open {
+    transform: translateX(0);
+    width: 280px;
+  }
+  
+  .terra-sidebar.closed {
+    transform: translateX(-100%);
+  }
+  
+  .terra-header {
+    padding: 20px 24px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .header-stats {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  
+  .header-stat {
+    flex: 1;
+    min-width: 140px;
+    padding: 12px 16px;
+  }
+  
+  .terra-content {
+    padding: 24px 20px;
+  }
+  
+  .page-title {
+    font-size: 1.6rem;
+  }
+  
+  .title-icon {
+    font-size: 1.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .terra-logo {
+    padding: 20px 16px;
+  }
+  
+  .logo-text h1 {
+    font-size: 1.3rem;
+  }
+  
+  .nav-item {
+    padding: 12px 16px;
+    margin: 2px 8px;
+  }
+  
+  .nav-name {
+    font-size: 0.9rem;
+  }
+  
+  .nav-desc {
+    font-size: 0.7rem;
+  }
+  
+  .header-stats {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .header-stat {
+    width: 100%;
+  }
+  
+  .terra-content {
+    padding: 20px 16px;
+  }
+}
+
+/* Focus States for Accessibility */
+.nav-item:focus,
+.sidebar-toggle:focus,
+.header-stat:focus {
+  outline: 2px solid #a8e6a3;
+  outline-offset: 2px;
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .terra-sidebar {
+    background: #2d5016;
+  }
+  
+  .nav-item.active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+/*
+ Global Button Styles */
+button {
+  transition: all 0.3s ease;
+}
+
+button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+}
+
+/* Ensure all buttons have proper cursor */
+button:not(:disabled) {
+  cursor: pointer;
+}

web/src/App.js

@@ -0,0 +1,514 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import { systemInitializer } from './utils/systemInitializer.js';
+import { authManager } from './utils/auth.js';
+import LoadingScreen from './components/LoadingScreen';
+
+// Import all your pages
+import Dashboard from './pages/Dashboard';
+import AquaLens from './pages/AquaLens';
+import BiodiversityEar from './pages/BiodiversityEar';
+import CarbonOptimizer from './pages/CarbonOptimizer';
+import SmartFarming from './pages/SmartFarming';
+import EWasteRecycling from './pages/EWasteRecycling';
+import AirQuality from './pages/AirQuality';
+import FloraShield from './pages/FloraShield';
+import FoodWasteReduction from './pages/FoodWasteReduction';
+import EnvironmentalJustice from './pages/EnvironmentalJustice';
+import EcoSonification from './pages/EcoSonification';
+import PhantomFootprint from './pages/PhantomFootprint';
+import UpcyclingAgent from './pages/UpcyclingAgent';
+import PackagingDesigner from './pages/PackagingDesigner';
+import Impact from './pages/Impact';
+import EcoTasks from './pages/EcoTasks';
+import Learn from './pages/Learn';
+import Startups from './pages/Startups';
+import Community from './pages/Community';
+import Profile from './pages/Profile';
+import Login from './pages/Login';
+import DigitalQuarry from './pages/DigitalQuarry';
+import BioStreamAI from './pages/BioStreamAI';
+import EWasteProspector from './pages/EWasteProspector';
+import GeneticResilience from './pages/GeneticResilience';
+
+function App() {
+  const [activePage, setActivePage] = useState('Dashboard');
+  const [userStats, setUserStats] = useState({
+    carbonSaved: 0,
+    waterTests: 0,
+    biodiversityScans: 0,
+    treesPlanted: 0,
+    wasteReduced: 0,
+    energySaved: 0
+  });
+  const [currentUser, setCurrentUser] = useState(null);
+  const [systemReady, setSystemReady] = useState(false);
+  const [systemStatus, setSystemStatus] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Initialize advanced systems and authentication on app start
+  useEffect(() => {
+    const initializeSystems = async () => {
+      console.log('🚀 GreenPlus by GXS: Initializing Advanced Environmental Systems...');
+      
+      try {
+        const status = await systemInitializer.initialize();
+        setSystemStatus(status);
+        setSystemReady(status.overallReady);
+        
+        // Initialize authentication
+        const user = authManager.getCurrentUser();
+        setCurrentUser(user);
+        
+        if (status.overallReady) {
+          console.log('✅ GreenPlus by GXS: All systems operational!');
+        } else {
+          console.warn('⚠️ GreenPlus by GXS: Running with limited functionality');
+        }
+      } catch (error) {
+        console.error('❌ GreenPlus by GXS: System initialization failed:', error);
+        setSystemReady(false);
+      }
+    };
+
+    initializeSystems();
+    
+    // Show loading screen for 2.5 seconds
+    const loadingTimer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2500);
+
+    return () => clearTimeout(loadingTimer);
+  }, []);
+
+  // Handle authentication changes
+  const handleAuthChange = (user) => {
+    setCurrentUser(user);
+    updateUserStats();
+  };
+
+  // Update user stats from auth manager
+  const updateUserStats = () => {
+    const stats = authManager.getUserStats();
+    
+    // Only show demo stats for actual guest users, not logged-in users
+    const isGuest = currentUser?.isGuest === true;
+    const isNewGuest = isGuest && !stats.carbonSaved && !stats.waterTests && !stats.biodiversityScans;
+    
+    console.log('🔄 App.js updateUserStats called');
+    console.log('📊 Raw stats from authManager:', stats);
+    console.log('👤 Current user:', currentUser);
+    console.log('🆕 Is new guest:', isNewGuest);
+    
+    const newStats = {
+      carbonSaved: stats.carbonSaved || (isNewGuest ? 12 : 0),
+      waterTests: stats.waterTests || (isNewGuest ? 3 : 0),
+      biodiversityScans: stats.biodiversityScans || (isNewGuest ? 2 : 0),
+      treesPlanted: stats.treesPlanted || 0,
+      wasteReduced: stats.wasteReduced || 0,
+      energySaved: stats.energySaved || 0
+    };
+    
+    console.log('📈 Setting userStats to:', newStats);
+    setUserStats(newStats);
+  };
+
+  // Set up periodic stats refresh
+  useEffect(() => {
+    // Initial stats load
+    updateUserStats();
+    
+    // Refresh stats every 10 seconds (less frequent to reduce flickering)
+    const statsInterval = setInterval(updateUserStats, 10000);
+    
+    return () => clearInterval(statsInterval);
+  }, [currentUser]);
+
+  const pages = [
+    { 
+      id: 'Dashboard', 
+      name: 'Dashboard', 
+      icon: '🏠', 
+      component: Dashboard,
+      description: 'Overview & Analytics'
+    },
+    { 
+      id: 'AquaLens', 
+      name: 'AquaLens', 
+      icon: '💧', 
+      component: AquaLens,
+      description: 'Water Quality Analysis'
+    },
+    { 
+      id: 'BiodiversityEar', 
+      name: 'BiodiversityEar', 
+      icon: '🦜', 
+      component: BiodiversityEar,
+      description: 'Ecosystem Monitoring'
+    },
+    { 
+      id: 'CarbonOptimizer', 
+      name: 'Carbon Optimizer', 
+      icon: '🌱', 
+      component: CarbonOptimizer,
+      description: 'Carbon Footprint Tracking'
+    },
+    { 
+      id: 'SmartFarming', 
+      name: 'Smart Farming', 
+      icon: '🌾', 
+      component: SmartFarming,
+      description: 'Agricultural Intelligence'
+    },
+    { 
+      id: 'EWasteRecycling', 
+      name: 'E-Waste Recycling', 
+      icon: '♻️', 
+      component: EWasteRecycling,
+      description: 'Electronic Waste Management'
+    },
+    { 
+      id: 'AirQuality', 
+      name: 'Air Quality', 
+      icon: '🌬️', 
+      component: AirQuality,
+      description: 'Air Pollution Monitoring'
+    },
+    { 
+      id: 'FloraShield', 
+      name: 'FloraShield', 
+      icon: '🛡️', 
+      component: FloraShield,
+      description: 'Plant Disease Detection'
+    },
+    { 
+      id: 'FoodWasteReduction', 
+      name: 'Food Waste Reduction', 
+      icon: '🍎', 
+      component: FoodWasteReduction,
+      description: 'Food Rescue Network'
+    },
+    { 
+      id: 'EnvironmentalJustice', 
+      name: 'Environmental Justice', 
+      icon: '⚖️', 
+      component: EnvironmentalJustice,
+      description: 'Equity & Justice'
+    },
+    { 
+      id: 'EcoSonification', 
+      name: 'EcoSonification', 
+      icon: '🎵', 
+      component: EcoSonification,
+      description: 'Environmental Sound Art'
+    },
+    { 
+      id: 'PhantomFootprint', 
+      name: 'Phantom Footprint', 
+      icon: '👻', 
+      component: PhantomFootprint,
+      description: 'Hidden Impact Tracker'
+    },
+    { 
+      id: 'UpcyclingAgent', 
+      name: 'Upcycling Agent', 
+      icon: '🔄', 
+      component: UpcyclingAgent,
+      description: 'Creative Reuse Assistant'
+    },
+    { 
+      id: 'PackagingDesigner', 
+      name: 'Packaging Designer', 
+      icon: '📦', 
+      component: PackagingDesigner,
+      description: 'Sustainable Packaging'
+    },
+    { 
+      id: 'DigitalQuarry', 
+      name: 'Digital Quarry', 
+      icon: '🏗️', 
+      component: DigitalQuarry,
+      description: 'Construction Waste Marketplace'
+    },
+    { 
+      id: 'BioStreamAI', 
+      name: 'Bio-Stream AI', 
+      icon: '🧬', 
+      component: BioStreamAI,
+      description: 'Environmental DNA Analysis'
+    },
+    { 
+      id: 'EWasteProspector', 
+      name: 'E-Waste Prospector', 
+      icon: '⚡', 
+      component: EWasteProspector,
+      description: 'Critical Mineral Recovery'
+    },
+    { 
+      id: 'GeneticResilience', 
+      name: 'Genetic Resilience', 
+      icon: '🌾', 
+      component: GeneticResilience,
+      description: 'Climate Crop Analysis'
+    },
+    { 
+      id: 'Impact', 
+      name: 'Global Impact', 
+      icon: '🌍', 
+      component: Impact,
+      description: 'Environmental Impact Data'
+    },
+    { 
+      id: 'EcoTasks', 
+      name: 'Eco Tasks', 
+      icon: '✅', 
+      component: EcoTasks,
+      description: 'Daily Green Actions'
+    },
+    { 
+      id: 'Learn', 
+      name: 'Learn', 
+      icon: '📚', 
+      component: Learn,
+      description: 'Environmental Education'
+    },
+    { 
+      id: 'Startups', 
+      name: 'Green Startups', 
+      icon: '🚀', 
+      component: Startups,
+      description: 'Sustainable Innovation'
+    },
+    { 
+      id: 'Community', 
+      name: 'Community', 
+      icon: '👥', 
+      component: Community,
+      description: 'Connect with eco champions'
+    },
+    { 
+      id: 'Profile', 
+      name: 'My Profile', 
+      icon: '👤', 
+      component: Profile,
+      description: 'View your environmental impact'
+    },
+    { 
+      id: 'Login', 
+      name: 'Login', 
+      icon: '🔑', 
+      component: Login,
+      description: 'Sign in or create account'
+    }
+  ];
+
+  // Initialize page from URL on app load
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const pageFromUrl = urlParams.get('page');
+    
+    if (pageFromUrl && pages.some(page => page.id === pageFromUrl)) {
+      setActivePage(pageFromUrl);
+    } else {
+      // If no valid page in URL, set default and update URL
+      const defaultPage = 'Dashboard';
+      setActivePage(defaultPage);
+      updateURL(defaultPage);
+    }
+  }, []);
+
+  // Function to update URL without page reload
+  const updateURL = (pageId) => {
+    const newUrl = `${window.location.pathname}?page=${pageId}`;
+    window.history.pushState({ page: pageId }, '', newUrl);
+  };
+
+  // Handle browser back/forward buttons
+  useEffect(() => {
+    const handlePopState = (event) => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const pageFromUrl = urlParams.get('page') || 'Dashboard';
+      
+      if (pages.some(page => page.id === pageFromUrl)) {
+        setActivePage(pageFromUrl);
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const currentPage = pages.find(page => page.id === activePage);
+  const CurrentComponent = currentPage?.component || Dashboard;
+
+  const handlePageChange = (pageId) => {
+    setActivePage(pageId);
+    updateURL(pageId);
+  };
+
+  // Handle activity completion to update stats immediately
+  const handleActivityComplete = async (activity) => {
+    console.log('🎯 App.js handleActivityComplete called with:', activity);
+    
+    // Log activity through auth manager if activity data is provided
+    if (activity && activity.type) {
+      console.log('📝 Logging activity through authManager...');
+      await authManager.logActivity(activity.description || 'Environmental action', {
+        type: activity.type,
+        amount: activity.amount,
+        points: activity.points || 10
+      });
+      console.log('✅ Activity logged successfully');
+    }
+    
+    // Update stats display
+    console.log('🔄 Calling updateUserStats after activity completion...');
+    updateUserStats();
+  };
+
+  // Show loading screen first
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <div className="terra-app">
+      {/* Sidebar */}
+      <div className="terra-sidebar open">
+        {/* Logo */}
+        <div className="terra-logo">
+          <div className="logo-container">
+            <div className="logo-icon">🌿</div>
+            <div className="logo-text">
+              <h1>GreenPlus by GXS</h1>
+              <p>Environmental Intelligence Hub</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <div className="terra-nav">
+          {pages.map(page => (
+            <div
+              key={page.id}
+              className={`nav-item ${activePage === page.id ? 'active' : ''}`}
+              onClick={() => handlePageChange(page.id)}
+            >
+              <span className="nav-icon">{page.icon}</span>
+              <div className="nav-content">
+                <span className="nav-name">{page.name}</span>
+                <span className="nav-desc">{page.description}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+
+      </div>
+
+      {/* Main Content */}
+      <div className="terra-main">
+        {/* Header */}
+        <div className="terra-header">
+          <div className="header-left">
+            <h1 className="page-title">
+              <span className="title-icon">{currentPage?.icon}</span>
+              {currentPage?.name}
+            </h1>
+            <p className="page-subtitle">{currentPage?.description}</p>
+          </div>
+          <div className="header-right">
+            {/* User Info */}
+            {currentUser && (
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '15px',
+                marginRight: '20px'
+              }}>
+                <div 
+                  onClick={() => handlePageChange('Profile')}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    background: 'rgba(255,255,255,0.1)',
+                    padding: '8px 15px',
+                    borderRadius: '20px',
+                    cursor: 'pointer',
+                    transition: 'background 0.2s'
+                  }}
+                  onMouseEnter={(e) => e.target.style.background = 'rgba(255,255,255,0.2)'}
+                  onMouseLeave={(e) => e.target.style.background = 'rgba(255,255,255,0.1)'}
+                  title="Click to view profile"
+                >
+                  <span style={{ fontSize: '1.2rem' }}>{currentUser.avatar}</span>
+                  <span style={{ color: 'white', fontWeight: 'bold' }}>
+                    {currentUser.name}
+                  </span>
+                  {currentUser.isGuest && (
+                    <span style={{ 
+                      background: '#FF9800', 
+                      color: 'white', 
+                      padding: '2px 8px', 
+                      borderRadius: '10px', 
+                      fontSize: '0.7rem' 
+                    }}>
+                      GUEST
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+
+            <div className="header-stats">
+              <div className="header-stat">
+                <span>🌿</span>
+                <div>
+                  <div>{Math.round(userStats.carbonSaved)}</div>
+                  <div>CO₂ Saved (kg)</div>
+                </div>
+              </div>
+              <div className="header-stat">
+                <span>💧</span>
+                <div>
+                  <div>{userStats.waterTests}</div>
+                  <div>Water Tests</div>
+                </div>
+              </div>
+              <div className="header-stat">
+                <span>🦜</span>
+                <div>
+                  <div>{userStats.biodiversityScans}</div>
+                  <div>Bio Scans</div>
+                </div>
+              </div>
+              <div className="header-stat">
+                <span>🌳</span>
+                <div>
+                  <div>{userStats.treesPlanted}</div>
+                  <div>Trees Planted</div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="terra-content">
+          <CurrentComponent 
+            onNavigate={handlePageChange} 
+            onActivityComplete={handleActivityComplete}
+            onAuthChange={handleAuthChange}
+            userStats={userStats}
+            currentUser={currentUser}
+            isAuthenticated={currentUser && !currentUser.isGuest}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

web/src/App.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SimpleComponent from './SimpleComponent'; // We are importing our new simple component
+
+// Test 1: Check if our simple component renders.
+test('renders the simple component without crashing', () => {
+  render(<SimpleComponent />);
+  const titleElement = screen.getByText(/EcoSpire Test Passed/i);
+  expect(titleElement).toBeInTheDocument();
+});
+
+// Test 2: Check for the paragraph in our simple component.
+test('shows the success message in the simple component', () => {
+  render(<SimpleComponent />);
+  const messageElement = screen.getByText(/Component rendered successfully/i);
+  expect(messageElement).toBeInTheDocument();
+});

web/src/SimpleComponent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function SimpleComponent() {
+  return (
+    <div>
+      <h1>GreenPlus by GXS Test Passed</h1>
+      <p>Component rendered successfully.</p>
+    </div>
+  );
+}
+
+export default SimpleComponent;

web/src/components/Analytics.js

@@ -0,0 +1,219 @@
+import React from 'react';
+
+function Analytics({ activities, goals }) {
+  // Calculate various analytics
+  const calculateAnalytics = () => {
+    if (activities.length === 0) return null;
+
+    const now = new Date();
+    const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+    // Filter activities by time period
+    const last30Days = activities.filter(activity => 
+      new Date(activity.timestamp || Date.now()) >= thirtyDaysAgo
+    );
+    const last7Days = activities.filter(activity => 
+      new Date(activity.timestamp || Date.now()) >= sevenDaysAgo
+    );
+
+    // Calculate totals by category
+    const categoryTotals = activities.reduce((acc, activity) => {
+      acc[activity.type] = (acc[activity.type] || 0) + activity.co2;
+      return acc;
+    }, {});
+
+    // Calculate monthly trend
+    const monthlyData = [];
+    for (let i = 29; i >= 0; i--) {
+      const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000);
+      const dayActivities = activities.filter(activity => {
+        const activityDate = new Date(activity.timestamp || Date.now());
+        return activityDate.toDateString() === date.toDateString();
+      });
+      const dayTotal = dayActivities.reduce((sum, activity) => sum + activity.co2, 0);
+      monthlyData.push({
+        date: date.getDate(),
+        co2: dayTotal,
+        day: date.toLocaleDateString('en-US', { weekday: 'short' })
+      });
+    }
+
+    // Calculate averages
+    const dailyAverage = last30Days.reduce((sum, activity) => sum + activity.co2, 0) / 30;
+    const weeklyAverage = last7Days.reduce((sum, activity) => sum + activity.co2, 0) / 7;
+
+    // Calculate improvement
+    const firstHalf = last30Days.slice(0, 15).reduce((sum, activity) => sum + activity.co2, 0) / 15;
+    const secondHalf = last30Days.slice(15).reduce((sum, activity) => sum + activity.co2, 0) / 15;
+    const improvement = ((firstHalf - secondHalf) / firstHalf) * 100;
+
+    return {
+      categoryTotals,
+      monthlyData,
+      dailyAverage,
+      weeklyAverage,
+      improvement,
+      totalActivities: activities.length,
+      totalCO2: activities.reduce((sum, activity) => sum + activity.co2, 0),
+      last30DaysCO2: last30Days.reduce((sum, activity) => sum + activity.co2, 0),
+      last7DaysCO2: last7Days.reduce((sum, activity) => sum + activity.co2, 0)
+    };
+  };
+
+  const analytics = calculateAnalytics();
+
+  if (!analytics) {
+    return (
+      <div className="card">
+        <h3>📊 Analytics</h3>
+        <p style={{ textAlign: 'center', color: '#666', padding: '40px' }}>
+          Start tracking activities to see your analytics!
+        </p>
+      </div>
+    );
+  }
+
+  const categoryColors = {
+    transport: '#2196F3',
+    energy: '#FF9800',
+    food: '#4CAF50',
+    waste: '#9C27B0'
+  };
+
+  const categoryIcons = {
+    transport: '🚗',
+    energy: '⚡',
+    food: '🍽️',
+    waste: '🗑️'
+  };
+
+  return (
+    <div className="card">
+      <h3>📊 Your Environmental Analytics</h3>
+      
+      {/* Key Metrics */}
+      <div className="grid grid-4" style={{ marginBottom: '30px' }}>
+        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ fontSize: '2rem', color: '#2E7D32', fontWeight: 'bold' }}>
+            {analytics.totalCO2.toFixed(1)}
+          </div>
+          <div style={{ fontSize: '0.9rem', color: '#666' }}>Total CO₂ (kg)</div>
+        </div>
+        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ fontSize: '2rem', color: '#2196F3', fontWeight: 'bold' }}>
+            {analytics.dailyAverage.toFixed(1)}
+          </div>
+          <div style={{ fontSize: '0.9rem', color: '#666' }}>Daily Average</div>
+        </div>
+        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ fontSize: '2rem', color: analytics.improvement > 0 ? '#4CAF50' : '#f44336', fontWeight: 'bold' }}>
+            {analytics.improvement > 0 ? '-' : '+'}{Math.abs(analytics.improvement).toFixed(1)}%
+          </div>
+          <div style={{ fontSize: '0.9rem', color: '#666' }}>30-Day Trend</div>
+        </div>
+        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ fontSize: '2rem', color: '#FF9800', fontWeight: 'bold' }}>
+            {analytics.totalActivities}
+          </div>
+          <div style={{ fontSize: '0.9rem', color: '#666' }}>Activities Logged</div>
+        </div>
+      </div>
+
+      {/* Category Breakdown */}
+      <div style={{ marginBottom: '30px' }}>
+        <h4 style={{ marginBottom: '15px' }}>🎯 Impact by Category</h4>
+        <div className="grid grid-2">
+          {Object.entries(analytics.categoryTotals).map(([category, total]) => (
+            <div key={category} style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              padding: '15px',
+              border: '1px solid #eee',
+              borderRadius: '8px',
+              marginBottom: '10px'
+            }}>
+              <div style={{ 
+                fontSize: '2rem', 
+                marginRight: '15px',
+                width: '50px',
+                textAlign: 'center'
+              }}>
+                {categoryIcons[category]}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ 
+                  display: 'flex', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'center',
+                  marginBottom: '8px'
+                }}>
+                  <span style={{ fontWeight: 'bold', textTransform: 'capitalize' }}>
+                    {category}
+                  </span>
+                  <span style={{ color: categoryColors[category], fontWeight: 'bold' }}>
+                    {total.toFixed(1)} kg CO₂
+                  </span>
+                </div>
+                <div style={{ 
+                  width: '100%', 
+                  height: '6px', 
+                  background: '#eee', 
+                  borderRadius: '3px',
+                  overflow: 'hidden'
+                }}>
+                  <div style={{
+                    width: `${(total / analytics.totalCO2) * 100}%`,
+                    height: '100%',
+                    background: categoryColors[category]
+                  }}></div>
+                </div>
+                <div style={{ 
+                  fontSize: '0.8rem', 
+                  color: '#666', 
+                  marginTop: '5px' 
+                }}>
+                  {((total / analytics.totalCO2) * 100).toFixed(1)}% of total impact
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Environmental Impact Comparison */}
+      <div style={{ 
+        background: 'linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%)',
+        padding: '20px',
+        borderRadius: '12px'
+      }}>
+        <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>🌍 Your Environmental Impact</h4>
+        <div className="grid grid-3">
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>🌳</div>
+            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
+              {(analytics.totalCO2 / 22).toFixed(1)} trees
+            </div>
+            <div style={{ fontSize: '0.8rem', color: '#666' }}>needed to offset</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>🚗</div>
+            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
+              {(analytics.totalCO2 / 0.21).toFixed(0)} km
+            </div>
+            <div style={{ fontSize: '0.8rem', color: '#666' }}>car driving equivalent</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>⚡</div>
+            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
+              {(analytics.totalCO2 / 0.5).toFixed(0)} kWh
+            </div>
+            <div style={{ fontSize: '0.8rem', color: '#666' }}>electricity equivalent</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Analytics;

web/src/components/Header.css

@@ -0,0 +1,48 @@
+.header {
+  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
+  color: white;
+  padding: 20px 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-icon {
+  font-size: 2.5rem;
+}
+
+.logo h1 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.header-subtitle {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+  }
+  
+  .logo h1 {
+    font-size: 1.5rem;
+  }
+  
+  .header-subtitle {
+    font-size: 0.9rem;
+  }
+}

web/src/components/Header.js

@@ -0,0 +1,263 @@
+import React, { useState } from 'react';
+import { authManager } from '../utils/auth';
+
+const Header = ({ currentUser, onNavigate, onAuthChange }) => {
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await authManager.logout();
+      const guestUser = authManager.getCurrentUser();
+      onAuthChange && onAuthChange(guestUser);
+      setShowUserMenu(false);
+      onNavigate && onNavigate('Dashboard');
+    } catch (error) {
+      console.error('Logout failed:', error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  return (
+    <header style={{
+      background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
+      color: 'white',
+      padding: '15px 20px',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1000
+    }}>
+      {/* Logo */}
+      <div 
+        onClick={() => onNavigate && onNavigate('Dashboard')}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          fontWeight: 'bold'
+        }}
+      >
+        <span style={{ fontSize: '2rem' }}>🌿</span>
+          GreenPlus by GXS
+      </div>
+
+      {/* User Section */}
+      <div style={{ position: 'relative' }}>
+        {currentUser ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+            {/* User Stats */}
+            <div style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '15px',
+              fontSize: '0.9rem',
+              opacity: 0.9
+            }}>
+              <span>⭐ Level {authManager.getUserStats().level}</span>
+              <span>🏆 {authManager.getUserStats().points} pts</span>
+            </div>
+
+            {/* User Menu */}
+            <div 
+              onClick={() => setShowUserMenu(!showUserMenu)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                cursor: 'pointer',
+                padding: '8px 12px',
+                borderRadius: '20px',
+                background: 'rgba(255,255,255,0.1)',
+                transition: 'background 0.2s'
+              }}
+            >
+              <span style={{ fontSize: '1.2rem' }}>{currentUser.avatar}</span>
+              <span style={{ fontWeight: '500' }}>{currentUser.name}</span>
+              <span style={{ fontSize: '0.8rem' }}>▼</span>
+            </div>
+
+            {/* Dropdown Menu */}
+            {showUserMenu && (
+              <div style={{
+                position: 'absolute',
+                top: '100%',
+                right: 0,
+                marginTop: '10px',
+                background: 'white',
+                borderRadius: '12px',
+                boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+                minWidth: '200px',
+                overflow: 'hidden',
+                zIndex: 1001
+              }}>
+                <div style={{
+                  padding: '15px',
+                  borderBottom: '1px solid #ecf0f1',
+                  background: '#f8f9fa'
+                }}>
+                  <div style={{ fontWeight: 'bold', color: '#2c3e50' }}>
+                    {currentUser.name}
+                  </div>
+                  <div style={{ fontSize: '0.9rem', color: '#7f8c8d' }}>
+                    {currentUser.email}
+                  </div>
+                  {currentUser.isGuest && (
+                    <div style={{ 
+                      fontSize: '0.8rem', 
+                      color: '#e67e22',
+                      marginTop: '5px',
+                      fontWeight: '500'
+                    }}>
+                      🚀 Guest Mode
+                    </div>
+                  )}
+                </div>
+
+                <div style={{ padding: '10px 0' }}>
+                  <button
+                    onClick={() => {
+                      setShowUserMenu(false);
+                      onNavigate && onNavigate('Profile');
+                    }}
+                    style={{
+                      width: '100%',
+                      padding: '12px 20px',
+                      background: 'none',
+                      border: 'none',
+                      textAlign: 'left',
+                      cursor: 'pointer',
+                      color: '#2c3e50',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '10px',
+                      fontSize: '14px'
+                    }}
+                    onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
+                    onMouseLeave={(e) => e.target.style.background = 'none'}
+                  >
+                    👤 View Profile
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      setShowUserMenu(false);
+                      onNavigate && onNavigate('Community');
+                    }}
+                    style={{
+                      width: '100%',
+                      padding: '12px 20px',
+                      background: 'none',
+                      border: 'none',
+                      textAlign: 'left',
+                      cursor: 'pointer',
+                      color: '#2c3e50',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '10px',
+                      fontSize: '14px'
+                    }}
+                    onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
+                    onMouseLeave={(e) => e.target.style.background = 'none'}
+                  >
+                    👥 Community
+                  </button>
+
+                  {currentUser.isGuest ? (
+                    <button
+                      onClick={() => {
+                        setShowUserMenu(false);
+                        onNavigate && onNavigate('Login');
+                      }}
+                      style={{
+                        width: '100%',
+                        padding: '12px 20px',
+                        background: 'none',
+                        border: 'none',
+                        textAlign: 'left',
+                        cursor: 'pointer',
+                        color: '#27ae60',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '10px',
+                        fontSize: '14px',
+                        fontWeight: '500'
+                      }}
+                      onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
+                      onMouseLeave={(e) => e.target.style.background = 'none'}
+                    >
+                      🚀 Create Account
+                    </button>
+                  ) : (
+                    <button
+                      onClick={handleLogout}
+                      disabled={isLoggingOut}
+                      style={{
+                        width: '100%',
+                        padding: '12px 20px',
+                        background: 'none',
+                        border: 'none',
+                        textAlign: 'left',
+                        cursor: isLoggingOut ? 'not-allowed' : 'pointer',
+                        color: '#e74c3c',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '10px',
+                        fontSize: '14px',
+                        opacity: isLoggingOut ? 0.6 : 1
+                      }}
+                      onMouseEnter={(e) => !isLoggingOut && (e.target.style.background = '#f8f9fa')}
+                      onMouseLeave={(e) => e.target.style.background = 'none'}
+                    >
+                      {isLoggingOut ? '⏳ Logging out...' : '🚪 Logout'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <button
+            onClick={() => onNavigate && onNavigate('Login')}
+            style={{
+              padding: '10px 20px',
+              background: 'linear-gradient(135deg, #27ae60 0%, #2ecc71 100%)',
+              color: 'white',
+              border: 'none',
+              borderRadius: '20px',
+              cursor: 'pointer',
+              fontWeight: '500',
+              fontSize: '14px'
+            }}
+          >
+            🚀 Sign In
+          </button>
+        )}
+      </div>
+
+      {/* Click outside to close menu */}
+      {showUserMenu && (
+        <div
+          onClick={() => setShowUserMenu(false)}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999
+          }}
+        />
+      )}
+    </header>
+  );
+};
+
+export default Header;

web/src/components/LoadingScreen.js

@@ -0,0 +1,137 @@
+import React from 'react';
+
+const LoadingScreen = () => {
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      background: 'linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #4CAF50 100%)',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 9999
+    }}>
+      {/* EcoSpire Logo */}
+      <div style={{
+        textAlign: 'center',
+        marginBottom: '40px'
+      }}>
+        <div style={{
+          fontSize: '6rem',
+          marginBottom: '20px',
+          animation: 'pulse 2s ease-in-out infinite'
+        }}>
+          🌱
+        </div>
+        <h1 style={{
+          fontSize: '4rem',
+          color: 'white',
+          margin: 0,
+          fontWeight: 'bold',
+          textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+          animation: 'fadeInUp 1s ease-out'
+        }}>
+            GreenPlus by GXS
+        </h1>
+        <p style={{
+          fontSize: '1.5rem',
+          color: '#E8F5E9',
+          margin: '10px 0 0 0',
+          fontWeight: '300',
+          animation: 'fadeInUp 1s ease-out 0.3s both'
+        }}>
+          AI-Powered Environmental Intelligence
+        </p>
+      </div>
+
+      {/* Loading Animation */}
+      <div style={{
+        display: 'flex',
+        gap: '8px',
+        marginTop: '20px'
+      }}>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0s'
+        }}></div>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0.16s'
+        }}></div>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0.32s'
+        }}></div>
+      </div>
+
+      {/* Loading Text */}
+      <p style={{
+        color: 'white',
+        fontSize: '1.1rem',
+        marginTop: '30px',
+        opacity: 0.9,
+        animation: 'fadeIn 2s ease-in-out'
+      }}>
+        Initializing Environmental Tools...
+      </p>
+
+      <style jsx>{`
+        @keyframes pulse {
+          0%, 100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+        }
+
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes bounce {
+          0%, 80%, 100% {
+            transform: scale(0);
+          }
+          40% {
+            transform: scale(1);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default LoadingScreen;

web/src/components/Navigation.css

@@ -0,0 +1,92 @@
+.navigation {
+  width: 280px;
+  background: white;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+  padding: 30px 0;
+}
+
+.nav-list {
+  list-style: none;
+}
+
+.nav-item {
+  margin: 8px 0;
+}
+
+.nav-button {
+  width: 100%;
+  padding: 16px 30px;
+  border: none;
+  background: none;
+  text-align: left;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.nav-button:hover {
+  background: #f5f5f5;
+  border-left-color: #2E7D32;
+}
+
+.nav-item.active .nav-button {
+  background: #e8f5e8;
+  border-left-color: #2E7D32;
+  color: #2E7D32;
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 1.2rem;
+  width: 24px;
+}
+
+.nav-label {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .navigation {
+    width: 100%;
+    padding: 20px 0;
+    order: 2;
+  }
+  
+  .nav-list {
+    display: flex;
+    overflow-x: auto;
+    padding: 0 15px;
+  }
+  
+  .nav-item {
+    flex-shrink: 0;
+    margin: 0 4px;
+  }
+  
+  .nav-button {
+    padding: 12px 16px;
+    border-left: none;
+    border-bottom: 3px solid transparent;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 80px;
+  }
+  
+  .nav-button:hover {
+    border-left: none;
+    border-bottom-color: #2E7D32;
+  }
+  
+  .nav-item.active .nav-button {
+    border-left: none;
+    border-bottom-color: #2E7D32;
+  }
+  
+  .nav-label {
+    font-size: 0.8rem;
+  }
+}

web/src/components/layout/Header.css

@@ -0,0 +1,473 @@
+/* Header Component Styles */
+.terra-header {
+  height: 80px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(74, 124, 35, 0.1);
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-xl);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  transition: all var(--transition-normal);
+}
+
+.terra-header__left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex: 1;
+  min-width: 0;
+}
+
+.terra-header__right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-shrink: 0;
+}
+
+/* Mobile Menu Button */
+.terra-header__menu-btn {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-normal);
+}
+
+.terra-header__menu-btn:hover {
+  background: rgba(74, 124, 35, 0.1);
+}
+
+.terra-header__menu-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(74, 124, 35, 0.3);
+}
+
+.terra-header__menu-icon {
+  display: flex;
+  flex-direction: column;
+  width: 24px;
+  height: 18px;
+  justify-content: space-between;
+  transition: all var(--transition-normal);
+}
+
+.terra-header__menu-icon span {
+  display: block;
+  height: 2px;
+  width: 100%;
+  background: var(--color-forest-primary);
+  border-radius: 1px;
+  transition: all var(--transition-normal);
+  transform-origin: center;
+}
+
+.terra-header__menu-icon--open span:nth-child(1) {
+  transform: rotate(45deg) translate(6px, 6px);
+}
+
+.terra-header__menu-icon--open span:nth-child(2) {
+  opacity: 0;
+}
+
+.terra-header__menu-icon--open span:nth-child(3) {
+  transform: rotate(-45deg) translate(6px, -6px);
+}
+
+/* Page Info */
+.terra-header__page-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.terra-header__page-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin: 0;
+  color: var(--color-forest-primary);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.2;
+}
+
+.terra-header__page-icon {
+  font-size: 2.2rem;
+  flex-shrink: 0;
+}
+
+.terra-header__page-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.terra-header__page-subtitle {
+  margin: 0;
+  color: var(--color-nature-green);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Environmental Stats */
+.terra-header__stats {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.terra-header__stat {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  background: rgba(76, 175, 80, 0.1);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(76, 175, 80, 0.2);
+  transition: all var(--transition-normal);
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.terra-header__stat:hover {
+  background: rgba(76, 175, 80, 0.15);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.terra-header__stat-icon {
+  font-size: 1.6rem;
+  flex-shrink: 0;
+}
+
+.terra-header__stat-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.terra-header__stat-value {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-lg);
+  color: var(--color-forest-primary);
+  line-height: 1;
+}
+
+.terra-header__stat-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-nature-green);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+/* User Actions */
+.terra-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+/* Notifications */
+.terra-header__notifications {
+  position: relative;
+}
+
+.terra-header__notification-btn {
+  background: rgba(74, 124, 35, 0.1);
+  border: 1px solid rgba(74, 124, 35, 0.2);
+  border-radius: var(--radius-full);
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  position: relative;
+}
+
+.terra-header__notification-btn:hover {
+  background: rgba(74, 124, 35, 0.15);
+  transform: scale(1.05);
+}
+
+.terra-header__notification-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(74, 124, 35, 0.3);
+}
+
+.terra-header__notification-icon {
+  font-size: 1.4rem;
+}
+
+.terra-header__notification-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--color-warning-red);
+  color: var(--color-white);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  padding: 2px 6px;
+  border-radius: var(--radius-full);
+  min-width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 2s infinite;
+}
+
+/* User Profile */
+.terra-header__user {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: rgba(74, 124, 35, 0.05);
+  border-radius: var(--radius-xl);
+  border: 1px solid rgba(74, 124, 35, 0.1);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.terra-header__user:hover {
+  background: rgba(74, 124, 35, 0.1);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.terra-header__user-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  text-align: right;
+}
+
+.terra-header__user-greeting {
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-500);
+  font-weight: var(--font-weight-medium);
+}
+
+.terra-header__user-name {
+  font-size: var(--font-size-sm);
+  color: var(--color-forest-primary);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+.terra-header__user-avatar {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, var(--color-nature-green) 0%, var(--color-sage-green) 100%);
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  flex-shrink: 0;
+}
+
+.terra-header__avatar-icon {
+  font-size: 1.2rem;
+  color: var(--color-white);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .terra-header__stats {
+    gap: var(--spacing-md);
+  }
+  
+  .terra-header__stat {
+    padding: var(--spacing-sm) var(--spacing-md);
+    min-width: 100px;
+  }
+  
+  .terra-header__stat-value {
+    font-size: var(--font-size-base);
+  }
+}
+
+@media (max-width: 1024px) {
+  .terra-header {
+    padding: 0 var(--spacing-lg);
+  }
+  
+  .terra-header__menu-btn {
+    display: flex;
+  }
+  
+  .terra-header__stats {
+    display: none;
+  }
+  
+  .terra-header__user-info {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .terra-header {
+    padding: 0 var(--spacing-md);
+    height: 70px;
+  }
+  
+  .terra-header__page-title {
+    font-size: var(--font-size-xl);
+  }
+  
+  .terra-header__page-icon {
+    font-size: 1.8rem;
+  }
+  
+  .terra-header__page-subtitle {
+    font-size: var(--font-size-sm);
+  }
+  
+  .terra-header__actions {
+    gap: var(--spacing-md);
+  }
+  
+  .terra-header__notification-btn {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .terra-header__user-avatar {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+@media (max-width: 640px) {
+  .terra-header__left {
+    gap: var(--spacing-md);
+  }
+  
+  .terra-header__page-info {
+    min-width: 0;
+    flex: 1;
+  }
+  
+  .terra-header__page-title {
+    font-size: var(--font-size-lg);
+    gap: var(--spacing-sm);
+  }
+  
+  .terra-header__page-icon {
+    font-size: 1.5rem;
+  }
+  
+  .terra-header__page-subtitle {
+    display: none;
+  }
+  
+  .terra-header__actions {
+    gap: var(--spacing-sm);
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .terra-header {
+    border-bottom-width: 2px;
+    border-bottom-color: var(--color-forest-primary);
+  }
+  
+  .terra-header__stat {
+    border-width: 2px;
+  }
+  
+  .terra-header__notification-btn,
+  .terra-header__user {
+    border-width: 2px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .terra-header,
+  .terra-header__menu-icon,
+  .terra-header__menu-icon span,
+  .terra-header__stat,
+  .terra-header__notification-btn,
+  .terra-header__user {
+    transition: none;
+  }
+  
+  .terra-header__notification-badge {
+    animation: none;
+  }
+  
+  .terra-header__stat:hover,
+  .terra-header__notification-btn:hover,
+  .terra-header__user:hover {
+    transform: none;
+  }
+}
+
+/* Focus Management */
+.terra-header__notification-btn:focus-visible,
+.terra-header__user:focus-visible {
+  outline: 2px solid var(--color-nature-green);
+  outline-offset: 2px;
+}
+
+/* Loading State */
+.terra-header--loading .terra-header__stat {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.terra-header--loading .terra-header__stat-value {
+  background: var(--color-gray-200);
+  color: transparent;
+  border-radius: var(--radius-sm);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+/* Refr
+esh Button */
+.terra-header__refresh-btn {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.terra-header__refresh-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.6);
+  transform: rotate(180deg);
+}

web/src/components/layout/Header.js

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import './Header.css';
+import ProfileDropdown from '../ui/ProfileDropdown';
+
+const Header = ({ 
+  currentPage, 
+  sidebarOpen, 
+  onSidebarToggle,
+  userStats = {},
+  notifications = [],
+  isGuest = false,
+  user = null,
+  onLogin,
+  onLogout,
+  onProfile
+}) => {
+  const [showRefresh, setShowRefresh] = useState(false);
+  const formatNumber = (num) => {
+    if (num >= 1000000) {
+      return (num / 1000000).toFixed(1) + 'M';
+    }
+    if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'K';
+    }
+    return num?.toString() || '0';
+  };
+
+  const getTimeGreeting = () => {
+    const hour = new Date().getHours();
+    if (hour < 12) return 'Good morning';
+    if (hour < 17) return 'Good afternoon';
+    return 'Good evening';
+  };
+
+  return (
+    <header className="terra-header">
+      <div className="terra-header__left">
+        {/* Mobile menu button */}
+        <button 
+          className="terra-header__menu-btn"
+          onClick={onSidebarToggle}
+          aria-label="Toggle navigation menu"
+        >
+          <span className={`terra-header__menu-icon ${sidebarOpen ? 'terra-header__menu-icon--open' : ''}`}>
+            <span></span>
+            <span></span>
+            <span></span>
+          </span>
+        </button>
+
+        {/* Page info */}
+        <div className="terra-header__page-info">
+          <h1 className="terra-header__page-title">
+            <span className="terra-header__page-icon">{currentPage?.icon}</span>
+            <span className="terra-header__page-name">{currentPage?.name}</span>
+          </h1>
+          <p className="terra-header__page-subtitle">{currentPage?.description}</p>
+        </div>
+      </div>
+
+      <div className="terra-header__right">
+        {/* Environmental Stats */}
+        <div className="terra-header__stats">
+          <div className="terra-header__stat" title="CO₂ Saved">
+            <span className="terra-header__stat-icon">🌿</span>
+            <div className="terra-header__stat-content">
+              <div className="terra-header__stat-value">
+                {formatNumber(userStats.co2Saved || (isGuest ? 0 : 0))}
+              </div>
+              <div className="terra-header__stat-label">CO₂ Saved (kg)</div>
+            </div>
+          </div>
+          
+          <div className="terra-header__stat" title="Water Tests Completed">
+            <span className="terra-header__stat-icon">💧</span>
+            <div className="terra-header__stat-content">
+              <div className="terra-header__stat-value">
+                {formatNumber(userStats.waterTests || (isGuest ? 0 : 0))}
+              </div>
+              <div className="terra-header__stat-label">Water Tests</div>
+            </div>
+          </div>
+          
+          <div className="terra-header__stat" title="Biodiversity Scans">
+            <span className="terra-header__stat-icon">🦜</span>
+            <div className="terra-header__stat-content">
+              <div className="terra-header__stat-value">
+                {formatNumber(userStats.bioScans || (isGuest ? 0 : 0))}
+              </div>
+              <div className="terra-header__stat-label">Bio Scans</div>
+            </div>
+          </div>
+        </div>
+
+        {/* User Actions */}
+        <div className="terra-header__actions">
+          {/* Notifications */}
+          <div className="terra-header__notifications">
+            <button 
+              className="terra-header__notification-btn"
+              aria-label="View notifications"
+            >
+              <span className="terra-header__notification-icon">🔔</span>
+              {notifications.length > 0 && (
+                <span className="terra-header__notification-badge">
+                  {notifications.length > 9 ? '9+' : notifications.length}
+                </span>
+              )}
+            </button>
+          </div>
+
+          {/* Refresh Button (when needed) */}
+          {showRefresh && (
+            <button 
+              className="terra-header__refresh-btn"
+              onClick={() => window.location.reload()}
+              title="Refresh page"
+            >
+              🔄
+            </button>
+          )}
+
+          {/* Profile Dropdown */}
+          <ProfileDropdown
+            user={user}
+            onLogin={onLogin}
+            onLogout={onLogout}
+            onProfile={onProfile}
+          />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

web/src/components/layout/Sidebar.css

@@ -0,0 +1,496 @@
+/* Sidebar Component Styles */
+.terra-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  background: #2E7D32;
+  color: white;
+  transition: width 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.terra-sidebar--open {
+  width: 280px;
+}
+
+.terra-sidebar--closed {
+  width: 70px;
+}
+
+/* Header Section */
+.terra-sidebar__header {
+  padding: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 80px;
+}
+
+.terra-sidebar__logo {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.terra-sidebar__logo-icon {
+  font-size: 2.5rem;
+  animation: gentle-pulse 3s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+@keyframes gentle-pulse {
+  0%, 100% { 
+    transform: scale(1); 
+  }
+  50% { 
+    transform: scale(1.05); 
+  }
+}
+
+.terra-sidebar__logo-text {
+  min-width: 0;
+  opacity: 1;
+  transition: opacity var(--transition-normal);
+}
+
+.terra-sidebar--closed .terra-sidebar__logo-text {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.terra-sidebar__logo-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 0 0 4px 0;
+  color: white;
+  white-space: nowrap;
+}
+
+.terra-sidebar__logo-subtitle {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  white-space: nowrap;
+}
+
+.terra-sidebar__toggle {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+}
+
+.terra-sidebar__toggle:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.05);
+}
+
+.terra-sidebar__toggle:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+}
+
+.terra-sidebar__toggle-icon {
+  transition: transform var(--transition-normal);
+}
+
+.terra-sidebar__toggle-icon--open {
+  transform: rotate(180deg);
+}
+
+/* Search Section */
+.terra-sidebar__search {
+  padding: 0 var(--spacing-lg) var(--spacing-lg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.terra-sidebar__search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.terra-sidebar__search-input {
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  padding-right: 2.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-md);
+  color: var(--color-white);
+  font-size: var(--font-size-sm);
+  transition: all var(--transition-normal);
+}
+
+.terra-sidebar__search-input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.terra-sidebar__search-input:focus {
+  outline: none;
+  background: rgba(255, 255, 255, 0.15);
+  border-color: var(--color-mint-light);
+  box-shadow: 0 0 0 2px rgba(168, 230, 163, 0.3);
+}
+
+.terra-sidebar__search-icon {
+  position: absolute;
+  right: var(--spacing-sm);
+  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--font-size-sm);
+}
+
+.terra-sidebar__search-clear {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-normal);
+}
+
+.terra-sidebar__search-clear:hover {
+  color: var(--color-white);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Navigation Section */
+.terra-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md) 0;
+}
+
+.terra-sidebar__nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.terra-sidebar__nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.terra-sidebar__nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.terra-sidebar__nav::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.terra-sidebar__nav-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.terra-sidebar__category {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.terra-sidebar__category-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0;
+  padding: 0 var(--spacing-lg);
+}
+
+.terra-sidebar__category-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.terra-sidebar__nav-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  margin: 2px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  min-height: 48px;
+}
+
+.terra-sidebar__nav-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(4px);
+}
+
+.terra-sidebar__nav-item:focus {
+  outline: none;
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0 2px rgba(168, 230, 163, 0.3);
+}
+
+.terra-sidebar__nav-item--active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateX(4px);
+}
+
+.terra-sidebar__nav-item--active::before {
+  content: '';
+  position: absolute;
+  left: -12px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: #4CAF50;
+  border-radius: 0 2px 2px 0;
+}
+
+.terra-sidebar__nav-icon {
+  font-size: 1.5rem;
+  margin-right: var(--spacing-md);
+  min-width: 28px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.terra-sidebar__nav-content {
+  flex: 1;
+  min-width: 0;
+  opacity: 1;
+  transition: opacity var(--transition-normal);
+}
+
+.terra-sidebar--closed .terra-sidebar__nav-content {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.terra-sidebar__nav-name {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.terra-sidebar__nav-desc {
+  font-size: var(--font-size-xs);
+  opacity: 0.8;
+  color: #b8e6b3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.terra-sidebar__nav-indicator {
+  position: absolute;
+  right: var(--spacing-md);
+  width: 6px;
+  height: 6px;
+  background: var(--color-mint-light);
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+/* Footer Section */
+.terra-sidebar__footer {
+  padding: var(--spacing-lg);
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.terra-sidebar__stats {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.terra-sidebar__stat {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex: 1;
+}
+
+.terra-sidebar__stat-icon {
+  font-size: 1.3rem;
+  flex-shrink: 0;
+}
+
+.terra-sidebar__stat-content {
+  min-width: 0;
+}
+
+.terra-sidebar__stat-value {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+}
+
+.terra-sidebar__stat-label {
+  font-size: var(--font-size-xs);
+  opacity: 0.8;
+  white-space: nowrap;
+}
+
+.terra-sidebar__version {
+  text-align: center;
+  font-size: var(--font-size-xs);
+  opacity: 0.6;
+  color: #b8e6b3;
+}
+
+/* Tooltip for collapsed state */
+.terra-sidebar__tooltip {
+  position: fixed;
+  left: 80px;
+  background: var(--color-gray-800);
+  color: var(--color-white);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-normal);
+  z-index: var(--z-tooltip);
+  box-shadow: var(--shadow-lg);
+}
+
+.terra-sidebar__tooltip-arrow {
+  position: absolute;
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-right: 4px solid var(--color-gray-800);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .terra-sidebar {
+    transform: translateX(-100%);
+    transition: transform var(--transition-bounce);
+    border-radius: 0;
+  }
+  
+  .terra-sidebar--open {
+    transform: translateX(0);
+    width: 280px;
+  }
+  
+  .terra-sidebar--closed {
+    transform: translateX(-100%);
+  }
+}
+
+@media (max-width: 640px) {
+  .terra-sidebar--open {
+    width: 100vw;
+  }
+  
+  .terra-sidebar__header {
+    padding: var(--spacing-md);
+  }
+  
+  .terra-sidebar__search {
+    padding: 0 var(--spacing-md) var(--spacing-md);
+  }
+  
+  .terra-sidebar__nav-item {
+    padding: var(--spacing-md);
+    margin: 0 var(--spacing-sm);
+  }
+  
+  .terra-sidebar__footer {
+    padding: var(--spacing-md);
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .terra-sidebar {
+    background: var(--color-forest-deep);
+    border-right: 2px solid var(--color-white);
+  }
+  
+  .terra-sidebar__nav-item--active {
+    background: rgba(255, 255, 255, 0.3);
+    border: 1px solid var(--color-white);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .terra-sidebar,
+  .terra-sidebar__toggle-icon,
+  .terra-sidebar__nav-item,
+  .terra-sidebar__logo-text,
+  .terra-sidebar__nav-content {
+    transition: none;
+  }
+  
+  .terra-sidebar__logo-icon {
+    animation: none;
+  }
+  
+  .terra-sidebar__nav-indicator {
+    animation: none;
+  }
+  
+  .terra-sidebar__nav-item:hover {
+    transform: none;
+  }
+}
+
+/* Focus Management */
+.terra-sidebar__nav-item:focus-visible {
+  outline: 2px solid var(--color-mint-light);
+  outline-offset: 2px;
+}
+
+/* Animation for nav items */
+.terra-sidebar__nav-item {
+  animation: slideInLeft 0.3s ease-out;
+  animation-fill-mode: both;
+}
+
+.terra-sidebar__nav-item:nth-child(1) { animation-delay: 0.1s; }
+.terra-sidebar__nav-item:nth-child(2) { animation-delay: 0.15s; }
+.terra-sidebar__nav-item:nth-child(3) { animation-delay: 0.2s; }
+.terra-sidebar__nav-item:nth-child(4) { animation-delay: 0.25s; }
+.terra-sidebar__nav-item:nth-child(5) { animation-delay: 0.3s; }
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

web/src/components/layout/Sidebar.js

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+import './Sidebar.css';
+
+const Sidebar = ({ 
+  isOpen, 
+  onToggle, 
+  activePage, 
+  onPageChange, 
+  pages = [],
+  userStats = {}
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredPages, setFilteredPages] = useState(pages);
+
+  useEffect(() => {
+    if (searchTerm) {
+      const filtered = pages.filter(page =>
+        page.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        page.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        page.category?.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredPages(filtered);
+    } else {
+      setFilteredPages(pages);
+    }
+  }, [searchTerm, pages]);
+
+  const groupedPages = filteredPages.reduce((groups, page) => {
+    const category = page.category || 'Tools';
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(page);
+    return groups;
+  }, {});
+
+  const handlePageClick = (pageId) => {
+    onPageChange(pageId);
+  };
+
+  const clearSearch = () => {
+    setSearchTerm('');
+  };
+
+  return (
+    <div className={`terra-sidebar ${isOpen ? 'terra-sidebar--open' : 'terra-sidebar--closed'}`}>
+      {/* Logo Section */}
+      <div className="terra-sidebar__header">
+        <div className="terra-sidebar__logo">
+          <div className="terra-sidebar__logo-icon">
+            🌿
+          </div>
+          {isOpen && (
+            <div className="terra-sidebar__logo-text">
+              <h1 className="terra-sidebar__logo-title">GreenPlus by GXS</h1>
+              <p className="terra-sidebar__logo-subtitle">Environmental Intelligence Hub</p>
+            </div>
+          )}
+        </div>
+        <button 
+          className="terra-sidebar__toggle"
+          onClick={onToggle}
+          aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+        >
+          <span className={`terra-sidebar__toggle-icon ${isOpen ? 'terra-sidebar__toggle-icon--open' : ''}`}>
+            ▶
+          </span>
+        </button>
+      </div>
+
+      {/* Search Section */}
+      {isOpen && (
+        <div className="terra-sidebar__search">
+          <div className="terra-sidebar__search-container">
+            <input
+              type="text"
+              placeholder="Search tools..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="terra-sidebar__search-input"
+            />
+            <div className="terra-sidebar__search-icon">
+              {searchTerm ? (
+                <button 
+                  onClick={clearSearch}
+                  className="terra-sidebar__search-clear"
+                  aria-label="Clear search"
+                >
+                  ✕
+                </button>
+              ) : (
+                <span>🔍</span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Navigation Section */}
+      <nav className="terra-sidebar__nav">
+        <div className="terra-sidebar__nav-content">
+          {Object.entries(groupedPages).map(([category, categoryPages]) => (
+            <div key={category} className="terra-sidebar__category">
+              {isOpen && (
+                <h3 className="terra-sidebar__category-title">{category}</h3>
+              )}
+              <div className="terra-sidebar__category-items">
+                {categoryPages.map(page => (
+                  <div
+                    key={page.id}
+                    className={`terra-sidebar__nav-item ${
+                      activePage === page.id ? 'terra-sidebar__nav-item--active' : ''
+                    }`}
+                    onClick={() => handlePageClick(page.id)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handlePageClick(page.id);
+                      }
+                    }}
+                  >
+                    <div className="terra-sidebar__nav-icon">
+                      {page.icon}
+                    </div>
+                    {isOpen && (
+                      <div className="terra-sidebar__nav-content">
+                        <span className="terra-sidebar__nav-name">{page.name}</span>
+                        <span className="terra-sidebar__nav-desc">{page.description}</span>
+                      </div>
+                    )}
+                    {activePage === page.id && (
+                      <div className="terra-sidebar__nav-indicator" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </nav>
+
+      {/* Stats Footer */}
+      {isOpen && (
+        <div className="terra-sidebar__footer">
+          <div className="terra-sidebar__stats">
+            <div className="terra-sidebar__stat">
+              <span className="terra-sidebar__stat-icon">🌱</span>
+              <div className="terra-sidebar__stat-content">
+                <div className="terra-sidebar__stat-value">
+                  {userStats.toolsUsed || pages.length}
+                </div>
+                <div className="terra-sidebar__stat-label">Tools</div>
+              </div>
+            </div>
+            <div className="terra-sidebar__stat">
+              <span className="terra-sidebar__stat-icon">🌍</span>
+              <div className="terra-sidebar__stat-content">
+                <div className="terra-sidebar__stat-value">
+                  {userStats.impactScore || '2.5M+'}
+                </div>
+                <div className="terra-sidebar__stat-label">Impact</div>
+              </div>
+            </div>
+          </div>
+          <div className="terra-sidebar__version">
+            <span>GreenPlus by GXS v2.0</span>
+          </div>
+        </div>
+      )}
+
+      {/* Tooltip for collapsed state */}
+      {!isOpen && (
+        <div className="terra-sidebar__tooltip" id="sidebar-tooltip" role="tooltip">
+          <div className="terra-sidebar__tooltip-content"></div>
+          <div className="terra-sidebar__tooltip-arrow"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Sidebar;

web/src/components/layout/index.js

@@ -0,0 +1,3 @@
+// Layout Components Export
+export { default as Sidebar } from './Sidebar';
+export { default as Header } from './Header';

web/src/components/ui/ActionButton.js

@@ -0,0 +1,132 @@
+import React from 'react';
+
+const ActionButton = ({ 
+  children,
+  onClick,
+  variant = 'primary',
+  size = 'medium',
+  icon = null,
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  style = {}
+}) => {
+  const variants = {
+    primary: {
+      background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',
+      color: 'white',
+      border: 'none',
+      hoverTransform: 'translateY(-2px)',
+      hoverShadow: '0 8px 25px rgba(46, 125, 50, 0.4)'
+    },
+    secondary: {
+      background: 'linear-gradient(135deg, #1976D2 0%, #2196F3 100%)',
+      color: 'white',
+      border: 'none',
+      hoverTransform: 'translateY(-2px)',
+      hoverShadow: '0 8px 25px rgba(25, 118, 210, 0.4)'
+    },
+    warning: {
+      background: 'linear-gradient(135deg, #F57C00 0%, #FF9800 100%)',
+      color: 'white',
+      border: 'none',
+      hoverTransform: 'translateY(-2px)',
+      hoverShadow: '0 8px 25px rgba(245, 124, 0, 0.4)'
+    },
+    danger: {
+      background: 'linear-gradient(135deg, #D32F2F 0%, #f44336 100%)',
+      color: 'white',
+      border: 'none',
+      hoverTransform: 'translateY(-2px)',
+      hoverShadow: '0 8px 25px rgba(211, 47, 47, 0.4)'
+    },
+    outline: {
+      background: 'transparent',
+      color: '#2E7D32',
+      border: '2px solid #2E7D32',
+      hoverTransform: 'translateY(-2px)',
+      hoverShadow: '0 8px 25px rgba(46, 125, 50, 0.2)',
+      hoverBackground: '#2E7D32',
+      hoverColor: 'white'
+    }
+  };
+
+  const sizes = {
+    small: { padding: '8px 16px', fontSize: '0.9rem' },
+    medium: { padding: '12px 24px', fontSize: '1rem' },
+    large: { padding: '15px 30px', fontSize: '1.1rem' }
+  };
+
+  const variantStyle = variants[variant] || variants.primary;
+  const sizeStyle = sizes[size] || sizes.medium;
+
+  const buttonStyle = {
+    ...sizeStyle,
+    ...variantStyle,
+    borderRadius: '8px',
+    fontWeight: 'bold',
+    cursor: disabled || loading ? 'not-allowed' : 'pointer',
+    transition: 'all 0.3s ease',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: icon ? '8px' : '0',
+    width: fullWidth ? '100%' : 'auto',
+    opacity: disabled || loading ? 0.6 : 1,
+    position: 'relative',
+    overflow: 'hidden',
+    ...style
+  };
+
+  const handleMouseEnter = (e) => {
+    if (disabled || loading) return;
+    e.currentTarget.style.transform = variantStyle.hoverTransform;
+    e.currentTarget.style.boxShadow = variantStyle.hoverShadow;
+    if (variantStyle.hoverBackground) {
+      e.currentTarget.style.background = variantStyle.hoverBackground;
+      e.currentTarget.style.color = variantStyle.hoverColor;
+    }
+  };
+
+  const handleMouseLeave = (e) => {
+    if (disabled || loading) return;
+    e.currentTarget.style.transform = 'translateY(0)';
+    e.currentTarget.style.boxShadow = 'none';
+    if (variantStyle.hoverBackground) {
+      e.currentTarget.style.background = variantStyle.background;
+      e.currentTarget.style.color = variantStyle.color;
+    }
+  };
+
+  return (
+    <button
+      style={buttonStyle}
+      onClick={disabled || loading ? undefined : onClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      disabled={disabled || loading}
+    >
+      {loading && (
+        <div style={{
+          width: '16px',
+          height: '16px',
+          border: '2px solid transparent',
+          borderTop: '2px solid currentColor',
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite'
+        }} />
+      )}
+      {!loading && icon && <span>{icon}</span>}
+      {!loading && children}
+      
+      <style jsx>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </button>
+  );
+};
+
+export default ActionButton;

web/src/components/ui/Button.css

@@ -0,0 +1,278 @@
+/* Button Component Styles */
+.terra-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-bounce);
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.terra-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(74, 124, 35, 0.2);
+}
+
+.terra-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Button Variants */
+.terra-button--primary {
+  background: linear-gradient(135deg, var(--color-forest-primary) 0%, var(--color-nature-green) 100%);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+}
+
+.terra-button--primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  background: linear-gradient(135deg, var(--color-forest-deep) 0%, var(--color-forest-primary) 100%);
+}
+
+.terra-button--primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.terra-button--secondary {
+  background: rgba(168, 230, 163, 0.1);
+  color: var(--color-forest-primary);
+  border: 2px solid var(--color-mint-light);
+}
+
+.terra-button--secondary:hover:not(:disabled) {
+  background: rgba(168, 230, 163, 0.2);
+  border-color: var(--color-nature-green);
+  transform: scale(1.02);
+}
+
+.terra-button--outline {
+  background: transparent;
+  color: var(--color-nature-green);
+  border: 2px solid var(--color-nature-green);
+}
+
+.terra-button--outline:hover:not(:disabled) {
+  background: var(--color-nature-green);
+  color: var(--color-white);
+  transform: translateY(-1px);
+}
+
+.terra-button--ghost {
+  background: transparent;
+  color: var(--color-nature-green);
+  border: none;
+}
+
+.terra-button--ghost:hover:not(:disabled) {
+  background: rgba(168, 230, 163, 0.1);
+  transform: scale(1.05);
+}
+
+.terra-button--danger {
+  background: linear-gradient(135deg, var(--color-warning-red) 0%, #d32f2f 100%);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+}
+
+.terra-button--danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+}
+
+.terra-button--success {
+  background: linear-gradient(135deg, var(--color-success-green) 0%, #2E7D32 100%);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+}
+
+.terra-button--success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
+}
+
+.terra-button--warning {
+  background: linear-gradient(135deg, var(--color-sunset-orange) 0%, #F57C00 100%);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+}
+
+.terra-button--warning:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
+}
+
+/* Button Sizes */
+.terra-button--xs {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  border-radius: var(--radius-sm);
+}
+
+.terra-button--sm {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--font-size-sm);
+}
+
+.terra-button--md {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-base);
+}
+
+.terra-button--lg {
+  padding: var(--spacing-lg) var(--spacing-xl);
+  font-size: var(--font-size-lg);
+}
+
+.terra-button--xl {
+  padding: var(--spacing-xl) var(--spacing-2xl);
+  font-size: var(--font-size-xl);
+  border-radius: var(--radius-xl);
+}
+
+/* Button States */
+.terra-button--loading {
+  pointer-events: none;
+}
+
+.terra-button--loading .terra-button__text {
+  opacity: 0.7;
+}
+
+.terra-button__spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terra-button__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+}
+
+.terra-button__text {
+  display: flex;
+  align-items: center;
+}
+
+/* Icon-only buttons */
+.terra-button--icon-only {
+  padding: var(--spacing-md);
+  aspect-ratio: 1;
+}
+
+.terra-button--icon-only .terra-button__text {
+  display: none;
+}
+
+/* Full width button */
+.terra-button--full {
+  width: 100%;
+}
+
+/* Floating Action Button */
+.terra-button--fab {
+  border-radius: var(--radius-full);
+  padding: var(--spacing-lg);
+  aspect-ratio: 1;
+  box-shadow: var(--shadow-xl);
+  position: fixed;
+  bottom: var(--spacing-xl);
+  right: var(--spacing-xl);
+  z-index: var(--z-fixed);
+}
+
+.terra-button--fab:hover:not(:disabled) {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-2xl);
+}
+
+/* Button Group */
+.terra-button-group {
+  display: inline-flex;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.terra-button-group .terra-button {
+  border-radius: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.terra-button-group .terra-button:first-child {
+  border-top-left-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+
+.terra-button-group .terra-button:last-child {
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+  border-right: none;
+}
+
+.terra-button-group .terra-button:hover:not(:disabled) {
+  transform: none;
+  z-index: 1;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .terra-button--lg {
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  
+  .terra-button--xl {
+    padding: var(--spacing-lg) var(--spacing-xl);
+    font-size: var(--font-size-lg);
+  }
+  
+  .terra-button--fab {
+    bottom: var(--spacing-lg);
+    right: var(--spacing-lg);
+    padding: var(--spacing-md);
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .terra-button--primary {
+    background: var(--color-forest-deep);
+    border: 2px solid var(--color-white);
+  }
+  
+  .terra-button--secondary {
+    border-width: 3px;
+  }
+  
+  .terra-button--outline {
+    border-width: 3px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .terra-button {
+    transition: none;
+  }
+  
+  .terra-button:hover:not(:disabled) {
+    transform: none;
+  }
+}

web/src/components/ui/Button.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import './Button.css';
+
+const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'md', 
+  disabled = false, 
+  loading = false, 
+  icon = null,
+  onClick,
+  className = '',
+  type = 'button',
+  ...props 
+}) => {
+  const baseClasses = 'terra-button';
+  const variantClasses = `terra-button--${variant}`;
+  const sizeClasses = `terra-button--${size}`;
+  const stateClasses = [
+    disabled && 'terra-button--disabled',
+    loading && 'terra-button--loading'
+  ].filter(Boolean).join(' ');
+
+  const buttonClasses = [
+    baseClasses,
+    variantClasses,
+    sizeClasses,
+    stateClasses,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled || loading}
+      onClick={onClick}
+      {...props}
+    >
+      {loading && (
+        <span className="terra-button__spinner">
+          <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" strokeOpacity="0.3"/>
+            <path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor"/>
+          </svg>
+        </span>
+      )}
+      {icon && !loading && (
+        <span className="terra-button__icon">
+          {icon}
+        </span>
+      )}
+      <span className="terra-button__text">
+        {children}
+      </span>
+    </button>
+  );
+};
+
+export default Button;