style updates

This commit is contained in:
Tomáš Mládek 2022-01-03 20:27:01 +01:00
parent 4c4c9b654b
commit ca6836664f

View file

@ -4,9 +4,16 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>ANABASIS CLIENTS</title> <title>ANABASIS CLIENTS</title>
<meta http-equiv="refresh" content="60" /> <meta http-equiv="refresh" content="60" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
font-family: "Courier New", "Courier", monospace; font-family: "IBM Plex Sans", sans-serif;
color: white; color: white;
background: black; background: black;
text-align: center; text-align: center;
@ -17,26 +24,36 @@
h1, h1,
h2 { h2 {
margin-top: 1.5em;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.status { .status {
font-size: 24pt; font-size: 24pt;
font-weight: bold; font-weight: 600;
border: 2px solid; border: 2px solid;
padding: 0.25rem 0.5rem; border-radius: 3px;
padding: 0.5em 0.75em;
} }
.status-container { .status-container {
margin: 1rem 0; margin: 1rem 0;
} }
.status-container div {
margin-bottom: 0.5em;
}
.status-empty { .status-empty {
border-color: red; background: darkred;
} }
.status-populated { .status-populated {
border-color: green; background: darkgreen;
}
td {
padding: .1em .5em;
} }
.log { .log {
@ -52,7 +69,7 @@
} }
.datetime { .datetime {
font-weight: bold; font-weight: 600;
margin: 1em 0; margin: 1em 0;
} }
@ -69,6 +86,8 @@
</head> </head>
<body> <body>
<h1>/|\ Anabasis Clients</h1> <h1>/|\ Anabasis Clients</h1>
<div class="datetime">{{now.strftime("%c")}}</div>
<h2>STATUS</h2> <h2>STATUS</h2>
<div class="status-container"> <div class="status-container">
<div <div
@ -78,14 +97,13 @@
</div> </div>
<div class="status-explanation">{{status.text}}</div> <div class="status-explanation">{{status.text}}</div>
<div class="level">{{status.level}}</div> <div class="level">{{status.level}}</div>
</div>
<div> <div>
Since: {% if last_change %} {{last_change['ts'].strftime("%c")}} {% if <strong>Since:</strong> {% if last_change %} {{last_change['ts'].strftime("%c")}} {% if
status.level == 0 %}({{last_change.leases | map(attribute='display') | status.level == 0 %}({{last_change.leases | map(attribute='display') |
join(', ')}}){% endif %} {% else %} forever? {% endif %} join(', ')}}){% endif %} {% else %} forever? {% endif %}
</div> </div>
</div>
<h2>Current clients</h2> <h2>Current clients</h2>
<div class="datetime">{{now.strftime("%c")}}</div>
<table> <table>
<tr> <tr>
<th>MAC</th> <th>MAC</th>