Add 1 files

index.html

@@ -159,6 +159,11 @@
             background-color: #FF6B35;
             border-radius: 6px;
         }
+        
+        .chart-container {
+            height: 150px;
+            position: relative;
+        }
     </style>
 </head>
 <body class="grid-pattern">
@@ -176,7 +181,7 @@
                 <div id="datetime" class="sci-fi-font text-lg"></div>
             </div>
             <div class="flex items-center space-x-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 neon-orange" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/ssvg" class="h-6 w-6 neon-orange" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                 </svg>
                 <div class="sci-fi-font text-lg">SYSTEM: <span class="text-green-400">NOMINAL</span></div>
@@ -383,10 +388,12 @@
             </h2>
             
             <!-- Sales Prediction -->
-            <div class="mb-6">
+            <div class="mb-4">
                 <h3 class="text-gray-400 uppercase text-sm mb-2">SALES PREDICTION</h3>
                 <div class="hover-3d bg-gray-900/50 rounded-lg p-3">
-                    <canvas id="salesChart" height="150"></canvas>
+                    <div class="chart-container">
+                        <canvas id="salesChart"></canvas>
+                    </div>
                     <div class="mt-2 sci-fi-font text-sm text-orange-500 flex items-center">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
@@ -396,9 +403,41 @@
                 </div>
             </div>
             
+            <!-- Traffic Prediction -->
+            <div class="mb-4">
+                <h3 class="text-gray-400 uppercase text-sm mb-2">TRAFFIC PREDICTION</h3>
+                <div class="hover-3d bg-gray-900/50 rounded-lg p-3">
+                    <div class="chart-container">
+                        <canvas id="trafficChart"></canvas>
+                    </div>
+                    <div class="mt-2 sci-fi-font text-sm text-orange-500 flex items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                        </svg>
+                        PEAK: 14:00-16:00 (28 VEHICLES)
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Fuel Consumption -->
+            <div class="mb-4">
+                <h3 class="text-gray-400 uppercase text-sm mb-2">FUEL CONSUMPTION</h3>
+                <div class="hover-3d bg-gray-900/50 rounded-lg p-3">
+                    <div class="chart-container">
+                        <canvas id="fuelChart"></canvas>
+                    </div>
+                    <div class="mt-2 sci-fi-font text-sm text-orange-500 flex items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                        </svg>
+                        DIESEL LEADING (58% OF SALES)
+                    </div>
+                </div>
+            </div>
+            
             <!-- Anomaly Detection -->
-            <div class="mb-6">
-                <h3 class="text-gray-400 uppercase text-sm mb-2">ANOMALY DETECTION</h3>
+            <div>
+                <h3 class="text-gray-400 uppercase text-sm mb-2">SYSTEM ALERTS</h3>
                 <div class="space-y-2">
                     <div class="hover-3d bg-gray-900/50 rounded-lg p-3 flex items-center neon-border">
                         <div class="hexagon bg-orange-500/20 w-8 h-8 flex items-center justify-center mr-3">
@@ -424,24 +463,6 @@
                     </div>
                 </div>
             </div>
-            
-            <!-- Weather Impact -->
-            <div>
-                <h3 class="text-gray-400 uppercase text-sm mb-2">WEATHER IMPACT</h3>
-                <div class="hover-3d bg-gray-900/50 rounded-lg p-3">
-                    <div class="flex items-center mb-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                        </svg>
-                        <div>
-                            <div class="sci-fi-font text-orange-500">SUNNY, 24°C</div>
-                            <div class="text-xs text-gray-400">FORECAST: CLEAR SKIES</div>
-                        </div>
-                    </div>
-                    <div class="sci-fi-font text-sm text-orange-500 mb-2">AI ANALYSIS:</div>
-                    <p class="text-xs text-gray-300">Optimal conditions for fuel sales. Expected increase in motorcycle traffic. Recommend staff prepare for higher volume between 14:00-16:00.</p>
-                </div>
-            </div>
         </div>
     </div>
     
@@ -548,6 +569,86 @@
             }
         });
         
+        // Create traffic chart
+        const trafficCtx = document.getElementById('trafficChart').getContext('2d');
+        const trafficChart = new Chart(trafficCtx, {
+            type: 'bar',
+            data: {
+                labels: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
+                datasets: [{
+                    label: 'Vehicles',
+                    data: [12, 18, 22, 28, 25, 20],
+                    backgroundColor: '#FF6B35',
+                    borderColor: '#FF6B35',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255,255,255,0.05)'
+                        },
+                        ticks: {
+                            color: '#707070',
+                            font: {
+                                family: 'Rajdhani',
+                                weight: 'bold'
+                            }
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255,255,white,0.05)'
+                        },
+                        ticks: {
+                            color: '#707070',
+                            font: {
+                                family: 'Rajdhani',
+                                weight: 'bold'
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Create fuel consumption chart
+        const fuelCtx = document.getElementById('fuelChart').getContext('2d');
+        const fuelChart = new Chart(fuelCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['95 OCT', 'DIESEL', '98 OCT', 'E85'],
+                datasets: [{
+                    data: [22, 58, 12, 8],
+                    backgroundColor: [
+                        '#FF6B35',
+                        '#FF8C42',
+                        '#FFA45C',
+                        '#FFB677'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                cutout: '70%'
+            }
+        });
+        
         // Add hover effects to pump status
         const pumps = document.querySelectorAll('.hexagon');
         pumps.forEach(pump => {