重定向页面

MFn233 · Jun 16, 2024 · 072b84a · 072b84a
1 parent 24eb612
commit 072b84a
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 0 deletions.
diff --git a/redirect/index.css b/redirect/index.css
@@ -0,0 +1,106 @@
+:root {
+    color-scheme: light;
+}
+
+body {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    display: flex;
+    background-color: #CADEF5;
+    margin-inline: auto;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+a {
+    color: #3091ff;
+}
+
+.title {
+    font-size: 2rem;
+    font-weight: bolder;
+    /*margin: 1rem;
+    margin-top: 0.5rem;*/
+    margin: auto;
+    color: rgba(17, 110, 204, 1);
+}
+
+.sub {
+    margin: auto;
+    font-size: 1.2rem;
+    font-weight: 500;
+    /*margin: 1rem;*/
+}
+
+.msg {
+    margin: auto;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.footer {
+    margin: auto;
+    font-size: medium;
+    color: gray;
+}
+
+.footer_container {
+    margin-top: 100px !important;
+}
+
+.container {
+    display: block;
+    margin: auto;
+    margin-top: 10vh !important;
+    background-color: white;
+    -webkit-box-shadow: 0px 0px 3px 1px rgba(194, 194, 194, 0.75);
+    -moz-box-shadow: 0px 0px 3px 1px rgba(194, 194, 194, 0.75);
+    box-shadow: 0px 0px 3px 1px rgba(194, 194, 194, 0.75);
+    border-radius: 8px;
+    padding: 10px;
+    transition: all .4s;
+    height: 400px;
+    width: 650px;
+}
+
+.container:hover {
+    -webkit-box-shadow: 0px 0px 3px 1px rgba(17, 110, 204, 0.75);
+    -moz-box-shadow: 0px 0px 3px 1px rgba(17, 110, 204, 0.75);
+    box-shadow: 0px 0px 3px 1px rgba(17, 110, 204, 0.75);
+}
+
+.stackpanel {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    margin: 3rem;
+}
+
+@keyframes fade-in {
+    from {
+        transform: translateY(200%);
+        opacity: 0;
+        visibility: hidden;
+    }
+    to {
+        transform: translateY(0%);
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+@keyframes background-in {
+    from {
+        background-color: rgb(255, 255, 255);
+    }
+    to {
+        background-color: rgb(202, 222, 245);
+    }
+}
diff --git a/redirect/index.html b/redirect/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>重定向页…</title>
+    <link rel="stylesheet" href="./index.css">
+    <script src="./index.js"></script>
+</head>
+
+<body style="animation: background-in .5s;" onload="redirect();">
+    <div class="container" style="animation: fade-in .5s;">
+        <div class="stackpanel">
+            <p class="title">感谢你使用Simple Mainpage!</p>
+        </div>
+        <div class="stackpanel">
+            <p class="sub">正在将你重定向至作者个人网站。若未自动重定向，请<a href="https://mfn233.github.io">点击此处</a></p>
+        </div>
+        <div class="stackpanel">
+            <p id="msg" class="msg">将在 5 秒后跳转</p>
+        </div>
+        <div class="stackpanel footer_container">
+            <p class="footer">©Copyright MFn 2023</p>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/redirect/index.js b/redirect/index.js
@@ -0,0 +1,14 @@
+function redirect() {
+    var div = document.getElementById("msg");
+    var time = 4;
+    var timer = setInterval(function() {
+        if(time === 0) {
+            div.innerHTML = "请等一下…";
+            location.href = "https://mfn233.github.io/";
+            clearInterval(timer);
+        } else {
+            div.innerHTML = "将在 " + time + " 秒后跳转";
+            time--;
+        }
+    },1000);
+}