proper website

This commit is contained in:
User 2019-03-19 05:10:11 +01:00
parent 078773852b
commit b7b7996a3d
9 changed files with 99 additions and 6 deletions

BIN
favicon.xcf Normal file

Binary file not shown.

43
web/css/style.css Normal file
View File

@ -0,0 +1,43 @@
html {
height: 100vh;
}
body {
margin: 0;
background-image: url('../img/bg-winter.jpg');
background-position: center;
background-size: cover;
}
details {
margin: 0.5em;
padding: 0.5em;
border-radius: 0.5em;
background: rgba(255,255,255,0.8);
}
summary h2 {
display: inline;
font-size: 1.2em;
}
summary a {
float: right;
}
summary a img {
height: 1.2em;
}
iframe {
width: 100%;
border: 0;
}
#status {
height: 220px;
}
#map {
height: 80vh;
}

View File

@ -1,10 +1,9 @@
.overflow { body {
overflow-x: auto; margin: 0;
max-width: 100%; padding: 0;
} }
#graph { #graph {
background-color: #EEE;
transform: scaleY(-1); transform: scaleY(-1);
} }
@ -16,7 +15,7 @@
line { line {
stroke: black; stroke: black;
stroke-width: 0.4; stroke-width: 0.8;
} }
line.error { line.error {
@ -24,5 +23,5 @@ line.error {
} }
line:hover { line:hover {
stroke-width: 0.6; stroke-width: 1.0;
} }

BIN
web/img/bg-winter.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
web/img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>

After

Width:  |  Height:  |  Size: 388 B

29
web/index.html Normal file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<title>xkcraftia status</title>
<link rel='stylesheet' href='css/style.css'>
<link rel='icon' href='img/favicon.png'>
<script src='js/load-map.js' charset='utf-8'></script>
</head>
<body>
<details open>
<summary>
<h2>Server status</h1>
<a href='logs/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open all logs'></a>
</summary>
show <a href='logs/hour.html' target='f'>last hour</a>, <a href='logs/day.html' target='f'>24 hours</a>, <a href='logs/month.html' target='f'>1 month</a>, <a href='logs/4months.html' target='f'>4 months</a>, <a href='logs/18months.html' target='f'>18 months</a>:
<iframe id='status' name='f' src='logs/hour.html'></iframe>
</details>
<details>
<summary>
<h2>Map</h1>
<a href='map/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open map viewer'></a>
</summary>
<noscript>The map viewer requires javascript.</noscript>
<iframe id='map' src=''></iframe>
</details>
</body>
</html>

12
web/js/load-map.js Normal file
View File

@ -0,0 +1,12 @@
// only load the map viewer when it's visible (and javascript is enabled)
document.addEventListener('DOMContentLoaded', (event) => {
const setMap = () => { document.querySelector('#map').src = 'map/' }
const details = document.querySelector('details:last-child')
// if <details> is not supported (looking at you, Edge), the frame will be
// visible by default, so just set the target immediately
if ('open' in details)
details.addEventListener('toggle', setMap, { once: true })
else
setMap()
})

9
web/js/svg-click.js Normal file
View File

@ -0,0 +1,9 @@
// add a simple click event to the SVG for browsers that don't allow you to hover
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelector('svg').addEventListener('click', (event) => {
const maybeTitle = event.target.firstChild
if (maybeTitle instanceof SVGTitleElement)
alert(maybeTitle.textContent)
})
})