mirror of
https://github.com/tarampampam/error-pages.git
synced 2024-08-30 18:22:40 +00:00
187 lines
8.6 KiB
HTML
187 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Error 404: Not Found
|
|
Description: The server can not find the requested page
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex, nofollow"/>
|
|
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
|
|
<link rel="dns-prefetch" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=Nunito&display=swap" rel="stylesheet">
|
|
<title>Not Found</title>
|
|
<style>
|
|
:root {
|
|
--color-bg-primary: #fff;
|
|
--color-text-primary: #22292f;
|
|
--color-text-secondary: #606f7b;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg-primary: #212121;
|
|
--color-text-primary: #fafafa;
|
|
--color-text-secondary: #9db6cb;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
line-height: 1.15;
|
|
text-size-adjust: 100%;
|
|
box-sizing: border-box;
|
|
font-family: Nunito, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
border-style: none;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
main .left, main .right {
|
|
width: 100%;
|
|
}
|
|
|
|
main .left .container {
|
|
max-width: 30rem;
|
|
margin: 2rem;
|
|
}
|
|
|
|
main .left .container .code {
|
|
color: var(--color-text-primary);
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
main .left .container .space {
|
|
width: 4rem;
|
|
height: .25rem;
|
|
background-color: #a779e9;
|
|
margin-top: .75rem;
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
main .left .container .description {
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
main .right {
|
|
height: 100%;
|
|
}
|
|
|
|
main .right .container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
/* */
|
|
/* https://github.com/LaravelCollective/errors/blob/8a0cf6fb73ba0041330967d3d6a137bd4509f7bd/src/publish/svg/404.svg */
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1024 1024'%3E%3Cdefs%3E%3ClinearGradient id='A' x1='50.31%25' x2='50%25' y1='74.74%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ffe98a'/%3E%3Cstop offset='67.7%25' stop-color='%23b63e59'/%3E%3Cstop offset='100%25' stop-color='%2368126f'/%3E%3C/linearGradient%3E%3Ccircle id='B' cx='603' cy='682' r='93'/%3E%3Cfilter id='C' width='203.2%25' height='203.2%25' x='-51.6%25' y='-51.6%25'%3E%3CfeOffset in='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='32'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3ClinearGradient id='D' x1='49.48%25' x2='49.87%25' y1='11.66%25' y2='77.75%25'%3E%3Cstop offset='0%25' stop-color='%23f7eab9'/%3E%3Cstop offset='100%25' stop-color='%23e5765e'/%3E%3C/linearGradient%3E%3ClinearGradient id='E' x1='91.59%25' x2='66.97%25' y1='5.89%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a22a50'/%3E%3Cstop offset='100%25' stop-color='%23ee7566'/%3E%3C/linearGradient%3E%3ClinearGradient id='F' x1='49.48%25' x2='49.61%25' y1='11.66%25' y2='98.34%25'%3E%3Cstop offset='0%25' stop-color='%23f7eab9'/%3E%3Cstop offset='100%25' stop-color='%23e5765e'/%3E%3C/linearGradient%3E%3ClinearGradient id='G' x1='78.5%25' x2='36.4%25' y1='106.76%25' y2='26.41%25'%3E%3Cstop offset='0%25' stop-color='%23a22a50'/%3E%3Cstop offset='100%25' stop-color='%23ee7566'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%23A)' d='M0 0h1024v1024H0z'/%3E%3Cuse fill='%23000' filter='url(%23C)' xlink:href='%23B'/%3E%3Cuse fill='%23fff6cb' xlink:href='%23B'/%3E%3Cg fill='%23fff' opacity='.3'%3E%3Ccircle cx='217' cy='278' r='3' fill-opacity='.4'/%3E%3Ccircle cx='96' cy='257' r='2'/%3E%3Ccircle cx='36' cy='287' r='2' opacity='.4'/%3E%3Ccircle cx='127' cy='88' r='3'/%3E%3Ccircle cx='216' cy='25' r='2'/%3E%3Ccircle cx='16' cy='137' r='2'/%3E%3Ccircle cx='166' cy='167' r='2'/%3E%3Ccircle cx='376' cy='247' r='2'/%3E%3Ccircle cx='467' cy='88' r='3' opacity='.4'/%3E%3Ccircle cx='527' cy='278' r='3'/%3E%3Ccircle cx='607' cy='138' r='3'/%3E%3Ccircle cx='817' cy='28' r='3' opacity='.4'/%3E%3Ccircle cx='516' cy='157' r='2'/%3E%3Ccircle cx='846' cy='227' r='2'/%3E%3Ccircle cx='766' cy='137' r='2'/%3E%3Ccircle cx='947' cy='278' r='3' opacity='.4'/%3E%3Ccircle cx='717' cy='248' r='3'/%3E%3Ccircle cx='917' cy='78' r='3'/%3E%3Ccircle cx='996' cy='167' r='2'/%3E%3Ccircle cx='646' cy='37' r='2'/%3E%3C/g%3E%3Cg transform='translate(0 550)'%3E%3Cpath fill='%238e2c15' d='M259 5.47c0 5.33 3.33 9.5 10 12.5s9.67 9.16 9 18.5h1c.67-6.31 1-11.8 1-16.47 8.67 0 13.33-1.33 14-4 .67 4.98 1.67 8.3 3 9.97 1.33 1.66 2 5.16 2 10.5h1c0-5.65.33-9.64 1-11.97 1-3.5 4-10.03-1-14.53S295 7 290 3s-10-3-13 2-5 7-9 7-5-3.53-5-5.53 2-5-1.5-5-7.5 0-7.5 2c0 1.33 1.67 2 5 2z'/%3E%3Cg fill='url(%23D)'%3E%3Cpath d='M1024 390H0V105.08C77.3 71.4 155.26 35 297.4 35c250 0 250.76 125.25 500 125 84.03-.08 160.02-18.2 226.6-40.93V390z'/%3E%3Cpath d='M1024 442H0V271.82c137.51-15.4 203.1-50.49 356.67-60.1C555.24 199.3 606.71 86.59 856.74 86.59c72.78 0 124.44 10.62 167.26 25.68V442z'/%3E%3C/g%3E%3Cg fill='url(%23E)'%3E%3Cpath d='M1024 112.21V412H856.91c99.31-86.5 112.63-140.75 39.97-162.78C710.24 192.64 795.12 86.58 856.9 86.58c72.7 0 124.3 10.6 167.09 25.63z'/%3E%3Cpath d='M1024 285.32V412H857c99.31-86.6 112.63-140.94 39.97-163L1024 285.32z'/%3E%3C/g%3E%3Cpath fill='url(%23F)' d='M0 474V223.93C67.12 190.69 129.55 155 263 155c250 0 331.46 162.6 530 175 107.42 6.71 163-26.77 231-58.92V474H0z'/%3E%3Cpath fill='url(%23E)' d='M353.02 474H0V223.93C67.12 190.69 129.55 155 263 155c71.14 0 151.5 12.76 151.5 70.5 0 54.5-45.5 79.72-112.5 109-82.26 35.95-54.57 111.68 51.02 139.5z'/%3E%3Cpath fill='url(%23G)' d='M353.02 474H0v-14.8l302-124.7c-82.26 35.95-54.57 111.68 51.02 139.5z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cg opacity='.2'%3E%3Ccircle cx='538' cy='633' r='110'/%3E%3Ccircle cx='708' cy='601' r='60'/%3E%3Ccircle cx='358' cy='743' r='70'/%3E%3C/g%3E%3Cg fill-rule='nonzero' opacity='.08'%3E%3Cpath d='M145 396.22c5.536-5.491 14.464-5.491 20 0s14.464 5.491 20 0l20-19.86c16.603-16.484 43.397-16.484 60 0l15 14.9c8.304 8.237 21.696 8.237 30 0s21.696-8.237 30 0l.9.9A47.69 47.69 0 0 1 355 426H135v-5.76a33.84 33.84 0 0 1 10-24.02zm559.1-66.11l5.9-5.86c11.07-11 28.93-11 40 0l10 9.94c5.534 5.497 14.466 5.497 20 0s14.466-5.497 20 0a16.36 16.36 0 0 0 21.3 1.5l8.7-6.47c11.867-8.844 28.133-8.844 40 0l4.06 3.03A39.6 39.6 0 0 1 890 364H690a47.77 47.77 0 0 1 14.1-33.89z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
/* */
|
|
}
|
|
|
|
/* */
|
|
|
|
@media (min-width: 768px) {
|
|
main {
|
|
flex-direction: row;
|
|
}
|
|
|
|
main .left, main .right {
|
|
width: 50%;
|
|
}
|
|
|
|
main .left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
main .left .container .code {
|
|
font-size: 9rem;
|
|
}
|
|
|
|
main .left .container .space {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
main .left .container .description {
|
|
font-size: 1.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
main .right {
|
|
display: flex;
|
|
padding-bottom: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
main .right .container {
|
|
background-position: left;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
main .right .container {
|
|
background-position: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="left">
|
|
<div class="container">
|
|
<div class="code">404</div>
|
|
<div class="space"></div>
|
|
<p class="description" data-l10n>The server can not find the requested page</p>
|
|
<!-- -->
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="container"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
//
|
|
if (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
|
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
|
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
|
s.async = s.defer = true;
|
|
s.addEventListener('load', () => p.removeChild(s));
|
|
p.appendChild(s);
|
|
})(document.createElement('script'), document.body);
|
|
}
|
|
//
|
|
</script>
|
|
</body>
|
|
<!--
|
|
Error 404: Not Found
|
|
Description: The server can not find the requested page
|
|
-->
|
|
</html>
|