summaryrefslogtreecommitdiffstats
path: root/template.html
diff options
context:
space:
mode:
Diffstat (limited to 'template.html')
-rw-r--r--template.html155
1 files changed, 155 insertions, 0 deletions
diff --git a/template.html b/template.html
new file mode 100644
index 0000000..f05c233
--- /dev/null
+++ b/template.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="icon" type="image/x-icon" href="img/favicon.ico">
+ <title>bwLp Status Monitor</title>
+ </head>
+ <body>
+ <div id="header">
+ <div id="header_left" class="header_element">
+ <a href="">
+ <img id="header_image" src="img/logo_bwlehrpool.png" alt="bwLehrpool">
+ </a>
+ </div>
+ <div id="header_center" class="header_element">
+ <label id="header_label">Status Monitor</label>
+ </div>
+ <div id="header_right" class="header_element">
+ <div>
+ <a href="https://www.bwlehrpool.de/doku.php/start">
+ <img id="header_wiki" src="img/wiki_bwlehrpool.png" alt="bwLehrpool">
+ </a>
+ </div>
+ <a id="header_wiki_label" href="https://www.bwlehrpool.de/doku.php/start">bwlp Wiki</a>
+ </div>
+ </div>
+ <div id="body">
+ <div id="content">
+%CONTENT%
+ </div>
+ <div id="log_wrapper" class="log_wrapper">
+ <div id="log">
+%LOG%
+ </div>
+ </div>
+ </div>
+
+ </body>
+
+</html>
+
+<script>
+ const urlParams = new URLSearchParams(window.location.search)
+ const horizontal = urlParams.get('horizontal')
+ const vertical = urlParams.get('vertical')
+ const noheader = urlParams.get('noheader')
+ var autorefresh = urlParams.get('autorefresh')
+ var autorefresh = parseInt(autorefresh)
+
+ // No header removes the header from the site.
+ if (noheader != null) {
+ document.getElementById('header').style.visibility = 'hidden'
+ document.getElementById('body').style.marginTop = '0px'
+ }
+
+ // Borderless mode for the 4k TV.
+ function borderless() {
+ const borderless = urlParams.get('borderless')
+ if (borderless != null) {
+ const body = document.getElementById('body')
+ body.style.padding = '0px'
+ body.style.width = '100%'
+ body.style.height = '100%'
+
+ const logWrapper = document.getElementById('log_wrapper')
+ logWrapper.style.maxHeight = 'unset'
+ logWrapper.style.maxWidth = 'unset'
+ logWrapper.style.display = 'unset'
+ logWrapper.style.height = '100%'
+ logWrapper.style.boxShadow = 'unset'
+ logWrapper.style.margin = 'unset'
+
+ const log = document.getElementById('log')
+ log.style.height = 'unset'
+ log.style.setProperty('--wrap', 'normal')
+
+ const content = document.getElementById('content')
+ content.style.height = '100%'
+ content.style.boxShadow = 'unset'
+ content.style.maxWidth = 'unset'
+
+ var media = window.matchMedia("(min-width: 1500px)")
+ borderlessMedia(media, logWrapper, content)
+ media.addListener(borderlessMedia)
+ }
+ }
+ function borderlessMedia(media) {
+ const logWrapper = document.getElementById('log_wrapper')
+ const content = document.getElementById('content')
+
+ if (horizontal != null || (media.matches && vertical === null)) {
+ logWrapper.style.borderTop = 'unset'
+ logWrapper.style.borderLeft = '3px solid #8a8a8a'
+ content.style.flexWrap = 'nowrap'
+ } else if (vertical != null || (!media.matches && horizontal === null)) {
+ logWrapper.style.borderLeft = 'unset'
+ logWrapper.style.borderTop = '3px solid #8a8a8a'
+ content.style.flexWrap = 'wrap'
+ }
+ }
+
+ // Autorefresh the site.
+ if (Number.isInteger(autorefresh)) {
+ setTimeout(function() {
+ location.reload();
+ }, autorefresh * 1000);
+ }
+
+ // Remove images in the header if the windows is to small.
+ var mediaMaxWidth = window.matchMedia("(max-width: 850px)")
+ maxWidth(mediaMaxWidth)
+ mediaMaxWidth.addListener(maxWidth)
+ function maxWidth(media) {
+ const header = document.getElementById('header')
+ if (media.matches) {
+ header.style.setProperty('--header-display', 'none')
+ } else {
+ header.style.setProperty('--header-display', 'flex')
+ }
+ }
+
+ // Side By Side / OU modes & media querys.
+ var mediaMinWidth = window.matchMedia("(min-width: 1500px)")
+ minWidth(mediaMinWidth)
+ mediaMinWidth.addListener(minWidth)
+ function minWidth(media) {
+ const body = document.getElementById('body')
+ const logWrapper = document.getElementsByClassName('log_wrapper')[0]
+ const content = document.getElementById('content')
+ if (vertical === null && (media.matches || horizontal != null)) {
+ body.style.flexDirection = 'row'
+ logWrapper.style.marginLeft = '40px'
+ logWrapper.style.marginTop = '0px'
+ logWrapper.style.maxWidth = '60vw'
+ logWrapper.style.maxHeight = 'calc(100vh - 120px)'
+ content.style.width = '30%'
+ content.style.height = 'calc(100vh - 120px)'
+ content.style.minHeight = '51px'
+ } else if (horizontal === null && (!media.matches || vertical != null)) {
+ body.style.flexDirection = 'column'
+ logWrapper.style.marginLeft = '0px'
+ logWrapper.style.marginTop = '60px'
+ logWrapper.style.maxWidth = '80vw'
+ logWrapper.style.maxHeight = '80vh'
+ content.style.width = '100%'
+ content.style.height = 'unset'
+ content.style.minHeight = '150px'
+ } else {
+ // Who uses horizontal and vertical at the same time! Lul.
+ body.style.transform = "rotate(-45deg)"
+ }
+ borderless()
+ }
+</script> \ No newline at end of file