Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FleetTrack Pro - Fleet Management Dashboard</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#4299e1', | |
| danger: '#e53e3e', | |
| warning: '#dd6b20', | |
| success: '#38a169' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| #map { | |
| height: 400px; | |
| width: 100%; | |
| border-radius: 0.5rem; | |
| } | |
| .vehicle-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .status-moving { | |
| background-color: #38a169; | |
| animation: pulse 2s infinite; | |
| } | |
| .status-idle { | |
| background-color: #dd6b20; | |
| } | |
| .status-offline { | |
| background-color: #e53e3e; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(56, 161, 105, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); | |
| } | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-expanded { | |
| width: 250px; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .content-expanded { | |
| margin-left: 250px; | |
| } | |
| .content-collapsed { | |
| margin-left: 70px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar sidebar-expanded bg-primary text-white flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-secondary"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-truck-moving text-2xl mr-3 text-accent"></i> | |
| <span id="logo-text" class="text-xl font-bold">FleetTrack Pro</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-secondary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div id="user-info"> | |
| <div class="font-medium">Admin User</div> | |
| <div class="text-xs text-gray-300">Administrator</div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="space-y-2 p-2"> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span id="dashboard-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded bg-secondary text-white"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> | |
| <span id="tracking-text">Live Tracking</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white"> | |
| <i class="fas fa-truck mr-3"></i> | |
| <span id="vehicles-text">Vehicles</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white"> | |
| <i class="fas fa-route mr-3"></i> | |
| <span id="routes-text">Routes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| <span id="reports-text">Reports</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span id="settings-text">Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="p-4 border-t border-secondary"> | |
| <button class="flex items-center p-2 rounded hover:bg-secondary text-white w-full"> | |
| <i class="fas fa-sign-out-alt mr-3"></i> | |
| <span id="logout-text">Logout</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div id="main-content" class="main-content content-expanded flex-1 overflow-auto"> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold text-gray-800">Live Fleet Tracking</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search vehicles..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Vehicles</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-primary"> | |
| <i class="fas fa-truck text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-success"> | |
| <i class="fas fa-arrow-up mr-1"></i> 2 new this month | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Active Now</p> | |
| <h3 class="text-2xl font-bold">18</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-success"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-500"> | |
| <span class="text-success">75%</span> of fleet | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Maintenance Due</p> | |
| <h3 class="text-2xl font-bold">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-warning"> | |
| <i class="fas fa-tools text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-danger"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> 2 overdue | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Avg. Fuel Efficiency</p> | |
| <h3 class="text-2xl font-bold">8.2</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-gas-pump text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-success"> | |
| <i class="fas fa-arrow-up mr-1"></i> 5% improvement | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map and Vehicle List --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Map Section --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Live Fleet Map</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">All</button> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Trucks</button> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Vans</button> | |
| <button class="px-3 py-1 bg-accent text-white rounded text-sm">Cars</button> | |
| </div> | |
| </div> | |
| <div id="map" class="bg-gray-200"> | |
| <!-- Map will be rendered here --> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Interactive map would display here</p> | |
| <p class="text-sm text-gray-400">(Connected to real-time GPS data)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="status-dot status-moving"></span> | |
| <span class="text-sm">Moving (12)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="status-dot status-idle"></span> | |
| <span class="text-sm">Idle (6)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="status-dot status-offline"></span> | |
| <span class="text-sm">Offline (6)</span> | |
| </div> | |
| </div> | |
| <button class="px-4 py-2 bg-primary text-white rounded text-sm hover:bg-secondary"> | |
| <i class="fas fa-layer-group mr-2"></i> Map Layers | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vehicle List --> | |
| <div> | |
| <div class="bg-white rounded-lg shadow p-4 h-full"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Vehicle Status</h2> | |
| <div class="relative"> | |
| <select class="appearance-none bg-gray-100 border border-gray-200 rounded pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-accent"> | |
| <option>Sort by Status</option> | |
| <option>Sort by Vehicle</option> | |
| <option>Sort by Driver</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-2 top-2 text-xs text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-3 overflow-y-auto" style="max-height: 500px;"> | |
| <!-- Vehicle Card 1 --> | |
| <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-blue-100 rounded-lg mr-3"> | |
| <i class="fas fa-truck text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Delivery Truck #4521</h4> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <span class="status-dot status-moving"></span> | |
| <span>Moving • 65 mph</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1"> | |
| <i class="fas fa-user mr-1"></i> John Smith • <i class="fas fa-map-marker-alt mr-1"></i> I-95 N | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vehicle Card 2 --> | |
| <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-green-100 rounded-lg mr-3"> | |
| <i class="fas fa-truck text-success"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Refrigerated Van #7812</h4> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <span class="status-dot status-moving"></span> | |
| <span>Moving • 45 mph</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1"> | |
| <i class="fas fa-user mr-1"></i> Sarah Johnson • <i class="fas fa-map-marker-alt mr-1"></i> Route 66 | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vehicle Card 3 --> | |
| <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-yellow-100 rounded-lg mr-3"> | |
| <i class="fas fa-truck text-warning"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Cargo Truck #3398</h4> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <span class="status-dot status-idle"></span> | |
| <span>Idle • 0 mph</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1"> | |
| <i class="fas fa-user mr-1"></i> Michael Brown • <i class="fas fa-map-marker-alt mr-1"></i> Warehouse #3 | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vehicle Card 4 --> | |
| <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-red-100 rounded-lg mr-3"> | |
| <i class="fas fa-truck text-danger"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Service Van #5567</h4> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <span class="status-dot status-offline"></span> | |
| <span>Offline • 8 hrs</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1"> | |
| <i class="fas fa-user mr-1"></i> David Wilson • <i class="fas fa-map-marker-alt mr-1"></i> Last seen: Garage | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vehicle Card 5 --> | |
| <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-blue-100 rounded-lg mr-3"> | |
| <i class="fas fa-truck text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Delivery Truck #1234</h4> | |
| <div class="flex items-center text-sm text-gray-500 mt-1"> | |
| <span class="status-dot status-moving"></span> | |
| <span>Moving • 55 mph</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1"> | |
| <i class="fas fa-user mr-1"></i> Robert Taylor • <i class="fas fa-map-marker-alt mr-1"></i> I-80 W | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-200"> | |
| <button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium"> | |
| <i class="fas fa-plus mr-2"></i> Add New Vehicle | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alerts and Maintenance --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Alerts --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Alerts</h2> | |
| <button class="text-sm text-primary hover:underline">View All</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-start p-3 bg-red-50 rounded-lg"> | |
| <div class="p-2 bg-red-100 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle text-danger"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium">Engine Warning</h4> | |
| <span class="text-xs text-gray-500">10 min ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Vehicle #5567: Engine temperature critical (245°F)</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="px-3 py-1 bg-danger text-white rounded text-xs">View Details</button> | |
| <button class="px-3 py-1 bg-white border border-gray-200 rounded text-xs">Dismiss</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-yellow-50 rounded-lg"> | |
| <div class="p-2 bg-yellow-100 rounded-full mr-3"> | |
| <i class="fas fa-tools text-warning"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium">Maintenance Due</h4> | |
| <span class="text-xs text-gray-500">2 hrs ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Vehicle #3398: Oil change overdue by 500 miles</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="px-3 py-1 bg-warning text-white rounded text-xs">Schedule</button> | |
| <button class="px-3 py-1 bg-white border border-gray-200 rounded text-xs">Remind Later</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-blue-50 rounded-lg"> | |
| <div class="p-2 bg-blue-100 rounded-full mr-3"> | |
| <i class="fas fa-bolt text-primary"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h4 class="font-medium">Low Battery</h4> | |
| <span class="text-xs text-gray-500">5 hrs ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Vehicle #7812: Battery level at 12%</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary text-white rounded text-xs">Check Status</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Maintenance Schedule --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Upcoming Maintenance</h2> | |
| <button class="text-sm text-primary hover:underline">View Calendar</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicle</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#4521</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">Tire Rotation</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">Tomorrow</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Scheduled</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#1234</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">Oil Change</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">In 3 days</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#7812</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">Brake Inspection</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">In 5 days</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#3398</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">Transmission Fluid</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm">In 1 week</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 pt-3 border-t border-gray-200"> | |
| <button class="w-full py-2 bg-primary text-white rounded text-sm font-medium hover:bg-secondary"> | |
| <i class="fas fa-calendar-plus mr-2"></i> Schedule Maintenance | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { | |
| const sidebar = document.getElementById('sidebar'); | |
| const mainContent = document.getElementById('main-content'); | |
| if (sidebar.classList.contains('sidebar-expanded')) { | |
| sidebar.classList.remove('sidebar-expanded'); | |
| sidebar.classList.add('sidebar-collapsed'); | |
| mainContent.classList.remove('content-expanded'); | |
| mainContent.classList.add('content-collapsed'); | |
| // Hide text elements in sidebar | |
| document.querySelectorAll('[id$="-text"]').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| } else { | |
| sidebar.classList.remove('sidebar-collapsed'); | |
| sidebar.classList.add('sidebar-expanded'); | |
| mainContent.classList.remove('content-collapsed'); | |
| mainContent.classList.add('content-expanded'); | |
| // Show text elements in sidebar | |
| document.querySelectorAll('[id$="-text"]').forEach(el => { | |
| el.style.display = 'inline'; | |
| }); | |
| } | |
| }); | |
| // Simulate real-time updates for vehicle status | |
| function updateVehicleStatus() { | |
| const statusDots = document.querySelectorAll('.status-dot'); | |
| const statusTexts = document.querySelectorAll('.vehicle-card .text-sm span:not(.status-dot)'); | |
| statusDots.forEach(dot => { | |
| // Randomly change some statuses for demo purposes | |
| if (Math.random() > 0.7) { | |
| if (dot.classList.contains('status-moving')) { | |
| dot.classList.remove('status-moving'); | |
| dot.classList.add('status-idle'); | |
| } else if (dot.classList.contains('status-idle')) { | |
| dot.classList.remove('status-idle'); | |
| dot.classList.add('status-moving'); | |
| } | |
| } | |
| }); | |
| statusTexts.forEach(text => { | |
| if (text.textContent.includes('mph')) { | |
| // Update speed randomly | |
| const currentSpeed = parseInt(text.textContent.match(/\d+/)[0]); | |
| const newSpeed = Math.max(0, currentSpeed + Math.floor(Math.random() * 10) - 4); | |
| text.textContent = text.textContent.replace(/\d+ mph/, newSpeed + ' mph'); | |
| } | |
| }); | |
| } | |
| // Update status every 5 seconds | |
| setInterval(updateVehicleStatus, 5000); | |
| // Vehicle card click handler | |
| document.querySelectorAll('.vehicle-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would center the map on the vehicle | |
| alert('Vehicle details would display here. In a real app, this would center the map on the selected vehicle.'); | |
| }); | |
| }); | |
| </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=ghost325/operations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |