endstat/templates/index.html

83 lines
2.2 KiB
HTML
Raw Normal View History

2019-05-01 02:49:22 +00:00
<!DOCTYPE html>
2019-05-01 04:53:14 +00:00
<html lang="en">
2019-05-01 02:49:22 +00:00
<head>
2019-05-01 04:53:14 +00:00
<meta charset="utf-8"/>
<title>endstat</title>
2019-05-01 20:15:18 +00:00
<link href="https://fonts.googleapis.com/css?family=Montserrat:200|Source+Code+Pro:400" rel="stylesheet">
2019-05-01 04:53:14 +00:00
<style>
body {
background-color: #212121;
color: #fff;
2019-05-01 20:15:18 +00:00
font-family: 'Montserrat', sans-serif;
2019-05-01 04:53:14 +00:00
width: 700px;
margin: 0 auto;
2019-05-01 20:15:18 +00:00
margin-top: 5rem;
}
2019-05-01 20:59:55 +00:00
main {
2019-05-01 22:02:49 +00:00
padding: 1rem;
width: 100%;
2019-05-01 20:59:55 +00:00
}
2019-05-01 20:15:18 +00:00
header {
display: flex;
align-items: flex-end;
justify-content: space-between;
2019-05-01 04:53:14 +00:00
}
section {
display: flex;
2019-05-01 20:15:18 +00:00
align-items: stretch;
2019-05-01 04:53:14 +00:00
background-color: #424242;
2019-05-01 05:28:57 +00:00
margin: 1rem 0;
2019-05-01 04:53:14 +00:00
border-radius: 1rem;
}
p { margin: 0; }
a { color: #fff; text-decoration: none; }
2019-05-01 22:02:49 +00:00
h1 { margin: 0; }
h3 { margin: 0; text-align: justify; flex-shrink: 0; }
.info { display: flex; align-items: baseline; }
.info a { text-align: right; }
.spacer { flex: 1 0 1rem; }
2019-05-01 04:53:14 +00:00
.indicator {
width: 1rem;
2019-05-01 20:59:55 +00:00
min-height: 100%;
border-radius: 1rem 0 0 1rem;
2019-05-01 04:53:14 +00:00
}
2019-05-01 20:59:55 +00:00
.ok { background-color: #4ed34e; }
.warn { background-color: #fcfc64; }
.error { background-color: #ff392e; }
.error-msg { margin-top: 1rem; font-family: 'Source Code Pro', monospace; }
2019-05-01 04:53:14 +00:00
</style>
2019-05-01 02:49:22 +00:00
</head>
<body>
2019-05-01 20:15:18 +00:00
<header>
2019-05-01 20:59:55 +00:00
<h1>Status Overview</h1>
2019-05-01 20:15:18 +00:00
<p>{{ results.timestamp_str }}</p>
</header>
2019-05-01 20:59:55 +00:00
{% for group in results.groups -%}
<h2>{{ group.label }}</h2>
{% for status in group.endpoints -%}
<section>
<aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside>
<main>
<div class="info">
<h3>{{ status.endpoint }}</h3>
<div class="spacer"></div>
{% if status.status != 2 %}<p>{{ status.rtt }}</p>{% endif %}
</div>
<a href="{{ status.location }}" target="_blank">{{ status.location }}</a>
{% for msg in status.errors -%}
<p class="error-msg">{{ msg }}</p>
{% endfor -%}
</main>
</section>
{% endfor -%}
2019-05-01 20:59:55 +00:00
{% endfor -%}
2019-05-01 02:49:22 +00:00
</body>
</html>