User Tools

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
services:dashboards [2024/04/08 12:53] – willyservices: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. 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: Some advantages:
Line 74: Line 74:
 {{ :services:screenshot_dashboard_sistema_casa.png?direct&400 |}} {{ :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>