Mirrored_Repos/error-pages
1
0
Fork 0
mirror of https://github.com/tarampampam/error-pages.git synced 2024-08-30 18:22:40 +00:00
Code Issues Packages Projects Releases Wiki Activity
a3389aaafa
error-pages/templates/app-down.html
Paramtamtam 45ca69432b
Translated in 🇺🇦 and 🇷🇺 languages (#80)
2022-03-24 00:31:34 +05:00

243 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!--
Error {{ code }}: {{ message }}
Description: {{ description }}
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow"/>
<title>{{ message }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/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)}
/* {{ if show_details }} */
.details{margin:0 0 16px 0}
.details p{font-size:var(--font-size-small)}
.details ul{line-height:0}
.details ul li{padding-top:calc(var(--font-size-small) * 1.5)}
.details ul li:first-child{padding-top:calc(var(--font-size-small) * .6)}
.details code,.details span,.details ul li::before{font-size:var(--font-size-small);font-weight:400}
.details code{padding-left:7px}
/* {{ end }} */
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>{{ message }}</h2>
<p data-l10n>{{ description }}</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>
{{ if show_details }}
<div class="details">
<p><span data-l10n>Request details</span>:</p>
<ul>
{{- if host }}<li><span><span data-l10n>Host</span>:</span> <code>{{ host }}</code></li>{{ end -}}
{{- if original_uri }}<li><span><span data-l10n>Original URI</span>:</span> <code>{{ original_uri }}</code></li>{{ end -}}
{{- if forwarded_for }}<li><span><span data-l10n>Forwarded for</span>:</span> <code>{{ forwarded_for }}</code></li>{{ end -}}
{{- if namespace }}<li><span><span data-l10n>Namespace</span>:</span> <code>{{ namespace }}</code></li>{{ end -}}
{{- if ingress_name }}<li><span><span data-l10n>Ingress name</span>:</span> <code>{{ ingress_name }}</code></li>{{ end -}}
{{- if service_name }}<li><span><span data-l10n>Service name</span>:</span> <code>{{ service_name }}</code></li>{{ end -}}
{{- if service_port }}<li><span><span data-l10n>Service port</span>:</span> <code>{{ service_port }}</code></li>{{ end -}}
{{- if request_id }}<li><span><span data-l10n>Request ID</span>:</span> <code>{{ request_id }}</code></li>{{ end -}}
<li><span><span data-l10n>Timestamp</span>:</span> <code>{{ now.Unix }}</code></li>
</ul>
</div>
{{ end }}
</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)">{{ code }}</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 = "{{ code }}" === "404" ? 'block' : 'none';
});
Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
$el.style.display = ["401", "403", "404", "418", "505"].includes("{{ code }}") ? '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 {{ code }}: {{ message }}
Description: {{ description }}
-->
</html>
Reference in New Issue View Git Blame Copy Permalink