<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
height: 100%;
display: grid;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#box {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
}
img {
margin: 1rem 0 2rem 0;
max-width: 100%;
}
h1 {
font-weight: 500;
font-size: 1.5rem;
line-height: 2rem;
margin: 0 0 0.5rem 0;
}
@media screen and (min-width: 540px) {
#box {
padding: 48px;
border: 1px solid #ddd;
border-radius: 16px;
margin: auto;
box-shadow: 0 24px 80px 0 rgba(0, 0, 0, 0.10);
}
}
</style>
</head>
<body class="unselectable">
<div id="box" />
<script type="module">
(async () => {
const messages = {
'The requested page does not exist.': {
"de": "Die angeforderte Seite existiert nicht.",
"es": "La página solicitada no existe.",
"it": "La pagina richiesta non esiste.",
"fr": "La page demandée n'existe pas.",
"ja": "要求されたページは存在しません.",
"nl": "De gevraagde pagina bestaat niet."
},
'Error 404': {
"de": "Fehler 404",
"es": "Error 404",
"it": "Errore 404",
"fr": "Erreur 404",
"ja": "エラー404",
"nl": "Fout 404"
}
}
let language
const staticGt = (str) => {
if (!messages[str]) return str;
return messages[str][language] || str;
}
function getLanguage() {
const match = location.hash.match(/language=(\w+)/) || document.cookie.match(/locale=(\w+)/)
return (match?.[1] || document.documentElement.lang || navigator.language || navigator.userLanguage).substr(0, 2)
}
function updateMessages() {
language = getLanguage()
document.querySelector('#box').innerHTML = '<img src="./themes/default/illustrations/error-generic.svg"></img>' +
`<h1>${staticGt('Error 404')}</h1>` +
`<div>${staticGt('The requested page does not exist.')}</div>`
}
updateMessages()
document.documentElement.addEventListener('languageChange', updateMessages);
})()
</script>
</body>
</html>