修改404页面

404undefined · Mar 12, 2022 · 6f269e2 · 6f269e2
1 parent 1242d3f
commit 6f269e2
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 2 deletions.
diff --git a/public/404.css b/public/404.css
@@ -0,0 +1,160 @@
+body,
+html {
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	color: #fff;
+}
+button {
+	outline: none;
+	border: 1px #fff solid;
+	background: none;
+	color: #fff;
+	padding: 1rem;
+	margin: 5px 10px;
+	font-size: 1.1rem;
+	font-weight: bold;
+	cursor: pointer;
+}
+body::before {
+	content: '';
+	display: block;
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: -1;
+	filter: contrast(0.6) brightness(0.6);
+	background: #999 url(assets/images/ElementSqare.Half.Size.webp) center
+		center no-repeat fixed;
+	background-size: cover;
+	transition: all 0.3s ease-in-out;
+}
+div.main {
+	min-width: 320px;
+	height: 90%;
+	width: 80%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	border-top: 1.5px #fff solid;
+	border-bottom: 1.5px #fff solid;
+	animation: stretch 1.5s ease;
+}
+@keyframes stretch {
+	0% {
+		opacity: 0;
+		height: 10px;
+		overflow: hidden;
+	}
+	50% {
+		opacity: 1;
+		height: 10px;
+		overflow: hidden;
+	}
+}
+audio {
+	width: 300px !important;
+	height: 100px !important;
+}
+div.btnsContainer {
+	text-align: center;
+}
+div.popupOverlay {
+	display: none;
+}
+div.popupOverlay.show {
+	display: block;
+	background: rgba(255, 255, 255, 0.4);
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 3;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	animation: fadeIn 0.5s ease;
+}
+div.popupOverlay.show::after {
+	content: '点击区域外任意处关闭';
+	display: block;
+	padding: 20px;
+}
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+div.popupContent {
+	background: #fff;
+	padding: 0 50px;
+	color: #000;
+	min-width: 320px;
+	height: 80%;
+	width: 80%;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	animation: slideDown 0.5s ease;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+div.popupContent > img {
+	width: 100%;
+	height: auto;
+}
+div.popupContent > a.title {
+	margin: 50px 0;
+	border-bottom: dotted 1px #999;
+	transition: all 0.2s ease-in-out;
+	text-decoration: none;
+	color: inherit;
+}
+div.popupContent > .title:hover {
+	border-bottom-color: transparent;
+}
+@keyframes slideDown {
+	from {
+		transform: translateY(-10%);
+		opacity: 0.3;
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+div#changelogContainer > a.item::before {
+	content: attr(data-sha);
+	margin-right: 50px;
+}
+div#changelogContainer > a.item {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	cursor: pointer;
+	color: #000;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 576px) {
+	div.btnsContainer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+	div.btnsContainer > br {
+		display: none;
+	}
+}
diff --git a/src/404.html → public/404.html b/src/404.html → public/404.html
@@ -3,15 +3,15 @@
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<link rel="stylesheet" href="./style.redirect.css">
+	<link rel="stylesheet" href="./404.css">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
 	<title>Error 404</title>
 </head>
 
 <body>
 	<div class="main">
 		<h1>Error 404</h1>
-		<div>找不到指定的页面，点击<a href="../index.html" style="color: #FFF;">此处</a>回到主页</div>
+		<div>找不到指定的页面，点击<a href="/index.html" style="color: #FFF;">此处</a>回到主页</div>
 	</div>
 </body>