Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower
Running

App Files Community
Ultronprime commited on
Commit
33261a8
·
verified ·
1 Parent(s): 7f9ef03

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +68 -24
index.html CHANGED
@@ -17,14 +17,13 @@
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
-
21
- /* Toast Notification Styles */
22
  #toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
23
  .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; }
24
  .toast.show { opacity: 1; transform: translateX(0); }
25
  .toast-success { background-color: #28a745; }
26
  .toast-error { background-color: #dc3545; }
27
  .toast-info { background-color: #17a2b8; }
 
28
  </style>
29
  </head>
30
  <body class="min-h-screen">
@@ -42,22 +41,12 @@
42
  <!-- Left Column: Action Panel -->
43
  <div class="lg:col-span-1">
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
- <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Yagi-Uda Model 5">
48
- <h3 class="font-medium text-gray-700 mb-3">Yagi-Uda Model 5</h3>
49
- <div class="flex items-center space-x-3">
50
- <input type="number" min="0" class="input-number w-20 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0">
51
- <button class="update-btn px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Produce</button>
52
- </div>
53
- </div>
54
- <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Basic Dipole Antenna">
55
- <h3 class="font-medium text-gray-700 mb-3">Basic Dipole Antenna</h3>
56
- <div class="flex items-center space-x-3">
57
- <input type="number" min="0" class="input-number w-20 px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0">
58
- <button class="update-btn px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Produce</button>
59
- </div>
60
- </div>
61
  </div>
62
  </div>
63
  </div>
@@ -65,7 +54,10 @@
65
  <!-- Middle Column: Inventory Dashboard -->
66
  <div class="lg:col-span-1">
67
  <div class="bg-white rounded-lg shadow-md p-6">
68
- <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
 
 
 
69
  <div id="material-cards" class="grid grid-cols-1 gap-4">
70
  <!-- Material cards are now dynamically generated -->
71
  </div>
@@ -77,7 +69,6 @@
77
  <div class="bg-white rounded-lg shadow-md p-6">
78
  <h2 class="text-lg font-semibold mb-4">Production Log</h2>
79
  <ul id="production-log-list" class="space-y-3 h-96 overflow-y-auto pr-2">
80
- <!-- Log entries will be populated here -->
81
  <li class="text-gray-500 text-center pt-4">No production recorded yet.</li>
82
  </ul>
83
  </div>
@@ -85,15 +76,68 @@
85
  </div>
86
  </main>
87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  <!-- Reset Confirmation Modal -->
89
- <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
90
  <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl">
91
  <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3>
92
  <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p>
93
- <div class="flex justify-end space-x-2">
94
- <button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
95
- <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>
96
- </div>
97
  </div>
98
  </div>
99
 
 
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
+ .modal { transition: opacity 0.25s ease; }
27
  </style>
28
  </head>
29
  <body class="min-h-screen">
 
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>
 
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>
 
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>
 
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