新增注册（页面跳转）及登录（弹窗）功能

2025-05-13 17:14:19 +09:00
parent 7c63f2f07b
commit 68cb20c2d5
5 changed files with 409 additions and 22 deletions
--- a/register.html
+++ b/register.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>ユーザー登録</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+    
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+    
+        h2 {
+            position: absolute;
+            top: 30px;
+            left: 40px;
+            margin: 0;
+            font-size: 26px;
+            color: #2c3e50;
+        }
+    
+        form {
+            background-color: white;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 420px;
+        }
+    
+        label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 600;
+            color: #34495e;
+        }
+    
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            width: 100%;
+            padding: 12px 14px;
+            margin-bottom: 20px;
+            border: 1px solid #ccd6dd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border-color 0.2s;
+        }
+    
+        input:focus {
+            border-color: #3498db;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+        }
+    
+        button {
+            width: 100%;
+            padding: 12px;
+            background-color: #3498db;
+            color: white;
+            font-size: 16px;
+            font-weight: 600;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.1s;
+        }
+    
+        button:hover {
+            background-color: #2980b9;
+        }
+    
+        button:active {
+            transform: scale(0.98);
+        }
+    </style>
+    
+</head>
+<body>
+    <h2>ユーザー登録</h2>
+    <form id="registerForm">
+        <label for="registerUsername">ユーザー名:</label>
+        <input type="text" id="registerUsername"><br>
+
+        <label for="registerEmail">メールアドレス:</label>
+        <input type="email" id="registerEmail" required><br>
+
+        <label for="registerPassword">パスワード:</label>
+        <input type="password" id="registerPassword" required><br>
+
+        <label for="registerConfirmPassword">パスワード再入力:</label>
+        <input type="password" id="registerConfirmPassword" required><br>
+
+        <button type="button" id="submitRegister">登録</button>
+        
+    </form>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="js/register.js"></script>
+</body>
+</html>