Update index.html

index.html

@@ -14,13 +14,13 @@
             color: #2C3E50;
         }
         .status-ok {
-            border-left-color: #2ECC71;
+            border-left-color: #2ECC71; /* green */
         }
         .status-warning {
-            border-left-color: #F1C40F;
+            border-left-color: #F1C40F; /* yellow */
         }
         .status-critical {
-            border-left-color: #E74C3C;
+            border-left-color: #E74C3C; /* red */
         }
         .progress-ok {
             background-color: #2ECC71;
@@ -49,7 +49,7 @@
                 <i class="fas fa-satellite-dish mr-2 text-blue-500"></i>
                 Antenna Stock Tracker
             </h1>
-            <button id="reset-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">
+            <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>
         </div>
@@ -63,7 +63,8 @@
                 <div class="bg-white rounded-lg shadow-md p-6">
                     <h2 class="text-lg font-semibold mb-4">Production Input</h2>
                     <div id="product-cards" class="space-y-4">
-                        <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100">
+                        <!-- Product cards will be dynamically populated or targeted -->
+                        <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Yagi-Uda Model 5">
                             <h3 class="font-medium text-gray-700 mb-3">Yagi-Uda Model 5</h3>
                             <div class="flex items-center space-x-3">
                                 <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">
@@ -72,7 +73,7 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100">
+                        <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Basic Dipole Antenna">
                             <h3 class="font-medium text-gray-700 mb-3">Basic Dipole Antenna</h3>
                             <div class="flex items-center space-x-3">
                                 <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">
@@ -90,44 +91,45 @@
                 <div class="bg-white rounded-lg shadow-md p-6">
                     <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
                     <div id="material-cards" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
+                        <!-- Material cards will be dynamically populated or targeted -->
+                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="5mm Copper Wire">
                             <div class="flex justify-between items-start mb-2">
                                 <h3 class="font-medium text-gray-700">5mm Copper Wire</h3>
-                                <span class="text-sm text-gray-500">meters</span>
+                                <span class="text-sm text-gray-500 unit">meters</span>
                             </div>
-                            <div class="text-2xl font-bold mb-4">500</div>
+                            <div class="text-2xl font-bold mb-4 current-stock">0</div>
                             <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
+                                <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
                             </div>
                         </div>
-                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
+                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="RG-58 Coaxial Cable">
                             <div class="flex justify-between items-start mb-2">
                                 <h3 class="font-medium text-gray-700">RG-58 Coaxial Cable</h3>
-                                <span class="text-sm text-gray-500">meters</span>
+                                <span class="text-sm text-gray-500 unit">meters</span>
                             </div>
-                            <div class="text-2xl font-bold mb-4">200</div>
+                            <div class="text-2xl font-bold mb-4 current-stock">0</div>
                             <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
+                                <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
                             </div>
                         </div>
-                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
+                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="N-Type Connector">
                             <div class="flex justify-between items-start mb-2">
                                 <h3 class="font-medium text-gray-700">N-Type Connector</h3>
-                                <span class="text-sm text-gray-500">units</span>
+                                <span class="text-sm text-gray-500 unit">units</span>
                             </div>
-                            <div class="text-2xl font-bold mb-4">1000</div>
+                            <div class="text-2xl font-bold mb-4 current-stock">0</div>
                             <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
+                                <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
                             </div>
                         </div>
-                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
+                        <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="Plastic Insulator">
                             <div class="flex justify-between items-start mb-2">
                                 <h3 class="font-medium text-gray-700">Plastic Insulator</h3>
-                                <span class="text-sm text-gray-500">units</span>
+                                <span class="text-sm text-gray-500 unit">units</span>
                             </div>
-                            <div class="text-2xl font-bold mb-4">4000</div>
+                            <div class="text-2xl font-bold mb-4 current-stock">0</div>
                             <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
+                                <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
                             </div>
                         </div>
                     </div>
@@ -138,7 +140,16 @@
 
     <!-- Reset Confirmation Modal -->
     <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
-            <h3 class="text-lg font-semib{"ok":false,"message":"terminated"}
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ultronprime/win-superpower" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl">
+            <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3>
+            <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p>
+            <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>
+        </div>
+    </div>
+    
+    <script src="app.js" defer></script>
+</body>
 </html>