proper website
This commit is contained in:
parent
078773852b
commit
b7b7996a3d
Binary file not shown.
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
Binary file not shown.
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
|
@ -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 |
|
@ -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>
|
|
@ -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()
|
||||||
|
})
|
|
@ -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)
|
||||||
|
})
|
||||||
|
})
|
Loading…
Reference in New Issue