From 5e902cfb4c0d617f08313c3b7a8f1af96afb2d0a Mon Sep 17 00:00:00 2001
From: Michael Kainz <michael.kainz@open-xchange.com>
Date: Fri, 5 Apr 2024 10:59:22 +0200
Subject: [PATCH] Followup: Improve 404 error message
---
src/404.html | 113 ++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 93 insertions(+), 20 deletions(-)
diff --git a/src/404.html b/src/404.html
index c91fa56..b126645 100644
--- a/src/404.html
+++ b/src/404.html
@@ -18,7 +18,7 @@
align-self: center;
}
- img {
+ svg {
margin: 1rem 0 2rem 0;
max-width: 100%;
}
@@ -44,26 +44,100 @@
<body class="unselectable">
- <div id="box" />
+ <div id="box">
+ <svg width="530px" height="206px" viewBox="0 0 530 206" version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="86.2952346%" y1="44.6641553%" x2="51.575238%" y2="58.171898%" id="linearGradient-1">
+ <stop stop-color="#FFDE97" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="img_404" transform="translate(-25, -40)">
+ <g id="Zeichenfläche-1-Kopie-2404_2-Copy" transform="translate(25, 40)">
+ <g id="Group" transform="translate(152, 94)" fill="#161858" fill-rule="nonzero">
+ <path
+ d="M71.6097098,66.3263982 L59.0746786,66.3263982 L59.0746786,3.71790347 L44.8727529,3.71790347 L0,68.5266952 L0,78.5280539 L44.4060203,78.5280539 L44.4060203,100.797738 L59.0746786,100.797738 L59.0746786,78.5280539 L71.6097098,78.5280539 L71.6097098,66.3263982 L71.6097098,66.3263982 Z M43.6725823,26.5209989 L44.4060117,26.5209989 L44.4060117,66.3930767 L16.5355627,66.3930767 L43.6725737,26.5209989 L43.6725823,26.5209989 Z"
+ id="Shape"></path>
+ <path
+ d="M80.744282,33.6712321 C80.744282,23.5813895 83.54466,15.446961 89.1454247,9.26792064 C94.7461808,3.0901428 102.635726,0 112.814886,0 C122.905141,0 130.772881,3.0901428 136.418089,9.26792064 C142.062465,15.4469524 144.886323,23.5813895 144.886323,33.6712321 L144.886323,67.4091428 C144.886323,77.5002393 142.062456,85.6346764 136.418089,91.8124543 C130.772881,97.991486 122.905141,101.080375 112.814886,101.080375 C102.635726,101.080375 94.7461894,97.991486 89.1454247,91.8124543 C83.5446686,85.6346764 80.744282,77.5002393 80.744282,67.4091428 L80.744282,33.6712321 L80.744282,33.6712321 Z M100.38007,83.1446146 C103.024453,86.9681955 107.169669,88.8787278 112.814877,88.8787278 C118.504538,88.8787278 122.660241,86.9681955 125.283651,83.1446146 C127.905386,79.3222962 129.2171,74.4331643 129.2171,68.4759563 L129.2171,32.6044272 C129.2171,26.6484817 127.894488,21.7593497 125.250105,17.9357689 C122.604881,14.1134505 118.459244,12.2016557 112.814877,12.2016557 C107.169669,12.2016557 103.024453,14.1134419 100.38007,17.9357689 C97.7352666,21.7593497 96.4130753,26.6484817 96.4130753,32.6044272 L96.4130753,68.4759563 C96.4130753,74.4331557 97.7352666,79.3222876 100.38007,83.1446146 L100.38007,83.1446146 Z"
+ id="Shape"></path>
+ <path
+ d="M213.228501,66.3263982 L213.228501,3.71790347 L199.026996,3.71790347 L154.153823,68.5266952 L154.153823,78.5280539 L198.559843,78.5280539 L198.559843,100.797738 L213.228501,100.797738 L213.228501,78.5280539 L225.763532,78.5280539 L225.763532,66.3263982 L213.228501,66.3263982 L213.228501,66.3263982 Z M198.559843,66.3930767 L170.689394,66.3930767 L197.826826,26.5209989 L198.559843,26.5209989 L198.559843,66.3930767 Z"
+ id="Shape"></path>
+ </g>
+ <g id="Group" transform="translate(21.1553, 75.6294)">
+ <g id="Path">
+ <path
+ d="M48.6286776,17.0099456 C50.4968015,11.5970729 52.9496422,6.05018181 57.5555879,2.64807384 C59.7986368,0.991287563 62.6789277,-0.0854023723 65.3846126,0.589507336 C69.7382809,1.67548967 71.8577547,6.67355393 72.287395,11.140002 C72.9872361,18.4154937 70.9484739,25.6685444 68.4890461,32.5514108 C63.1636868,47.4547751 55.7517292,61.6108744 46.536935,74.4777782 C37.3326527,87.3299962 40.4385805,59.6662986 40.7182284,56.6961325 C41.9846739,43.2449071 44.2089405,29.8171187 48.6286776,17.0099456 L48.6286776,17.0099456 Z"
+ fill="#A1D4C9"></path>
+ <path
+ d="M71.1263606,29.214487 C79.7589716,19.9001215 88.1874333,14.1313036 91.9400931,21.6299931 C95.6702175,29.083715 87.8268419,43.1523953 83.6006649,49.3769443 C77.3465812,58.5883119 69.372322,66.4916243 60.4285188,72.4395399 C56.5234963,75.0364642 44.4811339,83.7593626 40.6393375,79.1899595 C39.4557507,77.7822129 39.58149,75.4914395 40.1081422,73.5111284 C41.2655695,69.1590575 43.9577967,65.3614215 46.5831995,61.7022267 C49.3668306,57.8224964 60.4040597,40.7835555 71.1263521,29.2144698 L71.1263606,29.214487 Z"
+ fill="#8BBEB3"></path>
+ <path
+ d="M26.2996747,48.3941574 C22.413864,35.4809291 20.487624,20.5775132 24.852225,7.54072694 C25.5310853,5.5130263 26.4043215,3.48560908 27.908728,1.96602736 C32.3356276,-2.50552213 37.2429664,1.49618591 39.9914891,5.57115961 C50.0962494,20.5525732 51.906824,41.5621158 52.8480527,59.14218 C53.419475,69.8151248 49.5486335,87.4665308 39.4572192,74.8077527 C33.9902153,67.9497577 29.346327,58.5186962 26.2996747,48.3941574 L26.2996747,48.3941574 Z"
+ fill="#72AA9B"></path>
+ <path
+ d="M25.2348365,32.1167636 C24.9565713,31.7924315 24.6762019,31.4699115 24.3937371,31.1492207 C19.8236298,25.9606366 13.5165743,20.8420803 6.17759895,21.2945565 C-4.12067847,21.9295312 1.03188692,36.6869311 3.41197723,42.0877288 C7.89133336,52.2520824 14.9085874,61.2822654 23.6191532,68.170422 C28.6421403,72.1425095 34.2818007,75.3444531 39.649723,78.8134714 C43.6067554,81.3707442 47.5437516,81.3240589 47.141104,76.300651 C46.8050232,72.1087752 45.046596,68.0870395 43.6619086,64.1638445 C42.1746528,59.9500603 40.4631255,55.8402702 38.4362493,51.8540122 C34.8403837,44.7820086 30.4010313,38.1382283 25.234845,32.1167808 L25.2348365,32.1167636 Z"
+ fill="#A1D4C9"></path>
+ </g>
+ <g transform="translate(20.1104, 74.2433)" fill-rule="nonzero">
+ <polygon id="Path" fill="#8AAEF8"
+ points="45.2597443 46.2727959 8.16559503 46.2727959 1.35696477 0.26985739 52.7614224 0.26985739">
+ </polygon>
+ <rect id="Rectangle" fill="#7098E8" x="0" y="0" width="54.1183872" height="8.93110132" rx="2.80706">
+ </rect>
+ </g>
+ </g>
+ <rect id="Rectangle" fill="#D3E0FC" fill-rule="nonzero" x="0" y="195.070351" width="530" height="10"
+ rx="3.34034991"></rect>
+ <path
+ d="M395.468373,52.7760913 C401.592295,60.3475225 412.694562,61.5209668 420.265993,55.3970453 L398.089319,27.9784798 C390.517887,34.1024013 389.34446,45.2046686 395.468373,52.7760913 L395.468373,52.7760913 Z"
+ id="Path" fill="#7098E8" fill-rule="nonzero"></path>
+ <polygon id="Path" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.4"
+ points="21.1553425 196.145589 374.345785 195.174577 435.497855 73.8882367 382.962465 9.27608822 21.1553425 171">
+ </polygon>
+ <polygon id="Path" fill="#BFD3FB" fill-rule="nonzero"
+ points="458.979407 190.45841 449.789063 185.793627 494.488627 97.7296931 436.555402 14.5737593 445.011054 8.68280904 506.468451 96.8968728">
+ </polygon>
+ <path
+ d="M448.636136,9.30079638 C444.798677,4.47160984 437.772964,3.66764574 432.943777,7.50511367 L446.840462,24.9931556 C451.669649,21.1556963 452.473604,14.1299829 448.636145,9.30079638 L448.636136,9.30079638 Z"
+ id="Path" fill="#7098E8" fill-rule="nonzero"></path>
+ <path
+ d="M421.850656,182.99373 L493.675251,182.99373 C497.430178,182.99373 500.478711,186.042255 500.478711,189.79719 L500.478711,194.913419 L415.047205,194.913419 L415.047205,189.79719 C415.047205,186.042263 418.095729,182.99373 421.850665,182.99373 L421.850656,182.99373 Z"
+ id="Path" fill="#7098E8" fill-rule="nonzero"></path>
+ <circle id="Oval" fill="#8AAEF8" fill-rule="nonzero" cx="497.756648" cy="98.0060689" r="10.1181063">
+ </circle>
+ <path
+ d="M441.589339,15.4725539 C427.111098,-2.42790899 400.862945,-5.20216182 382.962465,9.27608822 L435.392856,74.0994369 C453.293328,59.6211869 456.067589,33.3730254 441.58933,15.4725539 L441.589339,15.4725539 Z"
+ id="Path" fill="#8AAEF8" fill-rule="nonzero"></path>
+ </g>
+ </g>
+ </g>
+ </svg>
+ <h1 id="whoops"></h1>
+ <div id="details" />
+ </div>
<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."
+ 'The page you are looking for could not be found.': {
+ de: 'Die Seite, nach der Sie suchen, konnte nicht gefunden werden.',
+ es: 'La página que buscas no se pudo encontrar.',
+ it: 'La pagina che stai cercando non è stata trovata.',
+ fr: "La page que vous recherchez n'a pas pu être trouvée.",
+ ja: 'ãŠæŽ¢ã—ã®ãƒšãƒ¼ã‚¸ã¯è¦‹ã¤ã‹ã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚',
+ nl: 'De pagina die u zoekt kon niet worden gevonden.'
},
- 'Error 404': {
- "de": "Fehler 404",
- "es": "Error 404",
- "it": "Errore 404",
- "fr": "Erreur 404",
- "ja": "エラー404",
- "nl": "Fout 404"
+ 'Whoops...': {
+ de: 'Hoppla...',
+ es: 'Ups...',
+ it: 'Ops...',
+ fr: 'Oups...',
+ ja: 'ãŠã£ã¨...',
+ nl: 'Oeps..'
}
}
@@ -80,9 +154,8 @@
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>`
+ document.querySelector('#whoops').innerHTML = staticGt('Whoops...')
+ document.querySelector('#details').innerHTML = staticGt('The page you are looking for could not be found.')
}
updateMessages()
@@ -91,4 +164,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
--
GitLab