Hugging Face's logo

Spaces:
Re2906
/
anycoder-ebe8fc62
Running

App Files Community
Re2906 commited on
Commit
d3c0da4
·
verified ·
1 Parent(s): ef402ea

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1094 -19
index.html CHANGED
@@ -1,19 +1,1094 @@
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>Firely Server Deployment Dashboard</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #4a90e2;
11
+ --primary-dark: #357abd;
12
+ --secondary: #50c878;
13
+ --danger: #e74c3c;
14
+ --warning: #f39c12;
15
+ --dark: #2c3e50;
16
+ --darker: #1a252f;
17
+ --light: #ecf0f1;
18
+ --white: #ffffff;
19
+ --gray: #95a5a6;
20
+ --success: #27ae60;
21
+ --info: #3498db;
22
+ --border-radius: 12px;
23
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
25
+ --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
36
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
37
+ min-height: 100vh;
38
+ color: var(--dark);
39
+ position: relative;
40
+ }
41
+
42
+ body::before {
43
+ content: '';
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ right: 0;
48
+ bottom: 0;
49
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,165.3C384,171,480,149,576,138.7C672,128,768,128,864,138.7C960,149,1056,171,1152,165.3C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
50
+ background-size: cover;
51
+ pointer-events: none;
52
+ z-index: -1;
53
+ }
54
+
55
+ .container {
56
+ max-width: 1400px;
57
+ margin: 0 auto;
58
+ padding: 20px;
59
+ }
60
+
61
+ header {
62
+ background: rgba(255, 255, 255, 0.95);
63
+ backdrop-filter: blur(10px);
64
+ border-radius: var(--border-radius);
65
+ padding: 30px;
66
+ margin-bottom: 30px;
67
+ box-shadow: var(--shadow);
68
+ animation: slideDown 0.5s ease-out;
69
+ }
70
+
71
+ @keyframes slideDown {
72
+ from {
73
+ opacity: 0;
74
+ transform: translateY(-20px);
75
+ }
76
+ to {
77
+ opacity: 1;
78
+ transform: translateY(0);
79
+ }
80
+ }
81
+
82
+ .header-content {
83
+ display: flex;
84
+ justify-content: space-between;
85
+ align-items: center;
86
+ flex-wrap: wrap;
87
+ gap: 20px;
88
+ }
89
+
90
+ .logo {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 15px;
94
+ }
95
+
96
+ .logo i {
97
+ font-size: 2.5rem;
98
+ color: var(--primary);
99
+ animation: pulse 2s infinite;
100
+ }
101
+
102
+ @keyframes pulse {
103
+ 0%, 100% { transform: scale(1); }
104
+ 50% { transform: scale(1.05); }
105
+ }
106
+
107
+ .logo h1 {
108
+ font-size: 1.8rem;
109
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
110
+ -webkit-background-clip: text;
111
+ -webkit-text-fill-color: transparent;
112
+ }
113
+
114
+ .status-indicators {
115
+ display: flex;
116
+ gap: 20px;
117
+ align-items: center;
118
+ }
119
+
120
+ .status-badge {
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 8px;
124
+ padding: 8px 16px;
125
+ background: var(--white);
126
+ border-radius: 20px;
127
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
128
+ transition: var(--transition);
129
+ }
130
+
131
+ .status-badge:hover {
132
+ transform: translateY(-2px);
133
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
134
+ }
135
+
136
+ .status-dot {
137
+ width: 10px;
138
+ height: 10px;
139
+ border-radius: 50%;
140
+ animation: blink 2s infinite;
141
+ }
142
+
143
+ .status-dot.online { background: var(--success); }
144
+ .status-dot.offline { background: var(--danger); }
145
+ .status-dot.warning { background: var(--warning); }
146
+
147
+ @keyframes blink {
148
+ 0%, 100% { opacity: 1; }
149
+ 50% { opacity: 0.5; }
150
+ }
151
+
152
+ .main-grid {
153
+ display: grid;
154
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
155
+ gap: 20px;
156
+ margin-bottom: 30px;
157
+ }
158
+
159
+ .card {
160
+ background: rgba(255, 255, 255, 0.95);
161
+ backdrop-filter: blur(10px);
162
+ border-radius: var(--border-radius);
163
+ padding: 25px;
164
+ box-shadow: var(--shadow);
165
+ transition: var(--transition);
166
+ animation: fadeInUp 0.5s ease-out forwards;
167
+ opacity: 0;
168
+ }
169
+
170
+ .card:nth-child(1) { animation-delay: 0.1s; }
171
+ .card:nth-child(2) { animation-delay: 0.2s; }
172
+ .card:nth-child(3) { animation-delay: 0.3s; }
173
+ .card:nth-child(4) { animation-delay: 0.4s; }
174
+
175
+ @keyframes fadeInUp {
176
+ from {
177
+ opacity: 0;
178
+ transform: translateY(20px);
179
+ }
180
+ to {
181
+ opacity: 1;
182
+ transform: translateY(0);
183
+ }
184
+ }
185
+
186
+ .card:hover {
187
+ transform: translateY(-5px);
188
+ box-shadow: var(--shadow-lg);
189
+ }
190
+
191
+ .card-header {
192
+ display: flex;
193
+ justify-content: space-between;
194
+ align-items: center;
195
+ margin-bottom: 20px;
196
+ padding-bottom: 15px;
197
+ border-bottom: 2px solid var(--light);
198
+ }
199
+
200
+ .card-title {
201
+ font-size: 1.2rem;
202
+ font-weight: 600;
203
+ color: var(--dark);
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 10px;
207
+ }
208
+
209
+ .card-title i {
210
+ color: var(--primary);
211
+ }
212
+
213
+ .metric-value {
214
+ font-size: 2rem;
215
+ font-weight: bold;
216
+ color: var(--primary);
217
+ margin: 10px 0;
218
+ }
219
+
220
+ .metric-label {
221
+ color: var(--gray);
222
+ font-size: 0.9rem;
223
+ }
224
+
225
+ .progress-bar {
226
+ width: 100%;
227
+ height: 8px;
228
+ background: var(--light);
229
+ border-radius: 4px;
230
+ overflow: hidden;
231
+ margin: 10px 0;
232
+ }
233
+
234
+ .progress-fill {
235
+ height: 100%;
236
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
237
+ border-radius: 4px;
238
+ transition: width 0.5s ease-out;
239
+ }
240
+
241
+ .deployment-form {
242
+ background: rgba(255, 255, 255, 0.95);
243
+ backdrop-filter: blur(10px);
244
+ border-radius: var(--border-radius);
245
+ padding: 30px;
246
+ box-shadow: var(--shadow);
247
+ margin-bottom: 30px;
248
+ }
249
+
250
+ .form-grid {
251
+ display: grid;
252
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
253
+ gap: 20px;
254
+ margin-bottom: 20px;
255
+ }
256
+
257
+ .form-group {
258
+ display: flex;
259
+ flex-direction: column;
260
+ }
261
+
262
+ .form-label {
263
+ font-weight: 600;
264
+ margin-bottom: 8px;
265
+ color: var(--dark);
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 5px;
269
+ }
270
+
271
+ .form-label i {
272
+ font-size: 0.9rem;
273
+ color: var(--gray);
274
+ }
275
+
276
+ .form-control {
277
+ padding: 12px 15px;
278
+ border: 2px solid var(--light);
279
+ border-radius: 8px;
280
+ font-size: 1rem;
281
+ transition: var(--transition);
282
+ background: var(--white);
283
+ }
284
+
285
+ .form-control:focus {
286
+ outline: none;
287
+ border-color: var(--primary);
288
+ box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
289
+ }
290
+
291
+ .form-control.error {
292
+ border-color: var(--danger);
293
+ }
294
+
295
+ .error-message {
296
+ color: var(--danger);
297
+ font-size: 0.85rem;
298
+ margin-top: 5px;
299
+ display: none;
300
+ }
301
+
302
+ .btn {
303
+ padding: 12px 24px;
304
+ border: none;
305
+ border-radius: 8px;
306
+ font-size: 1rem;
307
+ font-weight: 600;
308
+ cursor: pointer;
309
+ transition: var(--transition);
310
+ display: inline-flex;
311
+ align-items: center;
312
+ gap: 8px;
313
+ }
314
+
315
+ .btn-primary {
316
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
317
+ color: var(--white);
318
+ }
319
+
320
+ .btn-primary:hover {
321
+ transform: translateY(-2px);
322
+ box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3);
323
+ }
324
+
325
+ .btn-success {
326
+ background: linear-gradient(135deg, var(--success), #229954);
327
+ color: var(--white);
328
+ }
329
+
330
+ .btn-danger {
331
+ background: linear-gradient(135deg, var(--danger), #c0392b);
332
+ color: var(--white);
333
+ }
334
+
335
+ .btn:disabled {
336
+ opacity: 0.5;
337
+ cursor: not-allowed;
338
+ }
339
+
340
+ .tabs {
341
+ display: flex;
342
+ gap: 10px;
343
+ margin-bottom: 20px;
344
+ border-bottom: 2px solid var(--light);
345
+ overflow-x: auto;
346
+ }
347
+
348
+ .tab {
349
+ padding: 12px 20px;
350
+ background: transparent;
351
+ border: none;
352
+ border-bottom: 3px solid transparent;
353
+ color: var(--gray);
354
+ font-weight: 600;
355
+ cursor: pointer;
356
+ transition: var(--transition);
357
+ white-space: nowrap;
358
+ }
359
+
360
+ .tab:hover {
361
+ color: var(--primary);
362
+ }
363
+
364
+ .tab.active {
365
+ color: var(--primary);
366
+ border-bottom-color: var(--primary);
367
+ }
368
+
369
+ .tab-content {
370
+ display: none;
371
+ animation: fadeIn 0.3s ease-out;
372
+ }
373
+
374
+ .tab-content.active {
375
+ display: block;
376
+ }
377
+
378
+ @keyframes fadeIn {
379
+ from { opacity: 0; }
380
+ to { opacity: 1; }
381
+ }
382
+
383
+ .log-viewer {
384
+ background: var(--darker);
385
+ color: var(--light);
386
+ padding: 20px;
387
+ border-radius: 8px;
388
+ font-family: 'Courier New', monospace;
389
+ font-size: 0.9rem;
390
+ max-height: 400px;
391
+ overflow-y: auto;
392
+ margin-top: 20px;
393
+ }
394
+
395
+ .log-entry {
396
+ margin-bottom: 5px;
397
+ padding: 5px;
398
+ border-radius: 4px;
399
+ transition: var(--transition);
400
+ }
401
+
402
+ .log-entry:hover {
403
+ background: rgba(255, 255, 255, 0.05);
404
+ }
405
+
406
+ .log-timestamp {
407
+ color: var(--gray);
408
+ margin-right: 10px;
409
+ }
410
+
411
+ .log-level {
412
+ padding: 2px 6px;
413
+ border-radius: 4px;
414
+ font-size: 0.8rem;
415
+ font-weight: bold;
416
+ margin-right: 10px;
417
+ }
418
+
419
+ .log-level.info { background: var(--info); }
420
+ .log-level.success { background: var(--success); }
421
+ .log-level.warning { background: var(--warning); }
422
+ .log-level.error { background: var(--danger); }
423
+
424
+ .health-check {
425
+ display: grid;
426
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
427
+ gap: 15px;
428
+ margin-top: 20px;
429
+ }
430
+
431
+ .health-item {
432
+ padding: 15px;
433
+ background: var(--light);
434
+ border-radius: 8px;
435
+ display: flex;
436
+ align-items: center;
437
+ gap: 10px;
438
+ transition: var(--transition);
439
+ }
440
+
441
+ .health-item:hover {
442
+ transform: translateX(5px);
443
+ }
444
+
445
+ .health-icon {
446
+ font-size: 1.5rem;
447
+ }
448
+
449
+ .health-icon.healthy { color: var(--success); }
450
+ .health-icon.unhealthy { color: var(--danger); }
451
+ .health-icon.checking { color: var(--warning); }
452
+
453
+ .modal {
454
+ display: none;
455
+ position: fixed;
456
+ top: 0;
457
+ left: 0;
458
+ right: 0;
459
+ bottom: 0;
460
+ background: rgba(0, 0, 0, 0.5);
461
+ backdrop-filter: blur(5px);
462
+ z-index: 1000;
463
+ animation: fadeIn 0.3s ease-out;
464
+ }
465
+
466
+ .modal.active {
467
+ display: flex;
468
+ align-items: center;
469
+ justify-content: center;
470
+ }
471
+
472
+ .modal-content {
473
+ background: var(--white);
474
+ border-radius: var(--border-radius);
475
+ padding: 30px;
476
+ max-width: 500px;
477
+ width: 90%;
478
+ max-height: 90vh;
479
+ overflow-y: auto;
480
+ animation: slideUp 0.3s ease-out;
481
+ }
482
+
483
+ @keyframes slideUp {
484
+ from {
485
+ opacity: 0;
486
+ transform: translateY(20px);
487
+ }
488
+ to {
489
+ opacity: 1;
490
+ transform: translateY(0);
491
+ }
492
+ }
493
+
494
+ .modal-header {
495
+ display: flex;
496
+ justify-content: space-between;
497
+ align-items: center;
498
+ margin-bottom: 20px;
499
+ }
500
+
501
+ .modal-title {
502
+ font-size: 1.5rem;
503
+ font-weight: bold;
504
+ }
505
+
506
+ .modal-close {
507
+ background: none;
508
+ border: none;
509
+ font-size: 1.5rem;
510
+ cursor: pointer;
511
+ color: var(--gray);
512
+ transition: var(--transition);
513
+ }
514
+
515
+ .modal-close:hover {
516
+ color: var(--danger);
517
+ }
518
+
519
+ .spinner {
520
+ border: 3px solid var(--light);
521
+ border-top: 3px solid var(--primary);
522
+ border-radius: 50%;
523
+ width: 40px;
524
+ height: 40px;
525
+ animation: spin 1s linear infinite;
526
+ margin: 20px auto;
527
+ }
528
+
529
+ @keyframes spin {
530
+ 0% { transform: rotate(0deg); }
531
+ 100% { transform: rotate(360deg); }
532
+ }
533
+
534
+ .toast {
535
+ position: fixed;
536
+ bottom: 20px;
537
+ right: 20px;
538
+ padding: 15px 20px;
539
+ background: var(--white);
540
+ border-radius: 8px;
541
+ box-shadow: var(--shadow);
542
+ display: flex;
543
+ align-items: center;
544
+ gap: 10px;
545
+ transform: translateX(400px);
546
+ transition: transform 0.3s ease-out;
547
+ z-index: 2000;
548
+ }
549
+
550
+ .toast.show {
551
+ transform: translateX(0);
552
+ }
553
+
554
+ .toast.success { border-left: 4px solid var(--success); }
555
+ .toast.error { border-left: 4px solid var(--danger); }
556
+ .toast.warning { border-left: 4px solid var(--warning); }
557
+ .toast.info { border-left: 4px solid var(--info); }
558
+
559
+ .chart-container {
560
+ position: relative;
561
+ height: 300px;
562
+ margin-top: 20px;
563
+ }
564
+
565
+ .environment-selector {
566
+ display: flex;
567
+ gap: 10px;
568
+ margin-bottom: 20px;
569
+ }
570
+
571
+ .env-btn {
572
+ padding: 10px 20px;
573
+ border: 2px solid var(--light);
574
+ background: var(--white);
575
+ border-radius: 8px;
576
+ cursor: pointer;
577
+ transition: var(--transition);
578
+ font-weight: 600;
579
+ }
580
+
581
+ .env-btn:hover {
582
+ border-color: var(--primary);
583
+ transform: translateY(-2px);
584
+ }
585
+
586
+ .env-btn.active {
587
+ background: var(--primary);
588
+ color: var(--white);
589
+ border-color: var(--primary);
590
+ }
591
+
592
+ .secret-input {
593
+ position: relative;
594
+ }
595
+
596
+ .secret-toggle {
597
+ position: absolute;
598
+ right: 10px;
599
+ top: 50%;
600
+ transform: translateY(-50%);
601
+ background: none;
602
+ border: none;
603
+ color: var(--gray);
604
+ cursor: pointer;
605
+ }
606
+
607
+ .deployment-history {
608
+ margin-top: 20px;
609
+ }
610
+
611
+ .history-item {
612
+ padding: 15px;
613
+ background: var(--light);
614
+ border-radius: 8px;
615
+ margin-bottom: 10px;
616
+ display: flex;
617
+ justify-content: space-between;
618
+ align-items: center;
619
+ transition: var(--transition);
620
+ }
621
+
622
+ .history-item:hover {
623
+ background: #e8ecef;
624
+ transform: translateX(5px);
625
+ }
626
+
627
+ .history-status {
628
+ padding: 4px 12px;
629
+ border-radius: 20px;
630
+ font-size: 0.85rem;
631
+ font-weight: 600;
632
+ }
633
+
634
+ .history-status.success {
635
+ background: var(--success);
636
+ color: var(--white);
637
+ }
638
+
639
+ .history-status.failed {
640
+ background: var(--danger);
641
+ color: var(--white);
642
+ }
643
+
644
+ .history-status.running {
645
+ background: var(--warning);
646
+ color: var(--white);
647
+ }
648
+
649
+ @media (max-width: 768px) {
650
+ .container {
651
+ padding: 10px;
652
+ }
653
+
654
+ .header-content {
655
+ flex-direction: column;
656
+ text-align: center;
657
+ }
658
+
659
+ .status-indicators {
660
+ flex-wrap: wrap;
661
+ justify-content: center;
662
+ }
663
+
664
+ .form-grid {
665
+ grid-template-columns: 1fr;
666
+ }
667
+
668
+ .tabs {
669
+ flex-wrap: nowrap;
670
+ overflow-x: scroll;
671
+ }
672
+
673
+ .modal-content {
674
+ padding: 20px;
675
+ }
676
+ }
677
+
678
+ .footer {
679
+ text-align: center;
680
+ padding: 20px;
681
+ color: var(--white);
682
+ margin-top: 40px;
683
+ }
684
+
685
+ .footer a {
686
+ color: var(--white);
687
+ text-decoration: none;
688
+ font-weight: 600;
689
+ transition: var(--transition);
690
+ }
691
+
692
+ .footer a:hover {
693
+ text-decoration: underline;
694
+ }
695
+ </style>
696
+ </head>
697
+ <body>
698
+ <div class="container">
699
+ <header>
700
+ <div class="header-content">
701
+ <div class="logo">
702
+ <i class="fas fa-server"></i>
703
+ <h1>Firely Server Deployment Dashboard</h1>
704
+ </div>
705
+ <div class="status-indicators">
706
+ <div class="status-badge">
707
+ <span class="status-dot online"></span>
708
+ <span>Docker: Online</span>
709
+ </div>
710
+ <div class="status-badge">
711
+ <span class="status-dot online"></span>
712
+ <span>Environment: <span id="currentEnv">Dev</span></span>
713
+ </div>
714
+ <div class="status-badge">
715
+ <i class="fas fa-clock"></i>
716
+ <span id="currentTime"></span>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </header>
721
+
722
+ <div class="main-grid">
723
+ <div class="card">
724
+ <div class="card-header">
725
+ <div class="card-title">
726
+ <i class="fas fa-rocket"></i>
727
+ Deployments
728
+ </div>
729
+ <span class="metric-value" id="deploymentCount">0</span>
730
+ </div>
731
+ <div class="metric-label">Total Deployments</div>
732
+ <div class="progress-bar">
733
+ <div class="progress-fill" style="width: 75%"></div>
734
+ </div>
735
+ <div class="metric-label" style="margin-top: 10px;">Success Rate: 75%</div>
736
+ </div>
737
+
738
+ <div class="card">
739
+ <div class="card-header">
740
+ <div class="card-title">
741
+ <i class="fas fa-heartbeat"></i>
742
+ Health Status
743
+ </div>
744
+ <i class="fas fa-check-circle" style="color: var(--success);"></i>
745
+ </div>
746
+ <div class="metric-value">100%</div>
747
+ <div class="metric-label">Services Healthy</div>
748
+ <div class="health-check">
749
+ <div class="health-item">
750
+ <i class="fas fa-database health-icon healthy"></i>
751
+ <span>Database</span>
752
+ </div>
753
+ <div class="health-item">
754
+ <i class="fas fa-network-wired health-icon healthy"></i>
755
+ <span>API</span>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="card">
761
+ <div class="card-header">
762
+ <div class="card-title">
763
+ <i class="fas fa-memory"></i>
764
+ Resource Usage
765
+ </div>
766
+ <i class="fas fa-chart-line" style="color: var(--info);"></i>
767
+ </div>
768
+ <div class="metric-value">2.4 GB</div>
769
+ <div class="metric-label">Memory Used</div>
770
+ <div class="progress-bar">
771
+ <div class="progress-fill" style="width: 60%"></div>
772
+ </div>
773
+ <div class="metric-label" style="margin-top: 10px;">CPU: 45%</div>
774
+ </div>
775
+
776
+ <div class="card">
777
+ <div class="card-header">
778
+ <div class="card-title">
779
+ <i class="fas fa-shield-alt"></i>
780
+ Security
781
+ </div>
782
+ <i class="fas fa-lock" style="color: var(--success);"></i>
783
+ </div>
784
+ <div class="metric-value">Enabled</div>
785
+ <div class="metric-label">HTTPS Active</div>
786
+ <div class="progress-bar">
787
+ <div class="progress-fill" style="width: 100%; background: var(--success)"></div>
788
+ </div>
789
+ <div class="metric-label" style="margin-top: 10px;">Certificate Valid</div>
790
+ </div>
791
+ </div>
792
+
793
+ <div class="deployment-form">
794
+ <div class="card-header">
795
+ <div class="card-title">
796
+ <i class="fas fa-cogs"></i>
797
+ Deployment Configuration
798
+ </div>
799
+ </div>
800
+
801
+ <div class="environment-selector">
802
+ <button class="env-btn active" data-env="Dev">
803
+ <i class="fas fa-flask"></i> Development
804
+ </button>
805
+ <button class="env-btn" data-env="Test">
806
+ <i class="fas fa-vial"></i> Testing
807
+ </button>
808
+ <button class="env-btn" data-env="Prod">
809
+ <i class="fas fa-industry"></i> Production
810
+ </button>
811
+ </div>
812
+
813
+ <form id="deploymentForm">
814
+ <div class="form-grid">
815
+ <div class="form-group">
816
+ <label class="form-label">
817
+ <i class="fas fa-file-contract"></i>
818
+ License File Path
819
+ </label>
820
+ <input type="text" class="form-control" id="licensePath"
821
+ placeholder="./config/licenses/firely-dev.lic" required>
822
+ <span class="error-message">License file is required</span>
823
+ </div>
824
+
825
+ <div class="form-group">
826
+ <label class="form-label">
827
+ <i class="fas fa-folder"></i>
828
+ Configuration Path
829
+ </label>
830
+ <input type="text" class="form-control" id="configPath"
831
+ placeholder="./config/dev" required>
832
+ <span class="error-message">Configuration path is required</span>
833
+ </div>
834
+
835
+ <div class="form-group">
836
+ <label class="form-label">
837
+ <i class="fas fa-plug"></i>
838
+ HTTP Port
839
+ </label>
840
+ <input type="number" class="form-control" id="httpPort"
841
+ value="8080" min="1" max="65535" required>
842
+ <span class="error-message">Valid port required</span>
843
+ </div>
844
+
845
+ <div class="form-group">
846
+ <label class="form-label">
847
+ <i class="fas fa-lock"></i>
848
+ HTTPS Port
849
+ </label>
850
+ <input type="number" class="form-control" id="httpsPort"
851
+ value="8443" min="1" max="65535" required>
852
+ <span class="error-message">Valid port required</span>
853
+ </div>
854
+
855
+ <div class="form-group">
856
+ <label class="form-label">
857
+ <i class="fas fa-fingerprint"></i>
858
+ Certificate Thumbprint
859
+ </label>
860
+ <input type="text" class="form-control" id="certThumbprint"
861
+ placeholder="Required for Production">
862
+ <span class="error-message">Certificate thumbprint required for Production</span>
863
+ </div>
864
+
865
+ <div class="form-group">
866
+ <label class="form-label">
867
+ <i class="fas fa-key"></i>
868
+ Database Password Secret
869
+ </label>
870
+ <div class="secret-input">
871
+ <input type="password" class="form-control" id="dbPasswordSecret"
872
+ placeholder="Secret name or value">
873
+ <button type="button" class="secret-toggle" onclick="toggleSecret('dbPasswordSecret')">
874
+ <i class="fas fa-eye"></i>
875
+ </button>
876
+ </div>
877
+ </div>
878
+
879
+ <div class="form-group">
880
+ <label class="form-label">
881
+ <i class="fas fa-user-shield"></i>
882
+ Auth Authority Secret
883
+ </label>
884
+ <div class="secret-input">
885
+ <input type="password" class="form-control" id="authAuthoritySecret"
886
+ placeholder="Secret name or URL">
887
+ <button type="button" class="secret-toggle" onclick="toggleSecret('authAuthoritySecret')">
888
+ <i class="fas fa-eye"></i>
889
+ </button>
890
+ </div>
891
+ </div>
892
+
893
+ <div class="form-group">
894
+ <label class="form-label">
895
+ <i class="fas fa-users"></i>
896
+ Auth Audience Secret
897
+ </label>
898
+ <div class="secret-input">
899
+ <input type="password" class="form-control" id="authAudienceSecret"
900
+ placeholder="Secret name or value">
901
+ <button type="button" class="secret-toggle" onclick="toggleSecret('authAudienceSecret')">
902
+ <i class="fas fa-eye"></i>
903
+ </button>
904
+ </div>
905
+ </div>
906
+ </div>
907
+
908
+ <div class="form-group" style="flex-direction: row; gap: 20px; margin-top: 20px;">
909
+ <label style="display: flex; align-items: center; gap: 8px;">
910
+ <input type="checkbox" id="withMonitoring">
911
+ <span>Enable Monitoring Stack (Prometheus, Grafana)</span>
912
+ </label>
913
+ <label style="display: flex; align-items: center; gap: 8px;">
914
+ <input type="checkbox" id="withSecurity">
915
+ <span>Enable Enhanced Security</span>
916
+ </label>
917
+ <label style="display: flex; align-items: center; gap: 8px;">
918
+ <input type="checkbox" id="forceDeploy">
919
+ <span>Force Deployment (overwrite)</span>
920
+ </label>
921
+ </div>
922
+
923
+ <div style="display: flex; gap: 10px; margin-top: 20px;">
924
+ <button type="submit" class="btn btn-primary">
925
+ <i class="fas fa-rocket"></i>
926
+ Deploy Firely Server
927
+ </button>
928
+ <button type="button" class="btn btn-success" onclick="validateConfiguration()">
929
+ <i class="fas fa-check"></i>
930
+ Validate Configuration
931
+ </button>
932
+ <button type="button" class="btn btn-danger" onclick="resetForm()">
933
+ <i class="fas fa-undo"></i>
934
+ Reset
935
+ </button>
936
+ </div>
937
+ </form>
938
+ </div>
939
+
940
+ <div class="card">
941
+ <div class="card-header">
942
+ <div class="card-title">
943
+ <i class="fas fa-tasks"></i>
944
+ Deployment Operations
945
+ </div>
946
+ </div>
947
+
948
+ <div class="tabs">
949
+ <button class="tab active" onclick="switchTab('logs')">
950
+ <i class="fas fa-file-alt"></i> Logs
951
+ </button>
952
+ <button class="tab" onclick="switchTab('monitoring')">
953
+ <i class="fas fa-chart-bar"></i> Monitoring
954
+ </button>
955
+ <button class="tab" onclick="switchTab('health')">
956
+ <i class="fas fa-heartbeat"></i> Health Checks
957
+ </button>
958
+ <button class="tab" onclick="switchTab('history')">
959
+ <i class="fas fa-history"></i> History
960
+ </button>
961
+ </div>
962
+
963
+ <div id="logs" class="tab-content active">
964
+ <div class="log-viewer" id="logViewer">
965
+ <div class="log-entry">
966
+ <span class="log-timestamp">2024-01-15 10:30:45</span>
967
+ <span class="log-level info">INFO</span>
968
+ <span>Initializing Firely Server Deployment Dashboard...</span>
969
+ </div>
970
+ <div class="log-entry">
971
+ <span class="log-timestamp">2024-01-15 10:30:46</span>
972
+ <span class="log-level success">SUCCESS</span>
973
+ <span>Docker daemon connected successfully</span>
974
+ </div>
975
+ <div class="log-entry">
976
+ <span class="log-timestamp">2024-01-15 10:30:47</span>
977
+ <span class="log-level info">INFO</span>
978
+ <span>Loading environment configuration for Dev</span>
979
+ </div>
980
+ <div class="log-entry">
981
+ <span class="log-timestamp">2024-01-15 10:30:48</span>
982
+ <span class="log-level success">SUCCESS</span>
983
+ <span>All dependencies verified and ready</span>
984
+ </div>
985
+ </div>
986
+ </div>
987
+
988
+ <div id="monitoring" class="tab-content">
989
+ <div class="chart-container">
990
+ <canvas id="performanceChart"></canvas>
991
+ </div>
992
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px;">
993
+ <div class="health-item">
994
+ <i class="fas fa-tachometer-alt" style="color: var(--info);"></i>
995
+ <div>
996
+ <div>Response Time</div>
997
+ <strong>45ms</strong>
998
+ </div>
999
+ </div>
1000
+ <div class="health-item">
1001
+ <i class="fas fa-exchange-alt" style="color: var(--success);"></i>
1002
+ <div>
1003
+ <div>Requests/sec</div>
1004
+ <strong>234</strong>
1005
+ </div>
1006
+ </div>
1007
+ <div class="health-item">
1008
+ <i class="fas fa-hdd" style="color: var(--warning);"></i>
1009
+ <div>
1010
+ <div>Disk Usage</div>
1011
+ <strong>67%</strong>
1012
+ </div>
1013
+ </div>
1014
+ <div class="health-item">
1015
+ <i class="fas fa-network-wired" style="color: var(--primary);"></i>
1016
+ <div>
1017
+ <div>Network I/O</div>
1018
+ <strong>12 MB/s</strong>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <div id="health" class="tab-content">
1025
+ <div class="health-check">
1026
+ <div class="health-item">
1027
+ <i class="fas fa-database health-icon healthy"></i>
1028
+ <div>
1029
+ <div>PostgreSQL</div>
1030
+ <strong>Healthy</strong>
1031
+ </div>
1032
+ </div>
1033
+ <div class="health-item">
1034
+ <i class="fas fa-server health-icon healthy"></i>
1035
+ <div>
1036
+ <div>Firely Server</div>
1037
+ <strong>Running</strong>
1038
+ </div>
1039
+ </div>
1040
+ <div class="health-item">
1041
+ <i class="fas fa-chart-line health-icon healthy"></i>
1042
+ <div>
1043
+ <div>Prometheus</div>
1044
+ <strong>Active</strong>
1045
+ </div>
1046
+ </div>
1047
+ <div class="health-item">
1048
+ <i class="fas fa-chart-pie health-icon healthy"></i>
1049
+ <div>
1050
+ <div>Grafana</div>
1051
+ <strong>Available</strong>
1052
+ </div>
1053
+ </div>
1054
+ <div class="health-item">
1055
+ <i class="fas fa-lock health-icon healthy"></i>
1056
+ <div>
1057
+ <div>SSL Certificate</div>
1058
+ <strong>Valid</strong>
1059
+ </div>
1060
+ </div>
1061
+ <div class="health-item">
1062
+ <i class="fas fa-memory health-icon checking"></i>
1063
+ <div>
1064
+ <div>Memory Check</div>
1065
+ <strong>Checking...</strong>
1066
+ </div>
1067
+ </div>
1068
+ </div>
1069
+ </div>
1070
+
1071
+ <div id="history" class="tab-content">
1072
+ <div class="deployment-history" id="deploymentHistory">
1073
+ <div class="history-item">
1074
+ <div>
1075
+ <strong>Deployment #1234</strong>
1076
+ <div style="color: var(--gray); font-size: 0.9rem;">
1077
+ Environment: Prod | Time: 2024-01-15 09:15:30
1078
+ </div>
1079
+ </div>
1080
+ <span class="history-status success">Success</span>
1081
+ </div>
1082
+ <div class="history-item">
1083
+ <div>
1084
+ <strong>Deployment #1233</strong>
1085
+ <div style="color: var(--gray); font-size: 0.9rem;">
1086
+ Environment: Test | Time: 2024-01-15 08:45:12
1087
+ </div>
1088
+ </div>
1089
+ <span class="history-status success">Success</span>
1090
+ </div>
1091
+ <div class="history-item">
1092
+ <div>
1093
+ <strong>Deployment #1232</strong>
1094
+ <div style="color: var(--gray); font-size: 0.9