Hugging Face's logo

Spaces:
pennypacker
/
deepsite-mining
Running

App Files Community
pennypacker commited on
Commit
4c675f0
·
verified ·
1 Parent(s): cde096d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +729 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Mining
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepsite-mining
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,729 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IronCore Mining Enterprise Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ /* Legacy industrial styling */
12
+ .industrial-bg {
13
+ background-color: #e5e7eb;
14
+ background-image: linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
15
+ }
16
+ .industrial-header {
17
+ background: linear-gradient(to right, #1e40af, #1e3a8a);
18
+ border-bottom: 1px solid #9ca3af;
19
+ }
20
+ .industrial-sidebar {
21
+ background: linear-gradient(to bottom, #1f2937, #111827);
22
+ border-right: 1px solid #4b5563;
23
+ }
24
+ .industrial-card {
25
+ background: white;
26
+ border: 1px solid #d1d5db;
27
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
28
+ }
29
+ .industrial-button {
30
+ background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
31
+ border: 1px solid #9ca3af;
32
+ color: #374151;
33
+ }
34
+ .industrial-button:hover {
35
+ background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
36
+ }
37
+ .industrial-button-primary {
38
+ background: linear-gradient(to bottom, #2563eb, #1d4ed8);
39
+ border: 1px solid #1e40af;
40
+ color: white;
41
+ }
42
+ .industrial-button-primary:hover {
43
+ background: linear-gradient(to bottom, #1d4ed8, #1e40af);
44
+ }
45
+ .industrial-chart {
46
+ background: white;
47
+ border: 1px solid #d1d5db;
48
+ }
49
+ .status-indicator {
50
+ width: 12px;
51
+ height: 12px;
52
+ border-radius: 50%;
53
+ display: inline-block;
54
+ margin-right: 6px;
55
+ border: 1px solid rgba(0,0,0,0.1);
56
+ }
57
+ .status-active {
58
+ background-color: #10b981;
59
+ box-shadow: 0 0 5px #10b981;
60
+ }
61
+ .status-warning {
62
+ background-color: #f59e0b;
63
+ box-shadow: 0 0 5px #f59e0b;
64
+ }
65
+ .status-danger {
66
+ background-color: #ef4444;
67
+ box-shadow: 0 0 5px #ef4444;
68
+ }
69
+ .blink {
70
+ animation: blink-animation 1.5s infinite;
71
+ }
72
+ @keyframes blink-animation {
73
+ 0% { opacity: 1; }
74
+ 50% { opacity: 0.5; }
75
+ 100% { opacity: 1; }
76
+ }
77
+ .gauge {
78
+ position: relative;
79
+ width: 100%;
80
+ height: 120px;
81
+ margin: 20px auto;
82
+ }
83
+ .gauge-body {
84
+ width: 100%;
85
+ height: 0;
86
+ padding-bottom: 50%;
87
+ position: relative;
88
+ border-top-left-radius: 100% 200%;
89
+ border-top-right-radius: 100% 200%;
90
+ overflow: hidden;
91
+ background: #d1d5db;
92
+ }
93
+ .gauge-fill {
94
+ position: absolute;
95
+ top: 100%;
96
+ left: 0;
97
+ width: 100%;
98
+ height: 100%;
99
+ background: linear-gradient(to right, #10b981, #3b82f6, #ef4444);
100
+ transform-origin: center top;
101
+ transform: rotate(0.5turn);
102
+ transition: transform 0.5s ease-out;
103
+ }
104
+ .gauge-cover {
105
+ width: 75%;
106
+ height: 150%;
107
+ background: white;
108
+ border-radius: 50%;
109
+ position: absolute;
110
+ top: 25%;
111
+ left: 50%;
112
+ transform: translateX(-50%);
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ font-size: 1.5em;
117
+ font-weight: bold;
118
+ color: #1f2937;
119
+ border: 1px solid #d1d5db;
120
+ }
121
+ .legacy-border {
122
+ border: 1px solid #d1d5db;
123
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
124
+ }
125
+ .legacy-panel {
126
+ background: white;
127
+ border: 1px solid #d1d5db;
128
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
129
+ }
130
+ </style>
131
+ </head>
132
+ <body class="industrial-bg font-sans">
133
+ <div class="flex h-screen overflow-hidden">
134
+ <!-- Legacy Sidebar -->
135
+ <div class="industrial-sidebar text-gray-300 w-64 flex-shrink-0">
136
+ <div class="p-4 border-b border-gray-700 flex items-center">
137
+ <div class="bg-blue-600 p-2 rounded mr-3">
138
+ <i class="fas fa-industry text-white text-xl"></i>
139
+ </div>
140
+ <h1 class="text-xl font-bold text-white">IRONCORE MINING</h1>
141
+ </div>
142
+ <nav class="p-4">
143
+ <div class="mb-8">
144
+ <h2 class="text-gray-400 uppercase text-xs font-semibold mb-3 tracking-wider">MAIN</h2>
145
+ <ul>
146
+ <li class="mb-2">
147
+ <a href="#" class="flex items-center p-2 bg-gray-800 rounded-lg border-l-4 border-blue-500">
148
+ <i class="fas fa-tachometer-alt mr-3 text-blue-400"></i>
149
+ <span class="font-medium">Dashboard</span>
150
+ </a>
151
+ </li>
152
+ <li class="mb-2">
153
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
154
+ <i class="fas fa-chart-line mr-3 text-gray-400"></i>
155
+ <span>Production Analytics</span>
156
+ </a>
157
+ </li>
158
+ <li class="mb-2">
159
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
160
+ <i class="fas fa-hard-hat mr-3 text-gray-400"></i>
161
+ <span>Equipment Status</span>
162
+ </a>
163
+ </li>
164
+ </ul>
165
+ </div>
166
+ <div class="mb-8">
167
+ <h2 class="text-gray-400 uppercase text-xs font-semibold mb-3 tracking-wider">OPERATIONS</h2>
168
+ <ul>
169
+ <li class="mb-2">
170
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
171
+ <i class="fas fa-excavator mr-3 text-gray-400"></i>
172
+ <span>Excavation</span>
173
+ </a>
174
+ </li>
175
+ <li class="mb-2">
176
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
177
+ <i class="fas fa-truck-pickup mr-3 text-gray-400"></i>
178
+ <span>Haulage</span>
179
+ </a>
180
+ </li>
181
+ <li class="mb-2">
182
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
183
+ <i class="fas fa-industry mr-3 text-gray-400"></i>
184
+ <span>Processing</span>
185
+ </a>
186
+ </li>
187
+ </ul>
188
+ </div>
189
+ <div>
190
+ <h2 class="text-gray-400 uppercase text-xs font-semibold mb-3 tracking-wider">ADMINISTRATION</h2>
191
+ <ul>
192
+ <li class="mb-2">
193
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
194
+ <i class="fas fa-users mr-3 text-gray-400"></i>
195
+ <span>Personnel</span>
196
+ </a>
197
+ </li>
198
+ <li class="mb-2">
199
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
200
+ <i class="fas fa-cog mr-3 text-gray-400"></i>
201
+ <span>Settings</span>
202
+ </a>
203
+ </li>
204
+ <li class="mb-2">
205
+ <a href="#" class="flex items-center p-2 hover:bg-gray-800 rounded-lg">
206
+ <i class="fas fa-file-alt mr-3 text-gray-400"></i>
207
+ <span>Reports</span>
208
+ </a>
209
+ </li>
210
+ </ul>
211
+ </div>
212
+ </nav>
213
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700">
214
+ <div class="flex items-center">
215
+ <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold mr-2">JS</div>
216
+ <div>
217
+ <div class="text-sm font-medium text-white">John Smith</div>
218
+ <div class="text-xs text-gray-400">Site Supervisor</div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Main Content -->
225
+ <div class="flex-1 overflow-auto">
226
+ <!-- Legacy Header -->
227
+ <header class="industrial-header shadow-sm">
228
+ <div class="flex items-center justify-between p-4">
229
+ <div class="flex items-center space-x-4">
230
+ <button class="text-gray-300 focus:outline-none lg:hidden">
231
+ <i class="fas fa-bars"></i>
232
+ </button>
233
+ <h1 class="text-xl font-semibold text-white">ENTERPRISE PRODUCTION DASHBOARD</h1>
234
+ </div>
235
+ <div class="flex items-center space-x-4">
236
+ <div class="relative">
237
+ <button class="text-gray-300 focus:outline-none relative">
238
+ <i class="fas fa-bell"></i>
239
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
240
+ </button>
241
+ </div>
242
+ <div class="text-sm text-gray-300">
243
+ <span class="font-medium">Site:</span> Iron Mountain Complex
244
+ </div>
245
+ <div class="text-sm text-gray-300">
246
+ <span class="font-medium">Shift:</span> B (07:00-15:00)
247
+ </div>
248
+ <div class="text-sm text-gray-300">
249
+ <span class="font-medium">Date:</span> <span id="current-date">Loading...</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </header>
254
+
255
+ <!-- Dashboard Content -->
256
+ <main class="p-4">
257
+ <!-- Summary Cards -->
258
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
259
+ <div class="industrial-card rounded-lg">
260
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
261
+ <div class="flex items-center justify-between">
262
+ <h3 class="font-bold text-gray-800">DAILY PRODUCTION</h3>
263
+ <i class="fas fa-chart-bar text-blue-600"></i>
264
+ </div>
265
+ </div>
266
+ <div class="p-4">
267
+ <div class="text-3xl font-bold text-gray-800 mb-2">24,580 <span class="text-sm text-gray-500">tons</span></div>
268
+ <div class="flex items-center">
269
+ <span class="status-indicator status-active"></span>
270
+ <span class="text-sm text-gray-600">12.5% above target</span>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="industrial-card rounded-lg">
276
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
277
+ <div class="flex items-center justify-between">
278
+ <h3 class="font-bold text-gray-800">MONTHLY TARGET</h3>
279
+ <i class="fas fa-bullseye text-orange-500"></i>
280
+ </div>
281
+ </div>
282
+ <div class="p-4">
283
+ <div class="gauge">
284
+ <div class="gauge-body">
285
+ <div class="gauge-fill" style="transform: rotate(0.6turn);"></div>
286
+ </div>
287
+ <div class="gauge-cover">78%</div>
288
+ </div>
289
+ <div class="text-center text-sm text-gray-600">512,000/650,000 tons</div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="industrial-card rounded-lg">
294
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
295
+ <div class="flex items-center justify-between">
296
+ <h3 class="font-bold text-gray-800">EQUIPMENT UTILIZATION</h3>
297
+ <i class="fas fa-cogs text-green-600"></i>
298
+ </div>
299
+ </div>
300
+ <div class="p-4">
301
+ <div class="text-3xl font-bold text-gray-800 mb-2">86%</div>
302
+ <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
303
+ <div class="bg-green-600 h-2 rounded-full" style="width: 86%"></div>
304
+ </div>
305
+ <div class="text-sm text-gray-600">32/37 units active</div>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="industrial-card rounded-lg">
310
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
311
+ <div class="flex items-center justify-between">
312
+ <h3 class="font-bold text-gray-800">SAFETY RECORD</h3>
313
+ <i class="fas fa-shield-alt text-red-600"></i>
314
+ </div>
315
+ </div>
316
+ <div class="p-4">
317
+ <div class="text-3xl font-bold text-gray-800 mb-2">127 <span class="text-sm text-gray-500">days</span></div>
318
+ <div class="flex items-center justify-between text-sm">
319
+ <div>
320
+ <span class="status-indicator status-active"></span>
321
+ <span class="text-gray-600">Current streak</span>
322
+ </div>
323
+ <div class="text-gray-600">Record: 183</div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Main Charts -->
330
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
331
+ <!-- Production Trend -->
332
+ <div class="industrial-chart rounded-lg lg:col-span-2">
333
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
334
+ <div class="flex items-center justify-between">
335
+ <h3 class="font-bold text-gray-800">PRODUCTION TREND (LAST 30 DAYS)</h3>
336
+ <div class="flex space-x-1">
337
+ <button class="industrial-button px-2 py-1 text-xs rounded">Tons</button>
338
+ <button class="industrial-button px-2 py-1 text-xs rounded">Grade</button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="p-4">
343
+ <div class="h-80">
344
+ <canvas id="productionChart"></canvas>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Iron Grade Distribution -->
350
+ <div class="industrial-chart rounded-lg">
351
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
352
+ <div class="flex items-center justify-between">
353
+ <h3 class="font-bold text-gray-800">ORE GRADE DISTRIBUTION</h3>
354
+ <div class="text-xs text-gray-500">Current Shift</div>
355
+ </div>
356
+ </div>
357
+ <div class="p-4">
358
+ <div class="h-80">
359
+ <canvas id="gradeChart"></canvas>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Equipment Status and Alerts -->
366
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
367
+ <!-- Equipment Status -->
368
+ <div class="industrial-card rounded-lg">
369
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
370
+ <h3 class="font-bold text-gray-800">EQUIPMENT STATUS</h3>
371
+ </div>
372
+ <div class="p-4">
373
+ <div class="space-y-3">
374
+ <div class="legacy-panel p-3 rounded">
375
+ <div class="flex items-center justify-between mb-2">
376
+ <div>
377
+ <span class="status-indicator status-active"></span>
378
+ <span class="font-medium">Excavator #E-247</span>
379
+ </div>
380
+ <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
381
+ </div>
382
+ <div class="text-sm text-gray-600 mb-1">Pit 3 - North Section</div>
383
+ <div class="flex justify-between text-xs text-gray-500">
384
+ <span>Utilization: 92%</span>
385
+ <span>Hours: 1,247</span>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="legacy-panel p-3 rounded">
390
+ <div class="flex items-center justify-between mb-2">
391
+ <div>
392
+ <span class="status-indicator status-warning"></span>
393
+ <span class="font-medium">Haul Truck #HT-512</span>
394
+ </div>
395
+ <span class="text-sm bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Maintenance</span>
396
+ </div>
397
+ <div class="text-sm text-gray-600 mb-1">Pit 2 - Transport</div>
398
+ <div class="flex justify-between text-xs text-gray-500">
399
+ <span>Utilization: 65%</span>
400
+ <span>Hours: 3,512</span>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="legacy-panel p-3 rounded">
405
+ <div class="flex items-center justify-between mb-2">
406
+ <div>
407
+ <span class="status-indicator status-danger"></span>
408
+ <span class="font-medium">Drill Rig #DR-108</span>
409
+ </div>
410
+ <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">Down</span>
411
+ </div>
412
+ <div class="text-sm text-gray-600 mb-1">Pit 1 - Blasting Zone</div>
413
+ <div class="flex justify-between text-xs text-gray-500">
414
+ <span>Utilization: 28%</span>
415
+ <span>Hours: 4,108</span>
416
+ </div>
417
+ </div>
418
+
419
+ <button class="industrial-button-primary w-full py-2 rounded text-sm font-medium">
420
+ VIEW ALL EQUIPMENT (37)
421
+ </button>
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <!-- Production Alerts -->
427
+ <div class="industrial-card rounded-lg">
428
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
429
+ <h3 class="font-bold text-gray-800">PRODUCTION ALERTS</h3>
430
+ </div>
431
+ <div class="p-4">
432
+ <div class="space-y-3">
433
+ <div class="legacy-panel p-3 rounded border-l-4 border-red-500 bg-red-50">
434
+ <div class="flex items-start">
435
+ <div class="flex-shrink-0 text-red-500 mt-1">
436
+ <i class="fas fa-exclamation-triangle"></i>
437
+ </div>
438
+ <div class="ml-2">
439
+ <h4 class="text-sm font-medium text-red-800">Conveyor Belt Jam</h4>
440
+ <p class="text-xs text-red-700 mb-1">Processing Plant Line 2</p>
441
+ <p class="text-xs text-red-600">Alerted 25 min ago</p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="legacy-panel p-3 rounded border-l-4 border-yellow-500 bg-yellow-50">
447
+ <div class="flex items-start">
448
+ <div class="flex-shrink-0 text-yellow-500 mt-1">
449
+ <i class="fas fa-exclamation-circle"></i>
450
+ </div>
451
+ <div class="ml-2">
452
+ <h4 class="text-sm font-medium text-yellow-800">Low Iron Grade</h4>
453
+ <p class="text-xs text-yellow-700 mb-1">Section B, Pit 3 (Fe 58%)</p>
454
+ <p class="text-xs text-yellow-600">Alerted 1 hour ago</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="legacy-panel p-3 rounded border-l-4 border-blue-500 bg-blue-50">
460
+ <div class="flex items-start">
461
+ <div class="flex-shrink-0 text-blue-500 mt-1">
462
+ <i class="fas fa-info-circle"></i>
463
+ </div>
464
+ <div class="ml-2">
465
+ <h4 class="text-sm font-medium text-blue-800">Preventive Maintenance</h4>
466
+ <p class="text-xs text-blue-700 mb-1">Crusher #CR-205 due in 2 days</p>
467
+ <p class="text-xs text-blue-600">Scheduled</p>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <button class="industrial-button-primary w-full py-2 rounded text-sm font-medium">
473
+ VIEW ALL ALERTS (8)
474
+ </button>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- Shift Performance -->
480
+ <div class="industrial-card rounded-lg">
481
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
482
+ <h3 class="font-bold text-gray-800">SHIFT PERFORMANCE</h3>
483
+ </div>
484
+ <div class="p-4">
485
+ <div class="flex items-center justify-between mb-4">
486
+ <div>
487
+ <p class="text-sm text-gray-500">Current Shift</p>
488
+ <h3 class="text-xl font-bold text-gray-800">SHIFT B</h3>
489
+ <p class="text-xs text-gray-500">07:00 - 15:00</p>
490
+ </div>
491
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded text-sm font-medium">
492
+ ON TARGET
493
+ </div>
494
+ </div>
495
+
496
+ <div class="space-y-4 mb-4">
497
+ <div>
498
+ <div class="flex justify-between text-sm mb-1">
499
+ <span class="text-gray-600">Production</span>
500
+ <span class="text-gray-800">1,850/2,400 tons</span>
501
+ </div>
502
+ <div class="w-full bg-gray-200 rounded-full h-2">
503
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 77%"></div>
504
+ </div>
505
+ </div>
506
+
507
+ <div>
508
+ <div class="flex justify-between text-sm mb-1">
509
+ <span class="text-gray-600">Equipment Used</span>
510
+ <span class="text-gray-800">18/22 units</span>
511
+ </div>
512
+ <div class="w-full bg-gray-200 rounded-full h-2">
513
+ <div class="bg-green-600 h-2 rounded-full" style="width: 82%"></div>
514
+ </div>
515
+ </div>
516
+
517
+ <div>
518
+ <div class="flex justify-between text-sm mb-1">
519
+ <span class="text-gray-600">Safety Incidents</span>
520
+ <span class="text-gray-800">0</span>
521
+ </div>
522
+ <div class="w-full bg-gray-200 rounded-full h-2">
523
+ <div class="bg-red-600 h-2 rounded-full" style="width: 0%"></div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="pt-4 border-t border-gray-200">
529
+ <h3 class="text-sm font-medium text-gray-800 mb-2">Next Shift: SHIFT C</h3>
530
+ <div class="flex items-center justify-between text-sm mb-3">
531
+ <span class="text-gray-600">Starts in</span>
532
+ <span class="font-medium text-gray-800 blink">1 hour 22 minutes</span>
533
+ </div>
534
+ <button class="industrial-button-primary w-full py-2 rounded text-sm font-medium">
535
+ PREPARE SHIFT HANDOVER
536
+ </button>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </main>
542
+ </div>
543
+ </div>
544
+
545
+ <script>
546
+ // Set current date
547
+ const now = new Date();
548
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
549
+ document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', options);
550
+
551
+ // Production Trend Chart
552
+ const productionCtx = document.getElementById('productionChart').getContext('2d');
553
+ const productionChart = new Chart(productionCtx, {
554
+ type: 'line',
555
+ data: {
556
+ labels: Array.from({length: 30}, (_, i) => `${i+1}`),
557
+ datasets: [
558
+ {
559
+ label: 'Ore Production (tons)',
560
+ data: Array.from({length: 30}, () => Math.floor(Math.random() * 3000) + 18000),
561
+ borderColor: '#1d4ed8',
562
+ backgroundColor: 'rgba(29, 78, 216, 0.05)',
563
+ borderWidth: 2,
564
+ fill: true,
565
+ tension: 0.3
566
+ },
567
+ {
568
+ label: 'Target',
569
+ data: Array(30).fill(22000),
570
+ borderColor: '#10b981',
571
+ borderWidth: 1,
572
+ borderDash: [5, 5],
573
+ pointRadius: 0
574
+ }
575
+ ]
576
+ },
577
+ options: {
578
+ responsive: true,
579
+ maintainAspectRatio: false,
580
+ plugins: {
581
+ legend: {
582
+ position: 'top',
583
+ labels: {
584
+ boxWidth: 12,
585
+ padding: 20,
586
+ font: {
587
+ size: 12
588
+ }
589
+ }
590
+ },
591
+ tooltip: {
592
+ mode: 'index',
593
+ intersect: false,
594
+ backgroundColor: '#1f2937',
595
+ titleFont: {
596
+ size: 14,
597
+ weight: 'bold'
598
+ },
599
+ bodyFont: {
600
+ size: 12
601
+ },
602
+ padding: 12,
603
+ cornerRadius: 4
604
+ }
605
+ },
606
+ scales: {
607
+ x: {
608
+ grid: {
609
+ display: false
610
+ },
611
+ ticks: {
612
+ font: {
613
+ size: 10
614
+ }
615
+ }
616
+ },
617
+ y: {
618
+ beginAtZero: false,
619
+ min: 15000,
620
+ grid: {
621
+ color: 'rgba(0,0,0,0.05)'
622
+ },
623
+ ticks: {
624
+ callback: function(value) {
625
+ return value.toLocaleString() + 't';
626
+ },
627
+ font: {
628
+ size: 10
629
+ }
630
+ }
631
+ }
632
+ },
633
+ elements: {
634
+ point: {
635
+ radius: 3,
636
+ hoverRadius: 5
637
+ }
638
+ }
639
+ }
640
+ });
641
+
642
+ // Grade Distribution Chart
643
+ const gradeCtx = document.getElementById('gradeChart').getContext('2d');
644
+ const gradeChart = new Chart(gradeCtx, {
645
+ type: 'doughnut',
646
+ data: {
647
+ labels: ['High Grade (Fe >62%)', 'Medium Grade (Fe 58-62%)', 'Low Grade (Fe <58%)'],
648
+ datasets: [{
649
+ data: [45, 35, 20],
650
+ backgroundColor: [
651
+ '#10b981',
652
+ '#f59e0b',
653
+ '#ef4444'
654
+ ],
655
+ borderWidth: 0,
656
+ borderRadius: 4
657
+ }]
658
+ },
659
+ options: {
660
+ responsive: true,
661
+ maintainAspectRatio: false,
662
+ plugins: {
663
+ legend: {
664
+ position: 'right',
665
+ labels: {
666
+ boxWidth: 12,
667
+ padding: 12,
668
+ font: {
669
+ size: 12
670
+ }
671
+ }
672
+ },
673
+ tooltip: {
674
+ backgroundColor: '#1f2937',
675
+ titleFont: {
676
+ size: 12,
677
+ weight: 'bold'
678
+ },
679
+ bodyFont: {
680
+ size: 12
681
+ },
682
+ padding: 10,
683
+ cornerRadius: 4,
684
+ callbacks: {
685
+ label: function(context) {
686
+ return context.label + ': ' + context.raw + '%';
687
+ }
688
+ }
689
+ }
690
+ },
691
+ cutout: '70%'
692
+ }
693
+ });
694
+
695
+ // Simulate real-time data updates
696
+ function updateProductionData() {
697
+ const newData = Array.from({length: 30}, () => Math.floor(Math.random() * 3000) + 18000);
698
+ productionChart.data.datasets[0].data = newData;
699
+ productionChart.update();
700
+
701
+ // Update summary card with random value ±500 from current
702
+ const currentProduction = document.querySelector('div:has(> h3:contains("DAILY PRODUCTION"))').nextElementSibling.firstChild;
703
+ const currentValue = parseInt(currentProduction.textContent.replace(/,/g, ''));
704
+ const newValue = currentValue + Math.floor(Math.random() * 1000) - 500;
705
+ currentProduction.textContent = newValue.toLocaleString() + ' tons';
706
+
707
+ // Update status indicator
708
+ const statusIndicator = document.querySelector('div:has(> h3:contains("DAILY PRODUCTION"))').nextElementSibling.lastElementChild.firstElementChild;
709
+ const statusText = document.querySelector('div:has(> h3:contains("DAILY PRODUCTION"))').nextElementSibling.lastElementChild.lastElementChild;
710
+
711
+ const diff = newValue - 22000;
712
+ const percentage = (diff / 22000 * 100).toFixed(1);
713
+
714
+ if (diff > 0) {
715
+ statusIndicator.className = 'status-indicator status-active';
716
+ statusText.textContent = `${percentage}% above target`;
717
+ } else {
718
+ statusIndicator.className = 'status-indicator status-danger';
719
+ statusText.textContent = `${Math.abs(percentage)}% below target`;
720
+ }
721
+
722
+ setTimeout(updateProductionData, 5000);
723
+ }
724
+
725
+ // Start updates after initial load
726
+ setTimeout(updateProductionData, 5000);
727
+ </script>
728
+ <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=pennypacker/deepsite-mining" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
729
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ use enterprise, legacy looking style