Hugging Face's logo

Spaces:
Ultronprime
/
win-superpower
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +41 -91
index.html CHANGED
@@ -8,133 +8,80 @@
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 {
12
- font-family: 'Inter', sans-serif;
13
- background-color: #F7F8FC;
14
- color: #2C3E50;
15
- }
16
- .status-ok {
17
- border-left-color: #2ECC71; /* green */
18
- }
19
- .status-warning {
20
- border-left-color: #F1C40F; /* yellow */
21
- }
22
- .status-critical {
23
- border-left-color: #E74C3C; /* red */
24
- }
25
- .progress-ok {
26
- background-color: #2ECC71;
27
- }
28
- .progress-warning {
29
- background-color: #F1C40F;
30
- }
31
- .progress-critical {
32
- background-color: #E74C3C;
33
- }
34
- .input-number::-webkit-inner-spin-button,
35
- .input-number::-webkit-outer-spin-button {
36
- -webkit-appearance: none;
37
- margin: 0;
38
- }
39
- .input-number {
40
- -moz-appearance: textfield;
41
- }
42
  </style>
43
  </head>
44
  <body class="min-h-screen">
45
  <!-- Header -->
46
  <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
47
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
48
- <h1 class="text-xl font-bold text-gray-800 flex items-center">
49
- <i class="fas fa-satellite-dish mr-2 text-blue-500"></i>
50
- Antenna Stock Tracker
51
- </h1>
52
- <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">
53
- <i class="fas fa-redo mr-1"></i> Reset Data
54
- </button>
55
  </div>
56
  </header>
57
 
58
  <!-- Main Content -->
59
  <main class="container mx-auto px-4 pt-20 pb-8">
60
- <div class="flex flex-col lg:flex-row gap-6">
61
  <!-- Left Column: Action Panel -->
62
- <div class="lg:w-1/2">
63
  <div class="bg-white rounded-lg shadow-md p-6">
64
  <h2 class="text-lg font-semibold mb-4">Production Input</h2>
65
  <div id="product-cards" class="space-y-4">
66
- <!-- Product cards will be dynamically populated or targeted -->
67
  <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Yagi-Uda Model 5">
68
  <h3 class="font-medium text-gray-700 mb-3">Yagi-Uda Model 5</h3>
69
  <div class="flex items-center space-x-3">
70
  <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">
71
- <button class="update-btn px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
72
- Update Stock
73
- </button>
74
  </div>
75
  </div>
76
  <div class="product-card bg-white rounded-lg shadow p-4 border border-gray-100" data-product-name="Basic Dipole Antenna">
77
  <h3 class="font-medium text-gray-700 mb-3">Basic Dipole Antenna</h3>
78
  <div class="flex items-center space-x-3">
79
  <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">
80
- <button class="update-btn px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
81
- Update Stock
82
- </button>
83
  </div>
84
  </div>
85
  </div>
86
  </div>
87
  </div>
88
 
89
- <!-- Right Column: Inventory Dashboard -->
90
- <div class="lg:w-1/2">
91
  <div class="bg-white rounded-lg shadow-md p-6">
92
  <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
93
- <div id="material-cards" class="grid grid-cols-1 md:grid-cols-2 gap-4">
94
- <!-- Material cards will be dynamically populated or targeted -->
95
- <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="5mm Copper Wire">
96
- <div class="flex justify-between items-start mb-2">
97
- <h3 class="font-medium text-gray-700">5mm Copper Wire</h3>
98
- <span class="text-sm text-gray-500 unit">meters</span>
99
- </div>
100
- <div class="text-2xl font-bold mb-4 current-stock">0</div>
101
- <div class="w-full bg-gray-200 rounded-full h-2.5">
102
- <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
103
- </div>
104
- </div>
105
- <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="RG-58 Coaxial Cable">
106
- <div class="flex justify-between items-start mb-2">
107
- <h3 class="font-medium text-gray-700">RG-58 Coaxial Cable</h3>
108
- <span class="text-sm text-gray-500 unit">meters</span>
109
- </div>
110
- <div class="text-2xl font-bold mb-4 current-stock">0</div>
111
- <div class="w-full bg-gray-200 rounded-full h-2.5">
112
- <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
113
- </div>
114
- </div>
115
- <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="N-Type Connector">
116
- <div class="flex justify-between items-start mb-2">
117
- <h3 class="font-medium text-gray-700">N-Type Connector</h3>
118
- <span class="text-sm text-gray-500 unit">units</span>
119
- </div>
120
- <div class="text-2xl font-bold mb-4 current-stock">0</div>
121
- <div class="w-full bg-gray-200 rounded-full h-2.5">
122
- <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
123
- </div>
124
- </div>
125
- <div class="material-card bg-white rounded-lg shadow p-4 border-l-4" data-material-name="Plastic Insulator">
126
- <div class="flex justify-between items-start mb-2">
127
- <h3 class="font-medium text-gray-700">Plastic Insulator</h3>
128
- <span class="text-sm text-gray-500 unit">units</span>
129
- </div>
130
- <div class="text-2xl font-bold mb-4 current-stock">0</div>
131
- <div class="w-full bg-gray-200 rounded-full h-2.5">
132
- <div class="h-2.5 rounded-full progress-bar" style="width: 0%"></div>
133
- </div>
134
- </div>
135
  </div>
136
  </div>
137
  </div>
 
 
 
 
 
 
 
 
 
 
 
138
  </div>
139
  </main>
140
 
@@ -150,6 +97,9 @@
150
  </div>
151
  </div>
152
 
 
 
 
153
  <script src="app.js" defer></script>
154
  </body>
155
  </html>
 
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
+
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">
31
  <!-- Header -->
32
  <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
33
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
34
+ <h1 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-satellite-dish mr-2 text-blue-500"></i>Antenna Stock Tracker</h1>
35
+ <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>
 
 
 
 
 
36
  </div>
37
  </header>
38
 
39
  <!-- Main Content -->
40
  <main class="container mx-auto px-4 pt-20 pb-8">
41
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
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>
64
 
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>
72
  </div>
73
  </div>
74
+
75
+ <!-- Right Column: Production Log -->
76
+ <div class="lg:col-span-1">
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>
84
+ </div>
85
  </div>
86
  </main>
87
 
 
97
  </div>
98
  </div>
99
 
100
+ <!-- Toast Container -->
101
+ <div id="toast-container"></div>
102
+
103
  <script src="app.js" defer></script>
104
  </body>
105
  </html>