Hugging Face's logo

Spaces:
Ndodson
/
ausdraft-4-division-2-hub
Running

App Files Community
Ndodson commited on
Commit
07e854c
·
verified ·
1 Parent(s): f310783

make this box darkmode

Browse files
Files changed (1) hide show
  1. index.html +43 -45
index.html CHANGED
@@ -393,115 +393,113 @@ Team Average Ratings (Captain Included)
393
  </div>
394
  </div>
395
  <!-- Captain Draft Value % (Division 2) — Vertical Bars; 85% empty, 105% full -->
396
- <div style="width:100%;max-width:900px;margin:0 auto;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
397
- <h4 style="margin:0 0 12px 0;font-weight:600;font-size:18px;">
398
- Captain Draft Value % (Division 2)
399
  </h4>
400
 
401
  <!-- Chart area -->
402
  <div style="position:relative;height:240px;padding:28px 24px 28px 56px;border-left:1px solid #374151;border-bottom:1px solid #374151;margin-bottom:12px;overflow:visible;">
403
  <!-- gridlines at 105, 95, 85 -->
404
- <div style="position:absolute;left:56px;right:24px;top:0;height:1px;background:#e5e7eb;"></div>
405
- <div style="position:absolute;left:56px;right:24px;top:80px;height:1px;background:#f1f5f9;"></div>
406
- <div style="position:absolute;left:56px;right:24px;bottom:28px;height:1px;background:#e5e7eb;"></div>
407
-
408
- <!-- y-axis labels -->
409
- <div style="position:absolute;top:2px;left:8px;font-size:12px;color:#6b7280;">105%</div>
410
- <div style="position:absolute;top:82px;left:12px;font-size:12px;color:#94a3b8;">95%</div>
411
- <div style="position:absolute;bottom:26px;left:12px;font-size:12px;color:#6b7280;">85%</div>
412
-
413
- <!-- Bars track row (track = 160px tall). Height px = clamp((value - 85) * 8, 0, 160). -->
414
  <div style="position:absolute;left:56px;right:24px;bottom:28px;height:160px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;">
415
 
416
  <!-- Finrod Felegund: 97.9 -> (12.9*8)=~103px ; BLUE -->
417
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
418
- <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
419
- <div style="position:absolute;left:0;right:0;bottom:0;height:103px;background:#2563eb;"></div>
420
  </div>
421
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Finrod</div>
422
- <div style="font-size:12px;color:#6b7280;">97.9%</div>
423
- </div>
424
 
425
  <!-- DeJake: 101.2 -> (16.2*8)=~130px ; RED -->
426
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
427
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
428
  <div style="position:absolute;left:0;right:0;bottom:0;height:130px;background:#dc2626;"></div>
429
  </div>
430
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">DeJake</div>
431
- <div style="font-size:12px;color:#6b7280;">101.2%</div>
432
- </div>
433
 
434
  <!-- Nephthys: 97.5 -> 100px ; GREEN -->
435
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
436
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
437
  <div style="position:absolute;left:0;right:0;bottom:0;height:100px;background:#16a34a;"></div>
438
  </div>
439
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Nephthys</div>
440
- <div style="font-size:12px;color:#6b7280;">97.5%</div>
441
- </div>
442
 
443
  <!-- Sp Bro: 102.5 -> 140px ; YELLOW -->
444
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
445
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
446
  <div style="position:absolute;left:0;right:0;bottom:0;height:140px;background:#f59e0b;"></div>
447
  </div>
448
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Sp Bro</div>
449
- <div style="font-size:12px;color:#6b7280;">102.5%</div>
450
- </div>
451
 
452
  <!-- Pran: 96.5 -> 92px ; VIOLET -->
453
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
454
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
455
  <div style="position:absolute;left:0;right:0;bottom:0;height:92px;background:#7c3aed;"></div>
456
  </div>
457
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Pran</div>
458
- <div style="font-size:12px;color:#6b7280;">96.5%</div>
459
- </div>
460
 
461
  <!-- CharChar: 98.3 -> 106px ; TEAL -->
462
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
463
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
464
  <div style="position:absolute;left:0;right:0;bottom:0;height:106px;background:#0891b2;"></div>
465
  </div>
466
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">CharChar</div>
467
- <div style="font-size:12px;color:#6b7280;">98.3%</div>
468
- </div>
469
 
470
  <!-- TDI: 97.2 -> 98px ; BRIGHT RED -->
471
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
472
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
473
  <div style="position:absolute;left:0;right:0;bottom:0;height:98px;background:#ef4444;"></div>
474
  </div>
475
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">TDI</div>
476
- <div style="font-size:12px;color:#6b7280;">97.2%</div>
477
- </div>
478
 
479
  <!-- Humble: 95.2 -> 82px ; EMERALD -->
480
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
481
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
482
  <div style="position:absolute;left:0;right:0;bottom:0;height:82px;background:#10b981;"></div>
483
  </div>
484
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Humble</div>
485
- <div style="font-size:12px;color:#6b7280;">95.2%</div>
486
- </div>
487
 
488
  <!-- Brod10: 86.6 -> 13px ; ROSE -->
489
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
490
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
491
  <div style="position:absolute;left:0;right:0;bottom:0;height:13px;background:#fb7185;"></div>
492
  </div>
493
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Brod10</div>
494
- <div style="font-size:12px;color:#6b7280;">86.6%</div>
495
- </div>
496
 
497
  <!-- Braedes: 92.8 -> 62px ; ORANGE -->
498
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
499
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
500
  <div style="position:absolute;left:0;right:0;bottom:0;height:62px;background:#f97316;"></div>
501
  </div>
502
- <div style="margin-top:6px;font-size:12px;color:#111827;text-align:center;">Braedes</div>
503
- <div style="font-size:12px;color:#6b7280;">92.8%</div>
504
- </div>
505
 
506
  </div>
507
  </div>
 
393
  </div>
394
  </div>
395
  <!-- Captain Draft Value % (Division 2) — Vertical Bars; 85% empty, 105% full -->
396
+ <div style="width:100%;max-width:900px;margin:0 auto;background:#1f2937;border:1px solid #374151;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
397
+ <h4 style="margin:0 0 12px 0;font-weight:600;font-size:18px;color:#fff;">
398
+ Captain Draft Value % (Division 2)
399
  </h4>
400
 
401
  <!-- Chart area -->
402
  <div style="position:relative;height:240px;padding:28px 24px 28px 56px;border-left:1px solid #374151;border-bottom:1px solid #374151;margin-bottom:12px;overflow:visible;">
403
  <!-- gridlines at 105, 95, 85 -->
404
+ <div style="position:absolute;left:56px;right:24px;top:0;height:1px;background:#374151;"></div>
405
+ <div style="position:absolute;left:56px;right:24px;top:80px;height:1px;background:#4b5563;"></div>
406
+ <div style="position:absolute;left:56px;right:24px;bottom:28px;height:1px;background:#374151;"></div>
407
+ <!-- y-axis labels -->
408
+ <div style="position:absolute;top:2px;left:8px;font-size:12px;color:#9ca3af;">105%</div>
409
+ <div style="position:absolute;top:82px;left:12px;font-size:12px;color:#6b7280;">95%</div>
410
+ <div style="position:absolute;bottom:26px;left:12px;font-size:12px;color:#9ca3af;">85%</div>
411
+ <!-- Bars track row (track = 160px tall). Height px = clamp((value - 85) * 8, 0, 160). -->
 
 
412
  <div style="position:absolute;left:56px;right:24px;bottom:28px;height:160px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;">
413
 
414
  <!-- Finrod Felegund: 97.9 -> (12.9*8)=~103px ; BLUE -->
415
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
416
+ <div style="height:160px;width:32px;background:#374151;border-radius:8px;position:relative;overflow:hidden;">
417
+ <div style="position:absolute;left:0;right:0;bottom:0;height:103px;background:#2563eb;"></div>
418
  </div>
419
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Finrod</div>
420
+ <div style="font-size:12px;color:#9ca3af;">97.9%</div>
421
+ </div>
422
 
423
  <!-- DeJake: 101.2 -> (16.2*8)=~130px ; RED -->
424
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
425
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
426
  <div style="position:absolute;left:0;right:0;bottom:0;height:130px;background:#dc2626;"></div>
427
  </div>
428
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">DeJake</div>
429
+ <div style="font-size:12px;color:#9ca3af;">101.2%</div>
430
+ </div>
431
 
432
  <!-- Nephthys: 97.5 -> 100px ; GREEN -->
433
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
434
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
435
  <div style="position:absolute;left:0;right:0;bottom:0;height:100px;background:#16a34a;"></div>
436
  </div>
437
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Nephthys</div>
438
+ <div style="font-size:12px;color:#9ca3af;">97.5%</div>
439
+ </div>
440
 
441
  <!-- Sp Bro: 102.5 -> 140px ; YELLOW -->
442
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
443
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
444
  <div style="position:absolute;left:0;right:0;bottom:0;height:140px;background:#f59e0b;"></div>
445
  </div>
446
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Sp Bro</div>
447
+ <div style="font-size:12px;color:#9ca3af;">102.5%</div>
448
+ </div>
449
 
450
  <!-- Pran: 96.5 -> 92px ; VIOLET -->
451
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
452
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
453
  <div style="position:absolute;left:0;right:0;bottom:0;height:92px;background:#7c3aed;"></div>
454
  </div>
455
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Pran</div>
456
+ <div style="font-size:12px;color:#9ca3af;">96.5%</div>
457
+ </div>
458
 
459
  <!-- CharChar: 98.3 -> 106px ; TEAL -->
460
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
461
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
462
  <div style="position:absolute;left:0;right:0;bottom:0;height:106px;background:#0891b2;"></div>
463
  </div>
464
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">CharChar</div>
465
+ <div style="font-size:12px;color:#9ca3af;">98.3%</div>
466
+ </div>
467
 
468
  <!-- TDI: 97.2 -> 98px ; BRIGHT RED -->
469
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
470
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
471
  <div style="position:absolute;left:0;right:0;bottom:0;height:98px;background:#ef4444;"></div>
472
  </div>
473
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">TDI</div>
474
+ <div style="font-size:12px;color:#9ca3af;">97.2%</div>
475
+ </div>
476
 
477
  <!-- Humble: 95.2 -> 82px ; EMERALD -->
478
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
479
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
480
  <div style="position:absolute;left:0;right:0;bottom:0;height:82px;background:#10b981;"></div>
481
  </div>
482
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Humble</div>
483
+ <div style="font-size:12px;color:#9ca3af;">95.2%</div>
484
+ </div>
485
 
486
  <!-- Brod10: 86.6 -> 13px ; ROSE -->
487
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
488
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
489
  <div style="position:absolute;left:0;right:0;bottom:0;height:13px;background:#fb7185;"></div>
490
  </div>
491
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Brod10</div>
492
+ <div style="font-size:12px;color:#9ca3af;">86.6%</div>
493
+ </div>
494
 
495
  <!-- Braedes: 92.8 -> 62px ; ORANGE -->
496
  <div style="display:flex;flex-direction:column;align-items:center;width:80px;">
497
  <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;">
498
  <div style="position:absolute;left:0;right:0;bottom:0;height:62px;background:#f97316;"></div>
499
  </div>
500
+ <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Braedes</div>
501
+ <div style="font-size:12px;color:#9ca3af;">92.8%</div>
502
+ </div>
503
 
504
  </div>
505
  </div>