diff options
Diffstat (limited to 'template.html')
| -rw-r--r-- | template.html | 155 |
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 |