0ct0pu5/DweebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
DweebUI/views/dashboard.html
lllllllillllllillll 4bdf1e3148 Almost a complete rewrite, part 5. Almost ready.
2024-10-27 17:55:40 -07:00

188 lines
No EOL
8.4 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<!--Tabler - version 1.0.0-beta20 - Copyright 2018-2023 The Tabler Authors - Copyright 2018-2023 codecalm.net Paweł Kuna - Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Dashboard - DweebUI.</title>
<link href="/css/tabler.min.css?1692870487" rel="stylesheet"/>
<link href="/css/demo.min.css?1692870487" rel="stylesheet"/>
<link href="/css/dweebui.css" rel="stylesheet"/>
</head>
<body>
<div class="page">
<!-- EJS -->
<%- navbar %>
<div class="page-wrapper" hx-ext="sse" sse-connect="/sse">
<div class="page-body" style="margin-top: 16px;">
<div class="container-xl">
<div class="row row-deck row-cards">
<div class="col-12">
<div class="row row-cards">
<div class="col-sm-6 col-lg-3">
<div class="card card-sm">
<div class="card-body">
<div class="row align-items-center">
<div class="col-auto">
<span class="bg-green text-white avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cpu" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path><path d="M9 9h6v6h-6z"></path><path d="M3 10h2"></path><path d="M3 14h2"></path><path d="M10 3v2"></path><path d="M14 3v2"></path><path d="M21 10h-2"></path><path d="M21 14h-2"></path><path d="M14 21v-2"></path><path d="M10 21v-2"></path></svg>
</span>
</div>
<!-- HTMX -->
<div class="col" name="CPU" id="green" data-hx-get="/server_metrics" data-hx-trigger="load, every 1s" hx-swap="innerHTML">
<div class="font-weight-medium">
<label class="cpu-text mb-1">CPU 0%</label>
</div>
<div class="cpu-bar meter animate green">
<span style="width:20%"><span></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card card-sm">
<div class="card-body">
<div class="row align-items-center">
<div class="col-auto">
<span class="bg-blue text-white avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-container" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 4v.01"></path> <path d="M20 20v.01"></path> <path d="M20 16v.01"></path> <path d="M20 12v.01"></path> <path d="M20 8v.01"></path> <path d="M8 4m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"></path> <path d="M4 4v.01"></path> <path d="M4 20v.01"></path> <path d="M4 16v.01"></path> <path d="M4 12v.01"></path> <path d="M4 8v.01"></path> </svg>
</span>
</div>
<!-- HTMX -->
<div class="col" name="RAM" id="blue" data-hx-get="/server_metrics" data-hx-trigger="load, every 2s" hx-swap="innerHTML">
<div class="font-weight-medium">
<label class="ram-text mb-1">RAM 0%</label>
</div>
<div class="ram-bar meter animate blue">
<span style="width:20%"><span></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card card-sm">
<div class="card-body">
<div class="row align-items-center">
<div class="col-auto">
<span class="bg-purple text-white avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-left-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M21 17l-18 0"></path> <path d="M6 10l-3 -3l3 -3"></path> <path d="M3 7l18 0"></path> <path d="M18 20l3 -3l-3 -3"></path> </svg>
</span>
</div>
<div class="col" name="NET" id="purple" data-hx-get="/server_metrics" data-hx-trigger="load, every 3s">
<div class="font-weight-medium">NET 0%</div>
<div class="cpu-bar meter animate purple mt-1">
<span style="width:20%"><span></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card card-sm">
<div class="card-body">
<div class="row align-items-center">
<div class="col-auto">
<span class="bg-orange text-white avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-database" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 6m-8 0a8 3 0 1 0 16 0a8 3 0 1 0 -16 0"></path> <path d="M4 6v6a8 3 0 0 0 16 0v-6"></path> <path d="M4 12v6a8 3 0 0 0 16 0v-6"></path></svg>
</span>
</div>
<!-- HTMX -->
<div class="col" name="DISK" id="orange" data-hx-get="/server_metrics" data-hx-trigger="load, every 3s">
<div class="font-weight-medium">
<label class="disk-text mb-1">DISK 0%</label>
</div>
<div class="meter animate orange">
<span style="width:20%"><span></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row row-cards" id="containers">
</div>
</div>
<!-- HTMX -->
<div class="col-12">
<div class="row row-cards" name="card_list" hx-get="/dashboard/view/card_list" data-hx-trigger="load, sse:update" data-hx-swap="afterbegin" hx-target="#containers"></div>
</div>
</div>
</div>
</div>
<!-- EJS -->
<%- footer %>
</div>
</div>
<div class="modal slim-modal modal-blur fade" id="scrolling_modal" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content" id="modal_content">
<!-- modal content inserted with htmx -->
</div>
</div>
</div>
<div class="modal medium-modal modal-blur fade" id="medium_modal" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content" id="medium_modal_content">
<!-- modal content inserted with htmx -->
</div>
</div>
</div>
<div class="modal wide-modal modal-blur fade" id="wide_modal" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content" id="wide_modal_content">
<!-- modal content inserted with htmx -->
</div>
</div>
</div>
<script defer>
var modalScrollable = document.getElementById('wide_modal');
modalScrollable.addEventListener('shown.bs.modal', function () {
modalScrollable.querySelector('.modal-body').scrollTop = modalScrollable.querySelector('.modal-body').scrollHeight;
});
</script>
<script src="/libs/apexcharts/dist/apexcharts.min.js?1692870487"></script>
<script src="/js/dweebui.js"></script>
<script src="/js/htmx.min.js"></script>
<script src="/js/htmx-sse.js"></script>
<script src="/js/tabler.min.js?1692870487" defer></script>
<script src="/js/demo.min.js?1692870487" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink