Differences

This shows you the differences between two versions of the page.

--- services:dashboards [2024/04/08 12:53] – willy
+++ services:dashboards [2024/04/08 12:56] (current) – willy
@@ Line 5: / Line 5: @@
 There are literally lots of options at your fingertip, looking for //html dashboard// or similar queries will find you tons of open-source products that you can explore and try out. [[https://github.com/gethomepage/homepage|HomePage]] is probably one of the most rich out there. There are relaly lots and lots. Docker based, PHP based, Python based, pick yours.
-I started using [[https://github.com/gardiol/dashboard|Simple Dashboard]]  that is a very customizable and super lightweight static (or partially static) dash board.
+I started using [[https://github.com/gardiol/dashboard|Simple Dashboard]]  that is a very customizable and super lightweight static (or partially static) dash board. It can also, if properly configured, provide basic monitoring for your server.
 Some advantages:
@@ Line 74: / Line 74: @@
 {{ :services:screenshot_dashboard_sistema_casa.png?direct&400 |}}
-This dashboard you can easily configure by modifying the CSS.
+===== Style =====
+The dashboard can easily be configure by modifying the CSS, the above screenshots are generated from the following CSS:
+<code>
+body {  background: black; }
+a { color: darkred; }
+div.header > span { color: white; }
+.ok { color: green; }
+.ko { color: red; }
+.box {
+        width: 20em;
+        height: 21em;
+        background: orange;
+        margin: 1em;
+        padding: 0.5em;
+        text-align: center;
+        border-radius: 3em;
+        box-shadow: 0.2em 0.2em darkred;
+}
+.box > a > p {
+        height: 2em;
+        margin: 0px;
+        font-size: 150%;
+}
+.box > a > img {
+        height: 19em;
+        width: 19em;
+}
+.small {
+        width: 5em;
+        height: 6em;
+        background: orange;
+        margin: 1em;
+        padding: 0.5em;
+        text-align: center;
+        border-radius: 1em;
+        box-shadow: 0.2em 0.2em darkred;
+}
+.small > a > p {
+        height: 1em;
+        margin: 0px;
+}
+.small > a > img {
+        height: 4.5em;
+        width: 4.5em;
+}
+.container > p {
+        color: white;
+        border-top: 1px solid white;
+}
+.runner {
+        max-width: 40em;
+        max-height: 40em;
+        background: orange;
+        color: darkred;
+        margin: 1em;
+        padding: 0.5em;
+        text-align: center;
+        border-radius: 1em;
+        box-shadow: 0.2em 0.2em darkred;
+}
+.runner > p {
+        color: darkred;
+        margin: 0px;
+        font-size: 150%;
+}
+</code>

Willy's Wiki

User Tools

Differences