proper website
This commit is contained in:
User
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 {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#graph {
|
||||
background-color: #EEE;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
|
||||
line {
|
||||
stroke: black;
|
||||
stroke-width: 0.4;
|
||||
stroke-width: 0.8;
|
||||
}
|
||||
|
||||
line.error {
|
||||
|
|
@ -24,5 +23,5 @@ line.error {
|
|||
}
|
||||
|
||||
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