mirror of
https://github.com/tarampampam/error-pages.git
synced 2024-08-30 18:22:40 +00:00
deploy: dc51e3192c
This commit is contained in:
tarampampam
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server did not understand the request</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The requested page needs a username and a password</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">Access is forbidden to the requested page</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server can not find the requested page</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The method specified in the request is not allowed</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">You must authenticate with a proxy server before this request can be served</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The request took longer than the server was prepared to wait</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The request could not be completed because of a conflict</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The requested page is no longer available</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The "Content-Length" is not defined. The server will not accept the request without it</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The pre condition given in the request evaluated to false by the server</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server will not accept the request, because the request entity is too large</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The requested byte range is not available and is out of bounds</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">Attempt to brew coffee with a teapot is not supported</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">Too many requests in a given amount of time</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server met an unexpected condition</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server received an invalid response from the upstream server</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server is temporarily overloading or down</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The gateway has timed out</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
@ -34,16 +34,13 @@
|
||||
.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}
|
||||
footer .details{margin-top:20px}
|
||||
footer .details ul{padding:0}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
|
||||
footer .details span{padding-right:7px}
|
||||
/* */
|
||||
@media screen and (max-width:820px){
|
||||
.arrows{display:none}
|
||||
}
|
||||
@media screen and (max-width:480px){
|
||||
.reason>*{max-width:100%}
|
||||
footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
|
||||
/* */
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
body{margin:8% 10%}
|
||||
@ -64,8 +61,8 @@
|
||||
<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>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Your Client</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -88,8 +85,8 @@
|
||||
<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>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
<main data-l10n>Network</main>
|
||||
<p class="status-text" data-l10n>Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
@ -105,18 +102,18 @@
|
||||
<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>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
<main data-l10n>Web Server</main>
|
||||
<p class="status-text" data-l10n>Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">The server does not support the "http protocol" version</p>
|
||||
<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>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
<h2 data-l10n>What can I do?</h2>
|
||||
<p class="description" data-l10n>Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -185,7 +182,7 @@
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
$el.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
@ -200,20 +197,20 @@
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = 'Change the request method, payload or URL'; break;
|
||||
case 401: case 403: case 407: whatToDo = 'Check your authorization data'; break;
|
||||
case 404: whatToDo = 'Double-check the URL and try again'; break;
|
||||
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(`${message} (client-side error)`);
|
||||
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(`${message} (server-side error)`);
|
||||
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)
|
||||
@ -231,5 +228,14 @@
|
||||
} 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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user