bigsk/www
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed 404 and 403 Pages

Browse Source
This commit is contained in:
Bigsk 2023-02-02 00:24:06 +08:00
parent 1c2814711c
commit a5d3880a6a
4 changed files with 191 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
403.html
View File

@ -7,7 +7,7 @@
<title>403</title> <title>403</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://cdn.ghink.net/image/avatar/Bigsk.jpg" type="image/jpeg"> <link rel="icon" href="https://cdn.ghink.net/image/avatar/Bigsk.jpg" type="image/jpeg">
<link type="text/css" rel="stylesheet" href="../static/site/404/css/errors.css" /> <link type="text/css" rel="stylesheet" href="./static/css/errors.css" />
</head> </head>
<body> <body>
@ -22,7 +22,7 @@
<script type="text/javascript" <script type="text/javascript"
src="https://cdn.ghink.net/js/tsparticles/1.18.11/tsparticles.min.js"></script> src="https://cdn.ghink.net/js/tsparticles/1.18.11/tsparticles.min.js"></script>
<script type="text/javascript" src="../static/site/404/js/errors.js"></script> <script type="text/javascript" src="./static/js/errors.js"></script>
</body> </body>
</html> </html>

4
404.html
View File

@ -7,7 +7,7 @@
<title>404</title> <title>404</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://cdn.ghink.net/image/avatar/Bigsk.jpg" type="image/jpeg"> <link rel="icon" href="https://cdn.ghink.net/image/avatar/Bigsk.jpg" type="image/jpeg">
<link type="text/css" rel="stylesheet" href="../static/site/404/css/errors.css" /> <link type="text/css" rel="stylesheet" href="./static/css/errors.css" />
</head> </head>
<body> <body>
@ -22,7 +22,7 @@
<script type="text/javascript" <script type="text/javascript"
src="https://cdn.ghink.net/js/tsparticles/1.18.11/tsparticles.min.js"></script> src="https://cdn.ghink.net/js/tsparticles/1.18.11/tsparticles.min.js"></script>
<script type="text/javascript" src="../static/site/404/js/errors.js"></script> <script type="text/javascript" src="./static/js/errors.js"></script>
</body> </body>
</html> </html>

131
static/css/errors.css Normal file
View File

@ -0,0 +1,131 @@
html,
body {
height: 100%;
overflow: hidden;
}
.error-page {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.error-page h1 {
font-size: 30vh;
font-weight: bold;
position: relative;
margin: -8vh 0 0;
padding: 0;
}
.error-page h1:after {
content: attr(data-h1);
position: absolute;
top: 0;
left: 0;
right: 0;
color: transparent;
/* webkit only for graceful degradation to IE */
background: -webkit-repeating-linear-gradient(
-45deg,
#71b7e6,
#69a6ce,
#b98acc,
#ee8176,
#b98acc,
#69a6ce,
#9b59b6
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
text-shadow: 1px 1px 2px transparentize(#fff, 0.75);
animation: animateTextBackground 10s ease-in-out infinite;
}
.error-page h1 + p {
color: #d6d6d6;
font-size: 8vh;
font-weight: bold;
line-height: 10vh;
max-width: 600px;
position: relative;
}
.error-page h1 + p:after {
content: attr(data-p);
position: absolute;
top: 0;
left: 0;
right: 0;
color: transparent;
text-shadow: 1px 1px 2px transparentize(#fff, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
#tsparticles {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@keyframes animateTextBackground {
0% {
background-position: 0 0;
}
25% {
background-position: 100% 0;
}
50% {
background-position: 100% 100%;
}
75% {
background-position: 0 100%;
}
100% {
background-position: 0 0;
}
}
@media (max-width: 767px) {
.error-page h1 {
font-size: 32vw;
}
.error-page h1 + p {
font-size: 8vw;
line-height: 10vw;
max-width: 70vw;
}
}
a.back {
position: fixed;
right: 40px;
bottom: 40px;
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176);
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 24px;
padding: 15px 30px;
text-decoration: none;
transition: 0.25s all ease-in-out;
}
a.back:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

56
static/js/errors.js Normal file
View File

@ -0,0 +1,56 @@
tsParticles.load("tsparticles", {
fpsLimit: 60,
particles: {
number: {
value: 5,
density: {
enable: true,
area: 800
}
},
color: {
value: "#fcfcfc"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: {
enable: true,
minimumValue: 0.1
},
},
size: {
value: 140,
random: {
enable: true,
minimumValue: 40
},
animation: {
enable: true,
speed: 10,
minimumValue: 40,
sync: false
}
},
move: {
enable: true,
speed: 8,
direction: "none",
random: false,
straight: false,
outModes: {
default: "out"
}
}
},
interactivity: {
detectsOn: "canvas",
events: {
resize: true
}
},
detectRetina: true
});