| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SwiftHaul TMS - Trucking Management System</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> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .sidebar.collapsed { |
| width: 70px; |
| } |
| .sidebar.collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar.collapsed .logo-text { |
| display: none; |
| } |
| .sidebar.collapsed .nav-item { |
| justify-content: center; |
| } |
| .main-content { |
| transition: all 0.3s ease; |
| } |
| .sidebar.collapsed + .main-content { |
| margin-left: 70px; |
| } |
| .map-container { |
| height: 400px; |
| background-color: #e5e7eb; |
| position: relative; |
| overflow: hidden; |
| } |
| .map-placeholder { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| text-align: center; |
| color: #6b7280; |
| } |
| .driver-status-active { |
| background-color: #d1fae5; |
| color: #065f46; |
| } |
| .driver-status-inactive { |
| background-color: #fee2e2; |
| color: #b91c1c; |
| } |
| .driver-status-available { |
| background-color: #dbeafe; |
| color: #1e40af; |
| } |
| .load-status-pending { |
| background-color: #fef3c7; |
| color: #92400e; |
| } |
| .load-status-in-progress { |
| background-color: #bfdbfe; |
| color: #1e40af; |
| } |
| .load-status-completed { |
| background-color: #d1fae5; |
| color: #065f46; |
| } |
| .load-status-cancelled { |
| background-color: #f3f4f6; |
| color: #6b7280; |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> |
| <div class="p-4 flex items-center space-x-2 border-b border-blue-700"> |
| <div class="bg-white p-2 rounded-lg"> |
| <i class="fas fa-truck text-blue-800 text-xl"></i> |
| </div> |
| <span class="logo-text text-xl font-bold">SwiftHaul TMS</span> |
| </div> |
| <div class="p-4 border-b border-blue-700 flex items-center space-x-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| <div class="sidebar-text"> |
| <div class="font-medium">Admin User</div> |
| <div class="text-xs text-blue-200">Administrator</div> |
| </div> |
| </div> |
| <nav class="flex-1 overflow-y-auto p-4 space-y-2"> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg bg-blue-700"> |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> |
| <span class="sidebar-text">Dashboard</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-truck-loading w-6 text-center"></i> |
| <span class="sidebar-text">Load Management</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-users w-6 text-center"></i> |
| <span class="sidebar-text">Drivers</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-trailer w-6 text-center"></i> |
| <span class="sidebar-text">Equipment</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-map-marked-alt w-6 text-center"></i> |
| <span class="sidebar-text">Dispatch</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-file-invoice-dollar w-6 text-center"></i> |
| <span class="sidebar-text">Invoicing</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-chart-line w-6 text-center"></i> |
| <span class="sidebar-text">Reports</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700"> |
| <i class="fas fa-cog w-6 text-center"></i> |
| <span class="sidebar-text">Settings</span> |
| </a> |
| </nav> |
| <div class="p-4 border-t border-blue-700"> |
| <button onclick="toggleSidebar()" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700 w-full"> |
| <i class="fas fa-chevron-left w-6 text-center"></i> |
| <span class="sidebar-text">Collapse Menu</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="main-content flex-1 flex flex-col overflow-hidden ml-64"> |
| |
| <header class="bg-white shadow-sm p-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <i class="fas fa-bell text-gray-500 hover:text-blue-600 cursor-pointer"></i> |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
| </div> |
| <div class="relative"> |
| <i class="fas fa-envelope text-gray-500 hover:text-blue-600 cursor-pointer"></i> |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <span class="text-sm font-medium">Admin</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">Active Loads</p> |
| <h3 class="text-2xl font-bold">24</h3> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-truck-loading text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+12% from last week</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">Available Drivers</p> |
| <h3 class="text-2xl font-bold">8</h3> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-red-500 text-sm font-medium">-2 from yesterday</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">Revenue This Month</p> |
| <h3 class="text-2xl font-bold">$124,850</h3> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-dollar-sign text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+8% from last month</span> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">On-Time Delivery</p> |
| <h3 class="text-2xl font-bold">92%</h3> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-clock text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+3% from last month</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| <div class="lg:col-span-2 bg-white rounded-lg shadow"> |
| <div class="p-4 border-b border-gray-200"> |
| <h2 class="text-lg font-semibold text-gray-800">Loads Overview Map</h2> |
| </div> |
| <div class="map-container"> |
| <div class="map-placeholder"> |
| <i class="fas fa-map-marked-alt text-5xl mb-4"></i> |
| <p>Interactive map would display here</p> |
| <p class="text-sm mt-2">Showing active loads and driver locations</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-4 border-b border-gray-200"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> |
| </div> |
| <div class="p-4 space-y-4"> |
| <div class="flex items-start space-x-3"> |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-truck"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Load #TRK-2456 assigned to Driver Johnson</p> |
| <p class="text-xs text-gray-500">10 minutes ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="p-2 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Load #TRK-2342 delivered successfully</p> |
| <p class="text-xs text-gray-500">1 hour ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Delay reported on Load #TRK-2398</p> |
| <p class="text-xs text-gray-500">2 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-file-invoice"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Invoice #INV-5678 sent to customer</p> |
| <p class="text-xs text-gray-500">3 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="p-2 rounded-full bg-red-100 text-red-600"> |
| <i class="fas fa-times-circle"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Load #TRK-2312 cancelled by customer</p> |
| <p class="text-xs text-gray-500">5 hours ago</p> |
| </div> |
| </div> |
| <div class="text-center pt-2"> |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> |
| View All Activity <i class="fas fa-chevron-right ml-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h2 class="text-lg font-semibold text-gray-800">Active Loads</h2> |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> |
| View All <i class="fas fa-chevron-right ml-1"></i> |
| </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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Load #</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origin</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Driver</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2456</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Chicago, IL</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dallas, TX</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full load-status-in-progress">In Transit</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">M. Johnson</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2455</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Denver, CO</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full load-status-pending">Pending Pickup</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R. Williams</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2454</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Los Angeles, CA</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Phoenix, AZ</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full load-status-in-progress">In Transit</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">T. Davis</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2453</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Houston, TX</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memphis, TN</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full load-status-completed">Delivered</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">J. Smith</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2452</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Seattle, WA</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Salt Lake City, UT</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full load-status-pending">Pending Pickup</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">A. Brown</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h2 class="text-lg font-semibold text-gray-800">Drivers Status</h2> |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> |
| View All <i class="fas fa-chevron-right ml-1"></i> |
| </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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Driver</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Location</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Load</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Michael Johnson</div> |
| <div class="text-sm text-gray-500">Truck #TRK-789</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full driver-status-active">On Duty</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oklahoma City, OK</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2456</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Robert Williams</div> |
| <div class="text-sm text-gray-500">Truck #TRK-456</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full driver-status-available">Available</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2455</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Thomas Davis</div> |
| <div class="text-sm text-gray-500">Truck #TRK-123</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full driver-status-active">On Duty</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Flagstaff, AZ</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2454</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Jennifer Smith</div> |
| <div class="text-sm text-gray-500">Truck #TRK-987</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full driver-status-inactive">Off Duty</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memphis, TN</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> |
| </tr> |
| <tr class="hover:bg-gray-50 cursor-pointer"> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Andrew Brown</div> |
| <div class="text-sm text-gray-500">Truck #TRK-654</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full driver-status-available">Available</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Seattle, WA</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2452</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function toggleSidebar() { |
| const sidebar = document.querySelector('.sidebar'); |
| const toggleButtonIcon = sidebar.querySelector('.fa-chevron-left'); |
| |
| sidebar.classList.toggle('collapsed'); |
| |
| if (sidebar.classList.contains('collapsed')) { |
| toggleButtonIcon.classList.remove('fa-chevron-left'); |
| toggleButtonIcon.classList.add('fa-chevron-right'); |
| sidebar.querySelector('.sidebar-text').textContent = 'Expand Menu'; |
| } else { |
| toggleButtonIcon.classList.remove('fa-chevron-right'); |
| toggleButtonIcon.classList.add('fa-chevron-left'); |
| sidebar.querySelector('.sidebar-text').textContent = 'Collapse Menu'; |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| console.log('TMS Dashboard loaded'); |
| |
| |
| setInterval(() => { |
| const randomLoad = Math.floor(Math.random() * 5) + 1; |
| const statuses = ['On Duty', 'Available', 'Off Duty']; |
| const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]; |
| |
| const driverRow = document.querySelector(`tbody tr:nth-child(${randomLoad}) td:nth-child(2)`); |
| if (driverRow) { |
| const span = driverRow.querySelector('span'); |
| span.textContent = randomStatus; |
| |
| |
| span.classList.remove('driver-status-active', 'driver-status-available', 'driver-status-inactive'); |
| |
| |
| if (randomStatus === 'On Duty') { |
| span.classList.add('driver-status-active'); |
| } else if (randomStatus === 'Available') { |
| span.classList.add('driver-status-available'); |
| } else { |
| span.classList.add('driver-status-inactive'); |
| } |
| } |
| }, 10000); |
| }); |
| |
| |
| function showLoadDetails(loadId) { |
| alert(`Showing details for Load #${loadId}\nThis would open a modal in a real application.`); |
| } |
| |
| |
| document.querySelectorAll('tbody tr').forEach(row => { |
| row.addEventListener('click', function() { |
| const loadId = this.querySelector('td:first-child').textContent; |
| if (loadId.startsWith('TRK-')) { |
| showLoadDetails(loadId); |
| } |
| }); |
| }); |
| </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=Umang8896/usfl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
