Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TMS Analytics Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| .gauge-container { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| padding-bottom: 50%; | |
| } | |
| .gauge { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #map { | |
| height: 100%; | |
| min-height: 300px; | |
| border-radius: 0.5rem; | |
| } | |
| .alert-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| .scrollable-table { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-6"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-truck text-blue-600 text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">TMS Analytics Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search shipments..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-gray-600">Last updated: <span id="update-time" class="font-semibold">Just now</span></span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Real-time Shipment Tracking Map --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800"> | |
| <i class="fas fa-map-marked-alt text-blue-600 mr-2"></i> Real-time Shipment Tracking | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm"> | |
| <i class="fas fa-filter mr-1"></i> Filters | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm"> | |
| <i class="fas fa-layer-group mr-1"></i> Layers | |
| </button> | |
| </div> | |
| </div> | |
| <div id="map" class="w-full"></div> | |
| <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="bg-blue-50 p-2 rounded-lg flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-600 mr-2"></div> | |
| <span class="text-sm">In Transit (12)</span> | |
| </div> | |
| <div class="bg-green-50 p-2 rounded-lg flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-600 mr-2"></div> | |
| <span class="text-sm">Delivered (5)</span> | |
| </div> | |
| <div class="bg-yellow-50 p-2 rounded-lg flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-600 mr-2"></div> | |
| <span class="text-sm">Delayed (3)</span> | |
| </div> | |
| <div class="bg-red-50 p-2 rounded-lg flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-600 mr-2"></div> | |
| <span class="text-sm">Exceptions (2)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance KPIs --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-chart-line text-blue-600 mr-2"></i> Performance KPIs | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- On-Time Delivery Gauge --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">On-Time Delivery</h3> | |
| <div class="gauge-container"> | |
| <canvas id="otd-gauge" class="gauge"></canvas> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span>50%</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="mt-1 text-center"> | |
| <span class="text-2xl font-bold text-blue-600">87%</span> | |
| <span class="text-sm text-gray-500 ml-1">(+2% from last month)</span> | |
| </div> | |
| </div> | |
| <!-- Cost per Mile Gauge --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Cost per Mile</h3> | |
| <div class="gauge-container"> | |
| <canvas id="cpm-gauge" class="gauge"></canvas> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>$0</span> | |
| <span>$1.50</span> | |
| <span>$3.00</span> | |
| </div> | |
| <div class="mt-1 text-center"> | |
| <span class="text-2xl font-bold text-blue-600">$2.15</span> | |
| <span class="text-sm text-gray-500 ml-1">(-$0.10 from last month)</span> | |
| </div> | |
| </div> | |
| <!-- Carbon Efficiency Gauge --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Carbon Efficiency</h3> | |
| <div class="gauge-container"> | |
| <canvas id="carbon-gauge" class="gauge"></canvas> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>High</span> | |
| <span>Medium</span> | |
| <span>Low</span> | |
| </div> | |
| <div class="mt-1 text-center"> | |
| <span class="text-2xl font-bold text-blue-600">78%</span> | |
| <span class="text-sm text-gray-500 ml-1">(+5% from last month)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trend Charts --> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Monthly Cost Trend</h3> | |
| <canvas id="cost-trend-chart" height="150"></canvas> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Service Level Trend</h3> | |
| <canvas id="service-trend-chart" height="150"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Cost Analysis Breakdown --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-money-bill-wave text-blue-600 mr-2"></i> Cost Analysis | |
| </h2> | |
| <div class="mb-4"> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Total Spend: $124,567</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Linehaul</span> | |
| <span>$78,476 (63%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 63%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Fuel</span> | |
| <span>$23,567 (19%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full progress-bar" style="width: 19%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Accessorials</span> | |
| <span>$12,345 (10%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-600 h-2 rounded-full progress-bar" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Other</span> | |
| <span>$10,179 (8%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-600 h-2 rounded-full progress-bar" style="width: 8%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-600 mb-2">Cost Savings Opportunities</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 bg-blue-50 rounded-lg"> | |
| <i class="fas fa-route text-blue-600 mr-2"></i> | |
| <span class="text-sm">Consolidate 3 LTL shipments to Chicago</span> | |
| <span class="ml-auto text-sm font-medium text-blue-600">$1,245</span> | |
| </div> | |
| <div class="flex items-center p-2 bg-blue-50 rounded-lg"> | |
| <i class="fas fa-gas-pump text-blue-600 mr-2"></i> | |
| <span class="text-sm">Optimize fuel purchase locations</span> | |
| <span class="ml-auto text-sm font-medium text-blue-600">$876</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carrier Performance Scorecards --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-star text-blue-600 mr-2"></i> Carrier Performance | |
| </h2> | |
| <div class="scrollable-table"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Carrier</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">OTD</th> | |
| <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Swift Transport</td> | |
| <td class="px-3 py-2 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">92</span> | |
| </div> | |
| </td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">94%</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">$2.10/mi</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Prime Logistics</td> | |
| <td class="px-3 py-2 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">88</span> | |
| </div> | |
| </td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">90%</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">$2.25/mi</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Central Freight</td> | |
| <td class="px-3 py-2 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-600 h-2 rounded-full" style="width: 76%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">76</span> | |
| </div> | |
| </td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">82%</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">$2.05/mi</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Western Express</td> | |
| <td class="px-3 py-2 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-600 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">72</span> | |
| </div> | |
| </td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">78%</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">$2.35/mi</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">US Xpress</td> | |
| <td class="px-3 py-2 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">65</span> | |
| </div> | |
| </td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">70%</td> | |
| <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">$2.45/mi</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Carbon Footprint Metrics --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-leaf text-blue-600 mr-2"></i> Carbon Footprint | |
| </h2> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-600 mb-1">Total CO₂</div> | |
| <div class="text-xl font-bold text-green-600">4,567 kg</div> | |
| <div class="text-xs text-gray-500">-12% vs last month</div> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-600 mb-1">CO₂ per mile</div> | |
| <div class="text-xl font-bold text-blue-600">1.2 kg</div> | |
| <div class="text-xs text-gray-500">-8% vs last month</div> | |
| </div> | |
| </div> | |
| <canvas id="carbon-chart" height="150"></canvas> | |
| </div> | |
| <!-- Exception Alerts --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-exclamation-triangle text-blue-600 mr-2"></i> Exception Alerts | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="p-3 border border-red-200 rounded-lg bg-red-50 alert-pulse"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-red-600 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium text-red-800">Delivery Delay</div> | |
| <div class="text-sm text-gray-600">Shipment #45678 to Chicago is 3 hours behind schedule</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-yellow-200 rounded-lg bg-yellow-50"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-route text-yellow-600 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium text-yellow-800">Route Deviation</div> | |
| <div class="text-sm text-gray-600">Shipment #34567 has taken an unplanned detour</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-blue-200 rounded-lg bg-blue-50"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-temperature-high text-blue-600 mt-1 mr-2"></i> | |
| <div> | |
| <div class="font-medium text-blue-800">Temp Alert</div> | |
| <div class="text-sm text-gray-600">Reefer unit on shipment #56789 is 2°C above threshold</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize map | |
| const map = L.map('map').setView([39.8283, -98.5795], 4); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Add sample shipment markers | |
| const shipments = [ | |
| {lat: 40.7128, lng: -74.0060, status: 'transit', id: 'NYC-456'}, | |
| {lat: 41.8781, lng: -87.6298, status: 'delay', id: 'CHI-789'}, | |
| {lat: 34.0522, lng: -118.2437, status: 'transit', id: 'LA-123'}, | |
| {lat: 29.7604, lng: -95.3698, status: 'exception', id: 'HOU-567'}, | |
| {lat: 39.9526, lng: -75.1652, status: 'delivered', id: 'PHL-890'} | |
| ]; | |
| shipments.forEach(shipment => { | |
| let color; | |
| switch(shipment.status) { | |
| case 'transit': color = '#3B82F6'; break; | |
| case 'delay': color = '#F59E0B'; break; | |
| case 'exception': color = '#EF4444'; break; | |
| case 'delivered': color = '#10B981'; break; | |
| } | |
| const marker = L.circleMarker([shipment.lat, shipment.lng], { | |
| radius: 8, | |
| fillColor: color, | |
| color: '#fff', | |
| weight: 1, | |
| opacity: 1, | |
| fillOpacity: 0.8 | |
| }).addTo(map); | |
| marker.bindPopup(`<b>Shipment ${shipment.id}</b><br>Status: ${shipment.status}`); | |
| }); | |
| // Gauge Charts | |
| function createGauge(chartId, value, max, color) { | |
| const ctx = document.getElementById(chartId).getContext('2d'); | |
| return new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| datasets: [{ | |
| data: [value, max - value], | |
| backgroundColor: [color, '#E5E7EB'], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| rotation: -90, | |
| circumference: 180, | |
| cutout: '80%', | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { enabled: false } | |
| } | |
| } | |
| }); | |
| } | |
| createGauge('otd-gauge', 87, 100, '#3B82F6'); | |
| createGauge('cpm-gauge', 2.15, 3, '#10B981'); | |
| createGauge('carbon-gauge', 78, 100, '#F59E0B'); | |
| // Trend Charts | |
| function createLineChart(chartId, labels, data, color) { | |
| const ctx = document.getElementById(chartId).getContext('2d'); | |
| return new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: labels, | |
| datasets: [{ | |
| data: data, | |
| borderColor: color, | |
| backgroundColor: color + '20', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { display: false } | |
| }, | |
| scales: { | |
| y: { beginAtZero: false }, | |
| x: { grid: { display: false } } | |
| } | |
| } | |
| }); | |
| } | |
| const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; | |
| createLineChart('cost-trend-chart', months, | |
| [2.45, 2.35, 2.30, 2.25, 2.20, 2.18, 2.15], '#3B82F6'); | |
| createLineChart('service-trend-chart', months, | |
| [82, 83, 84, 85, 86, 86.5, 87], '#10B981'); | |
| // Carbon Chart | |
| const carbonCtx = document.getElementById('carbon-chart').getContext('2d'); | |
| new Chart(carbonCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Truckload', 'LTL', 'Intermodal', 'Parcel'], | |
| datasets: [{ | |
| data: [3200, 800, 500, 67], | |
| backgroundColor: [ | |
| '#3B82F6', | |
| '#10B981', | |
| '#F59E0B', | |
| '#EF4444' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { display: false } | |
| }, | |
| scales: { | |
| y: { beginAtZero: true } | |
| } | |
| } | |
| }); | |
| // Update timestamp | |
| function updateTime() { | |
| const now = new Date(); | |
| document.getElementById('update-time').textContent = | |
| now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| } | |
| updateTime(); | |
| setInterval(updateTime, 60000); | |
| </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=johnfmarti/tms-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |