<!DOCTYPE html> <!-- Error {{ code }}: {{ message }} Description: {{ description }} --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, nofollow"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>{{ code }} - {{ message }}</title> <style> html, body { margin: 0; background-color: #222; color: #aaa; font-family: 'Hack', monospace; font-size: 0; } .full-height { height: 100vh; } .flex-center { align-items: center; display: flex; justify-content: center; } #error_text { font-size: 32px; } /* {{ if show_details }} */ #details table { width: 100%; border-collapse: collapse; box-sizing: border-box; margin-top: 20px; } #details.hidden td { opacity: 0; font-size: 0; color: #222; } #details td { font-size: 11px; color: #999; padding-top: .5em; transition: opacity 1.4s, font-size .3s, color 1.2s; opacity: 1; } #details td.name { text-align: right; padding-right: .3em; width: 50%; } #details td.value { text-align: left; padding-left: .3em; font-family: 'Lucida Console', 'Courier New', monospace; } /* {{ end }} */ </style> </head> <body> <div class="flex-center full-height"> <div> <div id="error_text"> <span class="source">{{ code }}: <span data-l10n>{{ message }}</span></span> <span class="target"></span> </div> {{ if show_details }} <div class="hidden" id="details"> <table> {{- if host }} <tr> <td class="name"><span data-l10n>Host</span>:</td> <td class="value">{{ host }}</td> </tr> {{ end -}} {{- if original_uri }} <tr> <td class="name"><span data-l10n>Original URI</span>:</td> <td class="value">{{ original_uri }}</td> </tr> {{ end -}} {{- if forwarded_for }} <tr> <td class="name"><span data-l10n>Forwarded for</span>:</td> <td class="value">{{ forwarded_for }}</td> </tr> {{ end -}} {{- if namespace }} <tr> <td class="name"><span data-l10n>Namespace</span>:</td> <td class="value">{{ namespace }}</td> </tr> {{ end -}} {{- if ingress_name }} <tr> <td class="name"><span data-l10n>Ingress name</span>:</td> <td class="value">{{ ingress_name }}</td> </tr> {{ end -}} {{- if service_name }} <tr> <td class="name"><span data-l10n>Service name</span>:</td> <td class="value">{{ service_name }}</td> </tr> {{ end -}} {{- if service_port }} <tr> <td class="name"><span data-l10n>Service port</span>:</td> <td class="value">{{ service_port }}</td> </tr> {{ end -}} {{- if request_id }} <tr> <td class="name"><span data-l10n>Request ID</span>:</td> <td class="value">{{ request_id }}</td> </tr> {{ end -}} <tr> <td class="name"><span data-l10n>Timestamp</span>:</td> <td class="value">{{ now.Unix }}</td> </tr> </table> </div> {{ end }} </div> </div> <script> 'use strict'; /** * @param {HTMLElement} $el */ const Shuffle = function ($el) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''), $source = $el.querySelector('.source'), $target = $el.querySelector('.target'); let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined; /** * @param {Number} len * @return {string} */ const getRandomizedString = function (len) { let s = ''; for (let i = 0; i < len; i++) { s += chars[Math.floor(Math.random() * chars.length)]; } return s; }; this.start = function () { $source.style.display = 'none'; $target.style.display = 'block'; scrambleInterval = window.setInterval(() => { if (cursor <= $source.innerText.length) { $target.innerText = $source.innerText.substring(0, cursor) + getRandomizedString($source.innerText.length - cursor); } }, 450 / 30); cursorDelayInterval = window.setTimeout(() => { cursorInterval = window.setInterval(() => { if (cursor > $source.innerText.length - 1) { this.stop(); } cursor++; }, 70); }, 350); }; this.stop = function () { $source.style.display = 'block'; $target.style.display = 'none'; $target.innerText = ''; cursor = 0; if (scrambleInterval !== undefined) { window.clearInterval(scrambleInterval); scrambleInterval = undefined; } if (cursorInterval !== undefined) { window.clearInterval(cursorInterval); cursorInterval = undefined; } if (cursorDelayInterval !== undefined) { window.clearInterval(cursorDelayInterval); cursorDelayInterval = undefined; } }; }; (new Shuffle(document.getElementById('error_text'))).start(); // {{ if show_details }} window.setTimeout(function () { document.getElementById('details').classList.remove('hidden'); }, 550); // {{ end }} // {{ if l10n_enabled }} if (navigator.language.substring(0, 2).toLowerCase() !== 'en') { ((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n) s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js'; s.async = s.defer = true; s.addEventListener('load', () => p.removeChild(s)); p.appendChild(s); })(document.createElement('script'), document.body); } // {{ end }} </script> </body> <!-- Error {{ code }}: {{ message }} Description: {{ description }} --> </html>