Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower
Running

App Files Community
Ultronprime commited on
Commit
c3677f5
·
verified ·
1 Parent(s): 5676853

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +16 -21
index.html CHANGED
@@ -7,20 +7,19 @@
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
- <!-- 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
  <div class="flex items-center gap-4">
20
- <button id="show-reports-modal-btn" class="px-3 py-1 text-sm border border-blue-400 rounded text-blue-600 bg-blue-50 hover:bg-blue-100 transition-colors">
21
  <i class="fas fa-file-alt mr-1"></i> Reports
22
  </button>
23
- <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">
24
  <i class="fas fa-redo mr-1"></i> Reset Data
25
  </button>
26
  </div>
@@ -28,42 +27,38 @@
28
  </header>
29
 
30
  <!-- Main Content -->
31
- <main class="container mx-auto px-4 pt-20 pb-8">
32
  <!-- KPI Row -->
33
- <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
34
- <!-- KPI Cards will be rendered here by ui.js -->
35
- </div>
36
 
37
  <!-- Chart Row -->
38
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
39
- <div class="lg:col-span-3 bg-white rounded-lg shadow-md p-6">
40
  <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2>
41
  <canvas id="production-history-chart"></canvas>
42
  </div>
43
- <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 flex flex-col items-center">
44
  <h2 class="text-lg font-semibold mb-4">Inventory Status</h2>
45
- <div class="w-full max-w-xs">
46
- <canvas id="inventory-status-chart"></canvas>
47
- </div>
48
  </div>
49
  </div>
50
 
51
  <!-- Main Data Row -->
52
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
53
  <div class="lg:col-span-1"> <!-- Production Input -->
54
- <div class="bg-white rounded-lg shadow-md p-6">
55
  <h2 class="text-lg font-semibold mb-4">Production Input</h2>
56
  <div id="product-cards" class="space-y-4"></div>
57
  </div>
58
  </div>
59
  <div class="lg:col-span-1"> <!-- Material Inventory -->
60
- <div class="bg-white rounded-lg shadow-md p-6">
61
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
62
  <div id="material-cards" class="grid grid-cols-1 gap-4 overflow-y-auto pr-2" style="max-height: 500px;"></div>
63
  </div>
64
  </div>
65
  <div class="lg:col-span-1"> <!-- Production Log -->
66
- <div class="bg-white rounded-lg shadow-md p-6">
67
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
68
  <ul id="production-log-list" class="space-y-3 overflow-y-auto pr-2" style="max-height: 500px;"></ul>
69
  </div>
@@ -72,13 +67,13 @@
72
  <!-- Bottom Row for Analytics & Actions -->
73
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
74
  <div class="lg:col-span-1"> <!-- Factory Analytics -->
75
- <div class="bg-white rounded-lg shadow-md p-6">
76
  <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2>
77
  <div id="analytics-content" class="space-y-3"></div>
78
  </div>
79
  </div>
80
  <div class="lg:col-span-1"> <!-- Re-order List -->
81
- <div class="bg-white rounded-lg shadow-md p-6">
82
  <h2 class="text-lg font-semibold mb-4">Re-order List</h2>
83
  <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2"></ul>
84
  </div>
@@ -87,8 +82,8 @@
87
  </main>
88
 
89
  <!-- Modals -->
90
- <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"></div>
91
- <div id="reports-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"></div>
92
 
93
  <div id="toast-container"></div>
94
  <script src="main.js" type="module" defer></script>
 
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
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
  <link rel="stylesheet" href="style.css">
12
  </head>
13
  <body class="min-h-screen">
14
  <!-- Header -->
15
+ <header class="header fixed top-0 left-0 right-0 z-10 border-b">
16
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
17
+ <h1 class="text-xl font-bold text-primary flex items-center"><i class="fas fa-satellite-dish mr-2 text-accent-blue"></i>Win Super Power - Factory Dashboard</h1>
18
  <div class="flex items-center gap-4">
19
+ <button id="show-reports-modal-btn" class="btn btn-secondary text-sm">
20
  <i class="fas fa-file-alt mr-1"></i> Reports
21
  </button>
22
+ <button id="show-reset-modal-btn" class="btn btn-danger text-sm">
23
  <i class="fas fa-redo mr-1"></i> Reset Data
24
  </button>
25
  </div>
 
27
  </header>
28
 
29
  <!-- Main Content -->
30
+ <main class="container mx-auto px-4 pt-20 pb-8 opacity-0 transition-opacity duration-500">
31
  <!-- KPI Row -->
32
+ <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"></div>
 
 
33
 
34
  <!-- Chart Row -->
35
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
36
+ <div class="lg:col-span-3 dashboard-card p-6">
37
  <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2>
38
  <canvas id="production-history-chart"></canvas>
39
  </div>
40
+ <div class="lg:col-span-2 dashboard-card p-6 flex flex-col items-center">
41
  <h2 class="text-lg font-semibold mb-4">Inventory Status</h2>
42
+ <div class="w-full max-w-xs"><canvas id="inventory-status-chart"></canvas></div>
 
 
43
  </div>
44
  </div>
45
 
46
  <!-- Main Data Row -->
47
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
48
  <div class="lg:col-span-1"> <!-- Production Input -->
49
+ <div class="dashboard-card p-6">
50
  <h2 class="text-lg font-semibold mb-4">Production Input</h2>
51
  <div id="product-cards" class="space-y-4"></div>
52
  </div>
53
  </div>
54
  <div class="lg:col-span-1"> <!-- Material Inventory -->
55
+ <div class="dashboard-card p-6">
56
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
57
  <div id="material-cards" class="grid grid-cols-1 gap-4 overflow-y-auto pr-2" style="max-height: 500px;"></div>
58
  </div>
59
  </div>
60
  <div class="lg:col-span-1"> <!-- Production Log -->
61
+ <div class="dashboard-card p-6">
62
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
63
  <ul id="production-log-list" class="space-y-3 overflow-y-auto pr-2" style="max-height: 500px;"></ul>
64
  </div>
 
67
  <!-- Bottom Row for Analytics & Actions -->
68
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
69
  <div class="lg:col-span-1"> <!-- Factory Analytics -->
70
+ <div class="dashboard-card p-6">
71
  <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2>
72
  <div id="analytics-content" class="space-y-3"></div>
73
  </div>
74
  </div>
75
  <div class="lg:col-span-1"> <!-- Re-order List -->
76
+ <div class="dashboard-card p-6">
77
  <h2 class="text-lg font-semibold mb-4">Re-order List</h2>
78
  <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2"></ul>
79
  </div>
 
82
  </main>
83
 
84
  <!-- Modals -->
85
+ <div id="reset-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div>
86
+ <div id="reports-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div>
87
 
88
  <div id="toast-container"></div>
89
  <script src="main.js" type="module" defer></script>