ThatGuyJack/errorpages
1
0
Fork 0
mirror of https://github.com/TheSL18/errorpages.git synced 2025-04-25 14:40:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

error pages

Browse Source
This commit is contained in:
TheSL18 2023-03-25 20:20:33 -05:00
parent 6fdb92ac49
commit 3524df999a
221 changed files with 36871 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
app-down/400.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Bad Request</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Bad Request</h2>
<p data-l10n>The server did not understand the request</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">400</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "400" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("400") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

221
app-down/401.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Unauthorized</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Unauthorized</h2>
<p data-l10n>The requested page needs a username and a password</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">401</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "401" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("401") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

221
app-down/403.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Forbidden</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Forbidden</h2>
<p data-l10n>Access is forbidden to the requested page</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">403</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "403" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("403") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

221
app-down/404.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Not Found</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Not Found</h2>
<p data-l10n>The server can not find the requested page</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">404</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "404" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("404") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

221
app-down/405.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Method Not Allowed</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Method Not Allowed</h2>
<p data-l10n>The method specified in the request is not allowed</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">405</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "405" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("405") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

221
app-down/407.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Proxy Authentication Required</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Proxy Authentication Required</h2>
<p data-l10n>You must authenticate with a proxy server before this request can be served</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">407</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "407" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("407") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

221
app-down/408.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Request Timeout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Request Timeout</h2>
<p data-l10n>The request took longer than the server was prepared to wait</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">408</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "408" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("408") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

221
app-down/409.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Conflict</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Conflict</h2>
<p data-l10n>The request could not be completed because of a conflict</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">409</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "409" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("409") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

221
app-down/410.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Gone</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Gone</h2>
<p data-l10n>The requested page is no longer available</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">410</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "410" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("410") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

221
app-down/411.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Length Required</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Length Required</h2>
<p data-l10n>The "Content-Length" is not defined. The server will not accept the request without it</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">411</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "411" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("411") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

221
app-down/412.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Precondition Failed</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Precondition Failed</h2>
<p data-l10n>The pre condition given in the request evaluated to false by the server</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">412</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "412" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("412") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

221
app-down/413.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Payload Too Large</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Payload Too Large</h2>
<p data-l10n>The server will not accept the request, because the request entity is too large</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">413</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "413" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("413") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

221
app-down/416.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Requested Range Not Satisfiable</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Requested Range Not Satisfiable</h2>
<p data-l10n>The requested byte range is not available and is out of bounds</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">416</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "416" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("416") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

221
app-down/418.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>I'm a teapot</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>I'm a teapot</h2>
<p data-l10n>Attempt to brew coffee with a teapot is not supported</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">418</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "418" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("418") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

221
app-down/429.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Too Many Requests</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Too Many Requests</h2>
<p data-l10n>Too many requests in a given amount of time</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">429</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "429" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("429") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

221
app-down/500.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Internal Server Error</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Internal Server Error</h2>
<p data-l10n>The server met an unexpected condition</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">500</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "500" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("500") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

221
app-down/502.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Bad Gateway</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Bad Gateway</h2>
<p data-l10n>The server received an invalid response from the upstream server</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">502</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "502" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("502") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

221
app-down/503.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Service Unavailable</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Service Unavailable</h2>
<p data-l10n>The server is temporarily overloading or down</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">503</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "503" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("503") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

221
app-down/504.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Gateway Timeout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>Gateway Timeout</h2>
<p data-l10n>The gateway has timed out</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">504</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "504" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("504") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

221
app-down/505.html Normal file
View File

@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>HTTP Version Not Supported</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
}
body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
body{align-items:center;display:flex;justify-content:center;height:100vh}
main{width:100%;max-width:1024px;padding:0 40px;display:flex;justify-content:space-between}
.content,.picture{box-sizing:border-box}
.content{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-around;width:45%;z-index:1}
a,p,ul li{font-size:var(--font-size-normal)}
.title{line-height:1.2;font-size:var(--font-size-large);margin:0 0 30px;width:130%}
.subtitle{display:flex;flex-direction:column;justify-content:center;margin:16px 0}
ul{padding:0;list-style:none;line-height:24px}
ul li::before{content:'•';padding-right:7px;color:var(--color-img-secondary)}
/* */
a{text-decoration:none;color:var(--color-img-secondary)}
.hidden{display:none}
.picture{display:flex;align-items:center;justify-content:center;width:55%;user-select:none;z-index:0}
.picture svg{width:100%}
.picture svg .st10,.picture svg .st11,.picture svg .st12,.picture svg .st13,.picture svg .st14,.picture svg .st15,.picture svg .st16,.picture svg .st17,.picture svg .st3,.picture svg .st6,.picture svg .st9{stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st0{fill:var(--color-bg-primary)}
.picture svg .st1{fill:url(#svg-background-gradient)}
.picture svg .st2{fill:var(--color-bg-secondary)}
.picture svg .st3{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st4{fill:var(--color-img-secondary)}
.picture svg .st5{fill:none;stroke:var(--color-img-secondary);stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}
.picture svg .st6{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st7{fill:var(--color-img-primary)}
.picture svg .st8{fill:none;stroke:var(--color-img-primary);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .st9{fill:none;stroke:var(--color-img-primary);stroke-width:3}
.picture svg .st10{fill:none;stroke:var(--color-img-primary);stroke-width:3.5}
.picture svg .st11{fill:none;stroke:var(--color-img-secondary);stroke-width:4}
.picture svg .st12{fill:var(--color-bg-primary);stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st13{fill:none;stroke:var(--color-img-primary);stroke-width:4}
.picture svg .st14{fill:none;stroke:var(--color-img-secondary);stroke-width:4.5}
.picture svg .st15{fill:none;stroke:var(--color-img-secondary);stroke-width:5}
.picture svg .st16{fill:none;stroke:var(--color-img-primary);stroke-width:5}
.picture svg .st17{fill:var(--color-bg-primary);stroke:var(--color-img-details);stroke-width:3.5}
.picture svg .st19{fill:none;stroke:var(--color-img-details);stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10}
.picture svg .error-code{font:bold 40px sans-serif;fill:var(--color-img-details)}
@media (max-width:1024px){
:root{--font-size-small:11px;--font-size-normal:14px;--font-size-large:35px}
main{display:block;position:relative;padding-top:40px}
.content,.picture{width:100%}
.content{position:relative;margin:0 auto;z-index:1}
.title{width:100%}
.picture{position:absolute;top:0;left:0;z-index:0;opacity:.2;width:100%;height:100%;padding:0}
.picture svg{max-width:70%}
}
@media (max-width:600px){
.picture svg{max-width:100%}
}
</style>
</head>
<body>
<main>
<div class="content">
<h2 class="title" data-l10n>HTTP Version Not Supported</h2>
<p data-l10n>The server does not support the "http protocol" version</p>
<div class="subtitle if-not-found hidden">
<p><span data-l10n>Here's what might have happened</span>:</p>
<ul>
<li data-l10n>You may have mistyped the URL</li>
<li data-l10n>The site was moved</li>
<li data-l10n>It was never here</li>
</ul>
</div>
<p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
</div>
<div class="picture">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
<rect y="0" class="st0" width="600" height="480"></rect>
<radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="0.5002" style="stop-color:var(--color-bg-secondary)"></stop>
<stop offset="1" style="stop-color:var(--color-bg-primary)"></stop>
</radialgradient>
<rect x="95.2" y="35.7" class="st1" width="460" height="271.4"></rect>
<ellipse class="st2" cx="289.7" cy="352.3" rx="69.5" ry="13.9"></ellipse>
<ellipse class="st2" cx="180.5" cy="396.3" rx="51.2" ry="9.5"></ellipse>
<ellipse class="st2" cx="381.3" cy="418.3" rx="40.8" ry="6.4"></ellipse>
<path class="st3" d="M551.1,285.8H527c-2.3,0-4.1-1.8-4.1-4.1v-30c0-2.3,1.8-4.1,4.1-4.1h24.1c2.3,0,4.1,1.8,4.1,4.1v30 C555.2,284,553.4,285.8,551.1,285.8z"></path>
<circle class="st3" cx="539.1" cy="266.7" r="10.3"></circle>
<path class="st4" d="M265.6,343.3c-5,0-9,4-9,9h18C274.6,347.3,270.6,343.3,265.6,343.3z"></path>
<line class="st5" x1="272.7" y1="328.1" x2="272.7" y2="352.3"></line>
<path class="st4" d="M307,343.3c-5,0-9,4-9,9h18C316,347.3,311.9,343.3,307,343.3z"></path>
<line class="st5" x1="314.1" y1="328.1" x2="314.1" y2="352.3"></line>
<path class="st6" d="M380.7,422.6l-37.6-6.4c-1.5-0.3-2.5-1.5-2.2-2.9l4.6-26.8c0.2-1.4,1.6-2.2,3-2l37.6,6.4 c1.5,0.3,2.5,1.5,2.2,2.9l-4.6,26.8C383.6,422,382.2,422.9,380.7,422.6z"></path>
<path class="st6" d="M344.6,391.5l0.8-4.5c0.3-1.7,1.6-2.8,3.1-2.5l37.6,6.4c1.5,0.3,2.4,1.7,2.1,3.4l-0.8,4.5L344.6,391.5z"></path>
<circle class="st7" cx="349" cy="388.4" r="1"></circle>
<circle class="st7" cx="353.1" cy="389.1" r="1"></circle>
<circle class="st7" cx="357.1" cy="389.8" r="1"></circle>
<line class="st8" x1="360.4" y1="402.8" x2="367.4" y2="412.7"></line>
<line class="st8" x1="368.8" y1="404.3" x2="359" y2="411.2"></line>
<path class="st6" d="M166.4,401.4l-36.6-10.8c-1.5-0.4-2.3-1.8-1.9-3.1l7.7-26.1c0.4-1.3,1.8-2,3.3-1.6l36.6,10.8 c1.5,0.4,2.3,1.8,1.9,3.1l-7.7,26.1C169.3,401.1,167.9,401.8,166.4,401.4z"></path>
<path class="st6" d="M134.2,366.2l1.3-4.4c0.5-1.6,2-2.6,3.4-2.1l36.6,10.8c1.5,0.4,2.2,2,1.7,3.6l-1.3,4.4L134.2,366.2z"></path>
<circle class="st7" cx="138.9" cy="363.7" r="1"></circle>
<circle class="st7" cx="142.9" cy="364.8" r="1"></circle>
<circle class="st7" cx="146.9" cy="366" r="1"></circle>
<path class="st6" d="M220.9,399.3l-38-3.9c-1.5-0.2-2.5-1.3-2.4-2.7l2.8-27.1c0.1-1.4,1.4-2.3,2.9-2.2l38,3.9 c1.5,0.2,2.5,1.3,2.4,2.7l-2.8,27.1C223.6,398.5,222.4,399.5,220.9,399.3z"></path>
<path class="st6" d="M188.6,400.9l-38.1,2.8c-1.5,0.1-2.7-0.9-2.8-2.3l-2-27.1c-0.1-1.4,1-2.6,2.5-2.7l38.1-2.8 c1.5-0.1,2.7,0.9,2.8,2.3l2,27.1C191.2,399.6,190.1,400.8,188.6,400.9z"></path>
<path class="st9" d="M146.1,379.4l-0.3-4.5c-0.1-1.7,0.9-3.1,2.4-3.2l38.1-2.8c1.5-0.1,2.8,1.1,2.9,2.8l0.3,4.5L146.1,379.4z"></path>
<circle class="st7" cx="149.6" cy="375.3" r="1"></circle>
<circle class="st7" cx="153.7" cy="375" r="1"></circle>
<circle class="st7" cx="157.8" cy="374.7" r="1"></circle>
<line class="st8" x1="164.1" y1="386.6" x2="173.3" y2="394.4"></line>
<line class="st8" x1="172.7" y1="385.9" x2="164.8" y2="395.1"></line>
<path class="st10" d="M539.1,267.8c0,96.1-51.7,97.6-67.6,98.6c-28.1,1.8-76.3-14.4-63-25.6c13.3-11.2,53.8-10.3,59.3-4.3 c4,4.3,6.1,16.6-49.9,15.8c-29.4-0.4-51-8.4-60.8-32.1"></path>
<path class="st11" d="M184.1,262.5c17.8,9,28.4-2.4,28.4-2.4"></path>
<ellipse class="st0" cx="289.7" cy="170.7" rx="77.1" ry="21.7"></ellipse>
<path class="st12" d="M366.8,308.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8V170.7c0,12.1,34.5,21.8,77.1,21.8 c42.6,0,77.1-9.8,77.1-21.8V308.7z"></path>
<path class="st13" d="M212.6,170.7c0-12.1,34.5-21.8,77.1-21.8c42.6,0,77.1,9.8,77.1,21.8"></path>
<path class="st13" d="M366.8,216.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st13" d="M366.8,262.7c0,12.1-34.5,21.8-77.1,21.8c-42.6,0-77.1-9.8-77.1-21.8"></path>
<path class="st11" d="M384.2,279.8c-6.2-18.9-25.1-18.7-25.1-18.7"></path>
<path class="st14" d="M378,288.7c0,0,0-6.3,5.6-8.8c0,0,1.6,0.5,3.3,1.3"></path>
<path class="st15" d="M384.2,279.8"></path>
<circle class="st4" cx="319" cy="254.8" r="4.2"></circle>
<circle class="st4" cx="257.2" cy="255.4" r="4.2"></circle>
<line class="st16" x1="182.4" y1="284.4" x2="179" y2="229.2"></line>
<polygon class="st17" points="191.3,144 153.6,146.3 128.7,174.8 131,212.7 159.3,238 196.9,235.6 221.8,207.2 219.5,169.2" style="fill:var(--color-bg-sign)"></polygon>
<text class="error-code" x="125" y="220" transform="rotate(-5)">505</text>
<line class="st14" x1="183.2" y1="255.9" x2="175.9" y2="258.8"></line>
<line class="st14" x1="184.7" y1="260.4" x2="175.8" y2="263"></line>
<line class="st14" x1="185.4" y1="265.4" x2="176.9" y2="267.2"></line>
<ellipse class="st11" cx="287.7" cy="269" rx="4.4" ry="6.7"></ellipse>
<path class="st6" d="M405.5,316l-37.8,5.5c-1.5,0.2-2.8-0.7-3-2.1l-3.9-26.9c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.5 c1.5-0.2,2.8,0.7,3,2.1l3.9,26.9C407.9,314.5,407,315.7,405.5,316z"></path>
<path class="st6" d="M361.5,297.6l-0.7-4.5c-0.2-1.7,0.7-3.1,2.2-3.4l37.8-5.5c1.5-0.2,2.8,0.9,3.1,2.6l0.7,4.5L361.5,297.6z"></path>
<circle class="st7" cx="364.7" cy="293.3" r="1"></circle>
<circle class="st7" cx="368.8" cy="292.7" r="1"></circle>
<circle class="st7" cx="372.9" cy="292.1" r="1"></circle>
<line class="st19" x1="380" y1="303.4" x2="389.7" y2="310.6"></line>
<line class="st19" x1="388.5" y1="302.2" x2="381.3" y2="311.9"></line>
<path class="st6" d="M204.8,355.2l-28.4,25.5c-1.1,1-2.7,1-3.6-0.1l-18.2-20.3c-0.9-1-0.8-2.6,0.3-3.6l28.4-25.5 c1.1-1,2.7-1,3.6,0.1l18.2,20.3C206.1,352.6,205.9,354.2,204.8,355.2z"></path>
<path class="st9" d="M158,364.1l-3-3.4c-1.1-1.3-1.1-3,0-4l28.4-25.5c1.1-1,2.9-0.8,4,0.5l3,3.4L158,364.1z"></path>
<circle class="st7" cx="158.3" cy="358.7" r="1"></circle>
<circle class="st7" cx="161.3" cy="356" r="1"></circle>
<circle class="st7" cx="164.4" cy="353.2" r="1"></circle>
<line class="st8" x1="176.7" y1="358.8" x2="188.7" y2="359.4"></line>
<line class="st8" x1="183" y1="353.1" x2="182.4" y2="365.1"></line>
<path class="st6" d="M219.9,344l14.8,35.2c0.6,1.4,0,2.9-1.2,3.4l-25.1,10.5c-1.3,0.5-2.7-0.1-3.3-1.5l-14.8-35.2 c-0.6-1.4,0-2.9,1.2-3.4l25.1-10.5C217.8,341.9,219.3,342.6,219.9,344z"></path>
<path class="st9" d="M213,391.1l-4.2,1.8c-1.6,0.7-3.2,0.1-3.8-1.3l-14.8-35.2c-0.6-1.4,0.2-3,1.7-3.6l4.2-1.8L213,391.1z"></path>
<circle class="st7" cx="208" cy="389.1" r="1"></circle>
<circle class="st7" cx="206.4" cy="385.3" r="1"></circle>
<circle class="st7" cx="204.8" cy="381.5" r="1"></circle>
<line class="st8" x1="214.1" y1="371.7" x2="218.6" y2="360.6"></line>
<line class="st8" x1="210.8" y1="363.9" x2="221.9" y2="368.4"></line>
<path class="st14" d="M394.1,287.1c-0.7-1.6-3.9-4.5-7.2-5.9"></path>
<path class="st6" d="M419.7,413.7l-37.8,5.2c-1.5,0.2-2.8-0.7-3-2.1l-3.7-27c-0.2-1.4,0.8-2.6,2.3-2.8l37.8-5.2 c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z"></path>
<path class="st6" d="M375.9,394.8l-0.6-4.5c-0.2-1.7,0.7-3.1,2.2-3.3l37.8-5.2c1.5-0.2,2.8,0.9,3.1,2.6l0.6,4.5L375.9,394.8z"></path>
<circle class="st7" cx="379.2" cy="390.6" r="1"></circle>
<circle class="st7" cx="383.3" cy="390" r="1"></circle>
<circle class="st7" cx="387.4" cy="389.5" r="1"></circle>
<line class="st8" x1="394.4" y1="400.9" x2="404" y2="408.2"></line>
<line class="st8" x1="402.9" y1="399.7" x2="395.6" y2="409.4"></line>
<polygon class="st17" points="361,62.2 346.5,104.9 364.7,107.8 347.6,141.8 382,99.7 363.5,93.5 385,63.8 "></polygon>
<polygon class="st17" points="396.5,101.6 374.8,122.8 384.1,130.2 363.6,145.4 396.4,130.6 388,121.2 409.5,109.9 "></polygon>
<line class="st14" x1="384.7" y1="281.7" x2="386" y2="290.6"></line>
</svg>
</div>
</main>
<script>
Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
$el.style.display = "505" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("505") ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
if (document.referrer !== '' || history.length > 1) {
$el.setAttribute('href', '#back-to-the-future');
$el.addEventListener('click', function (event) {
history.back();
event.preventDefault();
return false;
}, false);
$el.style.display = 'inline-block'; // show the element
} else {
$el.style.display = 'none'; // hide the element
}
});
//
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);
}
//
</script>
</body>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

62
cats/400.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Bad Request</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/400.jpg" alt="Bad Request">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

62
cats/401.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Unauthorized</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/401.jpg" alt="Unauthorized">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

62
cats/403.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Forbidden</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/403.jpg" alt="Forbidden">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

62
cats/404.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Not Found</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/404.jpg" alt="Not Found">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

62
cats/405.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Method Not Allowed</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/405.jpg" alt="Method Not Allowed">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

62
cats/407.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Proxy Authentication Required</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/407.jpg" alt="Proxy Authentication Required">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

62
cats/408.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Request Timeout</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/408.jpg" alt="Request Timeout">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

62
cats/409.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Conflict</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/409.jpg" alt="Conflict">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

62
cats/410.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Gone</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/410.jpg" alt="Gone">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

62
cats/411.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Length Required</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/411.jpg" alt="Length Required">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

62
cats/412.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Precondition Failed</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/412.jpg" alt="Precondition Failed">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

62
cats/413.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Payload Too Large</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/413.jpg" alt="Payload Too Large">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

62
cats/416.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Requested Range Not Satisfiable</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/416.jpg" alt="Requested Range Not Satisfiable">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

62
cats/418.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>I'm a teapot</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/418.jpg" alt="I'm a teapot">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

62
cats/429.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Too Many Requests</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/429.jpg" alt="Too Many Requests">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

62
cats/500.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Internal Server Error</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/500.jpg" alt="Internal Server Error">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

62
cats/502.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Bad Gateway</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/502.jpg" alt="Bad Gateway">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

62
cats/503.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Service Unavailable</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/503.jpg" alt="Service Unavailable">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

62
cats/504.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>Gateway Timeout</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/504.jpg" alt="Gateway Timeout">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

62
cats/505.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>HTTP Version Not Supported</title>
<style>
html, body {
margin: 0;
height: 100vh;
background-color: #000;
color: #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 0;
}
.centered {
height: 100vh;
align-items: center;
display: flex;
justify-content: center
}
.centered img {
max-width: 750px;
width: 100%;
}
/* */
</style>
</head>
<body>
<div class="centered">
<!-- Pictures provider: <https://http.cat/> -->
<div>
<img src="https://http.cat/505.jpg" alt="HTTP Version Not Supported">
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

252
connection/400.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<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>400 | Bad Request</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">400</h1>
<p class="error-description">Bad Request</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server did not understand the request</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`400`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Bad Request`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server did not understand the request`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

252
connection/401.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<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>401 | Unauthorized</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">401</h1>
<p class="error-description">Unauthorized</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The requested page needs a username and a password</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`401`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Unauthorized`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The requested page needs a username and a password`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

252
connection/403.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<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>403 | Forbidden</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">403</h1>
<p class="error-description">Forbidden</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>Access is forbidden to the requested page</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`403`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Forbidden`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `Access is forbidden to the requested page`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

252
connection/404.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<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>404 | Not Found</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">404</h1>
<p class="error-description">Not Found</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server can not find the requested page</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`404`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Not Found`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server can not find the requested page`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

252
connection/405.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
<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>405 | Method Not Allowed</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">405</h1>
<p class="error-description">Method Not Allowed</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The method specified in the request is not allowed</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`405`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Method Not Allowed`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The method specified in the request is not allowed`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

252
connection/407.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
<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>407 | Proxy Authentication Required</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">407</h1>
<p class="error-description">Proxy Authentication Required</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>You must authenticate with a proxy server before this request can be served</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`407`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Proxy Authentication Required`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `You must authenticate with a proxy server before this request can be served`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

252
connection/408.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
<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>408 | Request Timeout</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">408</h1>
<p class="error-description">Request Timeout</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The request took longer than the server was prepared to wait</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`408`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Request Timeout`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The request took longer than the server was prepared to wait`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

252
connection/409.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<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>409 | Conflict</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">409</h1>
<p class="error-description">Conflict</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The request could not be completed because of a conflict</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`409`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Conflict`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The request could not be completed because of a conflict`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

252
connection/410.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<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>410 | Gone</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">410</h1>
<p class="error-description">Gone</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The requested page is no longer available</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`410`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Gone`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The requested page is no longer available`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

252
connection/411.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
<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>411 | Length Required</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">411</h1>
<p class="error-description">Length Required</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The "Content-Length" is not defined. The server will not accept the request without it</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`411`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Length Required`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The "Content-Length" is not defined. The server will not accept the request without it`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

252
connection/412.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
<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>412 | Precondition Failed</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">412</h1>
<p class="error-description">Precondition Failed</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The pre condition given in the request evaluated to false by the server</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`412`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Precondition Failed`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The pre condition given in the request evaluated to false by the server`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

252
connection/413.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
<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>413 | Payload Too Large</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">413</h1>
<p class="error-description">Payload Too Large</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server will not accept the request, because the request entity is too large</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`413`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Payload Too Large`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server will not accept the request, because the request entity is too large`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

252
connection/416.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
<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>416 | Requested Range Not Satisfiable</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">416</h1>
<p class="error-description">Requested Range Not Satisfiable</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The requested byte range is not available and is out of bounds</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`416`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Requested Range Not Satisfiable`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The requested byte range is not available and is out of bounds`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

252
connection/418.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
<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>418 | I'm a teapot</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">418</h1>
<p class="error-description">I'm a teapot</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>Attempt to brew coffee with a teapot is not supported</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`418`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `I'm a teapot`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `Attempt to brew coffee with a teapot is not supported`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

252
connection/429.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
<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>429 | Too Many Requests</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">429</h1>
<p class="error-description">Too Many Requests</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>Too many requests in a given amount of time</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`429`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Too Many Requests`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `Too many requests in a given amount of time`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

252
connection/500.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<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>500 | Internal Server Error</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">500</h1>
<p class="error-description">Internal Server Error</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server met an unexpected condition</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`500`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Internal Server Error`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server met an unexpected condition`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

252
connection/502.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
<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>502 | Bad Gateway</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">502</h1>
<p class="error-description">Bad Gateway</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server received an invalid response from the upstream server</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`502`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Bad Gateway`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server received an invalid response from the upstream server`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

252
connection/503.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<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>503 | Service Unavailable</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">503</h1>
<p class="error-description">Service Unavailable</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server is temporarily overloading or down</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`503`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Service Unavailable`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server is temporarily overloading or down`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

252
connection/504.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<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>504 | Gateway Timeout</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">504</h1>
<p class="error-description">Gateway Timeout</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The gateway has timed out</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`504`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `Gateway Timeout`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The gateway has timed out`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

252
connection/505.html Normal file
View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
<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>505 | HTTP Version Not Supported</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
<style>
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
@media (prefers-color-scheme:dark){
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
}
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
header{margin-left:1rem}
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
code{font-family:'Fira Mono',monospace}
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
.arrows svg{fill:var(--color-text-secondary)}
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
.reason p{line-height:125%}
a{text-decoration:none;color:#1967d2}
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
/* */
@media screen and (max-width:820px){
.arrows{display:none}
}
@media screen and (max-width:480px){
.reason>*{max-width:100%}
/* */
}
@media screen and (min-width:768px){
body{margin:8% 10%}
header>*{display:inline-block;margin-left:1%}
}
</style>
</head>
<body>
<header>
<h1 class="error-code">505</h1>
<p class="error-description">HTTP Version Not Supported</p>
</header>
<div class="status">
<div class="card warning" id="client-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
</svg>
</i>
<main data-l10n>Your Client</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<defs>
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
<rect fill="none" height="24" width="24" x="0"/>
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
</symbol>
</defs>
<use href="#arrows-horizontal"/>
</svg>
</div>
<div class="card ok" id="network-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
</svg>
</i>
<main data-l10n>Network</main>
<p class="status-text" data-l10n>Working</p>
</div>
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
<use href="#arrows-horizontal" />
</svg>
</div>
<div class="card warning" id="server-status-card">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
</svg>
</i>
<main data-l10n>Web Server</main>
<p class="status-text" data-l10n>Unknown</p>
</div>
</div>
<div class="reason">
<div class="what-happened">
<h2 data-l10n>What happened?</h2>
<p class="description" data-l10n>The server does not support the "http protocol" version</p>
</div>
<div class="what-can-i-do">
<h2 data-l10n>What can I do?</h2>
<p class="description" data-l10n>Please try again in a few minutes</p>
</div>
</div>
</body>
<footer>
</footer>
<script>
const errorCode = parseInt(`505`, 10);
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
/**
* @param {HTMLElement} $card
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
* @param {string} statusText
*/
const setCardState = function ($card, state, statusText) {
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
$statusText = $card.querySelectorAll('.status-text');
switch (true) {
case state.isOk === true:
$card.classList.remove(errClass, warnClass);
$card.classList.add(okClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isWarning === true:
$card.classList.remove(okClass, errClass);
$card.classList.add(warnClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
case state.isError === true:
$card.classList.remove(okClass, warnClass);
$card.classList.add(errClass);
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
break;
}
};
/**
* @param { {whatHappened?: string, whatToDo?: string} } reasons
*/
const setReasons = function (reasons) {
const descSelector = '.description';
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
} else {
$el.remove();
}
});
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
} else {
$el.remove();
}
});
};
/**
* @param {string} text
*/
const setErrorDescription = function (text) {
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
$el.innerHTML = text;
});
};
const message = `HTTP Version Not Supported`.trim(), cards = {
$client: document.getElementById('client-status-card'),
$network: document.getElementById('network-status-card'),
$server: document.getElementById('server-status-card'),
};
let whatToDo = 'Please try again in a few minutes';
switch (true) {
case errorCode >= 400 && errorCode <= 499:
switch (errorCode) {
case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
case 404: whatToDo = 'Please double-check the URL and try again'; break;
case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
}
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
setCardState(cards.$client, {isError: true}, message)
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isOk: true}, 'Working')
break;
case errorCode >= 500 && errorCode <= 599:
setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
setCardState(cards.$client, {isOk: true}, 'Working')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isError: true}, message)
break;
default:
setErrorDescription(message);
setCardState(cards.$client, {isWarning: true}, 'Unknown')
setCardState(cards.$network, {isOk: true}, 'Working')
setCardState(cards.$server, {isWarning: true}, 'Unknown')
break;
}
setReasons({whatHappened: `The server does not support the "http protocol" version`.trim(), whatToDo: whatToDo.trim()});
} else {
console.warn('Cannot parse the error code:', errorCode);
}
//
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);
}
//
</script>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

71
ghost/400.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>400: Bad Request</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 400</h3>
<p class="description" data-l10n>The server did not understand the request</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

71
ghost/401.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>401: Unauthorized</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 401</h3>
<p class="description" data-l10n>The requested page needs a username and a password</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

71
ghost/403.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>403: Forbidden</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 403</h3>
<p class="description" data-l10n>Access is forbidden to the requested page</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

71
ghost/404.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>404: Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 404</h3>
<p class="description" data-l10n>The server can not find the requested page</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

71
ghost/405.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>405: Method Not Allowed</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 405</h3>
<p class="description" data-l10n>The method specified in the request is not allowed</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

71
ghost/407.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>407: Proxy Authentication Required</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 407</h3>
<p class="description" data-l10n>You must authenticate with a proxy server before this request can be served</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

71
ghost/408.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>408: Request Timeout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 408</h3>
<p class="description" data-l10n>The request took longer than the server was prepared to wait</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

71
ghost/409.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>409: Conflict</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 409</h3>
<p class="description" data-l10n>The request could not be completed because of a conflict</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

71
ghost/410.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>410: Gone</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 410</h3>
<p class="description" data-l10n>The requested page is no longer available</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

71
ghost/411.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>411: Length Required</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 411</h3>
<p class="description" data-l10n>The "Content-Length" is not defined. The server will not accept the request without it</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

71
ghost/412.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>412: Precondition Failed</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 412</h3>
<p class="description" data-l10n>The pre condition given in the request evaluated to false by the server</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

71
ghost/413.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>413: Payload Too Large</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 413</h3>
<p class="description" data-l10n>The server will not accept the request, because the request entity is too large</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

71
ghost/416.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>416: Requested Range Not Satisfiable</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 416</h3>
<p class="description" data-l10n>The requested byte range is not available and is out of bounds</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

71
ghost/418.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>418: I'm a teapot</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 418</h3>
<p class="description" data-l10n>Attempt to brew coffee with a teapot is not supported</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

71
ghost/429.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>429: Too Many Requests</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 429</h3>
<p class="description" data-l10n>Too many requests in a given amount of time</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

71
ghost/500.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>500: Internal Server Error</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 500</h3>
<p class="description" data-l10n>The server met an unexpected condition</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

71
ghost/502.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>502: Bad Gateway</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 502</h3>
<p class="description" data-l10n>The server received an invalid response from the upstream server</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

71
ghost/503.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>503: Service Unavailable</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 503</h3>
<p class="description" data-l10n>The server is temporarily overloading or down</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

71
ghost/504.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>504: Gateway Timeout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 504</h3>
<p class="description" data-l10n>The gateway has timed out</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

71
ghost/505.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>505: HTTP Version Not Supported</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
.container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
.wrap {text-align:center}
.ghost {animation:float 3s ease-out infinite}
@keyframes float { 50% {transform:translate(0,20px)}}
.shadowFrame {width:130px;margin: 10px auto 0 auto}
.shadow {animation:shrink 3s ease-out infinite;transform-origin:center center}
@keyframes shrink {0%{width:90%;margin:0 5%} 50% {width:60%;margin:0 18%} 100% {width:90%;margin:0 5%}}
h3 {font-size:17px;text-transform: uppercase;margin:0.3em auto}
.description {font-size:13px;color:#aaa}
/* */
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
<circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
<circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
<path fill="#1a1a1a" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771 c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005 c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749 c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01 c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034 c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
</svg>
<p class="shadowFrame">
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
<ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
</svg>
</p>
<h3><span data-l10n>Error</span> 505</h3>
<p class="description" data-l10n>The server does not support the "http protocol" version</p>
</div>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

154
hacker-terminal/400.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Bad Request</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">400</span></h1>
<p class="output" data-l10n>The server did not understand the request.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

154
hacker-terminal/401.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Unauthorized</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">401</span></h1>
<p class="output" data-l10n>The requested page needs a username and a password.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

154
hacker-terminal/403.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Forbidden</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">403</span></h1>
<p class="output" data-l10n>Access is forbidden to the requested page.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

154
hacker-terminal/404.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Not Found</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">404</span></h1>
<p class="output" data-l10n>The server can not find the requested page.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

154
hacker-terminal/405.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Method Not Allowed</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">405</span></h1>
<p class="output" data-l10n>The method specified in the request is not allowed.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

154
hacker-terminal/407.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Proxy Authentication Required</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">407</span></h1>
<p class="output" data-l10n>You must authenticate with a proxy server before this request can be served.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

154
hacker-terminal/408.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Request Timeout</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">408</span></h1>
<p class="output" data-l10n>The request took longer than the server was prepared to wait.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

154
hacker-terminal/409.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Conflict</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">409</span></h1>
<p class="output" data-l10n>The request could not be completed because of a conflict.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

154
hacker-terminal/410.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Gone</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">410</span></h1>
<p class="output" data-l10n>The requested page is no longer available.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

154
hacker-terminal/411.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Length Required</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">411</span></h1>
<p class="output" data-l10n>The "Content-Length" is not defined. The server will not accept the request without it.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

154
hacker-terminal/412.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Precondition Failed</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">412</span></h1>
<p class="output" data-l10n>The pre condition given in the request evaluated to false by the server.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

154
hacker-terminal/413.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Payload Too Large</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">413</span></h1>
<p class="output" data-l10n>The server will not accept the request, because the request entity is too large.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

154
hacker-terminal/416.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Requested Range Not Satisfiable</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">416</span></h1>
<p class="output" data-l10n>The requested byte range is not available and is out of bounds.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

154
hacker-terminal/418.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>I'm a teapot</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">418</span></h1>
<p class="output" data-l10n>Attempt to brew coffee with a teapot is not supported.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

154
hacker-terminal/429.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Too Many Requests</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">429</span></h1>
<p class="output" data-l10n>Too many requests in a given amount of time.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

154
hacker-terminal/500.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Internal Server Error</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">500</span></h1>
<p class="output" data-l10n>The server met an unexpected condition.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

154
hacker-terminal/502.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Bad Gateway</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">502</span></h1>
<p class="output" data-l10n>The server received an invalid response from the upstream server.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

154
hacker-terminal/503.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Service Unavailable</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">503</span></h1>
<p class="output" data-l10n>The server is temporarily overloading or down.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

154
hacker-terminal/504.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Gateway Timeout</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">504</span></h1>
<p class="output" data-l10n>The gateway has timed out.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

154
hacker-terminal/505.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>HTTP Version Not Supported</title>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link rel="dns-prefetch" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<style>
/** Idea author: https://codepen.io/robinselmer */
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
background-color: #000000;
background-image: radial-gradient(#11581E, #041607);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Inconsolata', Helvetica, sans-serif;
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 11px rgba(51, 255, 51, 1),
0 0 2px rgba(255, 255, 255, 0.8);
}
.overlay {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%);
background-size: auto 4px;
z-index: 1;
}
.overlay::before {
content: "";
pointer-events: none;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
0deg,
transparent 0%,
rgba(32, 128, 32, 0.2) 2%,
rgba(32, 128, 32, 0.8) 3%,
rgba(32, 128, 32, 0.2) 3%,
transparent 100%);
background-repeat: no-repeat;
animation: scan 7.5s linear 0s infinite;
}
@keyframes scan {
0% { background-position: 0 -100vh; }
35%, 100% { background-position: 0 100vh; }
}
.terminal {
box-sizing: inherit;
position: absolute;
height: 100%;
width: 1000px;
max-width: 100%;
padding: 64px;
text-transform: uppercase;
}
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.output {
color: rgba(128, 255, 128, 0.8);
text-shadow:
0 0 1px rgba(51, 255, 51, 0.4),
0 0 2px rgba(255, 255, 255, 0.8);
}
.output::before {
content: "> ";
}
a {
color: #fff;
text-decoration: none;
}
a::before {
content: "[";
}
a::after {
content: "]";
}
.error_code {
color: white;
}
/* */
</style>
</head>
<body>
<div class="overlay"></div>
<div class="terminal">
<h1><span data-l10n>Error</span> <span class="error_code">505</span></h1>
<p class="output" data-l10n>The server does not support the "http protocol" version.</p>
<p class="output"><span data-l10n>Good luck</span>.</p>
</div>
<script>
//
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);
}
//
</script>
</body>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

Some files were not shown because too many files have changed in this diff Show More