From f51f6ff5154504800d2aa9158f24fe6f134e56b1 Mon Sep 17 00:00:00 2001
From: ptkbf2lr5 <18759452262@163.com>
Date: Wed, 9 Oct 2024 21:29:18 +0800
Subject: [PATCH] Update sign_up.html

---
 sign_up.html | 143 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 88 insertions(+), 55 deletions(-)
diff --git a/sign_up.html b/sign_up.html
index 63aac7f..2c22bb7 100644
--- a/sign_up.html
+++ b/sign_up.html
@@ -1,56 +1,89 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>signup</title>
-    <style>
-        .background-container {
-            width: 100%; 
-            height: 1000px;
-            position: relative;
-            background: linear-gradient(90deg, #E7642A 0%, #E1BCE9 50%, #152DA9 100%);
-        }
-        .login-button {
-            cursor: pointer; /* 将鼠标指针设置为点击状态 */
-        }
-        .sign-up-link {
-            cursor: pointer;
-            color: black;
-            font-size: 20px;
-            font-family: Inter;
-            font-weight: 500;
-            text-decoration: none; /* 去掉超链接的下划线 */
-        }
-    </style>
-    <script>
-        function redirectToLogin() {
-            window.location.href = 'log_in.html'; // 点击后跳转到log_in.html
-        }
-    </script>
-</head>
-<body>
-    <div class="background-container">
-        <div style="width: 710px; height: 446px; left: 25%; top: 177px; position: absolute; background: rgba(217, 217, 217, 0.10); box-shadow: -38.53333282470703px 38.53333282470703px 38.53333282470703px rgba(255, 255, 255, 0.10) inset; border: 1px rgba(249, 249, 249, 0.51) solid; backdrop-filter: blur(77.07px)"></div>
-        <div style="width: 171px; height: 36px; left: 32%; top: 435px; position: absolute">
-          <label for="confirm_password">确认密码:</label>
-          <input type="password" id="confirm_password" name="confirm_password" required>
-        </div>
-        <div style="width: 65px; height: 38px; left: 35%; top: 201px; position: absolute; color: #001AFF; font-size: 32px; font-family: Inter; font-weight: 700; word-wrap: break-word" >注册</div>
-        <div style="width: 282px; height: 56px; left: 30%; top: 503px; position: absolute" class="login-button" onclick="redirectToLogin()">
-            <div style="width: 282px; height: 56px; left: 0px; top: 0px; position: absolute; background: linear-gradient(180deg, #152DA9 0%, #E7642A 100%); border-radius: 71px"></div>
-            <div style="left: 43%; top: 16px; position: absolute; color: #FAFAF9; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word">注册</div>
-        </div>
-        <div style="width: 151px; height: 33px; left: 35%; top: 575px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word" class="sign-up-link" onclick="redirectToLogin()">已有帐号？登录</div>
-        <div style="width: 173px; height: 35px; left: 32%; top: 364px; position: absolute">
-          <label for="password">密码:</label>
-          <input type="password" id="password" name="password">
-        </div>
-        <div style="width: 173px; height: 35px; left: 32%; top: 294px; position: absolute">
-          <label for="username">用户名:</label>
-          <input type="text" id="username" name="username">
-        </div>
-        <img style="width: 499px; height: 594px; left: 50%; top: 119px; position: absolute; border-radius: 40px" src="E:\softwareengineer\work2\frontend\assets\d2.png" />
-    </div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>signup</title>
+    <style>
+        .background-container {
+            width: 100%; 
+            height: 1000px;
+            position: relative;
+            background: linear-gradient(90deg, #E7642A 0%, #E1BCE9 50%, #152DA9 100%);
+        }
+        .login-button {
+            cursor: pointer; /* 将鼠标指针设置为点击状态 */
+        }
+        .sign-up-link {
+            cursor: pointer;
+            color: black;
+            font-size: 20px;
+            font-family: Inter;
+            font-weight: 500;
+            text-decoration: none; /* 去掉超链接的下划线 */
+        }
+    </style>
+    <script>
+        function redirectToLogin() {
+            window.location.href = 'log_in.html'; // 点击后跳转到log_in.html
+        }
+    </script>
+</head>
+<body>
+    <div class="background-container">
+        <div style="width: 710px; height: 446px; left: 25%; top: 177px; position: absolute; background: rgba(217, 217, 217, 0.10); box-shadow: -38.53333282470703px 38.53333282470703px 38.53333282470703px rgba(255, 255, 255, 0.10) inset; border: 1px rgba(249, 249, 249, 0.51) solid; backdrop-filter: blur(77.07px)"></div>
+        <div style="width: 65px; height: 38px; left: 35%; top: 201px; position: absolute; color: #001AFF; font-size: 32px; font-family: Inter; font-weight: 700; word-wrap: break-word" >注册</div>
+        <div style="width: 151px; height: 33px; left: 35%; top: 575px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word" class="sign-up-link" onclick="redirectToLogin()">已有帐号？登录</div>
+        <form id="sign-form">
+            <div style="width: 173px; height: 35px; left: 32%; top: 364px; position: absolute">
+                <label for="password">密码:</label>
+                <input type="password" id="password" name="password" required><br><br>
+              </div>
+              <div style="width: 173px; height: 35px; left: 32%; top: 294px; position: absolute">
+                <label for="username">用户名:</label>
+                <input type="text" id="username" name="username" required><br><br>
+              </div>
+              <div style="width: 171px; height: 36px; left: 32%; top: 435px; position: absolute">
+                  <label for="confirm_password">确认密码:</label>
+                  <input type="password" id="confirm_password" name="confirm_password" required><br><br>
+              </div>
+              <button type="submit" style="width: 282px; height: 56px; left: 30%; top: 503px; border-radius: 71px; position: absolute" class="login-button" onclick="redirectToLogin()">
+                <div style="width: 282px; height: 56px; left: 0px; top: 0px; position: absolute; background: linear-gradient(180deg, #152DA9 0%, #E7642A 100%); border-radius: 71px"></div>
+                <div style="left: 43%; top: 16px; position: absolute; color: #FAFAF9; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word">注册</div>
+              </button>
+        </form>
+        <img style="width: 499px; height: 594px; left: 50%; top: 119px; position: absolute; border-radius: 40px" src="E:\softwareengineer\work2\frontend\assets\d2.png" />
+    </div>
+    <script>
+        document.getElementById('sign-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // 阻止表单默认提交行为
+
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const password2 =document.getElementById('confirm_password').value;
+            const signdata = {
+                username:username,
+                password:password,
+                password2:confirm_password
+            };
+
+            fetch('/sign', {
+                method: 'POST', // 或者 'PUT', 'PATCH' 等
+                headers: {
+                    'Content-Type': 'application/json' // 发送JSON数据
+                },
+                body: JSON.stringify(signdata) // 将JavaScript对象转换为JSON字符串
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                alert('Sign Up successfully!');
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('Error submitting data');
+            });
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file
