157 lines
4.2 KiB
HTML
157 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>新住戶註冊 - 基本資料</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
<style>
|
||
body {
|
||
background-color: #f7f8fa;
|
||
font-family: 'Noto Sans TC', sans-serif;
|
||
}
|
||
|
||
header {
|
||
background-color: #9eaf9f;
|
||
color: #fff;
|
||
padding: 16px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.back-button {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.back-button img {
|
||
width: 24px;
|
||
height: 24px;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
.register-container {
|
||
background-color: #fff;
|
||
margin: 20px;
|
||
padding: 30px 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.step-indicator {
|
||
font-size: 14px;
|
||
color: #888;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.form-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-register {
|
||
background-color: #4caf50;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px;
|
||
width: 100%;
|
||
border-radius: 24px;
|
||
font-size: 16px;
|
||
margin-top: 16px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.btn-register:hover {
|
||
background-color: #388e3c;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="back-button">
|
||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" />
|
||
</div>
|
||
新住戶註冊
|
||
</header>
|
||
|
||
<div class="register-container">
|
||
<div class="step-indicator">
|
||
步驟 <strong>3</strong> 之 <strong>3</strong>
|
||
</div>
|
||
|
||
<h4 class="text-center mb-3">填寫基本資料</h4>
|
||
<p class="text-center text-muted mb-4">請輸入您的基本資訊以完成註冊</p>
|
||
|
||
<form id="registerForm">
|
||
<div class="mb-3">
|
||
<label for="fullName" class="form-label">姓名</label>
|
||
<input type="text" class="form-control" id="fullName" placeholder="請輸入姓名" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="gender" class="form-label">性別</label>
|
||
<select class="form-select" id="gender" required>
|
||
<option selected disabled value="">請選擇性別</option>
|
||
<option>男</option>
|
||
<option>女</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="birthday" class="form-label">生日</label>
|
||
<input type="date" class="form-control" id="birthday" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="phone" class="form-label">手機號碼</label>
|
||
<input type="tel" class="form-control" id="phone" placeholder="例如：0912345678" required>
|
||
</div>
|
||
|
||
|
||
<div class="mb-3">
|
||
<label for="room" class="form-label">房號 / 室別</label>
|
||
<input type="text" class="form-control" id="room" placeholder="例如：A棟 5F-2" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="carPlate" class="form-label">車牌號碼</label>
|
||
<input type="text" class="form-control" id="carPlate" placeholder="例如：ABC-1234">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="password" class="form-label">密碼</label>
|
||
<input type="password" class="form-control" id="password" placeholder="請設定密碼" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="confirmPassword" class="form-label">確認密碼</label>
|
||
<input type="password" class="form-control" id="confirmPassword" placeholder="請再次輸入密碼" required>
|
||
</div>
|
||
|
||
<button type="submit" onclick="location.href='resgiter_4.html'" class="btn-register">完成註冊</button>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById("registerForm").addEventListener("submit", function(event) {
|
||
event.preventDefault();
|
||
const password = document.getElementById("password").value;
|
||
const confirmPassword = document.getElementById("confirmPassword").value;
|
||
|
||
if (password !== confirmPassword) {
|
||
alert("❌ 密碼與確認密碼不一致！");
|
||
return;
|
||
}
|
||
|
||
alert("✅ 註冊完成！歡迎加入社區！");
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |