<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Budibase</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <script> function checkStatusButton() { if (window.location.href.includes("budibase.app")) { var button = document.getElementById("statusButton") button.removeAttribute("hidden") } } function goToStatus() { window.location.href = "https://status.budibase.com"; } function goHome() { window.location.href = window.location.origin; } function getStatus() { var http = new XMLHttpRequest() var url = window.location.href http.open('GET', url, true) http.send() http.onreadystatechange = (e) => { var status = http.status document.getElementById("status").innerHTML = status var message if (status === 502) { message = "Bad gateway. Please try again later." } else if (status === 503) { message = "Service Unavailable. Please try again later." } else if (status === 504) { message = "Gateway timeout. Please try again later." } else { message = "Please try again later." } document.getElementById("message").innerHTML = message } } window.onload = function() { checkStatusButton() getStatus() }; </script> <style> :root { --spectrum-global-color-gray-600: rgb(144,144,144); --spectrum-global-color-gray-900: rgb(255,255,255); --spectrum-global-color-gray-800: rgb(227,227,227); --bb-indigo: #6E56FF; --bb-indigo-light: #9F8FFF; } html, body { background-color: #1a1a1a; padding: 0; margin: 0; overflow: hidden; color: #e7e7e7; font-family: 'Roboto', sans-serif; } button { color: #e7e7e7; font-family: 'Roboto', sans-serif; border: none; font-size: 15px; border-radius: 15px; padding: 8px 22px; } button:hover { cursor: pointer; } .main { height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: center; } .info { display: flex; flex-direction: column; align-items: flex-start; } .status { color: var(--spectrum-global-color-gray-600) } .title { font-weight: 400; color: var(--spectrum-global-color-gray-900) } .message { font-weight: 200; color: var(--spectrum-global-color-gray-800) } .buttons { display: flex; flex-direction: row; justify-content: flex-start; margin-top: 15px; } .homeButton { background-color: var(--bb-indigo); } .homeButton:hover { background-color: var(--bb-indigo-light); } .statusButton { background-color: transparent; margin-left: 20px; border: none; } .hero { height: 60px; margin: 10px 40px 10px 0; } .hero img { height: 100%; } .content { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 40px; } h1 { margin-bottom: 10px; } h3 { margin-top: 0; } @media only screen and (max-width: 600px) { .content { flex-direction: column; align-items: flex-start; } } </style> <script src=""> </script> <body> <div class="main"> <div class="content"> <div class="hero"> <img src="https://res.cloudinary.com/daog6scxm/image/upload/v1696515725/Branding/Assets/Symbol/RGB/Full%20Colour/Budibase_Symbol_RGB_FullColour_cbqvha_1_z5cwq2.svg" alt="Budibase Logo"> </div> <div class="info"> <div> <h4 id="status" class="status"> </h4> <h1 class="title"> Houston we have a problem! </h1> <h3 id="message" class="message"> </h3> </div> <div class="buttons"> <button class="homeButton" onclick=goHome()>Return home</button> <button id="statusButton" class="statusButton" hidden="true" onclick=goToStatus()>Check out status</button> </div> </div> </div> </div> </body> </html>