Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower
Running

App Files Community
Ultronprime commited on
Commit
62ee196
·
verified ·
1 Parent(s): 169947a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -76
index.html CHANGED
@@ -23,7 +23,8 @@
23
  .toast-success { background-color: #28a745; }
24
  .toast-error { background-color: #dc3545; }
25
  .toast-info { background-color: #17a2b8; }
26
- .modal { transition: opacity 0.25s ease; }
 
27
  </style>
28
  </head>
29
  <body class="min-h-screen">
@@ -37,113 +38,69 @@
37
 
38
  <!-- Main Content -->
39
  <main class="container mx-auto px-4 pt-20 pb-8">
 
40
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
41
- <!-- Left Column: Action Panel -->
42
- <div class="lg:col-span-1">
43
  <div class="bg-white rounded-lg shadow-md p-6">
44
- <div class="flex justify-between items-center mb-4">
45
- <h2 class="text-lg font-semibold">Production Input</h2>
46
- <button id="add-product-btn" class="text-sm text-blue-500 hover:text-blue-700 font-medium"><i class="fas fa-plus-circle mr-1"></i>Add Product</button>
47
- </div>
48
  <div id="product-cards" class="space-y-4">
49
- <!-- Product cards are now dynamically generated -->
50
  </div>
51
  </div>
52
  </div>
53
-
54
- <!-- Middle Column: Inventory Dashboard -->
55
- <div class="lg:col-span-1">
56
  <div class="bg-white rounded-lg shadow-md p-6">
57
- <div class="flex justify-between items-center mb-4">
58
- <h2 class="text-lg font-semibold">Material Inventory</h2>
59
- <button id="add-material-btn" class="text-sm text-blue-500 hover:text-blue-700 font-medium"><i class="fas fa-plus-circle mr-1"></i>Add Material</button>
60
- </div>
61
  <div id="material-cards" class="grid grid-cols-1 gap-4">
62
- <!-- Material cards are now dynamically generated -->
63
  </div>
64
  </div>
65
  </div>
66
-
67
- <!-- Right Column: Production Log -->
68
- <div class="lg:col-span-1">
69
  <div class="bg-white rounded-lg shadow-md p-6">
70
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
71
  <ul id="production-log-list" class="space-y-3 h-96 overflow-y-auto pr-2">
72
- <li class="text-gray-500 text-center pt-4">No production recorded yet.</li>
73
  </ul>
74
  </div>
75
  </div>
76
  </div>
77
- </main>
78
-
79
- <!-- MODALS SECTION -->
80
-
81
- <!-- Add Material Modal -->
82
- <div id="add-material-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
83
- <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4 shadow-xl">
84
- <h3 class="text-lg font-semibold mb-4">Add New Material</h3>
85
- <form id="add-material-form" class="space-y-4">
86
- <div>
87
- <label for="material-name" class="block text-sm font-medium text-gray-700">Material Name</label>
88
- <input type="text" id="material-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500">
89
- </div>
90
- <div>
91
- <label for="material-unit" class="block text-sm font-medium text-gray-700">Unit (e.g., meters, units)</label>
92
- <input type="text" id="material-unit" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500">
93
- </div>
94
- <div class="grid grid-cols-2 gap-4">
95
- <div>
96
- <label for="material-current-stock" class="block text-sm font-medium text-gray-700">Current Stock</label>
97
- <input type="number" id="material-current-stock" min="0" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500">
98
- </div>
99
- <div>
100
- <label for="material-max-stock" class="block text-sm font-medium text-gray-700">Maximum Stock</label>
101
- <input type="number" id="material-max-stock" min="0" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500">
102
- </div>
103
- </div>
104
- <div class="flex justify-end space-x-2 pt-2">
105
- <button type="button" class="cancel-modal-btn px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
106
- <button type="submit" class="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">Save Material</button>
107
- </div>
108
- </form>
109
- </div>
110
- </div>
111
-
112
- <!-- Add Product Modal -->
113
- <div id="add-product-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
114
- <div class="bg-white rounded-lg p-6 w-full max-w-lg mx-4 shadow-xl">
115
- <h3 class="text-lg font-semibold mb-4">Add New Product</h3>
116
- <form id="add-product-form" class="space-y-4">
117
- <div>
118
- <label for="product-name" class="block text-sm font-medium text-gray-700">Product Name</label>
119
- <input type="text" id="product-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500">
120
- </div>
121
- <div>
122
- <h4 class="text-sm font-medium text-gray-700">Recipe (Materials Required)</h4>
123
- <div id="recipe-builder" class="mt-2 space-y-2 max-h-60 overflow-y-auto border p-3 rounded-md bg-gray-50">
124
- <!-- Recipe inputs will be dynamically generated here -->
125
  </div>
126
  </div>
127
- <div class="flex justify-end space-x-2 pt-2">
128
- <button type="button" class="cancel-modal-btn px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
129
- <button type="submit" class="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">Save Product</button>
 
 
 
 
130
  </div>
131
- </form>
132
  </div>
133
- </div>
134
 
135
  <!-- Reset Confirmation Modal -->
136
- <div id="reset-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
137
  <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl">
138
  <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3>
139
  <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p>
140
- <div class="flex justify-end space-x-2"><button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button><button id="confirm-reset-btn" class="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600">Reset Data</button></div>
 
 
 
141
  </div>
142
  </div>
143
 
144
  <!-- Toast Container -->
145
  <div id="toast-container"></div>
146
 
147
- <script src="app.js" defer></script>
148
  </body>
149
  </html>
 
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">
 
38
 
39
  <!-- Main Content -->
40
  <main class="container mx-auto px-4 pt-20 pb-8">
41
+ <!-- Top Row -->
42
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
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>
87
+ </main>
88
 
89
  <!-- Reset Confirmation Modal -->
90
+ <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
91
  <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl">
92
  <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3>
93
  <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p>
94
+ <div class="flex justify-end space-x-2">
95
+ <button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
96
+ <button id="confirm-reset-btn" class="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600">Reset Data</button>
97
+ </div>
98
  </div>
99
  </div>
100
 
101
  <!-- Toast Container -->
102
  <div id="toast-container"></div>
103
 
104
+ <script src="app.js" type="module" defer></script>
105
  </body>
106
  </html>