Last active
August 7, 2023 21:27
-
-
Save 186526/1ff9d6663e78c501ad148194503fd76a to your computer and use it in GitHub Desktop.
cloudflare-custom-error
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| <meta name="renderer" content="webkit" /> | |
| <meta name="force-rendering" content="webkit" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Google+Sans&family=Fira+Mono&family=Ubuntu&display=swap" | |
| rel="stylesheet"> | |
| <title>5xx | Server-side Error</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> | |
| <style type="text/css"> | |
| :root { | |
| --background-color: #fff; | |
| --font-color: #000; | |
| --font-color-lighter: rgb(87, 89, 88); | |
| --font-size-main: 3.545rem; | |
| --font-size-description: 1.245rem; | |
| --box-color: #F2F2F2; | |
| --working-color: #137333; | |
| --working-color-background: #e6f4ea; | |
| --error-color-background: #fce8e6; | |
| --error-color: #c5221f; | |
| --working-with-error-color: #b05a00; | |
| --working-with-error-color-background: #fef7e0; | |
| --icon-size: 48px; | |
| } | |
| body { | |
| margin: 2rem 2rem; | |
| font-family: Google Sans, Ubuntu, Roboto, Noto Sans SC, sans-serif; | |
| color: var(--font-color); | |
| background-color: var(--background-color); | |
| } | |
| nav { | |
| margin-left: 1rem; | |
| } | |
| nav description { | |
| font-family: Ubuntu, Roboto, Noto Sans SC, sans-serif; | |
| font-size: var(--font-size-description); | |
| line-height: var(--fonr-size-description); | |
| color: var(--font-color-lighter); | |
| } | |
| nav main { | |
| font-size: var(--font-size-main); | |
| line-height: var(--font-size-main); | |
| font-family: Fira Mono, Ubuntu, monospace; | |
| } | |
| code { | |
| font-family: Fira Mono, monospace; | |
| } | |
| none { | |
| display: none; | |
| } | |
| status { | |
| margin-top: 2.5rem; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| status block.status-block { | |
| background-color: var(--box-color); | |
| padding: 2rem; | |
| margin: 1rem 1rem; | |
| min-height: 3rem; | |
| border-radius: 9px; | |
| flex-grow: 1; | |
| } | |
| status block.status-block.working-block { | |
| background-color: var(--working-color-background); | |
| } | |
| status block.status-block.error-block { | |
| background-color: var(--error-color-background); | |
| } | |
| status block.status-block.working-with-error-block { | |
| background-color: var(--working-with-error-color-background); | |
| } | |
| .status-block main { | |
| font-size: calc(var(--font-size-description) + 0.1rem); | |
| } | |
| .status-working { | |
| color: var(--working-color); | |
| } | |
| .status-error { | |
| color: var(--error-color); | |
| } | |
| .status-working-with-error { | |
| color: var(--working-with-error-color); | |
| } | |
| icon { | |
| font-size: var(--icon-size) !important; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #1967d2; | |
| } | |
| reason { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| reason>* { | |
| display: block; | |
| margin: 1rem; | |
| flex-grow: 1; | |
| max-width: 40%; | |
| } | |
| reason main { | |
| font-size: calc(var(--font-size-description) + 0.2rem); | |
| font-weight: 550; | |
| } | |
| footer { | |
| margin: 1rem; | |
| color: var(--font-color-lighter); | |
| font-size: calc(var(--font-size-description) - 0.4rem); | |
| } | |
| footer>request-status { | |
| font-size: calc(var(--font-size-description) - 0.6rem); | |
| } | |
| footer>* { | |
| display: block; | |
| } | |
| @media screen and (max-width:480px) { | |
| body { | |
| margin: 6rem 2rem; | |
| } | |
| :root { | |
| --font-size-main: 3.0rem; | |
| --font-size-description: 1.045rem; | |
| } | |
| reason>* { | |
| max-width: 100%; | |
| } | |
| footer { | |
| font-size: calc(var(--font-size-description) - 0.2rem); | |
| } | |
| footer>request-status { | |
| font-size: calc(var(--font-size-description) - 0.4rem); | |
| } | |
| } | |
| @media screen and (min-width: 768px) { | |
| body { | |
| margin: 8% 10%; | |
| } | |
| nav * { | |
| display: inline-block; | |
| margin-left: 1%; | |
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --font-color: rgba(255, 255, 255, 0.86); | |
| --font-color-lighter: rgba(255, 255, 255, 0.4); | |
| --background-color: rgb(0, 0, 0); | |
| --box-color: rgb(40 40 40 / 73%); | |
| --working-color-background: #07220f; | |
| --error-color-background: #270501; | |
| --working-with-error-color-background: #392605; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <main>5xx Error</main> | |
| <description>Server-side Error</description> | |
| </nav> | |
| <status> | |
| <block class="status-block working-block" id="client-status-block"> | |
| <icon class="material-icons-outlined status-working">web_assets</icon> | |
| <main>Your Client</main> | |
| <status-text class="status-working">Working</status-text> | |
| </block> | |
| <block class="status-block working-block" id="edge-status-block"> | |
| <icon class="material-icons-outlined status-working">cloud</icon> | |
| <main>Cloudflare Edge Network</main> | |
| <status-text class="status-working">Working | |
| </block> | |
| <block class="status-block error-block" id="website-status-block"> | |
| <icon class="material-icons-outlined status-error">dns</icon> | |
| <main>Web Server</main> | |
| <status-text class="status-error">Error</status-text> | |
| </block> | |
| </status> | |
| <reason> | |
| <explain> | |
| <main>What happened?</main> | |
| <p> | |
| The web server reported a Server error. | |
| </p> | |
| </explain> | |
| <howto> | |
| <main>What can I do?</main> | |
| <p> | |
| Please try again in a few minutes. | |
| </p> | |
| </howto> | |
| </reason> | |
| <footer> | |
| <provider>Running with <a href="https://cloudflare.com">Cloudflare</a>.</provider> | |
| <br> | |
| <request-status>Your IP is <code>::CLIENT_IP::</code><br> Ray ID is <code>::RAY_ID::</code><br> Hit in <code id="pop"> undefined </code></request-status> | |
| </footer> | |
| <none> | |
| ::CLOUDFLARE_ERROR_500S_BOX:: | |
| </none> | |
| <script> | |
| const baseDetils = document.querySelector('.cf-error-details'); | |
| const ErrorMessage = baseDetils.querySelector('h1').innerText; | |
| const Explain = baseDetils.querySelector('p').innerText; | |
| let ErrorNumber = "5xx"; | |
| let POP = "undefined"; | |
| baseDetils | |
| .querySelector('ul') | |
| .childNodes.forEach(e=> | |
| { | |
| if(e.innerText!==undefined){ | |
| let check = e.innerText.replace("Error reference number: ",""); | |
| if(check!==e.innerText){ | |
| ErrorNumber = check; | |
| return; | |
| } | |
| check = e.innerText.replace("Cloudflare Location: ",""); | |
| if(check!==e.innerText){ | |
| POP = check; | |
| return; | |
| } | |
| } | |
| }) | |
| document.querySelector("nav main").innerText = ErrorNumber; | |
| document.querySelector("nav description").innerText = ErrorMessage; | |
| document.querySelector("explain p").innerText = Explain; | |
| document.querySelector("request-status #pop").innerText = POP; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, thank you, just quick quick typo :
L46 :
line-height: var(--fonr-size-description); ==> line-height: var(--font-size-description);