vxaboveground/overlord
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

new globe metrics

Browse Source
This commit is contained in:
KingKDot
2026-06-06 20:31:24 -05:00
parent de67516285
commit bbb0d4b154
5 changed files with 897 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/metrics.html
+82 -17
View File
@@ -12,7 +12,6 @@
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" />
<link rel="stylesheet" href="/vendor/leaflet/leaflet.css" />
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
@@ -21,18 +20,60 @@
position: relative;
z-index: 50;
}
#country-map,
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane {
#country-globe {
position: relative;
z-index: 0;
}
.leaflet-control {
z-index: 2;
#country-globe-canvas {
cursor: grab;
touch-action: none;
user-select: none;
}
#country-globe-canvas.is-dragging {
cursor: grabbing;
}
.country-globe-controls {
position: absolute;
right: 1rem;
top: 1rem;
display: flex;
gap: 0.375rem;
z-index: 3;
}
.country-globe-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.375rem;
border: 1px solid rgba(51, 65, 85, 0.95);
background: rgba(15, 23, 42, 0.82);
color: #cbd5e1;
}
.country-globe-control:hover {
color: #f8fafc;
border-color: rgba(20, 184, 166, 0.72);
background: rgba(15, 23, 42, 0.94);
}
#country-globe-tooltip {
position: absolute;
z-index: 4;
min-width: 9rem;
max-width: 14rem;
padding: 0.5rem 0.625rem;
border: 1px solid rgba(51, 65, 85, 0.95);
border-radius: 0.375rem;
background: rgba(15, 23, 42, 0.94);
color: #e2e8f0;
font-size: 0.75rem;
line-height: 1.25;
pointer-events: none;
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
transform: translate(-50%, calc(-100% - 0.75rem));
}
#country-globe-tooltip.hidden {
display: none;
}
</style>
<script defer src="/vendor/chart.js/chart.umd.js"></script>
@@ -340,17 +381,42 @@
</div>
</div>
<!-- Country Map -->
<!-- Country Globe -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-globe text-emerald-400"></i>
Client Geography Map
Client Geography Globe
</h3>
<div class="text-xs text-slate-500">Darker = more clients</div>
<div class="text-xs text-slate-500">Warmer color = higher client concentration</div>
</div>
<div class="rounded-lg border border-slate-800 overflow-hidden">
<div id="country-map" class="h-96 bg-slate-950"></div>
<div id="country-globe" class="relative rounded-lg border border-slate-800 overflow-hidden bg-slate-950">
<div class="country-globe-controls" aria-label="Globe zoom controls">
<button id="country-globe-zoom-out" class="country-globe-control" type="button" title="Zoom out" aria-label="Zoom out">
<i class="fa-solid fa-minus"></i>
</button>
<button id="country-globe-zoom-reset" class="country-globe-control" type="button" title="Reset zoom" aria-label="Reset zoom">
<i class="fa-solid fa-rotate-left"></i>
</button>
<button id="country-globe-zoom-in" class="country-globe-control" type="button" title="Zoom in" aria-label="Zoom in">
<i class="fa-solid fa-plus"></i>
</button>
</div>
<canvas
id="country-globe-canvas"
class="block w-full h-96"
width="1000"
height="640"
></canvas>
<div id="country-globe-tooltip" class="hidden"></div>
<div class="pointer-events-none absolute left-4 bottom-4 flex items-center gap-2 rounded bg-slate-950/80 border border-slate-800 px-3 py-2 text-xs text-slate-400">
<span>Low</span>
<span
class="inline-block h-2 w-20 rounded-full"
style="background: linear-gradient(90deg, #22d3ee, #6ee7b7, #fbbf24, #ef4444)"
></span>
<span>High</span>
</div>
</div>
<div class="text-xs text-slate-500 mt-2">
Data is based on IP geo lookup and client-reported country.
@@ -376,7 +442,6 @@
</main>
<script type="module" src="/assets/nav.js"></script>
<script defer src="/vendor/leaflet/leaflet.js"></script>
<script type="module" src="/assets/metrics.js"></script>
</body>
</html>