|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mô phỏng Digital Twin - 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/chart.js"></script> |
|
|
<style> |
|
|
.simulation-bg { |
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|
|
} |
|
|
.control-panel { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.metric-display { |
|
|
background: linear-gradient(145deg, #ffffff, #f1f5f9); |
|
|
border-radius: 8px; |
|
|
border: 1px solid #e2e8f0; |
|
|
} |
|
|
.simulation-visual { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
|
min-height: 400px; |
|
|
} |
|
|
.scenario-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
.scenario-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.scenario-card.selected { |
|
|
border-color: #3b82f6; |
|
|
background: #eff6ff; |
|
|
} |
|
|
.slider-track { |
|
|
background: #e2e8f0; |
|
|
height: 6px; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.slider-thumb { |
|
|
background: #3b82f6; |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="index.html" class="text-xl font-bold text-blue-600">Digital Twin Platform</a> |
|
|
<div class="flex space-x-8"> |
|
|
<a href="index.html" class="text-gray-600 hover:text-blue-600">Trang chủ</a> |
|
|
<a href="simulation.html" class="text-blue-600 font-semibold">Mô phỏng</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="simulation-bg py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center" data-aos="fade-up"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-4">Bắt đầu Mô phỏng Digital Twin</h1> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Chọn loại mô phỏng và thiết lập các tham số để bắt đầu phân tích hệ thống logistics của bạn |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16"> |
|
|
|
|
|
<div class="control-panel 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> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Warehouse Simulation</h2> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Dung lượng kho (m³)</label> |
|
|
<div class="slider-track relative"> |
|
|
<div class="slider-thumb absolute top-1/2 transform -translate-y-1/2" style="left: 70%;"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-600 mt-1"> |
|
|
<span>1,000</span> |
|
|
<span>5,000</span> |
|
|
<span>10,000</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Số lượng SKU</label> |
|
|
<input type="number" value="250" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Tốc độ xử lý (đơn/giờ)</label> |
|
|
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>Thấp (50 đơn/giờ)</option> |
|
|
<option selected>Trung bình (100 đơn/giờ)</option> |
|
|
<option>Cao (200 đơn/giờ)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Bắt đầu Mô phỏng Kho |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="control-panel 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> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Fleet Multi-Modal Simulation</h2> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Số lượng phương tiện</label> |
|
|
<div class="slider-track relative"> |
|
|
<div class="slider-thumb absolute top-1/2 transform -translate-y-1/2" style="left: 40%;"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-600 mt-1"> |
|
|
<span>5</span> |
|
|
<span>20</span> |
|
|
<span>50</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Loại phương tiện chính</label> |
|
|
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>Xe tải nhỏ (< 5T)</option> |
|
|
<option selected>Xe tải trung (5-15T)</option> |
|
|
<option>Xe tải lớn (>15T)</option> |
|
|
<option>Đa phương thức</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Khu vực hoạt động</label> |
|
|
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>Nội thành</option> |
|
|
<option selected>Liên tỉnh</option> |
|
|
<option>Quốc tế</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Bắt đầu Mô phỏng Fleet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="control-panel p-8" data-aos="fade-up"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Kịch bản "What-if"</h2> |
|
|
<p class="text-gray-600 mb-8">Chọn kịch bản giả lập để phân tích tác động đến hệ thống</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-orange-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="trending-up" class="text-orange-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Tăng volume 20-50%</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Phân tích tác động khi lượng hàng tăng đột biến</p> |
|
|
</div> |
|
|
|
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="clock" class="text-red-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Delay in supply</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Đánh giá ảnh hưởng của delay trong chuỗi cung ứng</p> |
|
|
</div> |
|
|
|
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="alert-triangle" class="text-yellow-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Equipment failure</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Mô phỏng thiết bị hỏng và tác động đến operations</p> |
|
|
</div> |
|
|
|
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="zap" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Extreme demand spike</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Phân tích đột biến nhu cầu theo mùa vụ</p> |
|
|
</div> |
|
|
|
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-pink-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="package" class="text-pink-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Damage / spoilage</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Đánh giá tổn thất hàng hóa và xử lý return</p> |
|
|
</div> |
|
|
|
|
|
<div class="scenario-card p-6 rounded-lg border cursor-pointer"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i data-feather="settings" class="text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Custom scenario</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Tạo kịch bản tùy chỉnh theo yêu cầu</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button class="bg-gray-800 hover:bg-gray-900 text-white font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
Chạy So sánh Kịch bản |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-12" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Trực quan hóa Mô phỏng</h2> |
|
|
<p class="text-lg text-gray-600">Theo dõi kết quả mô phỏng trong thời gian thực</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
<div class="metric-display p-6" data-aos="fade-right"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-semibold text-gray-800">Warehouse Utilization</h3> |
|
|
<span class="text-2xl font-bold text-blue-600">78%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="metric-display p-6" data-aos="fade-right" data-aos-delay="100"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-semibold text-gray-800">On-time Delivery</h3> |
|
|
<span class="text-2xl font-bold text-green-600">92%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="metric-display p-6" data-aos="fade-right" data-aos-delay="200"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-semibold text-gray-800">Cost per Shipment</h3> |
|
|
<span class="text-2xl font-bold text-purple-600">₫350k</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600">-5% so với baseline</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 simulation-visual p-8" data-aos="fade-left"> |
|
|
<div class="text-center mb-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Real-time Operations Map</h3> |
|
|
</div> |
|
|
<div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center"> |
|
|
<div class="text-center text-gray-500"> |
|
|
<i data-feather="map" class="w-12 h-12 mx-auto mb-2"></i> |
|
|
<p>Map visualization will appear here during simulation</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-4 mt-6"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-100 p-3 rounded-full inline-flex mb-2"> |
|
|
<i data-feather="package" class="text-blue-600"></i> |
|
|
</div> |
|
|
<p class="text-sm font-semibold">15 Đơn hàng</p> |
|
|
<p class="text-xs text-gray-600">Đang xử lý</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-green-100 p-3 rounded-full inline-flex mb-2"> |
|
|
<i data-feather="truck" class="text-green-600"></i> |
|
|
</div> |
|
|
<p class="text-sm font-semibold">8 Phương tiện</p> |
|
|
<p class="text-xs text-gray-600">Đang hoạt động</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-orange-100 p-3 rounded-full inline-flex mb-2"> |
|
|
<i data-feather="alert-circle" class="text-orange-600"></i> |
|
|
</div> |
|
|
<p class="text-sm font-semibold">2 Cảnh báo</p> |
|
|
<p class="text-xs text-gray-600">Cần xử lý</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="control-panel p-8 max-w-4xl mx-auto" data-aos="fade-up"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Điều khiển Mô phỏng</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-4 gap-6 mb-8"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="play" class="mr-2"></i> |
|
|
Bắt đầu |
|
|
</button> |
|
|
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="pause" class="mr-2"></i> |
|
|
Tạm dừng |
|
|
</button> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="square" class="mr-2"></i> |
|
|
Dừng |
|
|
</button> |
|
|
<button class="bg-gray-600 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i data-feather="rotate-cw" class="mr-2"></i> |
|
|
Reset |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
Xuất Báo cáo |
|
|
</button> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300"> |
|
|
Lưu Kịch bản |
|
|
</button> |
|
|
</div> |
|
|
</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 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.scenario-card').forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
document.querySelectorAll('.scenario-card').forEach(c => c.classList.remove('selected')); |
|
|
this.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
