Hugging Face's logo

Spaces:
aworkimmersive
/
ecotrack
Running

App Files Community
ecotrack / index.html
aworkimmersive's picture
aworkimmersive
Add 3 files
a70e236 verified
raw
history blame contribute delete
51.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EcoTrack - Transport Decarbonization Benchmarking</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
 }
 .dashboard-card {
 transition: all 0.3s ease;
 }
 .dashboard-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 .kpi-indicator {
 position: relative;
 }
 .kpi-indicator::after {
 content: '';
 position: absolute;
 bottom: -10px;
 left: 0;
 width: 100%;
 height: 4px;
 background: linear-gradient(90deg, #4ade80 0%, #3b82f6 100%);
 border-radius: 2px;
 }
 .animate-float {
 animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-15px); }
 100% { transform: translateY(0px); }
 }
 @keyframes pulse {
 0% { opacity: 1; }
 50% { opacity: 0.5; }
 100% { opacity: 1; }
 }
 .modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 z-index: 100;
 justify-content: center;
 align-items: center;
 }
 .modal-content {
 background: white;
 padding: 2rem;
 border-radius: 1rem;
 max-width: 90%;
 max-height: 90%;
 overflow-y: auto;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <!-- Mobile App Header -->
 <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-leaf text-2xl"></i>
 <h1 class="text-xl font-bold">EcoTrack</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
 <i class="fas fa-bell"></i>
 </button>
 <button class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
 <i class="fas fa-user"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-6 pb-20">
 <!-- Welcome Section -->
 <section class="mb-8">
 <div class="bg-white rounded-xl shadow-md p-6">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-2/3 mb-6 md:mb-0">
 <h2 class="text-2xl font-bold text-gray-800 mb-2">Transport Decarbonization Benchmarking</h2>
 <p class="text-gray-600 mb-4">
 Track, analyze, and improve your organization's transport decarbonization KPIs.
Compare performance with industry benchmarks and identify optimization opportunities.
 </p>
 <div class="flex flex-wrap gap-2">
 <button id="newBenchmarkBtn" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">
 <i class="fas fa-plus mr-2"></i> New Benchmark
 </button>
 <button id="viewReportsBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition">
 <i class="fas fa-chart-line mr-2"></i> View Reports
 </button>
 </div>
 </div>
 <div class="md:w-1/3 flex justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/3344/3344397.png" alt="Decarbonization" class="w-40 h-40 animate-float">
 </div>
 </div>
 </div>
 </section>
<!-- KPIs Dashboard -->
 <section class="mb-8">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold text-gray-800 kpi-indicator">Key Performance Indicators</h3>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-500">Last updated: <span id="lastUpdated">Today</span></span>
 <button id="refreshKpis" class="text-blue-500 hover:text-blue-700">
 <i class="fas fa-sync-alt"></i>
 </button>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 <!-- KPI Card 1 -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-sm text-gray-500">Carbon Intensity</p>
 <h4 class="text-2xl font-bold text-gray-800" id="carbonIntensity">24.5 gCO₂/km</h4>
 </div>
 <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
 <i class="fas fa-arrow-down mr-1"></i> <span id="carbonTrend">12%</span>
 </div>
 </div>
 <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
 <div class="h-full bg-green-500 rounded-full" id="carbonProgress" style="width: 65%"></div>
 </div>
 <p class="text-xs text-gray-500 mt-2">vs industry avg: 28.3 gCO₂/km</p>
 </div>
<!-- KPI Card 2 -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-sm text-gray-500">EV Fleet %</p>
 <h4 class="text-2xl font-bold text-gray-800" id="evFleet">42%</h4>
 </div>
 <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
 <i class="fas fa-arrow-up mr-1"></i> <span id="evTrend">8%</span>
 </div>
 </div>
 <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
 <div class="h-full bg-blue-500 rounded-full" id="evProgress" style="width: 42%"></div>
 </div>
 <p class="text-xs text-gray-500 mt-2">vs industry avg: 35%</p>
 </div>
<!-- KPI Card 3 -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-sm text-gray-500">Renewable Energy</p>
 <h4 class="text-2xl font-bold text-gray-800" id="renewableEnergy">68%</h4>
 </div>
 <div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">
 <i class="fas fa-arrow-up mr-1"></i> <span id="renewableTrend">5%</span>
 </div>
 </div>
 <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
 <div class="h-full bg-yellow-500 rounded-full" id="renewableProgress" style="width: 68%"></div>
 </div>
 <p class="text-xs text-gray-500 mt-2">vs industry avg: 52%</p>
 </div>
<!-- KPI Card 4 -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-sm text-gray-500">Modal Shift</p>
 <h4 class="text-2xl font-bold text-gray-800" id="modalShift">31%</h4>
 </div>
 <div class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">
 <i class="fas fa-arrow-down mr-1"></i> <span id="modalTrend">3%</span>
 </div>
 </div>
 <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
 <div class="h-full bg-red-500 rounded-full" id="modalProgress" style="width: 31%"></div>
 </div>
 <p class="text-xs text-gray-500 mt-2">vs industry avg: 28%</p>
 </div>
 </div>
 </section>
<!-- Benchmarking Tools -->
 <section class="mb-8">
 <h3 class="text-xl font-bold text-gray-800 mb-4">Benchmarking Tools</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <!-- Comparison Tool -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex items-center mb-4">
 <div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
 <i class="fas fa-balance-scale text-xl"></i>
 </div>
 <h4 class="text-lg font-bold text-gray-800">Industry Comparison</h4>
 </div>
 <p class="text-gray-600 mb-4">
 Compare your decarbonization performance against industry peers and identify best practices.
 </p>
 <div class="flex flex-wrap gap-2 mb-4">
 <button class="industry-btn bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium" data-industry="logistics">
 Logistics
 </button>
 <button class="industry-btn bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium" data-industry="public-transport">
 Public Transport
 </button>
 <button class="industry-btn bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium" data-industry="shipping">
 Shipping
 </button>
 </div>
 <button id="runComparisonBtn" class="w-full bg-blue-500 text-white py-2 rounded-lg font-medium hover:bg-blue-600 transition">
 Run Comparison
 </button>
 </div>
<!-- Attribution Model -->
 <div class="dashboard-card bg-white rounded-xl shadow-md p-6">
 <div class="flex items-center mb-4">
 <div class="bg-green-100 text-green-800 p-3 rounded-lg mr-4">
 <i class="fas fa-chart-pie text-xl"></i>
 </div>
 <h4 class="text-lg font-bold text-gray-800">Attribution Modeling</h4>
 </div>
 <p class="text-gray-600 mb-4">
 Analyze which interventions are driving changes in your decarbonization KPIs and user perceptions.
 </p>
 <div class="space-y-2 mb-4">
 <div class="flex items-center">
 <input type="checkbox" id="evFleetCheck" class="mr-2" checked>
 <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
 <span class="text-sm text-gray-600">EV Fleet Expansion</span>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="routeOptCheck" class="mr-2" checked>
 <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
 <span class="text-sm text-gray-600">Route Optimization</span>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="driverTrainCheck" class="mr-2" checked>
 <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
 <span class="text-sm text-gray-600">Driver Training</span>
 </div>
 </div>
 <button id="analyzeImpactBtn" class="w-full bg-green-500 text-white py-2 rounded-lg font-medium hover:bg-green-600 transition">
 Analyze Impact
 </button>
 </div>
 </div>
 </section>
<!-- Feedback Collection -->
 <section class="mb-8">
 <h3 class="text-xl font-bold text-gray-800 mb-4">Stakeholder Feedback</h3>
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="p-6">
 <div class="flex justify-between items-center mb-4">
 <h4 class="text-lg font-bold text-gray-800">Recent Feedback</h4>
 <button id="viewAllFeedback" class="text-blue-500 hover:text-blue-700 text-sm font-medium">
 View All <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
<div class="space-y-4" id="feedbackContainer">
 <!-- Feedback Item 1 -->
 <div class="flex items-start">
 <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3">
 <i class="fas fa-user-tie"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h5 class="font-medium text-gray-800">Logistics Manager</h5>
 <div class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i>
 <span class="text-sm text-gray-600">4.5</span>
 </div>
 </div>
 <p class="text-sm text-gray-600 mt-1">
 "The new route optimization reduced our fuel consumption by 15%. Would like to see more EV charging stations."
 </p>
 <div class="flex mt-2">
 <span class="bg-blue-50 text-blue-700 text-xs px-2 py-1 rounded mr-2">EV Infrastructure</span>
 <span class="bg-green-50 text-green-700 text-xs px-2 py-1 rounded">Route Planning</span>
 </div>
 </div>
 </div>
<!-- Feedback Item 2 -->
 <div class="flex items-start">
 <div class="bg-green-100 text-green-800 p-2 rounded-full mr-3">
 <i class="fas fa-user"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h5 class="font-medium text-gray-800">Driver</h5>
 <div class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i>
 <span class="text-sm text-gray-600">3.8</span>
 </div>
 </div>
 <p class="text-sm text-gray-600 mt-1">
 "The eco-driving training was helpful, but we need more frequent updates on our performance metrics."
 </p>
 <div class="flex mt-2">
 <span class="bg-purple-50 text-purple-700 text-xs px-2 py-1 rounded">Training</span>
 <span class="bg-yellow-50 text-yellow-700 text-xs px-2 py-1 rounded ml-2">Performance Data</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
 <div class="flex">
 <input type="text" id="feedbackInput" placeholder="Share your feedback..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
 <button id="submitFeedbackBtn" class="gradient-bg text-white px-4 py-2 rounded-r-lg font-medium hover:opacity-90 transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Freeport Specific Section -->
 <section class="mb-8">
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="gradient-bg text-white p-6">
 <h3 class="text-xl font-bold mb-2">Freeport Decarbonization</h3>
 <p class="opacity-90">
 Specialized tools for tracking and optimizing decarbonization efforts in freeport zones.
 </p>
 </div>
 <div class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition cursor-pointer" onclick="showFreeportModal('port-operations')">
 <div class="bg-blue-50 text-blue-700 p-3 rounded-lg inline-block mb-3">
 <i class="fas fa-ship"></i>
 </div>
 <h4 class="font-bold text-gray-800 mb-2">Port Operations</h4>
 <p class="text-sm text-gray-600">
 Track emissions from cargo handling, ship docking, and port equipment.
 </p>
 </div>
 <div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 transition cursor-pointer" onclick="showFreeportModal('warehousing')">
 <div class="bg-green-50 text-green-700 p-3 rounded-lg inline-block mb-3">
 <i class="fas fa-warehouse"></i>
 </div>
 <h4 class="font-bold text-gray-800 mb-2">Warehousing</h4>
 <p class="text-sm text-gray-600">
 Monitor energy use and emissions from storage and logistics operations.
 </p>
 </div>
 <div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 transition cursor-pointer" onclick="showFreeportModal('last-mile')">
 <div class="bg-yellow-50 text-yellow-700 p-3 rounded-lg inline-block mb-3">
 <i class="fas fa-truck"></i>
 </div>
 <h4 class="font-bold text-gray-800 mb-2">Last-Mile Delivery</h4>
 <p class="text-sm text-gray-600">
 Optimize final distribution routes and vehicle types for minimal emissions.
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>
 </main>
<!-- Mobile Bottom Navigation -->
 <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200 z-50">
 <div class="flex justify-around">
 <a href="#" class="flex flex-col items-center py-3 px-4 text-blue-500">
 <i class="fas fa-home text-lg"></i>
 <span class="text-xs mt-1">Home</span>
 </a>
 <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-blue-500">
 <i class="fas fa-chart-bar text-lg"></i>
 <span class="text-xs mt-1">Analytics</span>
 </a>
 <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-blue-500">
 <i class="fas fa-trophy text-lg"></i>
 <span class="text-xs mt-1">Benchmarks</span>
 </a>
 <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-blue-500">
 <i class="fas fa-cog text-lg"></i>
 <span class="text-xs mt-1">Settings</span>
 </a>
 </div>
 </nav>
<!-- Modals -->
 <div id="benchmarkModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Create New Benchmark</h3>
 <button onclick="closeModal('benchmarkModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Benchmark Name</label>
 <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Sector</label>
 <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
 <option>Logistics</option>
 <option>Public Transport</option>
 <option>Shipping</option>
 <option>Aviation</option>
 <option>Freight</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">KPIs to Include</label>
 <div class="space-y-2">
 <div class="flex items-center">
 <input type="checkbox" id="benchmarkCarbon" class="mr-2" checked>
 <label for="benchmarkCarbon">Carbon Intensity</label>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="benchmarkEV" class="mr-2" checked>
 <label for="benchmarkEV">EV Fleet Percentage</label>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="benchmarkRenewable" class="mr-2" checked>
 <label for="benchmarkRenewable">Renewable Energy Usage</label>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="benchmarkModal" class="mr-2">
 <label for="benchmarkModal">Modal Shift</label>
 </div>
 </div>
 </div>
 <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">
 Create Benchmark
 </button>
 </div>
 </div>
 </div>
<div id="reportsModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Performance Reports</h3>
 <button onclick="closeModal('reportsModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4">
 <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center">
 <div class="bg-blue-100 text-blue-800 p-2 rounded-lg mr-3">
 <i class="fas fa-file-pdf"></i>
 </div>
 <div>
 <h4 class="font-medium">Monthly Carbon Report - June 2023</h4>
 <p class="text-sm text-gray-600">Generated 2 days ago</p>
 </div>
 </div>
 </div>
 <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center">
 <div class="bg-green-100 text-green-800 p-2 rounded-lg mr-3">
 <i class="fas fa-file-excel"></i>
 </div>
 <div>
 <h4 class="font-medium">EV Fleet Analysis - Q2 2023</h4>
 <p class="text-sm text-gray-600">Generated 1 week ago</p>
 </div>
 </div>
 </div>
 <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-center">
 <div class="bg-yellow-100 text-yellow-800 p-2 rounded-lg mr-3">
 <i class="fas fa-file-alt"></i>
 </div>
 <div>
 <h4 class="font-medium">Annual Sustainability Report 2022</h4>
 <p class="text-sm text-gray-600">Generated 3 months ago</p>
 </div>
 </div>
 </div>
 <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">
 Generate New Report
 </button>
 </div>
 </div>
 </div>
<div id="comparisonModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Industry Comparison Results</h3>
 <button onclick="closeModal('comparisonModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4">
 <div id="comparisonResults">
 <!-- Results will be inserted here by JavaScript -->
 </div>
 <div class="flex justify-center">
 <img src="https://cdn-icons-png.flaticon.com/512/3132/3132735.png" alt="Comparison Chart" class="w-48 h-48">
 </div>
 <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">
 Export Results
 </button>
 </div>
 </div>
 </div>
<div id="attributionModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Attribution Analysis</h3>
 <button onclick="closeModal('attributionModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4">
 <div id="attributionResults">
 <!-- Results will be inserted here by JavaScript -->
 </div>
 <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
 <p class="text-gray-500">Impact visualization chart</p>
 </div>
 <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">
 Save Analysis
 </button>
 </div>
 </div>
 </div>
<div id="feedbackModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">All Feedback</h3>
 <button onclick="closeModal('feedbackModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4 max-h-96 overflow-y-auto" id="allFeedbackContainer">
 <!-- Feedback items will be inserted here by JavaScript -->
 </div>
 </div>
 </div>
<div id="freeportModal" class="modal">
 <div class="modal-content">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold" id="freeportModalTitle">Freeport Details</h3>
 <button onclick="closeModal('freeportModal')" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-4" id="freeportModalContent">
 <!-- Content will be inserted here by JavaScript -->
 </div>
 </div>
 </div>
<!-- Script for interactivity -->
 <script>
 // Sample data for the app
 const sampleFeedback = [
 {
 role: "Logistics Manager",
 rating: 4.5,
 comment: "The new route optimization reduced our fuel consumption by 15%. Would like to see more EV charging stations.",
 tags: ["EV Infrastructure", "Route Planning"],
 date: "2 days ago"
 },
 {
 role: "Driver",
 rating: 3.8,
 comment: "The eco-driving training was helpful, but we need more frequent updates on our performance metrics.",
 tags: ["Training", "Performance Data"],
 date: "1 week ago"
 },
 {
 role: "Sustainability Officer",
 rating: 4.2,
 comment: "The carbon reporting features are excellent. Would love to see more granular data on scope 3 emissions.",
 tags: ["Reporting", "Data Granularity"],
 date: "3 days ago"
 },
 {
 role: "Fleet Manager",
 rating: 4.0,
 comment: "The transition to EVs is going well, but we need better tools to plan charging schedules.",
 tags: ["EV Transition", "Charging"],
 date: "5 days ago"
 }
 ];
 const industryBenchmarks = {
 "logistics": {
 carbon: 26.8,
 ev: 38,
 renewable: 45,
 modal: 22
 },
 "public-transport": {
 carbon: 18.2,
 ev: 52,
 renewable: 68,
 modal: 45
 },
 "shipping": {
 carbon: 32.4,
 ev: 12,
 renewable: 28,
 modal: 15
 }
 };
 const freeportData = {
 "port-operations": {
 title: "Port Operations Analysis",
 content: `
 <div class="space-y-4">
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Current Performance</h4>
 <div class="bg-gray-100 p-4 rounded-lg">
 <div class="flex justify-between mb-2">
 <span>Carbon Intensity:</span>
 <span class="font-medium">28.4 gCO₂/TEU</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Electric Equipment:</span>
 <span class="font-medium">24%</span>
 </div>
 <div class="flex justify-between">
 <span>Renewable Energy:</span>
 <span class="font-medium">35%</span>
 </div>
 </div>
 </div>
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Optimization Opportunities</h4>
 <ul class="list-disc pl-5 space-y-1 text-gray-700">
 <li>Electrification of cargo handling equipment</li>
 <li>Shore power for docked vessels</li>
 <li>AI-based scheduling to reduce idle time</li>
 </ul>
 </div>
 </div>
 `
 },
 "warehousing": {
 title: "Warehousing Analysis",
 content: `
 <div class="space-y-4">
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Current Performance</h4>
 <div class="bg-gray-100 p-4 rounded-lg">
 <div class="flex justify-between mb-2">
 <span>Energy Intensity:</span>
 <span class="font-medium">15.2 kWh/m²</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Solar Coverage:</span>
 <span class="font-medium">18%</span>
 </div>
 <div class="flex justify-between">
 <span>Automation Level:</span>
 <span class="font-medium">32%</span>
 </div>
 </div>
 </div>
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Optimization Opportunities</h4>
 <ul class="list-disc pl-5 space-y-1 text-gray-700">
 <li>Installation of rooftop solar panels</li>
 <li>LED lighting retrofits</li>
 <li>Automated storage and retrieval systems</li>
 </ul>
 </div>
 </div>
 `
 },
 "last-mile": {
 title: "Last-Mile Delivery Analysis",
 content: `
 <div class="space-y-4">
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Current Performance</h4>
 <div class="bg-gray-100 p-4 rounded-lg">
 <div class="flex justify-between mb-2">
 <span>Delivery Carbon Footprint:</span>
 <span class="font-medium">0.42 kgCO₂/parcel</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>EV Fleet:</span>
 <span class="font-medium">28%</span>
 </div>
 <div class="flex justify-between">
 <span>Route Efficiency:</span>
 <span class="font-medium">72%</span>
 </div>
 </div>
 </div>
 <div>
 <h4 class="font-bold text-gray-800 mb-2">Optimization Opportunities</h4>
 <ul class="list-disc pl-5 space-y-1 text-gray-700">
 <li>Transition to electric delivery vehicles</li>
 <li>Micro-fulfillment centers in urban areas</li>
 <li>Dynamic routing algorithms</li>
 </ul>
 </div>
 </div>
 `
 }
 };
 // Modal functions
 function openModal(modalId) {
 document.getElementById(modalId).style.display = 'flex';
 }
 function closeModal(modalId) {
 document.getElementById(modalId).style.display = 'none';
 }
 function showFreeportModal(section) {
 const data = freeportData[section];
 document.getElementById('freeportModalTitle').textContent = data.title;
 document.getElementById('freeportModalContent').innerHTML = data.content;
 openModal('freeportModal');
 }
 // Initialize the app
 document.addEventListener('DOMContentLoaded', function() {
 // Button event listeners
 document.getElementById('newBenchmarkBtn').addEventListener('click', function() {
 openModal('benchmarkModal');
 });
 document.getElementById('viewReportsBtn').addEventListener('click', function() {
 openModal('reportsModal');
 });
 document.getElementById('runComparisonBtn').addEventListener('click', function() {
 const selectedIndustry = document.querySelector('.industry-btn.active');
 if (selectedIndustry) {
 const industry = selectedIndustry.dataset.industry;
 const benchmarks = industryBenchmarks[industry];
let comparisonHTML = `
 <div class="bg-gray-100 p-4 rounded-lg mb-4">
 <h4 class="font-bold text-gray-800 mb-3">Comparison with ${selectedIndustry.textContent} Industry</h4>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between mb-1">
 <span>Carbon Intensity:</span>
 <span class="font-medium">24.5 gCO₂/km (You) vs ${benchmarks.carbon} gCO₂/km (Industry)</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full ${24.5 < benchmarks.carbon ? 'bg-green-500' : 'bg-red-500'} rounded-full" style="width: ${Math.min(24.5, benchmarks.carbon)/benchmarks.carbon*100}%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-1">
 <span>EV Fleet:</span>
 <span class="font-medium">42% (You) vs ${benchmarks.ev}% (Industry)</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full ${42 > benchmarks.ev ? 'bg-green-500' : 'bg-red-500'} rounded-full" style="width: ${Math.min(42, benchmarks.ev)/benchmarks.ev*100}%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-1">
 <span>Renewable Energy:</span>
 <span class="font-medium">68% (You) vs ${benchmarks.renewable}% (Industry)</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full ${68 > benchmarks.renewable ? 'bg-green-500' : 'bg-red-500'} rounded-full" style="width: ${Math.min(68, benchmarks.renewable)/benchmarks.renewable*100}%"></div>
 </div>
 </div>
 </div>
 </div>
 <p class="text-sm text-gray-600">
 ${24.5 < benchmarks.carbon && 42 > benchmarks.ev && 68 > benchmarks.renewable ?
'Your performance is better than industry average across all key metrics!' :
'You have opportunities to improve in some areas compared to industry benchmarks.'}
 </p>
 `;
document.getElementById('comparisonResults').innerHTML = comparisonHTML;
 openModal('comparisonModal');
 } else {
 alert('Please select an industry to compare with');
 }
 });
 document.getElementById('analyzeImpactBtn').addEventListener('click', function() {
 const evChecked = document.getElementById('evFleetCheck').checked;
 const routeChecked = document.getElementById('routeOptCheck').checked;
 const driverChecked = document.getElementById('driverTrainCheck').checked;
if (!evChecked && !routeChecked && !driverChecked) {
 alert('Please select at least one intervention to analyze');
 return;
 }
let impactHTML = `
 <div class="bg-gray-100 p-4 rounded-lg mb-4">
 <h4 class="font-bold text-gray-800 mb-3">Impact Attribution Analysis</h4>
 <div class="space-y-3">
 `;
if (evChecked) {
 impactHTML += `
 <div>
 <div class="flex justify-between mb-1">
 <span>EV Fleet Expansion:</span>
 <span class="font-medium">Estimated 8% carbon reduction</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full bg-blue-500 rounded-full" style="width: 40%"></div>
 </div>
 </div>
 `;
 }
if (routeChecked) {
 impactHTML += `
 <div>
 <div class="flex justify-between mb-1">
 <span>Route Optimization:</span>
 <span class="font-medium">Estimated 12% carbon reduction</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full bg-green-500 rounded-full" style="width: 60%"></div>
 </div>
 </div>
 `;
 }
if (driverChecked) {
 impactHTML += `
 <div>
 <div class="flex justify-between mb-1">
 <span>Driver Training:</span>
 <span class="font-medium">Estimated 5% carbon reduction</span>
 </div>
 <div class="h-2 bg-gray-300 rounded-full overflow-hidden">
 <div class="h-full bg-yellow-500 rounded-full" style="width: 25%"></div>
 </div>
 </div>
 `;
 }
impactHTML += `
 </div>
 </div>
 <p class="text-sm text-gray-600">
 Based on your selected interventions, the estimated total carbon reduction is approximately 25%.
 </p>
 `;
document.getElementById('attributionResults').innerHTML = impactHTML;
 openModal('attributionModal');
 });
 document.getElementById('viewAllFeedback').addEventListener('click', function() {
 let feedbackHTML = '';
 sampleFeedback.forEach(feedback => {
 feedbackHTML += `
 <div class="border-b border-gray-200 pb-4 mb-4">
 <div class="flex items-start">
 <div class="${feedback.rating >= 4 ? 'bg-blue-100 text-blue-800' : feedback.rating >= 3 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'} p-2 rounded-full mr-3">
 <i class="fas fa-user${feedback.role === 'Logistics Manager' ? '-tie' : ''}"></i>
 </div>
 <div class="flex-1">
 <div class="flex justify-between items-start">
 <h5 class="font-medium text-gray-800">${feedback.role}</h5>
 <div class="flex items-center">
 <i class="fas fa-star ${feedback.rating >= 4 ? 'text-yellow-400' : feedback.rating >= 3 ? 'text-yellow-300' : 'text-yellow-200'} mr-1"></i>
 <span class="text-sm text-gray-600">${feedback.rating}</span>
 </div>
 </div>
 <p class="text-sm text-gray-600 mt-1">"${feedback.comment}"</p>
 <div class="flex mt-2">
 ${feedback.tags.map(tag => `
 <span class="${tag.includes('EV') ? 'bg-blue-50 text-blue-700' : tag.includes('Route') ? 'bg-green-50 text-green-700' : tag.includes('Training') ? 'bg-purple-50 text-purple-700' : 'bg-yellow-50 text-yellow-700'} text-xs px-2 py-1 rounded mr-2">${tag}</span>
 `).join('')}
 </div>
 <p class="text-xs text-gray-500 mt-2">${feedback.date}</p>
 </div>
 </div>
 </div>
 `;
 });
document.getElementById('allFeedbackContainer').innerHTML = feedbackHTML;
 openModal('feedbackModal');
 });
 document.getElementById('submitFeedbackBtn').addEventListener('click', function() {
 const feedbackInput = document.getElementById('feedbackInput');
 if (feedbackInput.value.trim() !== '') {
 // In a real app, this would send to a server
 alert('Thank you for your feedback! It will help us improve our decarbonization efforts.');
 feedbackInput.value = '';
 } else {
 alert('Please enter your feedback before submitting.');
 }
 });
 document.getElementById('refreshKpis').addEventListener('click', function() {
 // Simulate refreshing data
 const now = new Date();
 document.getElementById('lastUpdated').textContent = now.toLocaleTimeString();
// Animate the refresh
 const kpiCards = document.querySelectorAll('.dashboard-card');
 kpiCards.forEach(card => {
 card.style.opacity = '0.5';
 card.style.transition = 'opacity 0.3s';
 });
setTimeout(() => {
 kpiCards.forEach(card => {
 card.style.opacity = '1';
 });
 }, 500);
 });
 // Industry comparison buttons
 document.querySelectorAll('.industry-btn').forEach(btn => {
 btn.addEventListener('click', function() {
 document.querySelectorAll('.industry-btn').forEach(b => b.classList.remove('active', 'ring-2', 'ring-offset-2', 'ring-blue-500'));
 this.classList.add('active', 'ring-2', 'ring-offset-2', 'ring-blue-500');
 });
 });
 // KPI card hover effects
 document.querySelectorAll('.dashboard-card').forEach(card => {
 card.addEventListener('mouseenter', () => {
 card.classList.add('shadow-lg');
 });
 card.addEventListener('mouseleave', () => {
 card.classList.remove('shadow-lg');
 });
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aworkimmersive/ecotrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>