feat: Add downtime notification

server.py

@@ -86,15 +86,26 @@ def index():
     repo_name=git['repo']['name']
     repo_name=repo_name.lower()
     repo_description=git['repo']['description']
+    custom = ""
+
+    # Check for downtime
+    uptime = requests.get('https://uptime.woodburn.au/api/status-page/main/badge')
+    uptime = uptime.content.count(b'Up') > 1
+
+    if uptime:
+        custom += "<style>#downtime{display:none !important;}</style>"
+    else:
+        custom += "<style>#downtime{opacity:1;}</style>"
+
+
+
 
     # Special names
     if repo_name == "nathanwoodburn.github.io":
         repo_name = "Nathan.Woodburn/"
 
     html_url=git['repo']['html_url']
-
     repo = "<a href=\"" + html_url + "\" target=\"_blank\">" + repo_name + "</a>"
-
     handshake_scripts = "<script src=\"https://nathan.woodburn/handshake.js\" domain=\"nathan.woodburn\"></script><script src=\"https://nathan.woodburn/https.js\"></script>"
     # If localhost, don't load handshake
     if request.host == "localhost:5000" or request.host == "127.0.0.1:5000" or os.getenv('dev') == "true" or request.host == "test.nathan.woodburn.au":
@@ -102,14 +113,14 @@ def index():
     
 
     if request.cookies.get('HNS'):
-            return render_template('index.html', handshake_scripts=handshake_scripts, HNS=request.cookies.get('HNS'), repo=repo, repo_description=repo_description)
+            return render_template('index.html', handshake_scripts=handshake_scripts, HNS=request.cookies.get('HNS'), repo=repo, repo_description=repo_description, custom=custom)
     
     if handshake_scripts == "":
         address = "hs1............example"
     else:
         address = requests.get('http://hip02-server:3000').text
     # Set cookie
-    resp = make_response(render_template('index.html', handshake_scripts=handshake_scripts, HNS=address, repo=repo, repo_description=repo_description), 200, {'Content-Type': 'text/html'})
+    resp = make_response(render_template('index.html', handshake_scripts=handshake_scripts, HNS=address, repo=repo, repo_description=repo_description, custom=custom), 200, {'Content-Type': 'text/html'})
     # Cookie should last 1 week
     resp.set_cookie('HNS', address, max_age=604800)
     return resp

templates/assets/css/index.min.css

@@ -1 +1 @@
-img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}
+img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}#downtime{z-index:2;position:fixed;right:0;bottom:0;width:20%;transition:opacity .5s;opacity:0}blockquote.speech{position:absolute;display:inline-block;right:14vw;bottom:23vh;width:17vw;background:url(/assets/img/speech-bubble.svg) center;color:#fff;padding-top:3%;padding-bottom:20%;background-repeat:no-repeat!important;margin:0 auto;text-align:center;box-sizing:content-box;line-height:1;font-family:SequentialistBB,cursive;font-size:1.2vw}

templates/assets/img/speech-bubble.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   preserveAspectRatio="none"
+   viewBox="0 0 132 136"
+   version="1.1"
+   id="svg71"
+   sodipodi:docname="speech-bubble.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview73"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="5.9117647"
+     inkscape:cx="35.437811"
+     inkscape:cy="68"
+     inkscape:window-width="1920"
+     inkscape:window-height="1008"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg71" />
+  <defs
+     id="defs67">
+    <style
+       id="style65">
+	path { 
+		fill: white;
+		stroke: #000;
+		stroke-width: 4;
+		stroke-linejoin: bevel;
+		vector-effect: non-scaling-stroke;
+	}
+</style>
+  </defs>
+  <path
+     d="m 66.1,1.5 c 35.7,0 64.6,21.4 64.6,44.5 0,18.1 -17.9,33.5 -42.8,39.3 -1.5,14.8 1.3,39 8.5,48.1 C 85.6,120.9 74,99.8 69.8,87.7 c -1.2,0 -2.5,0.1 -3.7,0.1 C 30.4,87.8 1.5,69.1 1.5,46 1.5,22.9 30.4,1.5 66.1,1.5 Z m 30.3,131.9 c 0.3,0.4 0.7,0.8 1,1.1 -0.4,-0.3 -0.7,-0.7 -1,-1.1 z"
+     id="path69"
+     style="fill:#000000;fill-opacity:0.80691564" />
+</svg>

templates/assets/js/downtime.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",(function(){var n=document.getElementById("downtime");n&&n.addEventListener("click",(function(){"0"!==n.style.opacity&&window.open("https://uptime.woodburn.au","_blank")}))})),window.addEventListener("scroll",(function(){const n=document.getElementById("downtime"),t=window.scrollY;n.style.opacity=t>200?"0":"1"}));

templates/index.html

@@ -72,6 +72,9 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             </div>
         </div>
     </nav>
+    <div class="text-end d-none d-md-block d-lg-block d-xl-block d-xxl-block" id="downtime"><blockquote class="speech bubble"><em>G'day!</em><br>
+Some services are down.<br>
+Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.webp"></div>
     <header class="masthead main" style="background: url(&quot;/assets/img/bg/background.webp&quot;) bottom / cover;position: relative;">
         <div class="intro-body text parallax" style="color: rgb(0,0,0);">
             <h1 class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block inner-text" style="font-size: 70px;">G'day, Welcome to<br>my Personal Site</h1>
@@ -79,7 +82,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             <h2 class="inner-text">Nathan Woodburn</h2>
         </div><img class="fog" src="/assets/img/bg/fog_1.webp" alt="">
     </header>
-    <section class="text-center content-section" id="about" style="padding-bottom: 0px;">
+    <section class="text-center content-section" id="about" style="padding-bottom: 0px;background: black;">
         <div class="container">
             <div class="row">
                 <div class="col-lg-8 mx-auto">
@@ -147,7 +150,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
             </div>
         </div>
     </section><img class="no-drag" src="/assets/img/tilt.svg" style="width: 100%;background: #363636;transform: rotate(180deg);" alt="">
-    <section class="text-center content-section" id="contact" style="padding-top: 0px;padding-bottom: 3em;">
+    <section class="text-center content-section" id="contact" style="padding-top: 0px;padding-bottom: 3em;background: black;">
         <div class="container">
             <div class="row">
                 <div class="col-lg-8 mx-auto">
@@ -229,10 +232,11 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     hns.addEventListener('click', () => {
         copyToClipboard(hns);
     });
-</script>
+</script>{{custom | safe}}
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="/assets/js/script.min.js"></script>
     <script src="/assets/js/hacker.min.js"></script>
+    <script src="/assets/js/downtime.min.js"></script>
 </body>
 
 </html>