endstat/templates/index.html

73 lines
1.7 KiB
HTML
Raw Normal View History

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>
2019-05-01 13:15:18 -07:00
<link href="https://fonts.googleapis.com/css?family=Montserrat:200|Source+Code+Pro:400" rel="stylesheet">
2019-04-30 21:53:14 -07:00
<style>
body {
background-color: #212121;
margin: 0;
color: #fff;
2019-05-01 13:15:18 -07:00
font-family: 'Montserrat', sans-serif;
2019-04-30 21:53:14 -07:00
}
main {
width: 700px;
margin: 0 auto;
2019-05-01 13:15:18 -07:00
margin-top: 5rem;
}
header {
display: flex;
align-items: flex-end;
justify-content: space-between;
2019-04-30 21:53:14 -07:00
}
section {
display: flex;
2019-05-01 13:15:18 -07:00
align-items: stretch;
justify-content: space-between;
2019-04-30 21:53:14 -07:00
background-color: #424242;
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; }
2019-05-01 13:15:18 -07:00
h1 { display: block; margin: 0; }
h3 { margin-top: 0; }
2019-04-30 21:53:14 -07:00
.indicator {
width: 1rem;
height: 1rem;
border-radius: 1rem;
}
.ok { background-color: green; }
.warn { background-color: yellow; }
.error { background-color: red; }
2019-05-01 13:15:18 -07:00
.error-msg { font-family: 'Source Code Pro', monospace;}
2019-04-30 21:53:14 -07:00
</style>
2019-04-30 19:49:22 -07:00
</head>
<body>
2019-04-30 21:53:14 -07:00
<main>
2019-05-01 13:15:18 -07:00
<header>
<h1>Status</h1>
<p>{{ results.timestamp_str }}</p>
</header>
2019-04-30 21:53:14 -07:00
{% for status in results.statuses -%}
<section>
2019-05-01 13:15:18 -07:00
<div>
<!-- <p>{{ status.domain }}</p> -->
<h3>{{ status.endpoint }}</h3>
<p>{{ status.location }}</p>
{% if status.error %}<p class="error-msg">{{ status.error }}</p>{% endif %}
</div>
<aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside>
2019-04-30 21:53:14 -07:00
</section>
{% endfor -%}
</main>
2019-04-30 19:49:22 -07:00
</body>
</html>