From b6eb2003b177a333dc8e8d7775c18037d02ae4cc Mon Sep 17 00:00:00 2001
From: Matige <mateusz+github@2eu.pl>
Date: Sat, 9 Dec 2023 00:26:29 +0100
Subject: [PATCH] Unify the maintenance page based on dokku error pages

Maintenance page based on dokku nginx-vhosts 502 error page.
---
 templates/maintenance.html | 97 +++++++++++++++++++++++---------------
 1 file changed, 58 insertions(+), 39 deletions(-)
diff --git a/templates/maintenance.html b/templates/maintenance.html
index 2185e7d..da78d4f 100644
--- a/templates/maintenance.html
+++ b/templates/maintenance.html
@@ -1,42 +1,61 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Application Offline for Maintenance</title>
-    <style type="text/css">
-      body {
-        background-color: white;
-        color: #333333;
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 36px;
-        line-height: 18px;
-        font-size: 14px;
-      }
-      .section {
-        margin-bottom: 36px;
-        color: #222222;
-      }
-      .section h1 {
-        font-size: 26px;
-        background-color: #dad8e4;
-        padding: 18px 22px 15px 22px;
-        margin: 0;
-        overflow: hidden;
-      }
-      .article {
-        border: 4px solid #dad8e4;
-        padding: 24px 18px 18px 18px;
-        font-size: 14px;
-      }
-    </style>
-  </head>
-  <body>
-      <div class="section">
-        <h1>Application Offline for Maintenance</h1>
-        <div class="article">
-          <p>This application is undergoing maintenance right now.  Please check back later.</p>
-        </div>
-      </div>
-  </body>
+<head>
+  <title>Application Offline for Maintenance</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+  body {
+    background-color: #6CABF7;
+    color: #fff;
+    text-align: center;
+    font-family: arial, sans-serif;
+    margin: 0;
+  }
+  div {
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  p {
+    color: #eee;
+  }
+  </style>
+
+  <script>
+    /* Attempt to automatically reload, assuming that the maintenance mode is temporary */
+    var retry_current = 2; // First refresh at 2 seconds
+    var retry_limit = 4096; // Maximum backoff time, ~68 minutes
+
+    check_gateway = function () {
+
+      var request = new XMLHttpRequest();
+      request.open('HEAD', window.location.href, true);
+
+      request.onload = function () {
+
+        if (request.status >= 200 && request.status < 400) {
+          window.location.reload(true);
+        } else {
+          if (retry_current < retry_limit) {
+            retry_current *= 2;
+          }
+
+          setTimeout(check_gateway, retry_current * 1000);
+        }
+      };
+
+      request.send();
+    };
+
+    setTimeout(check_gateway, retry_current * 1000);
+  </script>
+</head>
+
+<body>
+  <div>
+    <h1>Application Offline for Maintenance.</h1>
+    <p>This application is undergoing maintenance right now. Please check back later.</p>
+  </div>
+</body>
 </html>
