|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Digital Twin Simulation Platform</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
.hero-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); |
|
|
} |
|
|
.simulation-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.simulation-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.metric-card { |
|
|
background: linear-gradient(145deg, #f8fafc, #e2e8f0); |
|
|
border-radius: 12px; |
|
|
padding: 1.5rem; |
|
|
} |
|
|
.scenario-table { |
|
|
border-collapse: separate; |
|
|
border-spacing: 0; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.scenario-table th { |
|
|
background: #1e40af; |
|
|
color: white; |
|
|
padding: 1rem; |
|
|
text-align: left; |
|
|
} |
|
|
.scenario-table td { |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
} |
|
|
.scenario-table tr:last-child td { |
|
|
border-bottom: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div id="hero" class="hero-bg min-h-screen flex items-center justify-center relative"> |
|
|
<div class="absolute inset-0 z-0" id="vanta-bg"></div> |
|
|
<div class="container mx-auto px-6 z-10 relative"> |
|
|
<div class="text-center text-white" data-aos="fade-down"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6">Digital Twin Simulation Platform</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 opacity-90">Bản sao số hóa cho tối ưu hóa logistics và chuỗi cung ứng</p> |
|
|
<a href="simulation.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105 inline-block"> |
|
|
Bắt đầu Mô phỏng |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Digital Twin là gì?</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Digital Twin là bản sao số hóa của hệ thống thực tế, cho phép mô phỏng, phân tích và tối ưu hoạt động trong thời gian thực hoặc theo các kịch bản giả lập. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div class="simulation-card bg-white rounded-xl shadow-lg p-8" data-aos="fade-right"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="package" class="text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800">Warehouse Operations</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Mô phỏng nhập/xuất hàng, lưu kho, picking, packing, vị trí kệ, và luồng nhân viên/robot trong kho hàng. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Inventory Management</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Operations Optimization</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Resource Allocation</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="simulation-card bg-white rounded-xl shadow-lg p-8" data-aos="fade-left"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="truck" class="text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800">Fleet Multi-Modal</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Mô phỏng các phương tiện vận tải đa phương thức với tuyến đường, lịch trình và tối ưu hóa vận chuyển. |
|
|
</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Multi-modal Transportation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Route Optimization</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2"></i> |
|
|
<span>Delivery Management</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-100"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Mục tiêu Tối ưu hóa</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="text-center" data-aos="zoom-in" data-aos-delay="100"> |
|
|
<div class="bg-white rounded-full p-6 inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="box" class="text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Tối ưu không gian kho</h3> |
|
|
<p class="text-gray-600">Storage utilization, kệ, pallet và bố trí kho hợp lý</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="zoom-in" data-aos-delay="200"> |
|
|
<div class="bg-white rounded-full p-6 inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="map" class="text-green-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Tối ưu fleet deployment</h3> |
|
|
<p class="text-gray-600">Số lượng xe, loại xe, tuyến đường và chi phí vận hành</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="zoom-in" data-aos-delay="300"> |
|
|
<div class="bg-white rounded-full p-6 inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="alert-triangle" class="text-red-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Phân tích rủi ro</h3> |
|
|
<p class="text-gray-600">Đánh giá tác động của biến động và tình huống bất ngờ</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Warehouse Simulation</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16"> |
|
|
<div data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Thành phần mô phỏng</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="database" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Inventory Model</h4> |
|
|
<p class="text-gray-600">Số lượng hàng hóa, SKU, hạn sử dụng, vị trí kệ</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="settings" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Operations Model</h4> |
|
|
<p class="text-gray-600">Luồng nhập xuất, picking/packing, xử lý đơn hàng</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="users" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Resource Model</h4> |
|
|
<p class="text-gray-600">Nhân lực, thiết bị, chi phí vận hành</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Metrics quan tâm</h3> |
|
|
<div class="grid gap-4"> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="trending-up" class="text-blue-600 mr-2"></i> |
|
|
<span class="font-semibold">Warehouse throughput</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Đơn hàng/giờ</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="pie-chart" class="text-green-600 mr-2"></i> |
|
|
<span class="font-semibold">Storage utilization</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">%</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="clock" class="text-purple-600 mr-2"></i> |
|
|
<span class="font-semibold">Lead time</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Thời gian xử lý đơn hàng</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-100"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Fleet Multi-Modal Simulation</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16"> |
|
|
<div data-aos="fade-right"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Thành phần mô phỏng</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="truck" class="text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Vehicle Model</h4> |
|
|
<p class="text-gray-600">Loại xe, tải trọng, tốc độ, chi phí/km</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="map-pin" class="text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Route Model</h4> |
|
|
<p class="text-gray-600">Bản đồ, thời gian di chuyển, tuyến ưu tiên</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-4 mt-1"> |
|
|
<i data-feather="shopping-cart" class="text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Delivery Orders</h4> |
|
|
<p class="text-gray-600">Trọng lượng, CBM, priority, time window</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div data-aos="fade-left"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-gray-800">Metrics quan tâm</h3> |
|
|
<div class="grid gap-4"> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="bar-chart-2" class="text-green-600 mr-2"></i> |
|
|
<span class="font-semibold">Fleet utilization</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">%</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="dollar-sign" class="text-yellow-600 mr-2"></i> |
|
|
<span class="font-semibold">Total cost</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Fuel, maintenance, penalty</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i data-feather="check-circle" class="text-blue-600 mr-2"></i> |
|
|
<span class="font-semibold">On-time delivery rate</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Test Scenario "What-if"</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Kiểm thử các kịch bản giả lập nhằm dự đoán tác động trước khi xảy ra thực tế |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto" data-aos="fade-up"> |
|
|
<table class="scenario-table w-full bg-white"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Scenario</th> |
|
|
<th>Warehouse Impact</th> |
|
|
<th>Fleet Impact</th> |
|
|
<th>Metrics affected</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td class="font-semibold">Increase volume: 20–50% tăng hàng</td> |
|
|
<td>Full kệ, backlog, picking time tăng</td> |
|
|
<td>Overload xe, cần thêm chuyến</td> |
|
|
<td>Utilization, Lead time, Cost</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="font-semibold">Delay in supply</td> |
|
|
<td>Out-of-stock, backlog đơn hàng</td> |
|
|
<td>Chậm giao hàng, rerouting</td> |
|
|
<td>On-time delivery, Penalty cost</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="font-semibold">Damage / spoilage</td> |
|
|
<td>Hàng hỏng, cần xử lý return</td> |
|
|
<td>Thiếu hàng để giao, reroute</td> |
|
|
<td>Inventory loss, Delivery reliability</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="font-semibold">Equipment failure</td> |
|
|
<td>Forklift/robot hỏng, chậm picking</td> |
|
|
<td>Delay vận chuyển tại kho</td> |
|
|
<td>Throughput, Lead time</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="font-semibold">Extreme demand spike</td> |
|
|
<td>Đột biến mùa vụ, khối lượng lớn</td> |
|
|
<td>Over-utilization, need multi-truck</td> |
|
|
<td>Cost, Delay, Resource allocation</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mt-16"> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="bg-blue-100 p-6 rounded-full inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="monitor" class="text-blue-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Real-time dashboard</h3> |
|
|
<p class="text-gray-600">Theo dõi trạng thái kho, phương tiện, đơn hàng trong thời gian thực</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="bg-green-100 p-6 rounded-full inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="compare" class="text-green-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Scenario comparison</h3> |
|
|
<p class="text-gray-600">So sánh nhiều kịch bản (baseline vs. what-if) để ra quyết định</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="bg-purple-100 p-6 rounded-full inline-flex items-center justify-center mb-6"> |
|
|
<i data-feather="lightbulb" class="text-purple-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">Decision support</h3> |
|
|
<p class="text-gray-600">Đề xuất thêm xe, thay đổi tuyến, bổ sung nhân lực, tăng storage</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 hero-bg"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<div data-aos="fade-up"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Bắt đầu Mô phỏng Digital Twin</h2> |
|
|
<p class="text-xl text-white opacity-90 mb-8 max-w-2xl mx-auto"> |
|
|
Tối ưu hóa logistics của bạn với công nghệ mô phỏng tiên tiến nhất |
|
|
</p> |
|
|
<a href="simulation.html" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105 inline-block"> |
|
|
Liên hệ Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center"> |
|
|
<p>© 2024 Digital Twin Simulation Platform. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 1000, |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x0f172a |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
