2019-04-30 19:49:22 -07:00
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
2019-04-30 21:53:14 -07:00
|
|
|
<html lang="en">
|
2019-04-30 19:49:22 -07:00
|
|
|
<head>
|
2019-04-30 21:53:14 -07:00
|
|
|
<meta charset="utf-8"/>
|
|
|
|
|
<title>Endstat</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background-color: #212121;
|
|
|
|
|
margin: 0;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
width: 700px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
section {
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: #424242;
|
|
|
|
|
align-items: center;
|
2019-04-30 22:28:57 -07:00
|
|
|
margin: 1rem 0;
|
2019-04-30 21:53:14 -07:00
|
|
|
padding: 1rem;
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p { margin: 0; }
|
|
|
|
|
|
|
|
|
|
h1 { display: inline; }
|
|
|
|
|
|
|
|
|
|
.indicator {
|
|
|
|
|
width: 1rem;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.ok { background-color: green; }
|
|
|
|
|
.warn { background-color: yellow; }
|
|
|
|
|
.error { background-color: red; }
|
|
|
|
|
</style>
|
2019-04-30 19:49:22 -07:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-04-30 21:53:14 -07:00
|
|
|
<main>
|
|
|
|
|
<h1>Welcome!</h1>
|
2019-05-01 08:38:36 -07:00
|
|
|
<h1>{{ results.last_update }}</h1>
|
2019-04-30 21:53:14 -07:00
|
|
|
{% for status in results.statuses -%}
|
|
|
|
|
<section>
|
|
|
|
|
<p>{{ status.domain }}</p>
|
|
|
|
|
<p>{{ status.endpoint }}</p>
|
|
|
|
|
<p>{{ status.location }}</p>
|
|
|
|
|
{% if status.error %}<p>{{ status.error }}</p>{% endif %}
|
|
|
|
|
<div class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></div>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
{% endfor -%}
|
|
|
|
|
</main>
|
2019-04-30 19:49:22 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
