Hugging Face's logo

Spaces:
ricks11
/
anycoder-2b4dbc8a
Running

App Files Community
ricks11 commited on
Commit
585fc3b
·
verified ·
1 Parent(s): 664afc3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1146 -19
index.html CHANGED
@@ -1,19 +1,1146 @@
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="pt">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GeoMining Angola-Congo - Plataforma de Análise Geológica</title>
7
+
8
+ <!-- Leaflet CSS -->
9
+ <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
10
+
11
+ <!-- Font Awesome for Icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <style>
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ :root {
22
+ --primary-dark: #1a1f2e;
23
+ --primary-blue: #2563eb;
24
+ --secondary-gold: #f59e0b;
25
+ --accent-green: #10b981;
26
+ --accent-red: #ef4444;
27
+ --bg-light: #f8fafc;
28
+ --text-dark: #1e293b;
29
+ --text-light: #64748b;
30
+ --border-color: #e2e8f0;
31
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
32
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
33
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
34
+ }
35
+
36
+ body {
37
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
38
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
39
+ min-height: 100vh;
40
+ color: var(--text-dark);
41
+ }
42
+
43
+ /* Header */
44
+ .header {
45
+ background: rgba(26, 31, 46, 0.95);
46
+ backdrop-filter: blur(10px);
47
+ padding: 1rem 2rem;
48
+ box-shadow: var(--shadow-lg);
49
+ position: relative;
50
+ z-index: 1000;
51
+ }
52
+
53
+ .header-content {
54
+ max-width: 1400px;
55
+ margin: 0 auto;
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ }
60
+
61
+ .logo {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 1rem;
65
+ color: white;
66
+ }
67
+
68
+ .logo i {
69
+ font-size: 2rem;
70
+ color: var(--secondary-gold);
71
+ }
72
+
73
+ .logo h1 {
74
+ font-size: 1.5rem;
75
+ font-weight: 700;
76
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
77
+ -webkit-background-clip: text;
78
+ -webkit-text-fill-color: transparent;
79
+ }
80
+
81
+ .logo span {
82
+ font-size: 0.875rem;
83
+ color: var(--text-light);
84
+ margin-top: 0.25rem;
85
+ }
86
+
87
+ .header-actions {
88
+ display: flex;
89
+ gap: 1rem;
90
+ align-items: center;
91
+ }
92
+
93
+ .header-link {
94
+ color: var(--text-light);
95
+ text-decoration: none;
96
+ font-size: 0.875rem;
97
+ transition: color 0.3s;
98
+ }
99
+
100
+ .header-link:hover {
101
+ color: white;
102
+ }
103
+
104
+ /* Main Container */
105
+ .main-container {
106
+ max-width: 1400px;
107
+ margin: 2rem auto;
108
+ padding: 0 1rem;
109
+ display: grid;
110
+ grid-template-columns: 320px 1fr;
111
+ gap: 1.5rem;
112
+ min-height: calc(100vh - 120px);
113
+ }
114
+
115
+ /* Sidebar */
116
+ .sidebar {
117
+ background: white;
118
+ border-radius: 1rem;
119
+ padding: 1.5rem;
120
+ box-shadow: var(--shadow-lg);
121
+ max-height: calc(100vh - 160px);
122
+ overflow-y: auto;
123
+ }
124
+
125
+ .sidebar::-webkit-scrollbar {
126
+ width: 6px;
127
+ }
128
+
129
+ .sidebar::-webkit-scrollbar-track {
130
+ background: var(--bg-light);
131
+ border-radius: 3px;
132
+ }
133
+
134
+ .sidebar::-webkit-scrollbar-thumb {
135
+ background: var(--primary-blue);
136
+ border-radius: 3px;
137
+ }
138
+
139
+ .section {
140
+ margin-bottom: 2rem;
141
+ }
142
+
143
+ .section-title {
144
+ font-size: 1rem;
145
+ font-weight: 600;
146
+ color: var(--text-dark);
147
+ margin-bottom: 1rem;
148
+ display: flex;
149
+ align-items: center;
150
+ gap: 0.5rem;
151
+ }
152
+
153
+ .section-title i {
154
+ color: var(--primary-blue);
155
+ }
156
+
157
+ /* Mineral Selector */
158
+ .mineral-selector {
159
+ display: grid;
160
+ gap: 0.75rem;
161
+ }
162
+
163
+ .mineral-card {
164
+ padding: 1rem;
165
+ border: 2px solid var(--border-color);
166
+ border-radius: 0.75rem;
167
+ cursor: pointer;
168
+ transition: all 0.3s;
169
+ position: relative;
170
+ overflow: hidden;
171
+ }
172
+
173
+ .mineral-card::before {
174
+ content: '';
175
+ position: absolute;
176
+ top: 0;
177
+ left: 0;
178
+ width: 0;
179
+ height: 100%;
180
+ background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1));
181
+ transition: width 0.3s;
182
+ }
183
+
184
+ .mineral-card:hover::before {
185
+ width: 100%;
186
+ }
187
+
188
+ .mineral-card:hover {
189
+ border-color: var(--primary-blue);
190
+ transform: translateX(4px);
191
+ }
192
+
193
+ .mineral-card.active {
194
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
195
+ color: white;
196
+ border-color: transparent;
197
+ }
198
+
199
+ .mineral-card.active .mineral-name,
200
+ .mineral-card.active .mineral-desc {
201
+ color: white;
202
+ }
203
+
204
+ .mineral-header {
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 0.75rem;
208
+ margin-bottom: 0.5rem;
209
+ }
210
+
211
+ .mineral-icon {
212
+ font-size: 1.5rem;
213
+ }
214
+
215
+ .mineral-name {
216
+ font-weight: 600;
217
+ color: var(--text-dark);
218
+ }
219
+
220
+ .mineral-desc {
221
+ font-size: 0.875rem;
222
+ color: var(--text-light);
223
+ }
224
+
225
+ /* Layers Control */
226
+ .layer-item {
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: space-between;
230
+ padding: 0.75rem;
231
+ background: var(--bg-light);
232
+ border-radius: 0.5rem;
233
+ margin-bottom: 0.5rem;
234
+ transition: all 0.3s;
235
+ }
236
+
237
+ .layer-item:hover {
238
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
239
+ }
240
+
241
+ .layer-info {
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 0.75rem;
245
+ }
246
+
247
+ .layer-icon {
248
+ width: 8px;
249
+ height: 8px;
250
+ border-radius: 50%;
251
+ }
252
+
253
+ .layer-name {
254
+ font-size: 0.875rem;
255
+ font-weight: 500;
256
+ }
257
+
258
+ /* Toggle Switch */
259
+ .toggle-switch {
260
+ position: relative;
261
+ width: 44px;
262
+ height: 24px;
263
+ }
264
+
265
+ .toggle-switch input {
266
+ opacity: 0;
267
+ width: 0;
268
+ height: 0;
269
+ }
270
+
271
+ .toggle-slider {
272
+ position: absolute;
273
+ cursor: pointer;
274
+ top: 0;
275
+ left: 0;
276
+ right: 0;
277
+ bottom: 0;
278
+ background-color: #ccc;
279
+ transition: 0.4s;
280
+ border-radius: 24px;
281
+ }
282
+
283
+ .toggle-slider:before {
284
+ position: absolute;
285
+ content: "";
286
+ height: 18px;
287
+ width: 18px;
288
+ left: 3px;
289
+ bottom: 3px;
290
+ background-color: white;
291
+ transition: 0.4s;
292
+ border-radius: 50%;
293
+ }
294
+
295
+ input:checked + .toggle-slider {
296
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
297
+ }
298
+
299
+ input:checked + .toggle-slider:before {
300
+ transform: translateX(20px);
301
+ }
302
+
303
+ /* Analysis Tools */
304
+ .tool-grid {
305
+ display: grid;
306
+ grid-template-columns: 1fr 1fr;
307
+ gap: 0.75rem;
308
+ }
309
+
310
+ .tool-btn {
311
+ padding: 0.75rem;
312
+ background: white;
313
+ border: 1px solid var(--border-color);
314
+ border-radius: 0.5rem;
315
+ cursor: pointer;
316
+ transition: all 0.3s;
317
+ font-size: 0.875rem;
318
+ display: flex;
319
+ flex-direction: column;
320
+ align-items: center;
321
+ gap: 0.5rem;
322
+ }
323
+
324
+ .tool-btn:hover {
325
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
326
+ transform: translateY(-2px);
327
+ box-shadow: var(--shadow-md);
328
+ }
329
+
330
+ .tool-btn i {
331
+ font-size: 1.25rem;
332
+ color: var(--primary-blue);
333
+ }
334
+
335
+ /* Content Area */
336
+ .content-area {
337
+ display: flex;
338
+ flex-direction: column;
339
+ gap: 1.5rem;
340
+ }
341
+
342
+ /* Map Container */
343
+ .map-container {
344
+ background: white;
345
+ border-radius: 1rem;
346
+ overflow: hidden;
347
+ box-shadow: var(--shadow-lg);
348
+ position: relative;
349
+ flex: 1;
350
+ min-height: 500px;
351
+ }
352
+
353
+ #map {
354
+ width: 100%;
355
+ height: 100%;
356
+ min-height: 500px;
357
+ }
358
+
359
+ /* Map Controls */
360
+ .map-controls {
361
+ position: absolute;
362
+ top: 1rem;
363
+ right: 1rem;
364
+ z-index: 1000;
365
+ display: flex;
366
+ flex-direction: column;
367
+ gap: 0.5rem;
368
+ }
369
+
370
+ .map-control-btn {
371
+ background: white;
372
+ border: none;
373
+ padding: 0.75rem;
374
+ border-radius: 0.5rem;
375
+ cursor: pointer;
376
+ box-shadow: var(--shadow-md);
377
+ transition: all 0.3s;
378
+ width: 40px;
379
+ height: 40px;
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: center;
383
+ }
384
+
385
+ .map-control-btn:hover {
386
+ background: var(--primary-blue);
387
+ color: white;
388
+ transform: scale(1.1);
389
+ }
390
+
391
+ /* Stats Cards */
392
+ .stats-container {
393
+ display: grid;
394
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
395
+ gap: 1rem;
396
+ }
397
+
398
+ .stat-card {
399
+ background: white;
400
+ padding: 1.25rem;
401
+ border-radius: 0.75rem;
402
+ box-shadow: var(--shadow-md);
403
+ transition: all 0.3s;
404
+ position: relative;
405
+ overflow: hidden;
406
+ }
407
+
408
+ .stat-card::before {
409
+ content: '';
410
+ position: absolute;
411
+ top: 0;
412
+ left: 0;
413
+ width: 4px;
414
+ height: 100%;
415
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
416
+ }
417
+
418
+ .stat-card:hover {
419
+ transform: translateY(-4px);
420
+ box-shadow: var(--shadow-lg);
421
+ }
422
+
423
+ .stat-label {
424
+ font-size: 0.875rem;
425
+ color: var(--text-light);
426
+ margin-bottom: 0.5rem;
427
+ }
428
+
429
+ .stat-value {
430
+ font-size: 1.75rem;
431
+ font-weight: 700;
432
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
433
+ -webkit-background-clip: text;
434
+ -webkit-text-fill-color: transparent;
435
+ }
436
+
437
+ .stat-change {
438
+ font-size: 0.75rem;
439
+ margin-top: 0.5rem;
440
+ display: flex;
441
+ align-items: center;
442
+ gap: 0.25rem;
443
+ }
444
+
445
+ .stat-change.positive {
446
+ color: var(--accent-green);
447
+ }
448
+
449
+ .stat-change.negative {
450
+ color: var(--accent-red);
451
+ }
452
+
453
+ /* Potential Index */
454
+ .potential-container {
455
+ background: white;
456
+ border-radius: 1rem;
457
+ padding: 1.5rem;
458
+ box-shadow: var(--shadow-lg);
459
+ }
460
+
461
+ .potential-header {
462
+ display: flex;
463
+ justify-content: space-between;
464
+ align-items: center;
465
+ margin-bottom: 1.5rem;
466
+ }
467
+
468
+ .potential-title {
469
+ font-size: 1.25rem;
470
+ font-weight: 600;
471
+ }
472
+
473
+ .potential-value {
474
+ display: flex;
475
+ align-items: baseline;
476
+ gap: 0.5rem;
477
+ }
478
+
479
+ .potential-number {
480
+ font-size: 2.5rem;
481
+ font-weight: 700;
482
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
483
+ -webkit-background-clip: text;
484
+ -webkit-text-fill-color: transparent;
485
+ }
486
+
487
+ .potential-scale {
488
+ font-size: 0.875rem;
489
+ color: var(--text-light);
490
+ }
491
+
492
+ .potential-factors {
493
+ display: grid;
494
+ gap: 1rem;
495
+ }
496
+
497
+ .factor-item {
498
+ display: flex;
499
+ align-items: center;
500
+ gap: 1rem;
501
+ }
502
+
503
+ .factor-label {
504
+ flex: 1;
505
+ font-size: 0.875rem;
506
+ color: var(--text-dark);
507
+ }
508
+
509
+ .factor-bar {
510
+ flex: 2;
511
+ height: 8px;
512
+ background: var(--bg-light);
513
+ border-radius: 4px;
514
+ overflow: hidden;
515
+ position: relative;
516
+ }
517
+
518
+ .factor-fill {
519
+ height: 100%;
520
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
521
+ border-radius: 4px;
522
+ transition: width 1s ease-out;
523
+ position: relative;
524
+ overflow: hidden;
525
+ }
526
+
527
+ .factor-fill::after {
528
+ content: '';
529
+ position: absolute;
530
+ top: 0;
531
+ left: 0;
532
+ right: 0;
533
+ bottom: 0;
534
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
535
+ animation: shimmer 2s infinite;
536
+ }
537
+
538
+ @keyframes shimmer {
539
+ 0% { transform: translateX(-100%); }
540
+ 100% { transform: translateX(100%); }
541
+ }
542
+
543
+ .factor-value {
544
+ min-width: 50px;
545
+ text-align: right;
546
+ font-size: 0.875rem;
547
+ font-weight: 600;
548
+ color: var(--primary-blue);
549
+ }
550
+
551
+ /* Export Modal */
552
+ .modal {
553
+ display: none;
554
+ position: fixed;
555
+ top: 0;
556
+ left: 0;
557
+ width: 100%;
558
+ height: 100%;
559
+ background: rgba(0, 0, 0, 0.5);
560
+ backdrop-filter: blur(5px);
561
+ z-index: 2000;
562
+ align-items: center;
563
+ justify-content: center;
564
+ }
565
+
566
+ .modal.active {
567
+ display: flex;
568
+ }
569
+
570
+ .modal-content {
571
+ background: white;
572
+ border-radius: 1rem;
573
+ padding: 2rem;
574
+ max-width: 500px;
575
+ width: 90%;
576
+ max-height: 80vh;
577
+ overflow-y: auto;
578
+ animation: slideUp 0.3s ease-out;
579
+ }
580
+
581
+ @keyframes slideUp {
582
+ from {
583
+ transform: translateY(50px);
584
+ opacity: 0;
585
+ }
586
+ to {
587
+ transform: translateY(0);
588
+ opacity: 1;
589
+ }
590
+ }
591
+
592
+ .modal-header {
593
+ display: flex;
594
+ justify-content: space-between;
595
+ align-items: center;
596
+ margin-bottom: 1.5rem;
597
+ }
598
+
599
+ .modal-title {
600
+ font-size: 1.25rem;
601
+ font-weight: 600;
602
+ }
603
+
604
+ .modal-close {
605
+ background: none;
606
+ border: none;
607
+ font-size: 1.5rem;
608
+ color: var(--text-light);
609
+ cursor: pointer;
610
+ transition: color 0.3s;
611
+ }
612
+
613
+ .modal-close:hover {
614
+ color: var(--text-dark);
615
+ }
616
+
617
+ .export-options {
618
+ display: grid;
619
+ gap: 1rem;
620
+ }
621
+
622
+ .export-option {
623
+ padding: 1rem;
624
+ border: 2px solid var(--border-color);
625
+ border-radius: 0.75rem;
626
+ cursor: pointer;
627
+ transition: all 0.3s;
628
+ display: flex;
629
+ align-items: center;
630
+ gap: 1rem;
631
+ }
632
+
633
+ .export-option:hover {
634
+ border-color: var(--primary-blue);
635
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
636
+ }
637
+
638
+ .export-icon {
639
+ font-size: 1.5rem;
640
+ color: var(--primary-blue);
641
+ }
642
+
643
+ .export-info {
644
+ flex: 1;
645
+ }
646
+
647
+ .export-title {
648
+ font-weight: 600;
649
+ margin-bottom: 0.25rem;
650
+ }
651
+
652
+ .export-desc {
653
+ font-size: 0.875rem;
654
+ color: var(--text-light);
655
+ }
656
+
657
+ /* Action Buttons */
658
+ .action-buttons {
659
+ display: flex;
660
+ gap: 1rem;
661
+ margin-top: 1.5rem;
662
+ }
663
+
664
+ .btn {
665
+ padding: 0.75rem 1.5rem;
666
+ border: none;
667
+ border-radius: 0.5rem;
668
+ font-weight: 500;
669
+ cursor: pointer;
670
+ transition: all 0.3s;
671
+ font-size: 0.875rem;
672
+ display: flex;
673
+ align-items: center;
674
+ gap: 0.5rem;
675
+ }
676
+
677
+ .btn-primary {
678
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
679
+ color: white;
680
+ }
681
+
682
+ .btn-primary:hover {
683
+ transform: translateY(-2px);
684
+ box-shadow: var(--shadow-lg);
685
+ }
686
+
687
+ .btn-secondary {
688
+ background: white;
689
+ color: var(--text-dark);
690
+ border: 1px solid var(--border-color);
691
+ }
692
+
693
+ .btn-secondary:hover {
694
+ background: var(--bg-light);
695
+ }
696
+
697
+ /* Loading Spinner */
698
+ .spinner {
699
+ border: 3px solid var(--bg-light);
700
+ border-top: 3px solid var(--primary-blue);
701
+ border-radius: 50%;
702
+ width: 40px;
703
+ height: 40px;
704
+ animation: spin 1s linear infinite;
705
+ margin: 2rem auto;
706
+ }
707
+
708
+ @keyframes spin {
709
+ 0% { transform: rotate(0deg); }
710
+ 100% { transform: rotate(360deg); }
711
+ }
712
+
713
+ /* Responsive Design */
714
+ @media (max-width: 1024px) {
715
+ .main-container {
716
+ grid-template-columns: 1fr;
717
+ }
718
+
719
+ .sidebar {
720
+ max-height: none;
721
+ }
722
+
723
+ .stats-container {
724
+ grid-template-columns: repeat(2, 1fr);
725
+ }
726
+ }
727
+
728
+ @media (max-width: 640px) {
729
+ .header-content {
730
+ flex-direction: column;
731
+ gap: 1rem;
732
+ }
733
+
734
+ .stats-container {
735
+ grid-template-columns: 1fr;
736
+ }
737
+
738
+ .tool-grid {
739
+ grid-template-columns: 1fr;
740
+ }
741
+
742
+ .action-buttons {
743
+ flex-direction: column;
744
+ }
745
+
746
+ .btn {
747
+ width: 100%;
748
+ justify-content: center;
749
+ }
750
+ }
751
+
752
+ /* Toast Notification */
753
+ .toast {
754
+ position: fixed;
755
+ bottom: 2rem;
756
+ right: 2rem;
757
+ background: white;
758
+ padding: 1rem 1.5rem;
759
+ border-radius: 0.5rem;
760
+ box-shadow: var(--shadow-lg);
761
+ display: flex;
762
+ align-items: center;
763
+ gap: 1rem;
764
+ transform: translateX(400px);
765
+ transition: transform 0.3s ease-out;
766
+ z-index: 3000;
767
+ }
768
+
769
+ .toast.show {
770
+ transform: translateX(0);
771
+ }
772
+
773
+ .toast-icon {
774
+ font-size: 1.25rem;
775
+ }
776
+
777
+ .toast.success .toast-icon {
778
+ color: var(--accent-green);
779
+ }
780
+
781
+ .toast.error .toast-icon {
782
+ color: var(--accent-red);
783
+ }
784
+
785
+ .toast.info .toast-icon {
786
+ color: var(--primary-blue);
787
+ }
788
+
789
+ .toast-message {
790
+ flex: 1;
791
+ font-size: 0.875rem;
792
+ }
793
+ </style>
794
+ </head>
795
+ <body>
796
+ <!-- Header -->
797
+ <header class="header">
798
+ <div class="header-content">
799
+ <div class="logo">
800
+ <i class="fas fa-mountain"></i>
801
+ <div>
802
+ <h1>GeoMining Angola-Congo</h1>
803
+ <span>Plataforma de Análise Geológica e Potencial Mineral</span>
804
+ </div>
805
+ </div>
806
+ <div class="header-actions">
807
+ <a href="#" class="header-link" onclick="showAbout()">
808
+ <i class="fas fa-info-circle"></i> Sobre
809
+ </a>
810
+ <a href="#" class="header-link" onclick="showDocumentation()">
811
+ <i class="fas fa-book"></i> Documentação
812
+ </a>
813
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
814
+ <i class="fas fa-code"></i> Built with anycoder
815
+ </a>
816
+ </div>
817
+ </div>
818
+ </header>
819
+
820
+ <!-- Main Container -->
821
+ <main class="main-container">
822
+ <!-- Sidebar -->
823
+ <aside class="sidebar">
824
+ <!-- Mineral Selection -->
825
+ <section class="section">
826
+ <h2 class="section-title">
827
+ <i class="fas fa-gem"></i>
828
+ Seleção de Mineral
829
+ </h2>
830
+ <div class="mineral-selector">
831
+ <div class="mineral-card active" onclick="selectMineral('diamond', this)">
832
+ <div class="mineral-header">
833
+ <span class="mineral-icon">💎</span>
834
+ <span class="mineral-name">Diamante</span>
835
+ </div>
836
+ <div class="mineral-desc">Kimberlitos e depósitos aluvionares</div>
837
+ </div>
838
+ <div class="mineral-card" onclick="selectMineral('gold', this)">
839
+ <div class="mineral-header">
840
+ <span class="mineral-icon">🪙</span>
841
+ <span class="mineral-name">Ouro</span>
842
+ </div>
843
+ <div class="mineral-desc">Zonas de cisalhamento e greenstone belts</div>
844
+ </div>
845
+ <div class="mineral-card" onclick="selectMineral('ornamental', this)">
846
+ <div class="mineral-header">
847
+ <span class="mineral-icon">🪨</span>
848
+ <span class="mineral-name">Rochas Ornamentais</span>
849
+ </div>
850
+ <div class="mineral-desc">Granitos, gnaisses e mármores</div>
851
+ </div>
852
+ </div>
853
+ </section>
854
+
855
+ <!-- Layers Control -->
856
+ <section class="section">
857
+ <h2 class="section-title">
858
+ <i class="fas fa-layer-group"></i>
859
+ Camadas do Mapa
860
+ </h2>
861
+ <div class="layers-list">
862
+ <div class="layer-item">
863
+ <div class="layer-info">
864
+ <span class="layer-icon" style="background: #8b4513;"></span>
865
+ <span class="layer-name">Litologia</span>
866
+ </div>
867
+ <label class="toggle-switch">
868
+ <input type="checkbox" checked onchange="toggleLayer('lithology', this.checked)">
869
+ <span class="toggle-slider"></span>
870
+ </label>
871
+ </div>
872
+ <div class="layer-item">
873
+ <div class="layer-info">
874
+ <span class="layer-icon" style="background: #ff0000;"></span>
875
+ <span class="layer-name">Falhas Geológicas</span>
876
+ </div>
877
+ <label class="toggle-switch">
878
+ <input type="checkbox" checked onchange="toggleLayer('faults', this.checked)">
879
+ <span class="toggle-slider"></span>
880
+ </label>
881
+ </div>
882
+ <div class="layer-item">
883
+ <div class="layer-info">
884
+ <span class="layer-icon" style="background: #00ff00;"></span>
885
+ <span class="layer-name">Ocorrências Minerais</span>
886
+ </div>
887
+ <label class="toggle-switch">
888
+ <input type="checkbox" checked onchange="toggleLayer('minerals', this.checked)">
889
+ <span class="toggle-slider"></span>
890
+ </label>
891
+ </div>
892
+ <div class="layer-item">
893
+ <div class="layer-info">
894
+ <span class="layer-icon" style="background: #0000ff;"></span>
895
+ <span class="layer-name">Hidrografia</span>
896
+ </div>
897
+ <label class="toggle-switch">
898
+ <input type="checkbox" onchange="toggleLayer('hydrography', this.checked)">
899
+ <span class="toggle-slider"></span>
900
+ </label>
901
+ </div>
902
+ <div class="layer-item">
903
+ <div class="layer-info">
904
+ <span class="layer-icon" style="background: linear-gradient(90deg, red, yellow);"></span>
905
+ <span class="layer-name">Mapa de Calor</span>
906
+ </div>
907
+ <label class="toggle-switch">
908
+ <input type="checkbox" onchange="toggleHeatmap(this.checked)">
909
+ <span class="toggle-slider"></span>
910
+ </label>
911
+ </div>
912
+ </div>
913
+ </section>
914
+
915
+ <!-- Analysis Tools -->
916
+ <section class="section">
917
+ <h2 class="section-title">
918
+ <i class="fas fa-tools"></i>
919
+ Ferramentas de Análise
920
+ </h2>
921
+ <div class="tool-grid">
922
+ <button class="tool-btn" onclick="performBufferAnalysis()">
923
+ <i class="fas fa-circle-notch"></i>
924
+ <span>Buffer</span>
925
+ </button>
926
+ <button class="tool-btn" onclick="performIntersection()">
927
+ <i class="fas fa-vector-square"></i>
928
+ <span>Interseção</span>
929
+ </button>
930
+ <button class="tool-btn" onclick="performProximity()">
931
+ <i class="fas fa-ruler"></i>
932
+ <span>Proximidade</span>
933
+ </button>
934
+ <button class="tool-btn" onclick="performDensity()">
935
+ <i class="fas fa-th"></i>
936
+ <span>Densidade</span>
937
+ </button>
938
+ </div>
939
+ </section>
940
+
941
+ <!-- Export Options -->
942
+ <section class="section">
943
+ <h2 class="section-title">
944
+ <i class="fas fa-download"></i>
945
+ Exportar Dados
946
+ </h2>
947
+ <div class="action-buttons">
948
+ <button class="btn btn-primary" onclick="showExportModal()">
949
+ <i class="fas fa-file-export"></i>
950
+ Exportar
951
+ </button>
952
+ <button class="btn btn-secondary" onclick="generateReport()">
953
+ <i class="fas fa-file-pdf"></i>
954
+ Relatório
955
+ </button>
956
+ </div>
957
+ </section>
958
+ </aside>
959
+
960
+ <!-- Content Area -->
961
+ <div class="content-area">
962
+ <!-- Stats Cards -->
963
+ <div class="stats-container">
964
+ <div class="stat-card">
965
+ <div class="stat-label">Área de Análise</div>
966
+ <div class="stat-value">245,678</div>
967
+ <div class="stat-label">km²</div>
968
+ <div class="stat-change positive">
969
+ <i class="fas fa-arrow-up"></i>
970
+ <span>+12.5% vs mês anterior</span>
971
+ </div>
972
+ </div>
973
+ <div class="stat-card">
974
+ <div class="stat-label">Ocorrências Mapeadas</div>
975
+ <div class="stat-value">1,247</div>
976
+ <div class="stat-change positive">
977
+ <i class="fas fa-arrow-up"></i>
978
+ <span>+8.3% novas ocorrências</span>
979
+ </div>
980
+ </div>
981
+ <div class="stat-card">
982
+ <div class="stat-label">Potencial Médio</div>
983
+ <div class="stat-value">78.5</div>
984
+ <div class="stat-label">/100</div>
985
+ <div class="stat-change positive">
986
+ <i class="fas fa-arrow-up"></i>
987
+ <span>+5.2 pontos</span>
988
+ </div>
989
+ </div>
990
+ <div class="stat-card">
991
+ <div class="stat-label">Zonas Prioritárias</div>
992
+ <div class="stat-value">23</div>
993
+ <div class="stat-change negative">
994
+ <i class="fas fa-arrow-down"></i>
995
+ <span>-2 zonas vs análise anterior</span>
996
+ </div>
997
+ </div>
998
+ </div>
999
+
1000
+ <!-- Map Container -->
1001
+ <div class="map-container">
1002
+ <div id="map"></div>
1003
+ <div class="map-controls">
1004
+ <button class="map-control-btn" onclick="zoomIn()" title="Aumentar Zoom">
1005
+ <i class="fas fa-plus"></i>
1006
+ </button>
1007
+ <button class="map-control-btn" onclick="zoomOut()" title="Diminuir Zoom">
1008
+ <i class="fas fa-minus"></i>
1009
+ </button>
1010
+ <button class="map-control-btn" onclick="resetView()" title="Resetar Visualização">
1011
+ <i class="fas fa-home"></i>
1012
+ </button>
1013
+ <button class="map-control-btn" onclick="toggleFullscreen()" title="Tela Cheia">
1014
+ <i class="fas fa-expand"></i>
1015
+ </button>
1016
+ </div>
1017
+ </div>
1018
+
1019
+ <!-- Potential Index -->
1020
+ <div class="potential-container">
1021
+ <div class="potential-header">
1022
+ <h2 class="potential-title">Índice de Potencial Mineral</h2>
1023
+ <div class="potential-value">
1024
+ <span class="potential-number" id="potentialScore">85.3</span>
1025
+ <span class="potential-scale">/100</span>
1026
+ </div>
1027
+ </div>
1028
+ <div class="potential-factors" id="potentialFactors">
1029
+ <div class="factor-item">
1030
+ <span class="factor-label">Proximidade a Kimberlitos</span>
1031
+ <div class="factor-bar">
1032
+ <div class="factor-fill" style="width: 90%;"></div>
1033
+ </div>
1034
+ <span class="factor-value">0.40</span>
1035
+ </div>
1036
+ <div class="factor-item">
1037
+ <span class="factor-label">Falhas Profundas</span>
1038
+ <div class="factor-bar">
1039
+ <div class="factor-fill" style="width: 75%;"></div>
1040
+ </div>
1041
+ <span class="factor-value">0.30</span>
1042
+ </div>
1043
+ <div class="factor-item">
1044
+ <span class="factor-label">Depósitos Aluvionares</span>
1045
+ <div class="factor-bar">
1046
+ <div class="factor-fill" style="width: 85%;"></div>
1047
+ </div>
1048
+ <span class="factor-value">0.30</span>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+ </main>
1054
+
1055
+ <!-- Export Modal -->
1056
+ <div class="modal" id="exportModal">
1057
+ <div class="modal-content">
1058
+ <div class="modal-header">
1059
+ <h3 class="modal-title">Exportar Dados</h3>
1060
+ <button class="modal-close" onclick="closeExportModal()">
1061
+ <i class="fas fa-times"></i>
1062
+ </button>
1063
+ </div>
1064
+ <div class="export-options">
1065
+ <div class="export-option" onclick="exportFormat('geojson')">
1066
+ <i class="fas fa-map export-icon"></i>
1067
+ <div class="export-info">
1068
+ <div class="export-title">GeoJSON</div>
1069
+ <div class="export-desc">Formato padrão para dados geoespaciais</div>
1070
+ </div>
1071
+ </div>
1072
+ <div class="export-option" onclick="exportFormat('shapefile')">
1073
+ <i class="fas fa-file-archive export-icon"></i>
1074
+ <div class="export-info">
1075
+ <div class="export-title">Shapefile</div>
1076
+ <div class="export-desc">Formato ESRI Shapefile (.shp)</div>
1077
+ </div>
1078
+ </div>
1079
+ <div class="export-option" onclick="exportFormat('kml')">
1080
+ <i class="fas fa-globe export-icon"></i>
1081
+ <div class="export-info">
1082
+ <div class="export-title">KML</div>
1083
+ <div class="export-desc">Google Earth compatible format</div>
1084
+ </div>
1085
+ </div>
1086
+ <div class="export-option" onclick="exportFormat('csv')">
1087
+ <i class="fas fa-table export-icon"></i>
1088
+ <div class="export-info">
1089
+ <div class="export-title">CSV</div>
1090
+ <div class="export-desc">Dados tabulares com coordenadas</div>
1091
+ </div>
1092
+ </div>
1093
+ </div>
1094
+ <div class="action-buttons">
1095
+ <button class="btn btn-secondary" onclick="closeExportModal()">
1096
+ <i class="fas fa-times"></i>
1097
+ Cancelar
1098
+ </button>
1099
+ <button class="btn btn-primary" onclick="downloadData()">
1100
+ <i class="fas fa-download"></i>
1101
+ Baixar Dados
1102
+ </button>
1103
+ </div>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <!-- Toast Notification -->
1108
+ <div class="toast" id="toast">
1109
+ <i class="toast-icon fas fa-check-circle"></i>
1110
+ <span class="toast-message" id="toastMessage">Operação realizada com sucesso!</span>
1111
+ </div>
1112
+
1113
+ <!-- Leaflet JS -->
1114
+ <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
1115
+
1116
+ <script>
1117
+ // Global variables
1118
+ let map;
1119
+ let layers = {};
1120
+ let currentMineral = 'diamond';
1121
+ let heatmapLayer = null;
1122
+
1123
+ // Initialize map
1124
+ function initMap() {
1125
+ // Create map centered on Angola-Congo region
1126
+ map = L.map('map').setView([-5.0, 18.0], 6);
1127
+
1128
+ // Add tile layer
1129
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
1130
+ attribution: '© OpenStreetMap contributors',
1131
+ maxZoom: 18
1132
+ }).addTo(map);
1133
+
1134
+ // Add sample geological layers
1135
+ addGeologicalLayers();
1136
+
1137
+ // Add mineral occurrences
1138
+ addMineralOccurrences();
1139
+ }
1140
+
1141
+ // Add geological layers
1142
+ function addGeologicalLayers() {
1143
+ // Sample lithology layer
1144
+ const lithologyData = [
1145
+ {lat: -4.5, lng: 15.5, name: "Granito", color: "#8b4513"},
1146
+ {lat: -6.0, lng: 16.0, name: "Gn