Gregory Salaun 12cd1d9d14 first commit
2024-09-29 18:40:23 +07:00

73 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#18181B">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>FlexDXCluster DashBoard</title>
<style>
.card-deck {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.main {
display: flex;
width: 100%;
}
.left {
display: flex;
height: 600px;
flex-direction: column;
}
.right {
display: flex;
height: 400px;
justify-content: right;
}
</style>
</head>
<body>
<br>
<div class="absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"></div>
<h1 class="text-center text-white text-2xl font-bold">Flex DX Cluster Dashboard</h1>
<br>
<br>
<div class="main">
<div class="left">
<div class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mr-2" style="margin-bottom: 2em; height: 12rem; width: 19rem;">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Spots</h5>
<h6 class="card-subtitle mb-2 text-muted">Current number of spots</h6>
<br>
<div class="font-bold text-gray-700 text-center text-4xl dark:text-gray-400" id="spotCount" hx-get="/spotscount" hx-trigger="every 1s" hx-swap="innerHTML"></div>
</div>
<div class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mr-2" style="height: 17rem; width: 19rem;">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Top Spotters</h5>
<div class="font-normal text-gray-700 dark:text-gray-400" id="spotters" hx-get="/spotters" hx-trigger="every 1s" hx-swap="innerHTML"></div>
</div>
</div>
<div class="container w-full mx-auto gap-4">
<div class="flex-container" id="spot" hx-get="/spots" hx-trigger="every 1s" hx-swap="innerHTML"></div>
</div>
<div class="right">
<div class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" style= "height: 18; width: 23rem;">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">To Work</h5>
<h6 class="card-subtitle mb-2 text-muted">New DXCC, Band or Mode</h6>
<div class="card-text" id="new" hx-get="/new" hx-trigger="every 1s" hx-swap="innerHTML"></div>
</div>
</div>
</div>
</body>
</html>