diff --git a/src/404.html b/src/404.html index c91fa565f988c32cd5a4b1903734133702069021..b1266455b0f1318a1ea417c448c75dfd4d2a66fc 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>