update readme

* 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>

README.md

@@ -69,7 +69,7 @@ Ward works nice on all popular operating systems, because it uses [OSHI](https:/
 
 ### Config
 
-If you want to change Ward's configuration, you can edit `setup.ini`. When using Docker, use the environment variables `WARD_NAME`,`WARD_THEME`, `WARD_PORT` to automatically regenerate this file at startup. Using any environment variable listed will enable the defaults below and immediately start Ward without the GUI setup. 
+If you want to change Ward's configuration, you can edit `setup.ini`. When using Docker, use the environment variables `WARD_NAME`,`WARD_THEME`, `WARD_PORT` to automatically regenerate this file at startup. Using any environment variable listed will enable the defaults below and immediately start Ward without the GUI setup.
 
 | Setting         | Env var         | Description                                  | Default |
 |-----------------|-----------------|----------------------------------------------|---------|
@@ -91,3 +91,11 @@ 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>

pom.xml

@@ -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 -->
@@ -19,7 +19,7 @@
 
     <!-- project properties -->
     <properties>
-        <oshiVersion>6.5.0</oshiVersion>
+        <oshiVersion>6.6.0</oshiVersion>
         <jnaVersion>5.14.0</jnaVersion>
         <lombokVersion>1.18.32</lombokVersion>
         <ini4jVersion>0.5.4</ini4jVersion>

src/main/java/dev/leons/ward/services/InfoService.java

@@ -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();

src/main/resources/static/css/animations.css

@@ -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%

src/main/resources/static/css/colors.css

@@ -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 */

src/main/resources/static/css/dimensions.css

@@ -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);
 }

src/main/resources/static/css/gradients.css

@@ -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%);
 }

src/main/resources/static/css/layout.css

@@ -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);
 }

src/main/resources/static/css/themes.css

@@ -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);

src/main/resources/static/js/background.js

@@ -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
         {

src/main/resources/static/js/globals.js

@@ -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
  */

src/main/resources/static/js/index.js

@@ -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
  *

src/main/resources/templates/index.html

@@ -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>