【登陆注册】彻底完成

戒酒的李白
Commit d7da8b909b612c16d90cbe8999e837dbd0b48454 d7da8b90 1 parent cfe1fdc8
Showing 3 changed files with 125 additions and 78 deletions
static/原神启动/二维码 (1).png → static/原神启动/二维码.png
static/原神启动/微博logo.png
views/user/templates/login_and_register.html
--- a/static/原神启动/二维码 (1).png → static/原神启动/二维码.png
View file @d7da8b9
+++ b/static/原神启动/二维码 (1).png → static/原神启动/二维码.png
View file @d7da8b9
--- a/static/原神启动/微博logo.png 0 → 100644
View file @d7da8b9
+++ b/static/原神启动/微博logo.png 0 → 100644
View file @d7da8b9
--- a/views/user/templates/login_and_register.html
View file @d7da8b9
+++ b/views/user/templates/login_and_register.html
View file @d7da8b9
 <!DOCTYPE html>
 <html lang="zh">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>微博舆情分析系统 | 登录</title>
-    <link rel="icon" href="../../../static/原神启动/favicon.ico">
-</head>
+    <link rel="icon" href="../../../static/原神启动/favicon.ico" />
+  </head>
-<style>
+  <style>
     * {
       margin: 0;
       padding: 0;
@@ -20,7 +19,6 @@
       width: 100%;
       height: 100%;
       overflow: hidden;
-
     }
     a {
@@ -36,7 +34,6 @@
       display: block;
     }
-
     #video-background {
       position: fixed;
       top: 0;
@@ -74,12 +71,8 @@
       margin: auto;
       top: 20%;
       border-radius: 0.1cm;
-
-
     }
-
-
     .login_box {
       position: absolute;
       width: 100%;
@@ -88,7 +81,6 @@
       box-shadow: inset 0px 0px 3px black;
       padding: 15px;
       box-sizing: border-box;
-
     }
     .title {
@@ -100,15 +92,12 @@
       padding: 15px;
       left: 50%;
       transform: translateX(-50%);
-
     }
     .QRcode img {
-        height: 90px;
-        width: 90px;
-
+      height: 70px;
+      width: 70px;
       object-fit: unset;
-
       /* 添加过渡效果 */
       cursor: pointer;
     }
@@ -116,17 +105,13 @@
     .QRcode {
       height: 90px;
       width: 90px;
-
     }
-    .QRcode:hover>img {
+    .QRcode:hover > img {
       line-height: normal;
-
       /* transform-origin: unset; */
-
     }
-
     .logo {
       position: absolute;
       width: 150px;
@@ -134,6 +119,7 @@
       left: 50%;
       transform: translateX(-50%);
       margin-top: 15px;
+      transition: opacity 0.5s ease; /* 添加过渡效果 */
     }
     .logo img {
@@ -145,7 +131,6 @@
       position: absolute;
       width: 612px;
       height: 150px;
-
       top: 80px;
       left: 50%;
       transform: translateX(-50%);
@@ -156,26 +141,21 @@
       width: 522px;
       margin-top: 25px;
       margin-left: 40px;
-
       border: none;
-
-
     }
     .content input {
       height: 60px;
       width: 522px;
-
       text-indent: 1em;
       font-size: 18px;
-        letter-spacing: .2em;
+      letter-spacing: 0.2em;
       font-weight: 700;
       outline: none;
       border: none;
       box-shadow: inset 0px 0px 2px rgb(207, 206, 206);
       box-shadow: 0px 0px 4px rgb(207, 206, 206);
       border-radius: 0.1cm;
-
     }
     .content input::placeholder {
@@ -194,14 +174,13 @@
     .register-text a {
       font-weight: 700;
       font-size: 18px;
-        letter-spacing: .1em;
+      letter-spacing: 0.1em;
     }
     .a1 {
       color: #949292;
     }
-
     .a2 {
       color: #d6c194;
     }
@@ -233,7 +212,6 @@
       position: absolute;
       width: 522px;
       height: 60px;
-
       left: 50%;
       transform: translateX(-50%);
       cursor: pointer;
@@ -243,7 +221,7 @@
       background-color: rgb(54, 54, 61);
       color: rgb(215, 210, 180);
       font-weight: 700;
-        border-radius: .1cm;
+      border-radius: 0.1cm;
       box-shadow: 0px 0px 3px 1px #969595;
     }
@@ -273,7 +251,6 @@
       padding-left: 80px;
       font-size: 18px;
       letter-spacing: 0.1em;
-
       font-weight: 700;
     }
@@ -310,33 +287,52 @@
     .yanzhengma:hover {
       color: #aa863e;
     }
-</style>
-
-<body onclick="playAudio()">
+  </style>
+  <body onclick="playAudio()">
     <audio id="audio-player" autoplay class="hide-player">
-        <source src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
-            type="audio/mp3">
+      <source
+        src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
+        type="audio/mp3"
+      />
     </audio>
     <div id="video-background">
-        <video src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4" autoplay="autoplay" muted="muted" loop="loop"></video>
+      <video
+        src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4"
+        autoplay="autoplay"
+        muted="muted"
+        loop="loop"
+      ></video>
     </div>
-    <div id="black-hid">
-    </div>
+    <div id="black-hid"></div>
     <form id="login" class="login show" method="POST" action="/user/login">
       <div class="login_box">
         <div class="title">
-                <!-- <a class="QRcode" href=""><img src="login_resources/二维码 (1).png" alt=""></a> -->
-                <a class="logo" href=""><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""></a>
-                <a class="exit" href=""><img src="../../../static/原神启动/关闭 (1).png" alt=""></a>
+          <a class="QRcode" href=""
+            ><img src="../../../static/原神启动/二维码.png" alt="二维码"
+          /></a>
+          <a class="logo" href=""
+            ><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""
+          /></a>
+          <a class="exit" href=""
+            ><img src="../../../static/原神启动/关闭 (1).png" alt=""
+          /></a>
         </div>
       </div>
       <div class="content">
-            <div class="input"><input type="text" name="username" placeholder="输入账号/原神"></div>
-            <div class="input"><input type="password" name="password" placeholder="输入密码/始める！"></div>
+        <div class="input">
+          <input type="text" name="username" placeholder="输入账号/原神" />
+        </div>
+        <div class="input">
+          <input
+            type="password"
+            name="password"
+            placeholder="输入密码/始める！"
+          />
+        </div>
       </div>
       <div class="register-text">
         <span>
@@ -354,71 +350,122 @@
       </div>
     </form>
-
     <form id="register" class="register" method="POST" action="/user/register">
       <div class="login_box">
         <div class="title">
-                <a class="logo" href=""><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""></a>
-                <a class="exit" href=""><img src="../../../static/原神启动//关闭 (1).png" alt=""></a>
+          <a class="logo" href=""
+            ><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""
+          /></a>
+          <a class="exit" href=""
+            ><img src="../../../static/原神启动//关闭 (1).png" alt=""
+          /></a>
         </div>
       </div>
       <div class="content">
         <div class="input">
           <span
-                    style="display: inline-block;width: 60px;height: 60px;font-size: 21px;font-weight: 800;color: black;line-height: 60px;text-align: center; ">
-                    +86</span>
-                <input style="width: 452px;float: right;" type="text" name="username" placeholder="输入要注册的账号">
-                <a class="yanzhengma" href=""
-                    style="position: absolute; top: 43px;right: 60px;color: #d6c194;font-weight: 700;letter-spacing: 0.1em;">我是假按钮</a>
+            style="
+              display: inline-block;
+              width: 60px;
+              height: 60px;
+              font-size: 21px;
+              font-weight: 800;
+              color: black;
+              line-height: 60px;
+              text-align: center;
+            "
+          >
+            +86</span
+          >
+          <input
+            style="width: 452px; float: right"
+            type="text"
+            name="username"
+            placeholder="输入要注册的账号"
+          />
+          <a
+            class="yanzhengma"
+            href=""
+            style="
+              position: absolute;
+              top: 43px;
+              right: 60px;
+              color: #d6c194;
+              font-weight: 700;
+              letter-spacing: 0.1em;
+            "
+            >我是假按钮</a
+          >
+        </div>
+        <div class="input">
+          <input type="text" name="password" placeholder="设定密码" />
         </div>
-            <div class="input"><input type="text" name="password" placeholder="设定密码"></div>
       </div>
       <div class="xieyi">
-            <input type="checkbox">
+        <input type="checkbox" />
         <span>已同意《用户协议》和《隐私权益》</span>
       </div>
       <div class="register-text">
         <span>
           <a href="" class="a2" id="login_btn">返回登录页面</a>
         </span>
-
       </div>
-        <div class="start" style="top: 370px;">
+      <div class="start" style="top: 370px">
         <button>注册并登录</button>
       </div>
-
     </form>
-
     <script>
       //点击网页后，播放音乐
       function playAudio() {
-            var audioPlayer = document.getElementById('audio-player');
+        var audioPlayer = document.getElementById("audio-player");
         audioPlayer.play();
-        };
+      }
       // 获取表单和链接的引用
-        const loginForm = document.getElementById('login');
-        const registerForm = document.getElementById('register');
-        const registerLink = document.getElementById('register_btn');
-        const loginLink = document.getElementById('login_btn');
+      const loginForm = document.getElementById("login");
+      const registerForm = document.getElementById("register");
+      const registerLink = document.getElementById("register_btn");
+      const loginLink = document.getElementById("login_btn");
       // 点击"立即注册"链接时切换表单显示状态
-        registerLink.addEventListener('click', function (event) {
+      registerLink.addEventListener("click", function (event) {
         event.preventDefault(); // 阻止链接默认行为
-            loginForm.classList.remove('show');
-            registerForm.classList.add('show');
+        loginForm.classList.remove("show");
+        registerForm.classList.add("show");
       });
       // 点击"返回登录界面"链接时切换表单显示状态
-        loginLink.addEventListener('click', function (event) {
+      loginLink.addEventListener("click", function (event) {
         event.preventDefault(); // 阻止链接默认行为
-            registerForm.classList.remove('show');
-            loginForm.classList.add('show');
+        registerForm.classList.remove("show");
+        loginForm.classList.add("show");
       });
-
+      // 在页面加载3秒后更改图片链接和文本内容
+      setTimeout(function () {
+        // 更改二维码图片链接
+        const qrCode = document.querySelector(".QRcode img");
+        qrCode.style.transition = "opacity 1s ease"; // 添加过渡效果
+        qrCode.style.opacity = 0; // 渐隐
+
+        // 等待过渡效果完成后隐藏图片
+        setTimeout(function () {
+          qrCode.style.display = "none"; // 隐藏二维码图片
+        }, 1000); // 1秒等于1000毫秒
+
+        // 更改logo为文本并添加样式
+        const logo = document.querySelector(".logo");
+        logo.style.transition = "opacity 1s ease"; // 添加过渡效果
+        logo.style.opacity = 0; // 渐隐
+
+        // 等待过渡效果完成后更改内容并渐显
+        setTimeout(function () {
+          logo.innerHTML =
+            '<div style="width:500px;height:50px;margin-left:-200px;display:flex;align-items:center;"><img style="width:150px;height:75px;margin-bottom:20px" src="../../../static/原神启动/微博logo.png" alt=""/><div style="font-size: 35px; font-weight: bold; color: black;">微博舆情分析系统</div></div>';
+          logo.style.opacity = 1; // 渐显
+        }, 1000); // 1秒等于1000毫秒
+      }, 3000); // 3000 毫秒 等于 3 秒
     </script>
-</body>
-
+  </body>
 </html>