diff options
| -rwxr-xr-x | main.py | 7 | ||||
| -rw-r--r-- | style.css | 24 | ||||
| -rw-r--r-- | template.html | 10 |
3 files changed, 35 insertions, 6 deletions
@@ -241,6 +241,7 @@ writeLog() # HTML Processing to generate the website. code = '\r\n' +is_offline_class = '' for status in statusList: # Prepare and calculate the time since the server is online / offline obj = getLogEntry(status) @@ -257,7 +258,8 @@ for status in statusList: timeString += str(hours) + ' hours ' if minutes > 0: timeString += str(minutes) + ' minutes' - + if status.status == 'Offline': + is_offline_class = 'pulse' code += ('<div class="content_item"><div class="content_item_part"><div class="content_item_part_title">' + status.name + '</div><div class="content_item_part_subtitle">' + status.host + '</div></div><div class="content_item_part ' @@ -287,8 +289,9 @@ for entry in reversed(logEntries[cut_amount:]): now = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S') html = open('template.html') html2 = open('status.html', 'w') +pulse = '' for line in html: - html2.write(line.replace('%CONTENT%', code).replace('%LOG%', log).replace('%NOW%', now)) + html2.write(line.replace('%CONTENT%', code).replace('%LOG%', log).replace('%NOW%', now).replace('%PULSE%', is_offline_class)) html.close() html2.close() @@ -90,6 +90,8 @@ a:hover { align-items: normal; margin-top: 60px; padding: 30px; + height: 100%; + overflow: auto; } #content { @@ -100,8 +102,7 @@ a:hover { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); background-color: #f5f5f5; overflow: auto; - min-height: 150px; - flex-shrink: 1; + min-height: fit-content; min-width: 500px; } @@ -220,4 +221,23 @@ a:hover { #content { min-width: unset; } +} + +.pulse { + background-color: #a50202; + animation-name: color; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes color { + 0% { + background-color: #a50202; + } + 50% { + background-color: #770000; + } + 100% { + background-color: #a50202; + } }
\ No newline at end of file diff --git a/template.html b/template.html index 70720a6..4e7623f 100644 --- a/template.html +++ b/template.html @@ -6,7 +6,7 @@ <link rel="icon" type="image/x-icon" href="img/favicon.ico"> <title>bwLp Status Monitor</title> </head> - <body> + <body class="%PULSE%"> <div id="header"> <div id="header_left" class="header_element"> <a href=""> @@ -46,9 +46,14 @@ const vertical = urlParams.get('vertical') const noheader = urlParams.get('noheader') const nofooter = urlParams.get('nofooter') + var autorefresh = urlParams.get('autorefresh') var autorefresh = parseInt(autorefresh) + // Parameter for testing the pulsing background + const offline = urlParams.get('offline') + if (offline !== null) document.body.className += ' pulse' + // Often used elements const body = document.getElementById('body') const logWrapper = document.getElementById('log_wrapper') @@ -87,6 +92,7 @@ content.style.height = '100%' content.style.boxShadow = 'unset' content.style.maxWidth = 'unset' + content.style.minHeight = '150px' var media = window.matchMedia("(min-width: 1500px)") borderlessMedia(media, logWrapper, content) @@ -159,7 +165,7 @@ logWrapper.style.maxHeight = '80vh' content.style.width = '100%' content.style.height = 'unset' - content.style.minHeight = '150px' + content.style.minHeight = 'fit-content' body.style.alignItems = 'center' } borderless() |