Github
/
Ward
mirror of
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI refresh (#123) 

* Updates To UI Elements

* Updates To UI Elements - Icons

* fix colours

* restore old stats

* Update InfoService.java

* bump version

---------

Co-authored-by: Stephen Adams <126944565+Techeryy@users.noreply.github.com>
This commit is contained in:
Antony Leons 2024-04-15 17:07:18 +01:00 committed by GitHub
parent 59c1de6978
commit c1601d4727
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 56 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -91,3 +91,10 @@ port = 8200
enableFog = true
backgroundColor = #303030
```
### Credits
Original Creator: https://github.com/Rudolf-Barbu/Ward
<a href="https://www.flaticon.com/free-icons/control-panel" title="control panel icons">Control panel icons created by Freepik - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/processor" title="processor icons">Processor icons created by Those Icons - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/ram" title="ram icons">Ram icons created by srip - Flaticon</a>
<a href="https://www.flaticon.com/free-icons/hard-disk" title="hard disk icons">Hard disk icons created by Freepik - Flaticon</a>

2
pom.xml
View File

@ -6,7 +6,7 @@
<modelVersion>4.0.0</modelVersion>
<groupId>dev.leons</groupId>
<artifactId>ward</artifactId>
<version>2.5.1</version>
<version>2.5.2</version>
<packaging>jar</packaging>
<!-- parent pom -->

10
src/main/java/dev/leons/ward/services/InfoService.java
View File

@ -128,12 +128,11 @@ public class InfoService
OperatingSystem.OSVersionInfo osVersionInfo = operatingSystem.getVersionInfo();
GlobalMemory globalMemory = systemInfo.getHardware().getMemory();
String osDescription = operatingSystem.getFamily() + " " + osVersionInfo.getVersion() + ", "
+ osVersionInfo.getCodeName();
String osDescription = operatingSystem.getFamily() + " " + osVersionInfo.getVersion();
machineDto.setOperatingSystem(osDescription);
long totalRam = globalMemory.getTotal();
machineDto.setTotalRam(getConvertedCapacity(totalRam) + " Ram");
machineDto.setTotalRam(getConvertedCapacity(totalRam) + " RAM");
Optional<PhysicalMemory> physicalMemoryOptional = globalMemory.getPhysicalMemory().stream().findFirst();
String ramTypeOrOSBitDepth;
@ -163,10 +162,11 @@ public class InfoService
GlobalMemory globalMemory = systemInfo.getHardware().getMemory();
// Retrieve main storage model
String mainStorage = hwDiskStores.isEmpty() ? "Undefined" : hwDiskStores.get(0).getModel().replaceAll("\\(.+?\\)", "").trim();
String mainStorage = hwDiskStores.isEmpty() ? "Undefined"
: hwDiskStores.get(0).getModel().replaceAll("\\(.+?\\)", "").trim();
storageDto.setMainStorage(mainStorage);
long total = hwDiskStores.stream().mapToLong(HWDiskStore::getSize).sum();
long total = hwDiskStores.stream().mapToLong(HWDiskStore::getSize).sum();
storageDto.setTotal(getConvertedCapacity(total) + " Total");
int diskCount = hwDiskStores.size();

34
src/main/resources/static/css/animations.css
View File

@ -19,8 +19,6 @@
--animation-duration-fade-in-setup-div: 0.4s;
--animation-duration-fade-in-square: 0.5s;
--animation-duration-wiggle-usage-value: 0.6s;
--animation-duration-wiggle-first-control: 1s;
--animation-duration-wiggle-second-control: 1s;
--animation-duration-fade-in-triangle: 0.5s;
--animation-duration-fade-in-error-div: 0.8s;
@ -87,38 +85,6 @@
}
}
@keyframes wiggle-first-control
{
0%
{
left: 0.750rem;
}
50%
{
left: 1.750rem;
}
100%
{
left: 0.750rem;
}
}
@keyframes wiggle-second-control
{
0%
{
left: 19.250rem;
}
50%
{
left: 18.250rem;
}
100%
{
left: 19.250rem;
}
}
@keyframes fade-in-cloud-left
{
0%

9
src/main/resources/static/css/colors.css
View File

@ -33,15 +33,18 @@
--grey-dark: rgba(60, 60, 60, 1);
/* blue */
--blue-light: rgba(230, 232, 254, 1);
--blue-light: rgba(121, 131, 247, 1);
--blue-form: rgba(230, 232, 254, 1);
--blue: rgba(89, 101, 249, 1);
/* red */
--red-light: rgba(249, 226, 226, 1);
--red-light: rgba(255, 117, 117, 1);
--red-form: rgba(249, 226, 226, 1);
--red: rgba(255, 89, 89, 1);
/* green */
--green-light: rgba(212, 242, 225, 1);
--green-light: rgba(70, 191, 157, 1);
--green-form: rgba(212, 242, 225, 1);
--green: rgba(8, 193, 141, 1);
/* purple */

44
src/main/resources/static/css/dimensions.css
View File

@ -29,16 +29,10 @@
--top-port: 2.7rem;
--top-header: 1.5rem;
--top-label-hw-info: 0.562rem;
--top-card-body-squares-grid: 0.813rem;
--top-info-label: 4.188rem;
--top-inner-dot: 0.375rem;
--top-detailed-hw-info-div: 1.168rem;
--top-controls-img: 0.75rem;
--top-announcement: 3.813rem;
--top-contacts-label: 1.5rem;
--top-contacts-description-first: 3.125rem;
--top-contacts-description-second: 3.813rem;
--top-contacts-links-a-img: 4.906rem;
--top-uptime-rectangle-grid: 1.925rem;
--top-chart-label: 1.5rem;
--top-chart-triangle-grid: 0.5rem;
@ -53,8 +47,6 @@
--bottom-submit: 1.125rem;
--bottom-usage: 4.625rem;
--bottom-hw-usage-div: 0.25rem;
--bottom-card-footer-dots-grid-div: -0.75rem;
--bottom-uptime-squares-grid: 0.813rem;
--bottom-values-grid-div-p: 0.25rem;
--bottom-project-version: 1.25rem;
--bottom-error-div: 7.5rem;
@ -74,20 +66,12 @@
--left-header: 1.5rem;
--left-label-hw-info: 4.375rem;
--left-usage: 1.5rem;
--card-footer-dots-grid-first: 2.906rem;
--card-footer-dots-grid-second: 10.187rem;
--card-footer-dots-grid-third: 17.468rem;
--left-inner-dot: 0.375rem;
--left-detailed-hw-info-first: 0.822rem;
--left-detailed-hw-info-second: 8.104rem;
--left-detailed-hw-info-third: 15.385rem;
--left-dividers-first: 7.313rem;
--left-dividers-second: 14.563rem;
--left-controls-first: 0.75rem;
--left-controls-second: 19.25rem;
--left-contacts-links-a-first: 8.075rem;
--left-contacts-links-a-second: 11.7rem;
--left-uptime-squares-grid: 9.25rem;
--left-uptime-rectangle-grid: 2.23rem;
--left-chart-label: 1.5rem;
--left-chart-triangle-grid-first: 34.375rem;
@ -102,18 +86,19 @@
--left-title: 1.813rem;
--left-explanation: 1.813rem;
/* margin */
--margin-hardware-icon: 0.65rem;
/* margin-right */
--margin-right-form-squares-grid-div: 0.488rem;
--margin-right-theme-buttons-first: 1.938rem;
--margin-right-usage-value: 2.937rem;
--margin-right-uptime-squares-grid-div: 0.488rem;
--margin-right-values-grid-div: 0.125rem;
--margin-right-labels-grid-div: 0.125rem;
/* margin-bottom */
--margin-bottom-label-main-settings: 0.438rem;
--margin-bottom-card: 1.875rem;
--margin-bottom-card-body-squares-grid-div: 0.75rem;
--margin-bottom-labels-grid-div: 0.313rem;
/* height */
@ -138,20 +123,14 @@
--height-index-md: 53.438rem;
--height-hw-logo: 3.75rem;
--height-usage: 5.313rem;
--height-card-body-squares-grid-div: 0.625rem;
--height-main-hw-info: 100%;
--height-usage-value-span: 5.8rem;
--height-usage-underline: 0.313rem;
--height-footer: 3.125rem;
--height-card-footer-dots-grid-div: 1.5rem;
--height-inner-dot: 0.75rem;
--height-detailed-hw-info-div: 1.063rem;
--height-dividers-div: 3.125rem;
--height-controls: 2.625rem;
--height-controls-img: 1.875rem;
--height-contacts-links-a-img: 2.125rem;
--height-uptime: 8.27rem;
--height-uptime-squares-grid-div: 0.625rem;
--height-values-grid-div: 3.188rem;
--height-labels-grid-div: 0.813rem;
--height-chart-rectangle-grid-div: 0.625rem;
@ -159,6 +138,7 @@
--height-error: 25.75rem;
--height-error-img: 19.313rem;
--height-error-div: 12.125rem;
--height-hardware-icon: 2.5rem;
/* max-height */
--max-height-card: 16.562rem;
@ -188,23 +168,15 @@
--width-submit: 8.75rem;
--width-hw-logo: 3.75rem;
--width-usage: 18.875rem;
--width-card-body-squares-grid-div: 0.625rem;
--width-usage-value-span: 2.224rem;
--width-info-label: 9.5rem;
--width-usage-underline: 9.5rem;
--width-footer: 100%;
--width-card-footer-dots-grid-div: 1.5rem;
--width-inner-dot: 0.75rem;
--width-detailed-hw-info-div: 5.625rem;
--width-dividers-div: 0.063rem;
--width-controls: 100%;
--width-controls-img: 1.875rem;
--width-announcement: 21.875rem;
--width-contacts-label: 21.875rem;
--width-contacts-description-div: 21.875rem;
--width-contacts-links-a-img: 2.125rem;
--width-uptime: 100%;
--width-uptime-squares-grid-div: 0.625rem;
--width-values-grid-div: 3.75rem;
--width-labels-grid-div: 3.75rem;
--day-width-values-grid-div: 5rem;
@ -214,6 +186,7 @@
--width-error-img: 19.313rem;
--width-error-div: 23.875rem;
--width-advice: 23.875rem;
--width-hardware-icon: 2.5rem;
/* max-width */
--max-width-setup: 71.25rem;
@ -243,10 +216,8 @@
--border-radius-port: 0rem 0rem 0.625rem 0.625rem;
--border-radius-card: 1.25rem;
--border-radius-hw-logo: 50%;
--border-radius-card-footer-dots-grid-div: 50%;
--border-radius-inner-dot: 50%;
--border-radius-error-img: 50%;
--border-radius-controls-img: 50%;
--border-radius-error-div: 1.25rem;
/* letter-spacing */
@ -261,10 +232,5 @@
--transform-form-squares-grid-second: scale(1.3);
--transform-theme-buttons-input-active: scale(0.9);
--transform-submit-active: scale(0.9);
--transform-controls-first-active: scale(0.9);
--transform-controls-second-active: scale(0.9);
--transform-contacts-links-a-first-active: scale(0.9);
--transform-contacts-links-a-second-active: scale(0.9);
--transform-uptime-squares-grid-second: scale(1.3);
--transform-chart-rectangle-grid-div-active: scale(0.9);
}

4
src/main/resources/static/css/gradients.css
View File

@ -15,8 +15,8 @@
:root
{
/* linear-gradient */
--linear-gradient-form-light: linear-gradient(45deg, var(--blue-light) 0%, var(--red-light) 50%, var(--green-light) 100%);
--linear-gradient-form-light: linear-gradient(45deg, var(--blue-form) 0%, var(--red-form) 50%, var(--green-form) 100%);
--linear-gradient-form-dark: linear-gradient(45deg, var(--grey) 0%, var(--grey-dimmed) 50%, var(--grey) 100%);
--linear-gradient-uptime-light: linear-gradient(45deg, var(--blue-light) 0%, var(--red-light) 50%, var(--green-light) 100%);
--linear-gradient-uptime-light: linear-gradient(45deg, var(--blue-form) 0%, var(--red-form) 50%, var(--green-form) 100%);
--linear-gradient-uptime-dark: linear-gradient(45deg, var(--grey) 0%, var(--grey-dimmed) 50%, var(--grey) 100%);
}

193
src/main/resources/static/css/layout.css
View File

@ -466,29 +466,6 @@ body {
left: var(--left-usage);
}
.card-body-squares-grid {
position: absolute;
top: var(--top-card-body-squares-grid);
}
.card-body-squares-grid > div {
margin-bottom: var(--margin-bottom-card-body-squares-grid-div);
height: var(--height-card-body-squares-grid-div);
width: var(--width-card-body-squares-grid-div);
}
.card-body-squares-grid.first > div {
background: var(--background-card-body-squares-grid-first-div);
}
.card-body-squares-grid.second > div {
background: var(--background-card-body-squares-grid-second-div);
}
.card-body-squares-grid.third > div {
background: var(--background-card-body-squares-grid-third-div);
}
.main-hw-info {
position: absolute;
right: 0;
@ -576,52 +553,14 @@ body {
background: var(--background-footer-first);
}
.footer.first > .card-footer-dots-grid > div > .inner-dot {
background: var(--background-footer-first-card-footer-dots-grid-div-inner-dot);
}
.footer.second {
background: var(--background-footer-second);
}
.footer.second > .card-footer-dots-grid > div > .inner-dot {
background: var(--background-footer-second-card-footer-dots-grid-div-inner-dot);
}
.footer.third {
background: var(--background-footer-third);
}
.footer.third > .card-footer-dots-grid > div > .inner-dot {
background: var(--background-footer-third-card-footer-dots-grid-div-inner-dot);
}
.card-footer-dots-grid {
position: absolute;
}
.card-footer-dots-grid > div {
display: inline-block;
position: absolute;
bottom: var(--bottom-card-footer-dots-grid-div);
height: var(--height-card-footer-dots-grid-div);
width: var(--width-card-footer-dots-grid-div);
border-radius: var(--border-radius-card-footer-dots-grid-div);
background: var(--background-card-footer-dots-grid-div);
}
.card-footer-dots-grid > .first {
left: var(--card-footer-dots-grid-first);
}
.card-footer-dots-grid > .second {
left: var(--card-footer-dots-grid-second);
}
.card-footer-dots-grid > .third {
left: var(--card-footer-dots-grid-third);
}
.inner-dot {
position: absolute;
top: var(--top-inner-dot);
@ -679,105 +618,6 @@ body {
left: var(--left-dividers-second);
}
.controls {
position: absolute;
height: var(--height-controls);
width: var(--width-controls);
}
.controls > img {
position: absolute;
top: var(--top-controls-img);
z-index: 2;
height: var(--height-controls-img);
width: var(--width-controls-img);
border-radius: var(--border-radius-controls-img);
}
.controls > .first {
left: var(--left-controls-first);
opacity: 0.5;
animation: wiggle-first-control;
animation-duration: var(--animation-duration-wiggle-first-control);
}
.controls > .second {
left: var(--left-controls-second);
animation: wiggle-second-control;
animation-duration: var(--animation-duration-wiggle-second-control);
}
.controls > .first:active {
transform: var(--transform-controls-first-active);
}
.controls > .second:active {
transform: var(--transform-controls-second-active);
}
.pages {
position: absolute;
}
.pages > div {
position: absolute;
}
.contacts-label {
position: absolute;
top: var(--top-contacts-label);
z-index: 1;
width: var(--width-contacts-label);
text-align: center;
letter-spacing: var(--letter-spacing-5px);
font-size: var(--font-size-18pt);
font-weight: var(--font-weight-regular);
color: var(--color-contacts-label);
}
.contacts-description > div {
position: absolute;
z-index: 1;
width: var(--width-contacts-description-div);
text-align: center;
letter-spacing: var(--letter-spacing-2px);
font-size: var(--font-size-10pt);
font-weight: var(--font-weight-regular);
color: var(--color-contacts-description-div);
}
.contacts-description > .first {
top: var(--top-contacts-description-first);
}
.contacts-description > .second {
top: var(--top-contacts-description-second);
}
.contacts-links > a > img {
position: absolute;
top: var(--top-contacts-links-a-img);
z-index: 1;
height: var(--height-contacts-links-a-img);
width: var(--width-contacts-links-a-img);
}
.contacts-links > a > .first {
left: var(--left-contacts-links-a-first);
}
.contacts-links > a > .first:active {
transform: var(--transform-contacts-links-a-first-active);
}
.contacts-links > a > .second {
left: var(--left-contacts-links-a-second);
}
.contacts-links > a > .second:active {
transform: var(--transform-contacts-links-a-second-active);
}
.uptime {
position: absolute;
bottom: 0;
@ -787,33 +627,6 @@ body {
background: var(--background-uptime);
}
.uptime-squares-grid {
position: relative;
bottom: var(--bottom-uptime-squares-grid);
left: var(--left-uptime-squares-grid);
}
.uptime-squares-grid > div {
display: inline-block;
margin-right: var(--margin-right-uptime-squares-grid-div);
height: var(--height-uptime-squares-grid-div);
width: var(--width-uptime-squares-grid-div);
box-shadow: var(--box-shadow-uptime-squares-grid-div) var(--black-opacity-10);
}
.uptime-squares-grid > .first {
background: var(--background-uptime-squares-grid-first);
}
.uptime-squares-grid > .second {
background: var(--background-uptime-squares-grid-second);
transform: var(--transform-uptime-squares-grid-second);
}
.uptime-squares-grid > .third {
background: var(--background-uptime-squares-grid-third);
}
.uptime-rectangle-grid {
position: absolute;
top: var(--top-uptime-rectangle-grid);
@ -1023,4 +836,10 @@ body {
font-size: var(--font-size-11pt);
font-weight: var(--font-weight-regular);
color: var(--color-advice);
}
.hardware-icon {
width: var(--width-hardware-icon);
height: var(--height-hardware-icon);
margin: var(--margin-hardware-icon);
}

37
src/main/resources/static/css/themes.css
View File

@ -19,25 +19,23 @@
html[theme = "light"]
{
/* color */
--color-logo: var(--grey-light);
--color-logo-description: var(--grey-light);
--color-label-main-settings: var(--grey-light);
--color-logo: var(--white);
--color-logo-description: var(--white);
--color-label-main-settings: var(--grey);
--color-main-settings-input: var(--grey);
--color-main-settings-input-placeholder: var(--grey-light);
--color-label-additional-settings: var(--grey-light);
--color-main-settings-input-placeholder: var(--grey);
--color-label-additional-settings: var(--grey);
--color-theme-buttons-input: var(--grey);
--color-port: var(--grey);
--color-port-placeholder: var(--grey-light);
--color-submit: var(--grey);
--color-submit: var(--white);
--color-hw-type: var(--black);
--color-hw-name: var(--grey);
--color-usage-value-span: var(--grey-light);
--color-usage-postfix: var(--black);
--color-info-label: var(--grey-light);
--color-detailed-hw-info-div: var(--grey);
--color-detailed-hw-info-div: var(--white);
--color-announcement: var(--white);
--color-contacts-label: var(--white);
--color-contacts-description-div: var(--white);
--color-uptime-dashboard-logo: var(--grey-light);
--color-uptime-dashboard-logo-description: var(--grey-light);
--color-values-grid-div: var(--grey);
@ -70,24 +68,14 @@ html[theme = "light"]
--background-hw-logo-first: var(--blue-light);
--background-hw-logo-second: var(--red-light);
--background-hw-logo-third: var(--green-light);
--background-card-body-squares-grid-first-div: var(--blue-light);
--background-card-body-squares-grid-second-div: var(--red-light);
--background-card-body-squares-grid-third-div: var(--green-light);
--background-usage-underline-first: var(--blue-light);
--background-usage-underline-second: var(--red-light);
--background-usage-underline-third: var(--green-light);
--background-footer-first: var(--blue-light);
--background-footer-first-card-footer-dots-grid-div-inner-dot: var(--blue);
--background-footer-second: var(--red-light);
--background-footer-second-card-footer-dots-grid-div-inner-dot: var(--red);
--background-footer-third: var(--green-light);
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green);
--background-card-footer-dots-grid-div: var(--white);
--background-dividers-div: var(--white);
--background-uptime: var(--linear-gradient-uptime-light);
--background-uptime-squares-grid-first: var(--blue-light);
--background-uptime-squares-grid-second: var(--red-light);
--background-uptime-squares-grid-third: var(--green-light);
--background-values-grid-div: var(--white-opacity-70);
--background-labels-grid-div: var(--white-opacity-90);
--background-chart-rectangle-grid-first: var(--blue-light);
@ -122,8 +110,6 @@ html[theme = "dark"]
--color-info-label: var(--white);
--color-detailed-hw-info-div: var(--white);
--color-announcement: var(--white);
--color-contacts-label: var(--white);
--color-contacts-description-div: var(--white);
--color-uptime-dashboard-logo: var(--grey-light);
--color-uptime-dashboard-logo-description: var(--white);
--color-values-grid-div: var(--white);
@ -156,23 +142,14 @@ html[theme = "dark"]
--background-hw-logo-first: var(--blue-light);
--background-hw-logo-second: var(--red-light);
--background-hw-logo-third: var(--green-light);
--background-card-body-squares-grid-first-div: var(--grey);
--background-card-body-squares-grid-second-div: var(--grey);
--background-card-body-squares-grid-third-div: var(--grey);
--background-usage-underline-first: var(--blue-light);
--background-usage-underline-second: var(--red-light);
--background-usage-underline-third: var(--green-light);
--background-footer-first: var(--blue);
--background-footer-first-card-footer-dots-grid-div-inner-dot: var(--blue-light);
--background-footer-second: var(--red);
--background-footer-second-card-footer-dots-grid-div-inner-dot: var(--red-light);
--background-footer-third: var(--green);
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green-light);
--background-dividers-div: var(--grey-dark);
--background-uptime: var(--grey-dark);
--background-uptime-squares-grid-first: var(--grey-light);
--background-uptime-squares-grid-second: var(--grey-light);
--background-uptime-squares-grid-third: var(--grey-light);
--background-values-grid-div: var(--grey-opacity-70);
--background-labels-grid-div: var(--grey-opacity-90);
--background-chart-rectangle-grid-first: var(--blue-light);

BIN
src/main/resources/static/img/controls/left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/main/resources/static/img/controls/right.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/main/resources/static/img/ico/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/main/resources/static/img/icons/disk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/main/resources/static/img/icons/memory.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/main/resources/static/img/icons/processor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/main/resources/static/img/links/github.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
src/main/resources/static/img/links/telegram.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/main/resources/static/img/logo/background.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 151 KiB

2
src/main/resources/static/js/background.js
View File

@ -36,7 +36,7 @@ if (html.getAttribute("enableFog") == "true")
}
if (html.getAttribute("backgroundColor") == "default" )
{
document.body.style.backgroundColor = html.getAttribute("theme") == "light" ? "#e5e5e5" : "#303030"
document.body.style.backgroundColor = html.getAttribute("theme") == "light" ? "#e5e5e5" : "#292929"
}
else
{

25
src/main/resources/static/js/globals.js
View File

@ -111,31 +111,6 @@ let ramTriangle;
*/
let storageTriangle;
/**
* Used to determine current page
*/
let currentPage;
/**
* Used to select pages
*/
let firstControl;
/**
* Used to select pages
*/
let secondControl;
/**
* Used to determine logo page
*/
let logoPage;
/**
* Used to determine info page
*/
let contactsPage;
/**
* Used to determine left cloud
*/

58
src/main/resources/static/js/index.js
View File

@ -5,9 +5,6 @@
*/
function indexInitialization()
{
logoPage = document.getElementById("logo-page");
contactsPage = document.getElementById("contacts-page");
showCards();
currentClockSpeed = document.getElementById("currentClockSpeed");
@ -15,10 +12,6 @@ function indexInitialization()
currentTotalStorage = document.getElementById("currentTotalStorage");
currentDiskCount = document.getElementById("currentDiskCount");
currentPage = 1;
firstControl = document.getElementById("first-control");
secondControl = document.getElementById("second-control");
cloudLeft = document.getElementById("cloud-left");
cloudRight = document.getElementById("cloud-right");
@ -32,9 +25,6 @@ function indexInitialization()
uptimeXHR = new XMLHttpRequest();
sendUsageRequest();
firstControl.addEventListener("click", function(event) {changePage(event.target || event.srcElement)});
secondControl.addEventListener("click", function(event) {changePage(event.target || event.srcElement)});
}
/**
@ -42,8 +32,6 @@ function indexInitialization()
*/
function showCards()
{
contactsPage.style.visibility = "hidden";
let cards = document.getElementsByClassName("card");
let versionLabel = document.getElementById("project-version");
@ -153,52 +141,6 @@ function sendUptimeRequest()
infoXHR.send();
}
/**
* Changes page
*
* @param {*} control element
*/
function changePage(element)
{
if ((String(element.id) == "first-control") && (currentPage > 1))
{
currentPage -= 1;
setCloudAnimation(currentPage);
}
else if ((String(element.id) == "second-control") && (currentPage < 2))
{
currentPage += 1;
setCloudAnimation(currentPage);
}
setPageVisibility(currentPage);
setControlOpacity(currentPage);
}
/**
* Changes page visibility
*
* @param {*} new page
*/
function setPageVisibility(newPage)
{
switch (newPage)
{
case 1:
{
logoPage.style.visibility = "";
contactsPage.style.visibility = "hidden";
break;
}
case 2:
{
logoPage.style.visibility = "hidden";
contactsPage.style.visibility = "";
break;
}
}
}
/**
* Animates clouds
*

101
src/main/resources/templates/index.html
View File

@ -30,18 +30,15 @@
<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 = "hw-logo first">
<img class = "hardware-icon" th:src = "@{/img/icons/processor.png}" />
</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">
@ -56,17 +53,6 @@
</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>
@ -82,18 +68,16 @@
<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 = "hw-logo second">
<img class = "hardware-icon" th:src = "@{/img/icons/memory.png}" />
</div>
<div class = "label-hw-info">
<div class = "hw-type">Machine</div>
<div class = "hw-type">Memory</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">
@ -103,22 +87,11 @@
</div>
<div class = "usage-postfix">%</div>
</div>
<p class = "info-label">RAM USAGE</p>
<p class = "info-label">MEMORY 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>
@ -134,18 +107,15 @@
<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 = "hw-logo third">
<img class = "hardware-icon" th:src = "@{/img/icons/disk.png}" />
</div>
<div class = "label-hw-info">
<div class = "hw-type">Storage</div>
<div class = "hw-name" th:text = "${info.storage.mainStorage}"></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">
@ -160,17 +130,6 @@
</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>
@ -186,42 +145,14 @@
<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 = "logo">WARD</div>
<div class = "logo-description">SERVER DASHBOARD</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>
@ -241,7 +172,7 @@
</div>
<div class = "col-lg-12 col-xl-8 sm-hidden">
<div class = "card">
<div class = "chart-label">% Utilization</div>
<div class = "chart-label">Hardware Utilization (%)</div>
<div class = "chart-triangle-grid">
<div id = "processor-triangle" class = "first"></div>
<div id = "ram-triangle" class = "second"></div>