309 lines
7.7 KiB
HTML
309 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Storage Matrix</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<style>
|
|
* { border-radius: 0 !important; }
|
|
|
|
body {
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
background: #fff;
|
|
color: #000;
|
|
padding: 20px;
|
|
}
|
|
|
|
.box {
|
|
border: 4px solid #000;
|
|
background: #fff;
|
|
}
|
|
|
|
.nav-link {
|
|
font-weight: 900;
|
|
text-decoration: underline;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background: #000;
|
|
color: #fff;
|
|
text-align: left;
|
|
padding: 12px;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
td {
|
|
border: 2px solid #000;
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #ffff00;
|
|
}
|
|
|
|
.meter {
|
|
width: 100%;
|
|
height: 40px;
|
|
border: 3px solid #000;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meter-fill {
|
|
height: 100%;
|
|
background: #000;
|
|
}
|
|
|
|
.status-live {
|
|
background: #00ff00;
|
|
color: #000;
|
|
font-weight: 900;
|
|
padding: 4px 8px;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
.status-deleted {
|
|
background: #ff0000;
|
|
color: #fff;
|
|
font-weight: 900;
|
|
padding: 4px 8px;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
.glitch {
|
|
animation: glitch 0.6s infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { transform: translate(0px, 0px); }
|
|
20% { transform: translate(-2px, 1px); }
|
|
40% { transform: translate(2px, -1px); }
|
|
60% { transform: translate(-1px, 2px); }
|
|
80% { transform: translate(1px, -2px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<header class="mb-8 border-b-8 border-black pb-4 flex justify-between items-start">
|
|
<div>
|
|
<h1 class="text-5xl font-black uppercase tracking-tighter leading-none">
|
|
STORAGE_ANALYTICS
|
|
</h1>
|
|
|
|
<div class="text-sm font-black uppercase mt-2 text-gray-600">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end gap-2">
|
|
<a href="/admin" class="nav-link">← BACK_TO_ADMIN</a>
|
|
<a href="/config" class="nav-link">CONFIG_MODULE</a>
|
|
<a href="/logout" class="nav-link text-red-600">LOGOUT_SESSION</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
|
|
<div class="box p-6">
|
|
<div class="text-xs font-black uppercase mb-2">
|
|
TOTAL_STORAGE_USED
|
|
</div>
|
|
|
|
<div class="text-5xl font-black">
|
|
{{humanSize .Stats.TotalBytes}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box p-6">
|
|
<div class="text-xs font-black uppercase mb-2">
|
|
DISK_FREE_SPACE
|
|
</div>
|
|
|
|
<div class="text-5xl font-black text-green-600">
|
|
{{humanSize .Stats.DiskFreeBytes}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box p-6">
|
|
<div class="text-xs font-black uppercase mb-2">
|
|
TEMP_CHUNK_STORAGE
|
|
</div>
|
|
|
|
<div class="text-5xl font-black text-yellow-500">
|
|
{{humanSize .Stats.TempBytes}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- DISK BAR -->
|
|
<div class="box p-6 mb-8">
|
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div class="text-xl font-black uppercase">
|
|
DISK_CONSUMPTION
|
|
</div>
|
|
|
|
<div class="text-sm font-black uppercase">
|
|
{{humanSize .Stats.DiskUsedBytes}}
|
|
/
|
|
{{humanSize .Stats.DiskTotalBytes}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meter">
|
|
<div
|
|
class="meter-fill"
|
|
style="width: {{percent .Stats.DiskUsedBytes .Stats.DiskTotalBytes}}%;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-6xl font-black">
|
|
{{percent .Stats.DiskUsedBytes .Stats.DiskTotalBytes}}%
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- SECONDARY STATS -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
|
|
<div class="box p-4">
|
|
<div class="text-xs uppercase font-black">
|
|
TOTAL_FILES
|
|
</div>
|
|
|
|
<div class="text-4xl font-black mt-2">
|
|
{{.Stats.TotalFiles}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box p-4">
|
|
<div class="text-xs uppercase font-black">
|
|
ACTIVE_FILES
|
|
</div>
|
|
|
|
<div class="text-4xl font-black text-green-600 mt-2">
|
|
{{.Stats.ActiveFiles}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box p-4">
|
|
<div class="text-xs uppercase font-black">
|
|
DELETED_FILES
|
|
</div>
|
|
|
|
<div class="text-4xl font-black text-red-600 mt-2">
|
|
{{.Stats.DeletedFiles}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box p-4">
|
|
<div class="text-xs uppercase font-black">
|
|
AVERAGE_SIZE
|
|
</div>
|
|
|
|
<div class="text-4xl font-black mt-2">
|
|
{{humanSize .Stats.AverageFileSize}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="box overflow-x-auto mb-8">
|
|
|
|
<div class="bg-black text-white p-4 font-black uppercase text-lg">
|
|
LARGEST_FILES_ON_SYSTEM
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Filename</th>
|
|
<th>Size</th>
|
|
<th>Downloads</th>
|
|
<th>Created</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{{if not .Stats.LargestFiles}}
|
|
<tr>
|
|
<td colspan="5" class="text-center py-10 uppercase font-black italic">
|
|
No files detected in storage matrix
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
|
|
{{range .Stats.LargestFiles}}
|
|
<tr>
|
|
|
|
<td class="font-bold">
|
|
{{.Filename}}
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap">
|
|
{{humanSize .Size}}
|
|
</td>
|
|
|
|
<td class="font-black text-lg">
|
|
{{.DownloadCount}}
|
|
</td>
|
|
|
|
<td class="text-[11px]">
|
|
{{.CreatedAt.Format "02/01/06 15:04"}}
|
|
</td>
|
|
|
|
<td>
|
|
{{if .Deleted}}
|
|
<span class="status-deleted">
|
|
DELETED
|
|
</span>
|
|
{{else}}
|
|
<span class="status-live">
|
|
LIVE
|
|
</span>
|
|
{{end}}
|
|
</td>
|
|
|
|
</tr>
|
|
{{end}}
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<footer class="border-t-8 border-black pt-4 flex justify-between items-center">
|
|
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |