| <!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> |
