Created
April 15, 2020 20:56
-
-
Save ajmas/3a80a856802d4059803281406bf7ebeb to your computer and use it in GitHub Desktop.
502 Error Page for NodeJS hosting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>502 Bad Gateway</title> | |
| <!-- Browser icons from https://github.com/alrra/browser-logos --> | |
| <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> | |
| <script type="text/javascript"> | |
| // for testing | |
| var browserNameOveride; | |
| function getBrowserName() { | |
| var agent = window.navigator.userAgent.toLowerCase(); | |
| if (browserNameOveride) { | |
| return browserNameOveride; | |
| } else if (agent.indexOf("edge") > -1) { | |
| return "edge"; | |
| } else if (agent.indexOf(" opr/") > -1) { | |
| return "opera"; | |
| } else if (agent.indexOf("chrome") > -1 && window.chrome) { | |
| return "chrome"; | |
| } else if (agent.indexOf("trident") > -1) { | |
| return "ie"; | |
| } else if (agent.indexOf("firefox") > -1) { | |
| return "firefox"; | |
| } else if (agent.indexOf("safari") > -1) { | |
| return "safari"; | |
| } else { | |
| return undefined; | |
| } | |
| } | |
| function getBrowserIconUrl() { | |
| var browserName = getBrowserName(); | |
| // logos from: https://github.com/alrra/browser-logos | |
| return 'https://cdnjs.cloudflare.com/ajax/libs/browser-logos/62.2.25/' + browserName + '/' + browserName + '_256x256.png'; | |
| } | |
| // TODO handle archived browser icons & support other browsers | |
| function showDefaultBrowser () { | |
| $('.app-flow .app.browser').html('<img class="browser-icon" src="/error-pages/images/apps/browserx.png" alt="Browser"/>'); | |
| } | |
| function showBrowserIcon() { | |
| let url = getBrowserIconUrl(); | |
| if (url) { | |
| $('.app-flow .app.browser').html('<img class="browser-icon" src="' + getBrowserIconUrl() + '" alt="' + getBrowserName() + '" onerror="showDefaultBrowser()"/>'); | |
| } else { | |
| showDefaultBrowser(); | |
| } | |
| } | |
| $(document).ready(function () { | |
| showBrowserIcon(); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| .app-flow { | |
| clear: both; | |
| } | |
| .app-flow .arrow { | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-align: center; | |
| width: 105px; | |
| height: 20px; | |
| } | |
| .app-flow .app { | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-align: center; | |
| width: 180px; | |
| height: 180px; | |
| position: relative; | |
| box-sizing: border-box; | |
| } | |
| .app-flow .app.browser { | |
| padding: 7px; | |
| } | |
| .app-flow .app.browser img { | |
| width: 160px; | |
| height: 160px; | |
| } | |
| .app-flow-emotion { | |
| margin-top: 30px; | |
| clear: both; | |
| } | |
| .app-flow-emotion .arrow { | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-align: center; | |
| width: 105px; | |
| height: 60px; | |
| } | |
| .app-flow-emotion .app { | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-align: center; | |
| width: 180px; | |
| height: 60px; | |
| } | |
| @media screen and (max-width: 820px) { | |
| .app-flow .arrow { | |
| width: 75px; | |
| height: 10px; | |
| } | |
| .app-flow .arrow img { | |
| width: 40px; | |
| } | |
| .app-flow .app { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .app-flow .app img { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .app-flow .app.browser { | |
| padding: 2px; | |
| } | |
| .app-flow .app.browser img { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .app-flow-emotion .arrow { | |
| width: 75px; | |
| height: 10px; | |
| } | |
| .app-flow-emotion .app { | |
| width: 60px; | |
| height: 20px; | |
| } | |
| .app-flow-emotion .app img { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="text-align: center; padding: 20px; box-sizing: border-box;"> | |
| <h1>502 Bad Gateway</h1> | |
| <div class="app-flow"> | |
| <div class="app browser"><img src="/error-pages/images/apps/chrome.png" alt="Browser"></div> | |
| <div class="arrow"><img src="/error-pages/images/arrow.png"></div> | |
| <div class="app webserver"><img src="/error-pages/images/apps/nginx.png" alt="Nginx"></div> | |
| <div class="arrow"><img src="/error-pages/images/arrow.png"></div> | |
| <div class="app appserver"><img src="/error-pages/images/apps/nodejs.png" alt="NodeJS"></div> | |
| </div> | |
| <div class="app-flow-emotion"> | |
| <div class="app browser"><img src="/error-pages/images/emotions/happy.png"></div> | |
| <div class="arrow"> </div> | |
| <div class="app webserver"><img src="/error-pages/images/emotions/happy.png"></div> | |
| <div class="arrow"> </div> | |
| <div class="app appserver"><img src="/error-pages/images/emotions/sad.png"></div> | |
| </div> | |
| <p>Looks like we couldn't connect to our application server.</p> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment