Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower2
Running

App Files Community
Ultronprime commited on
Commit
5e01765
·
verified ·
1 Parent(s): ff2740b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -36
index.html CHANGED
@@ -7,25 +7,7 @@
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
- <style>
11
- body { font-family: 'Inter', sans-serif; background-color: #F7F8FC; color: #2C3E50; }
12
- .status-ok { border-left-color: #2ECC71; }
13
- .status-warning { border-left-color: #F1C40F; }
14
- .status-critical { border-left-color: #E74C3C; }
15
- .progress-ok { background-color: #2ECC71; }
16
- .progress-warning { background-color: #F1C40F; }
17
- .progress-critical { background-color: #E74C3C; }
18
- .input-number::-webkit-inner-spin-button, .input-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
19
- .input-number { -moz-appearance: textfield; }
20
- #toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
21
- .toast { padding: 12px 16px; border-radius: 6px; color: white; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; }
22
- .toast.show { opacity: 1; transform: translateX(0); }
23
- .toast-success { background-color: #28a745; }
24
- .toast-error { background-color: #dc3545; }
25
- .toast-info { background-color: #17a2b8; }
26
- .icon-btn { color: #9ca3af; cursor: pointer; transition: color 0.2s; }
27
- .icon-btn:hover { color: #3b82f6; }
28
- </style>
29
  </head>
30
  <body class="min-h-screen">
31
  <!-- Header -->
@@ -43,44 +25,40 @@
43
  <div class="lg:col-span-1"> <!-- Production Input -->
44
  <div class="bg-white rounded-lg shadow-md p-6">
45
  <h2 class="text-lg font-semibold mb-4">Production Input</h2>
46
- <div id="product-cards" class="space-y-4">
47
- <!-- Product cards are dynamically generated -->
48
- </div>
49
  </div>
50
  </div>
51
  <div class="lg:col-span-1"> <!-- Material Inventory -->
52
  <div class="bg-white rounded-lg shadow-md p-6">
53
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
54
- <div id="material-cards" class="grid grid-cols-1 gap-4">
55
- <!-- Material cards are dynamically generated -->
56
- </div>
57
  </div>
58
  </div>
59
  <div class="lg:col-span-1"> <!-- Production Log -->
60
  <div class="bg-white rounded-lg shadow-md p-6">
61
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
62
- <ul id="production-log-list" class="space-y-3 h-96 overflow-y-auto pr-2">
63
- <!-- Log entries are dynamically generated -->
64
- </ul>
65
  </div>
66
  </div>
67
  </div>
68
  <!-- Bottom Row for Analytics & Actions -->
69
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
70
  <div class="lg:col-span-1"> <!-- Factory Analytics -->
71
  <div class="bg-white rounded-lg shadow-md p-6">
72
  <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2>
73
- <div id="analytics-content" class="space-y-3">
74
- <!-- Analytics are dynamically generated -->
75
- </div>
76
  </div>
77
  </div>
78
  <div class="lg:col-span-1"> <!-- Re-order List -->
79
  <div class="bg-white rounded-lg shadow-md p-6">
80
  <h2 class="text-lg font-semibold mb-4">Re-order List</h2>
81
- <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2">
82
- <!-- Re-order items are dynamically generated -->
83
- </ul>
 
 
 
 
84
  </div>
85
  </div>
86
  </div>
@@ -101,6 +79,7 @@
101
  <!-- Toast Container -->
102
  <div id="toast-container"></div>
103
 
104
- <script src="app.js" type="module" defer></script>
 
105
  </body>
106
  </html>
 
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 -->
 
25
  <div class="lg:col-span-1"> <!-- Production Input -->
26
  <div class="bg-white rounded-lg shadow-md p-6">
27
  <h2 class="text-lg font-semibold mb-4">Production Input</h2>
28
+ <div id="product-cards" class="space-y-4"></div>
 
 
29
  </div>
30
  </div>
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>
49
+ <div id="analytics-content" class="space-y-3"></div>
 
 
50
  </div>
51
  </div>
52
  <div class="lg:col-span-1"> <!-- Re-order List -->
53
  <div class="bg-white rounded-lg shadow-md p-6">
54
  <h2 class="text-lg font-semibold mb-4">Re-order List</h2>
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>
 
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>