feat: add login

2024-10-20 02:25:09 +08:00
parent 9ce91c593c
commit e4fe97f5e5
13 changed files with 764 additions and 9 deletions
--- a/apps/login/login.html
+++ b/apps/login/login.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Page</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background: linear-gradient(135deg, #4facfe, #00f2fe);
+      font-family: Arial, sans-serif;
+    }
+
+    .login-container {
+      background: #ffffff;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+      max-width: 400px;
+      width: 100%;
+    }
+
+    .login-container h2 {
+      text-align: center;
+      margin-bottom: 1.5rem;
+      color: #333;
+    }
+
+    .form-group {
+      margin-bottom: 1rem;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: bold;
+    }
+
+    .form-group input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+
+    .form-group input:focus {
+      outline: none;
+      border-color: #4facfe;
+    }
+
+    .login-button {
+      width: 100%;
+      padding: 0.75rem;
+      background: #4facfe;
+      color: #fff;
+      font-size: 1rem;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+
+    .login-button:hover {
+      background: #358fd4;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="login-container">
+    <h2>Login</h2>
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" required>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" required>
+      </div>
+      <button type="submit" class="login-button">Login</button>
+    </form>
+  </div>
+
+  <script type="module">
+    import { query } from 'https://kevisual.xiongxiao.me/system/lib/query.js';
+    document.getElementById('loginForm').addEventListener('submit', function (event) {
+      event.preventDefault(); // 阻止表单默认提交行为
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+
+      console.log('Username:', username);
+      console.log('Password:', password);
+
+      // 在这里可以进一步处理登录逻辑，比如发送请求到服务器
+    });
+  </script>
+</body>
+
+</html>