Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower
Running

App Files Community
Ultronprime commited on
Commit
6b7c4a6
·
verified ·
1 Parent(s): 8b57595

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +26 -12
index.html CHANGED
@@ -3,23 +3,44 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Antenna Stock Tracker</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
10
  <link rel="stylesheet" href="style.css">
11
  </head>
12
  <body class="min-h-screen">
13
  <!-- Header -->
14
  <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
15
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
16
- <h1 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-satellite-dish mr-2 text-blue-500"></i>Antenna Stock Tracker</h1>
17
  <button id="show-reset-modal-btn" class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-600 hover:text-red-500 hover:border-red-300 transition-colors"><i class="fas fa-redo mr-1"></i> Reset Data</button>
18
  </div>
19
  </header>
20
 
21
  <!-- Main Content -->
22
  <main class="container mx-auto px-4 pt-20 pb-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  <!-- Top Row -->
24
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
25
  <div class="lg:col-span-1"> <!-- Production Input -->
@@ -31,18 +52,18 @@
31
  <div class="lg:col-span-1"> <!-- Material Inventory -->
32
  <div class="bg-white rounded-lg shadow-md p-6">
33
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
34
- <div id="material-cards" class="grid grid-cols-1 gap-4"></div>
35
  </div>
36
  </div>
37
  <div class="lg:col-span-1"> <!-- Production Log -->
38
  <div class="bg-white rounded-lg shadow-md p-6">
39
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
40
- <ul id="production-log-list" class="space-y-3 h-96 overflow-y-auto pr-2"></ul>
41
  </div>
42
  </div>
43
  </div>
44
  <!-- Bottom Row for Analytics & Actions -->
45
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
46
  <div class="lg:col-span-1"> <!-- Factory Analytics -->
47
  <div class="bg-white rounded-lg shadow-md p-6">
48
  <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2>
@@ -55,12 +76,6 @@
55
  <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2"></ul>
56
  </div>
57
  </div>
58
- <div class="lg:col-span-1"> <!-- Daily Production Summary -->
59
- <div class="bg-white rounded-lg shadow-md p-6">
60
- <h2 class="text-lg font-semibold mb-4">Daily Production Summary</h2>
61
- <div id="daily-production-summary" class="space-y-3 h-48 overflow-y-auto pr-2"></div>
62
- </div>
63
- </div>
64
  </div>
65
  </main>
66
 
@@ -79,7 +94,6 @@
79
  <!-- Toast Container -->
80
  <div id="toast-container"></div>
81
 
82
- <!-- MODIFIED SCRIPT TAG -->
83
  <script src="main.js" type="module" defer></script>
84
  </body>
85
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Win Super Power - Factory Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <!-- NEW: Chart.js Library -->
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
  <link rel="stylesheet" href="style.css">
13
  </head>
14
  <body class="min-h-screen">
15
  <!-- Header -->
16
  <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
17
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
18
+ <h1 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-satellite-dish mr-2 text-blue-500"></i>Win Super Power - Factory Dashboard</h1>
19
  <button id="show-reset-modal-btn" class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-600 hover:text-red-500 hover:border-red-300 transition-colors"><i class="fas fa-redo mr-1"></i> Reset Data</button>
20
  </div>
21
  </header>
22
 
23
  <!-- Main Content -->
24
  <main class="container mx-auto px-4 pt-20 pb-8">
25
+ <!-- NEW: KPI Row -->
26
+ <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
27
+ <!-- KPI Cards will be rendered here by ui.js -->
28
+ </div>
29
+
30
+ <!-- NEW: Chart Row -->
31
+ <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
32
+ <div class="lg:col-span-3 bg-white rounded-lg shadow-md p-6">
33
+ <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2>
34
+ <canvas id="production-history-chart"></canvas>
35
+ </div>
36
+ <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 flex flex-col items-center">
37
+ <h2 class="text-lg font-semibold mb-4">Inventory Status</h2>
38
+ <div class="w-full max-w-xs">
39
+ <canvas id="inventory-status-chart"></canvas>
40
+ </div>
41
+ </div>
42
+ </div>
43
+
44
  <!-- Top Row -->
45
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
46
  <div class="lg:col-span-1"> <!-- Production Input -->
 
52
  <div class="lg:col-span-1"> <!-- Material Inventory -->
53
  <div class="bg-white rounded-lg shadow-md p-6">
54
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
55
+ <div id="material-cards" class="grid grid-cols-1 gap-4 h-[500px] overflow-y-auto pr-2"></div>
56
  </div>
57
  </div>
58
  <div class="lg:col-span-1"> <!-- Production Log -->
59
  <div class="bg-white rounded-lg shadow-md p-6">
60
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
61
+ <ul id="production-log-list" class="space-y-3 h-[500px] overflow-y-auto pr-2"></ul>
62
  </div>
63
  </div>
64
  </div>
65
  <!-- Bottom Row for Analytics & Actions -->
66
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
67
  <div class="lg:col-span-1"> <!-- Factory Analytics -->
68
  <div class="bg-white rounded-lg shadow-md p-6">
69
  <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2>
 
76
  <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2"></ul>
77
  </div>
78
  </div>
 
 
 
 
 
 
79
  </div>
80
  </main>
81
 
 
94
  <!-- Toast Container -->
95
  <div id="toast-container"></div>
96
 
 
97
  <script src="main.js" type="module" defer></script>
98
  </body>
99
  </html>