266 lines
16 KiB
HTML
266 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th = "http://www.thymeleaf.org" id = "html" lang = "en" th:attr = "theme = ${theme}, enableFog = ${enableFog}, backgroundColor = ${backgroundColor}">
|
|
<head>
|
|
<meta charset = "UTF-8">
|
|
<title th:text = "${serverName}"></title>
|
|
<link rel = "shortcut icon" type = "image/x-icon" th:href = "@{/img/ico/favicon.ico}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/bootstrap.min.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/animations.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/colors.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/dimensions.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/fonts.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/gradients.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/layout.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/shadows.css}" />
|
|
<link rel = "stylesheet" type = "text/css" th:href = "@{/css/themes.css}" />
|
|
<script type = "text/javascript" th:src = "@{/js/assets/chart.min.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/assets/three.min.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/assets/vanta.min.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/background.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/chart.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/globals.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/index.js}"></script>
|
|
<script type = "text/javascript" th:src = "@{/js/labels.js}"></script>
|
|
<script type = "text/javascript" th:inline = "javascript"> globalsInitialization(); </script>
|
|
</head>
|
|
<body id = "background">
|
|
<script type = "text/javascript" th:inline = "javascript"> backgroundInitialization(); </script>
|
|
<div class = "container index">
|
|
<div class = "row">
|
|
<div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class = "card">
|
|
<div class = "header">
|
|
<div class = "hw-logo first"></div>
|
|
<div class = "label-hw-info">
|
|
<div class = "hw-type">Processor</div>
|
|
<div class = "hw-name" th:text = "${info.processor.name}"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "usage">
|
|
<div class = "card-body-squares-grid first">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class = "main-hw-info">
|
|
<div class = "hw-usage">
|
|
<div class = "usage-value">
|
|
<span id = "processor-hundreds" class = "first">0</span>
|
|
<span id = "processor-tens" class = "second">0</span>
|
|
<span id = "processor-ones" class = "third">0</span>
|
|
</div>
|
|
<div class = "usage-postfix">%</div>
|
|
</div>
|
|
<p class = "info-label">PROCESSOR USAGE</p>
|
|
<div class = "usage-underline first"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "footer first">
|
|
<div class = "card-footer-dots-grid">
|
|
<div class = "first">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "second">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "third">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "detailed-hw-info">
|
|
<div class = "first" th:text = "${info.processor.coreCount}"></div>
|
|
<div id = "currentClockSpeed" class = "second" th:text = "${info.processor.clockSpeed}"></div>
|
|
<div class = "third" th:text = "${info.processor.bitDepth}"></div>
|
|
</div>
|
|
<div class = "dividers">
|
|
<div class = "first"></div>
|
|
<div class = "second"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class = "card">
|
|
<div class = "header">
|
|
<div class = "hw-logo second"></div>
|
|
<div class = "label-hw-info">
|
|
<div class = "hw-type">Machine</div>
|
|
<div class = "hw-name" th:text = "${info.machine.operatingSystem}"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "usage">
|
|
<div class = "card-body-squares-grid second">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class = "main-hw-info">
|
|
<div class = "hw-usage">
|
|
<div class = "usage-value">
|
|
<span id = "ram-hundreds" class = "first">0</span>
|
|
<span id = "ram-tens" class = "second">0</span>
|
|
<span id = "ram-ones" class = "third">0</span>
|
|
</div>
|
|
<div class = "usage-postfix">%</div>
|
|
</div>
|
|
<p class = "info-label">RAM USAGE</p>
|
|
<div class = "usage-underline second"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "footer second">
|
|
<div class = "card-footer-dots-grid">
|
|
<div class = "first">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "second">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "third">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "detailed-hw-info">
|
|
<div class = "first" th:text = "${info.machine.totalRam}"></div>
|
|
<div class = "second" th:text = "${info.machine.ramTypeOrOSBitDepth}"></div>
|
|
<div id = "currentProcCount" class = "third" th:text = "${info.machine.procCount}"></div>
|
|
</div>
|
|
<div class = "dividers">
|
|
<div class = "first"></div>
|
|
<div class = "second"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
|
|
<div class = "card">
|
|
<div class = "header">
|
|
<div class = "hw-logo third"></div>
|
|
<div class = "label-hw-info">
|
|
<div class = "hw-type">Storage</div>
|
|
<div class = "hw-name" th:text = "${info.storage.mainStorage}"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "usage">
|
|
<div class = "card-body-squares-grid third">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class = "main-hw-info">
|
|
<div class = "hw-usage">
|
|
<div class = "usage-value">
|
|
<span id = "storage-hundreds" class = "first">0</span>
|
|
<span id = "storage-tens" class = "second">0</span>
|
|
<span id = "storage-ones" class = "third">0</span>
|
|
</div>
|
|
<div class = "usage-postfix">%</div>
|
|
</div>
|
|
<div class = "info-label">STORAGE USAGE</div>
|
|
<div class = "usage-underline third"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "footer third">
|
|
<div class = "card-footer-dots-grid">
|
|
<div class = "first">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "second">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
<div class = "third">
|
|
<div class = "inner-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class = "detailed-hw-info">
|
|
<div id = "currentTotalStorage" class = "first" th:text = "${info.storage.total}"></div>
|
|
<div id = "currentDiskCount" class = "second" th:text = "${info.storage.diskCount}"></div>
|
|
<div class = "third" th:text = "${info.storage.swapAmount}"></div>
|
|
</div>
|
|
<div class = "dividers">
|
|
<div class = "first"></div>
|
|
<div class = "second"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type = "text/javascript" th:inline = "javascript"> labelsInitialization(); </script>
|
|
<div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4 sm-hidden">
|
|
<div class = "card">
|
|
<div class = "controls">
|
|
<img id = "first-control" class = "first" th:src = @{/img/controls/left.png} />
|
|
<img id = "second-control" class = "second" th:src = @{/img/controls/right.png} />
|
|
</div>
|
|
<div class = "pages">
|
|
<div id = "logo-page" class = "first">
|
|
<div class = "logo">WARD</div>
|
|
<div class = "logo-description">SERVER DASHBOARD</div>
|
|
</div>
|
|
<div id = "contacts-page" class = "second">
|
|
<div class = "contacts-label">CONTACTS</div>
|
|
<div class = "contacts-description">
|
|
<div class = "first">Feel free to ask questions and leave feedback</div>
|
|
<div class = "second">You can also text author in Telegram</div>
|
|
</div>
|
|
<div class = "contacts-links">
|
|
<a href = "https://github.com/AntonyLeons/Ward">
|
|
<img class = "first" th:src = @{/img/links/github.png} />
|
|
</a>
|
|
<a href = "https://t.me/leonsdev">
|
|
<img class = "second" th:src = @{/img/links/telegram.png} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class = "clouds">
|
|
<img id = "cloud-left" class = "first" th:src = @{/img/logo/clouds/left.png} />
|
|
<img id = "cloud-right" class = "second" th:src = @{/img/logo/clouds/right.png} />
|
|
</div>
|
|
<img class = "background" th:src = @{/img/logo/background.png} />
|
|
<div class = "uptime">
|
|
<div class = "uptime-squares-grid">
|
|
<div class = "first"></div>
|
|
<div class = "second"></div>
|
|
<div class = "third"></div>
|
|
</div>
|
|
<div class = "uptime-rectangle-grid">
|
|
<div class = "values-grid">
|
|
<div><p id = "uptime-days" th:text = "${uptime.days}"></p></div>
|
|
<div><p id = "uptime-hours" th:text = "${uptime.hours}"></p></div>
|
|
<div><p id = "uptime-minutes" th:text = "${uptime.minutes}"></p></div>
|
|
<div><p id = "uptime-seconds" th:text = "${uptime.seconds}"></p></div>
|
|
</div>
|
|
<div class = "labels-grid">
|
|
<div>DAYS</div>
|
|
<div>HOURS</div>
|
|
<div>MINUTES</div>
|
|
<div>SECONDS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class = "col-lg-12 col-xl-8 sm-hidden">
|
|
<div class = "card">
|
|
<div class = "chart-label">% Utilization</div>
|
|
<div class = "chart-triangle-grid">
|
|
<div id = "processor-triangle" class = "first"></div>
|
|
<div id = "ram-triangle" class = "second"></div>
|
|
<div id = "storage-triangle" class = "third"></div>
|
|
</div>
|
|
<div class = "chart-rectangle-grid">
|
|
<div id = "processor-rectangle" class = "first"></div>
|
|
<div id = "ram-rectangle" class = "second"></div>
|
|
<div id = "storage-rectangle" class = "third"></div>
|
|
</div>
|
|
<div class = "chart-container">
|
|
<canvas id = "chart-body"></canvas>
|
|
</div>
|
|
<script type = "text/javascript" th:inline = "javascript"> chartInitialization(); </script>
|
|
</div>
|
|
<div id = "project-version" class = "text-center" th:text = "${version}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type = "text/javascript" th:inline = "javascript"> indexInitialization(); </script>
|
|
</body>
|
|
</html> |