mirror of
https://github.com/tarampampam/error-pages.git
synced 2024-08-30 18:22:40 +00:00
deploy: 2d418ecffa
This commit is contained in:
tarampampam
parent
daee1a9f3e
commit
a49d608377
235
connection/400.html
Normal file
235
connection/400.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>400 | Bad Request</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">400</h1>
|
||||
<p class="error-description">Bad Request</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`400`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Bad Request`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server did not understand the request`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/401.html
Normal file
235
connection/401.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>401 | Unauthorized</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">401</h1>
|
||||
<p class="error-description">Unauthorized</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`401`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Unauthorized`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The requested page needs a username and a password`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/403.html
Normal file
235
connection/403.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>403 | Forbidden</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">403</h1>
|
||||
<p class="error-description">Forbidden</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`403`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Forbidden`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `Access is forbidden to the requested page`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/404.html
Normal file
235
connection/404.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>404 | Not Found</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">404</h1>
|
||||
<p class="error-description">Not Found</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`404`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Not Found`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server can not find the requested page`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/405.html
Normal file
235
connection/405.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>405 | Method Not Allowed</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">405</h1>
|
||||
<p class="error-description">Method Not Allowed</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`405`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Method Not Allowed`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The method specified in the request is not allowed`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/407.html
Normal file
235
connection/407.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>407 | Proxy Authentication Required</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">407</h1>
|
||||
<p class="error-description">Proxy Authentication Required</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`407`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Proxy Authentication Required`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `You must authenticate with a proxy server before this request can be served`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/408.html
Normal file
235
connection/408.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>408 | Request Timeout</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">408</h1>
|
||||
<p class="error-description">Request Timeout</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`408`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Request Timeout`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The request took longer than the server was prepared to wait`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/409.html
Normal file
235
connection/409.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>409 | Conflict</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">409</h1>
|
||||
<p class="error-description">Conflict</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`409`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Conflict`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The request could not be completed because of a conflict`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/410.html
Normal file
235
connection/410.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>410 | Gone</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">410</h1>
|
||||
<p class="error-description">Gone</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`410`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Gone`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The requested page is no longer available`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/411.html
Normal file
235
connection/411.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>411 | Length Required</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">411</h1>
|
||||
<p class="error-description">Length Required</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`411`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Length Required`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The "Content-Length" is not defined. The server will not accept the request without it`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/412.html
Normal file
235
connection/412.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>412 | Precondition Failed</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">412</h1>
|
||||
<p class="error-description">Precondition Failed</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`412`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Precondition Failed`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The pre condition given in the request evaluated to false by the server`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/413.html
Normal file
235
connection/413.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>413 | Payload Too Large</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">413</h1>
|
||||
<p class="error-description">Payload Too Large</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`413`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Payload Too Large`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server will not accept the request, because the request entity is too large`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/416.html
Normal file
235
connection/416.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>416 | Requested Range Not Satisfiable</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">416</h1>
|
||||
<p class="error-description">Requested Range Not Satisfiable</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`416`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Requested Range Not Satisfiable`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The requested byte range is not available and is out of bounds`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/418.html
Normal file
235
connection/418.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>418 | I'm a teapot</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">418</h1>
|
||||
<p class="error-description">I'm a teapot</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`418`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `I'm a teapot`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `Attempt to brew coffee with a teapot is not supported`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/429.html
Normal file
235
connection/429.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>429 | Too Many Requests</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">429</h1>
|
||||
<p class="error-description">Too Many Requests</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`429`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Too Many Requests`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `Too many requests in a given amount of time`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/500.html
Normal file
235
connection/500.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>500 | Internal Server Error</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">500</h1>
|
||||
<p class="error-description">Internal Server Error</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`500`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Internal Server Error`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server met an unexpected condition`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/502.html
Normal file
235
connection/502.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>502 | Bad Gateway</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">502</h1>
|
||||
<p class="error-description">Bad Gateway</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`502`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Bad Gateway`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server received an invalid response from the upstream server`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/503.html
Normal file
235
connection/503.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>503 | Service Unavailable</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">503</h1>
|
||||
<p class="error-description">Service Unavailable</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`503`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Service Unavailable`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server is temporarily overloading or down`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/504.html
Normal file
235
connection/504.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>504 | Gateway Timeout</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">504</h1>
|
||||
<p class="error-description">Gateway Timeout</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reason">
|
||||
<div class="what-happened">
|
||||
<h2>What happened?</h2>
|
||||
<p class="description">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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`504`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `Gateway Timeout`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The gateway has timed out`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
235
connection/505.html
Normal file
235
connection/505.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<title>505 | HTTP Version Not Supported</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
/** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
|
||||
:root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
|
||||
}
|
||||
body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
|
||||
header{margin-left:1rem}
|
||||
header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
|
||||
header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
|
||||
code{font-family:'Fira Mono',monospace}
|
||||
.status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
|
||||
.card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
|
||||
.arrows svg{fill:var(--color-text-secondary)}
|
||||
.icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
|
||||
.card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
|
||||
.card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
|
||||
.card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
|
||||
.card main{font-size:calc(var(--font-size-secondary) + .1rem)}
|
||||
.card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
|
||||
.reason p{line-height:125%}
|
||||
a{text-decoration:none;color:#1967d2}
|
||||
.reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
|
||||
.reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
|
||||
.reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
|
||||
footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
|
||||
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%}
|
||||
header>*{display:inline-block;margin-left:1%}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="error-code">505</h1>
|
||||
<p class="error-description">HTTP Version Not Supported</p>
|
||||
</header>
|
||||
<div class="status">
|
||||
<div class="card warning" id="client-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Your Client</main>
|
||||
<p class="status-text">Unknown</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<defs>
|
||||
<symbol id="arrows-horizontal" viewBox="0 0 24 24">
|
||||
<rect fill="none" height="24" width="24" x="0"/>
|
||||
<polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
|
||||
<polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use href="#arrows-horizontal"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card ok" id="network-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Network</main>
|
||||
<p class="status-text">Working</p>
|
||||
</div>
|
||||
|
||||
<div class="arrows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
|
||||
<use href="#arrows-horizontal" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="card warning" id="server-status-card">
|
||||
<i class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<main>Web Server</main>
|
||||
<p class="status-text">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>
|
||||
</div>
|
||||
<div class="what-can-i-do">
|
||||
<h2>What can I do?</h2>
|
||||
<p class="description">Please try again in a few minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<script>
|
||||
const errorCode = parseInt(`505`, 10);
|
||||
|
||||
if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
|
||||
/**
|
||||
* @param {HTMLElement} $card
|
||||
* @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
|
||||
* @param {string} statusText
|
||||
*/
|
||||
const setCardState = function ($card, state, statusText) {
|
||||
const okClass = 'ok', warnClass = 'warning', errClass = 'error',
|
||||
$statusText = $card.querySelectorAll('.status-text');
|
||||
|
||||
switch (true) {
|
||||
case state.isOk === true:
|
||||
$card.classList.remove(errClass, warnClass);
|
||||
$card.classList.add(okClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isWarning === true:
|
||||
$card.classList.remove(okClass, errClass);
|
||||
$card.classList.add(warnClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
|
||||
case state.isError === true:
|
||||
$card.classList.remove(okClass, warnClass);
|
||||
$card.classList.add(errClass);
|
||||
$statusText.forEach(($statusText) => $statusText.innerText = statusText);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param { {whatHappened?: string, whatToDo?: string} } reasons
|
||||
*/
|
||||
const setReasons = function (reasons) {
|
||||
const descSelector = '.description';
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
|
||||
if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatHappened);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
|
||||
if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
|
||||
Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc) => $desc.innerText = reasons.whatToDo);
|
||||
} else {
|
||||
$el.remove();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
*/
|
||||
const setErrorDescription = function (text) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
|
||||
$el.innerText = text;
|
||||
});
|
||||
};
|
||||
|
||||
const message = `HTTP Version Not Supported`.trim(), cards = {
|
||||
$client: document.getElementById('client-status-card'),
|
||||
$network: document.getElementById('network-status-card'),
|
||||
$server: document.getElementById('server-status-card'),
|
||||
};
|
||||
|
||||
let whatToDo = 'Please try again in a few minutes';
|
||||
|
||||
switch (true) {
|
||||
case errorCode >= 400 && errorCode <= 499:
|
||||
switch (errorCode) {
|
||||
case 400: case 405: case 411: case 413: whatToDo = '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 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
|
||||
}
|
||||
|
||||
setErrorDescription(`${message} (client-side error)`);
|
||||
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)`);
|
||||
setCardState(cards.$client, {isOk: true}, 'Working')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isError: true}, message)
|
||||
break;
|
||||
|
||||
default:
|
||||
setErrorDescription(message);
|
||||
setCardState(cards.$client, {isWarning: true}, 'Unknown')
|
||||
setCardState(cards.$network, {isOk: true}, 'Working')
|
||||
setCardState(cards.$server, {isWarning: true}, 'Unknown')
|
||||
break;
|
||||
}
|
||||
|
||||
setReasons({whatHappened: `The server does not support the "http protocol" version`.trim(), whatToDo: whatToDo.trim()});
|
||||
} else {
|
||||
console.warn('Cannot parse the error code:', errorCode);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
23
index.html
23
index.html
@ -66,6 +66,29 @@
|
||||
<li><a href="cats/504.html"><strong>504</strong>: Gateway Timeout</a></li>
|
||||
<li><a href="cats/505.html"><strong>505</strong>: HTTP Version Not Supported</a></li>
|
||||
</ul>
|
||||
<h2 class="mb-3">Template name: <Code>connection</Code></h2>
|
||||
<ul class="mb-5">
|
||||
<li><a href="connection/400.html"><strong>400</strong>: Bad Request</a></li>
|
||||
<li><a href="connection/401.html"><strong>401</strong>: Unauthorized</a></li>
|
||||
<li><a href="connection/403.html"><strong>403</strong>: Forbidden</a></li>
|
||||
<li><a href="connection/404.html"><strong>404</strong>: Not Found</a></li>
|
||||
<li><a href="connection/405.html"><strong>405</strong>: Method Not Allowed</a></li>
|
||||
<li><a href="connection/407.html"><strong>407</strong>: Proxy Authentication Required</a></li>
|
||||
<li><a href="connection/408.html"><strong>408</strong>: Request Timeout</a></li>
|
||||
<li><a href="connection/409.html"><strong>409</strong>: Conflict</a></li>
|
||||
<li><a href="connection/410.html"><strong>410</strong>: Gone</a></li>
|
||||
<li><a href="connection/411.html"><strong>411</strong>: Length Required</a></li>
|
||||
<li><a href="connection/412.html"><strong>412</strong>: Precondition Failed</a></li>
|
||||
<li><a href="connection/413.html"><strong>413</strong>: Payload Too Large</a></li>
|
||||
<li><a href="connection/416.html"><strong>416</strong>: Requested Range Not Satisfiable</a></li>
|
||||
<li><a href="connection/418.html"><strong>418</strong>: I'm a teapot</a></li>
|
||||
<li><a href="connection/429.html"><strong>429</strong>: Too Many Requests</a></li>
|
||||
<li><a href="connection/500.html"><strong>500</strong>: Internal Server Error</a></li>
|
||||
<li><a href="connection/502.html"><strong>502</strong>: Bad Gateway</a></li>
|
||||
<li><a href="connection/503.html"><strong>503</strong>: Service Unavailable</a></li>
|
||||
<li><a href="connection/504.html"><strong>504</strong>: Gateway Timeout</a></li>
|
||||
<li><a href="connection/505.html"><strong>505</strong>: HTTP Version Not Supported</a></li>
|
||||
</ul>
|
||||
<h2 class="mb-3">Template name: <Code>ghost</Code></h2>
|
||||
<ul class="mb-5">
|
||||
<li><a href="ghost/400.html"><strong>400</strong>: Bad Request</a></li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user