编写登录页面和主页面

2026-01-07 15:50:03 +08:00
parent 3a1a5375a2
commit cbff78a0cd
5 changed files with 670 additions and 0 deletions
--- a/web/src/pages/login.html
+++ b/web/src/pages/login.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Page</title>
+  <link rel="stylesheet" href="../css/login.css">
+</head>
+<body>
+  <div class="svg-top">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1337" width="1337">
+      <defs>
+        <path id="path-1" opacity="1" fill-rule="evenodd" d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"/>
+        <linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
+          <stop offset="0" stop-color="rgb(88,62,213)" stop-opacity="1"/>
+          <stop offset="1" stop-color="rgb(23,215,250)" stop-opacity="1"/>
+        </linearGradient>
+      </defs>
+      <g opacity="1">
+        <use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1"/>
+      </g>
+    </svg>
+  </div>
+
+  <div class="svg-bottom">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="896" width="967.8852157128662">
+      <defs>
+        <path id="path-2" opacity="1" fill-rule="evenodd" d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"/>
+        <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
+          <stop offset="0" stop-color="rgb(40,175,240)" stop-opacity="1"/>
+          <stop offset="1" stop-color="rgb(18,15,196)" stop-opacity="1"/>
+        </linearGradient>
+      </defs>
+      <g opacity="1">
+        <use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1"/>
+      </g>
+    </svg>
+  </div>
+
+  <section class="container">
+    <section class="wrapper">
+      <header>
+        <div class="logo">
+          <img src="../assets/logo/logo.png" alt="Logo">
+        </div>
+        <h1>欢迎回来！</h1>
+        <p>用户登录</p>
+      </header>
+      <section class="main-content">
+        <form id="loginForm" onsubmit="handleLogin(event)">
+          <input type="text" placeholder="用户名" id="username">
+          <div class="line"></div>
+          <input type="password" placeholder="密码" id="password">
+          <button type="submit">登录</button>
+        </form>
+      </section>
+      <footer>
+        <p><a href="" title="忘记密码">忘记密码？</a></p>
+        <p><a href="" title="注册">注册</a></p>
+      </footer>
+    </section>
+  </section>
+
+  <script>
+    function handleLogin(event) {
+      event.preventDefault(); // 阻止表单默认提交
+
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+
+      // 验证用户名是否为admin
+      if (username === 'admin') {
+        // 登录成功，跳转到main.html
+        window.location.href = 'main.html';
+      } else {
+        // 登录失败，显示错误信息
+        alert('用户名必须是admin！');
+      }
+    }
+  </script>
+</body>
+</html>