0429_登入註冊與其他微調
This commit is contained in:
parent
5ddee4a664
commit
5ec12c4dcd
@ -71,6 +71,16 @@
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#report"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="#bills"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="personal.html"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
async function startBiometric() {
|
||||
const status = document.getElementById('statusMessage');
|
||||
|
||||
96
forgot_password.html
Normal file
96
forgot_password.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!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);
|
||||
}
|
||||
.verify-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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success { color: green; }
|
||||
.fail { color: red; }
|
||||
</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="verify-container">
|
||||
|
||||
|
||||
<h4 class="text-center mb-3">請輸入您的電子郵件</h4>
|
||||
<p class="text-center text-muted mb-4">我們將會寄送重設密碼的連結至您的信箱</p>
|
||||
|
||||
<form onsubmit="submitEmail(event)" class="text-center">
|
||||
<div class="mb-3">
|
||||
<input type="email" id="emailInput" class="form-control form-control-lg" placeholder="example@email.com" required />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100">發送重設連結</button>
|
||||
</form>
|
||||
|
||||
<div id="statusMessage" class="status-message text-center"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function submitEmail(event) {
|
||||
event.preventDefault();
|
||||
const email = document.getElementById("emailInput").value.trim();
|
||||
const status = document.getElementById("statusMessage");
|
||||
|
||||
if (!email.includes("@")) {
|
||||
status.innerHTML = '<span class="fail">❌ 請輸入有效的電子郵件地址</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 模擬寄送成功
|
||||
status.innerHTML = '<span class="success">📨 重設密碼的連結已寄出，請至信箱查收！</span>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
127
login.html
Normal file
127
login.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登入畫面</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f0f2f5;
|
||||
font-family: sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: #fff;
|
||||
padding: 40px 20px 20px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
width: 320px;
|
||||
position: relative;
|
||||
transform: scale(1.2); /* 放大 20% */
|
||||
transform-origin: center; /* 設定縮放中心 */
|
||||
}
|
||||
|
||||
.login-container h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.login-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #357abd;
|
||||
}
|
||||
|
||||
.link-buttons {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.link-buttons a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px 5px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.link-buttons a:hover {
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="login-container">
|
||||
<h1>社區通</h1> <!-- 新增標題 -->
|
||||
|
||||
<img src="https://i.postimg.cc/vcZgwKv3/image.png" alt="登入圖示">
|
||||
|
||||
<form id="loginForm" onsubmit="return handleLogin(event)">
|
||||
<input type="text" id="username" placeholder="帳號" required>
|
||||
<input type="password" id="password" placeholder="密碼" required>
|
||||
<button type="submit">登入</button>
|
||||
</form>
|
||||
|
||||
<div class="link-buttons">
|
||||
<a href="resgiter.html">新住戶</a>
|
||||
<a href="forgot_password.html">忘記密碼</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById('username').value.trim();
|
||||
|
||||
if (username === 'admin') {
|
||||
window.location.href = 'main.html';
|
||||
} else {
|
||||
window.location.href = 'resgiter_4.html';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -160,6 +160,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- sos -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="emergency-alert.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
|
||||
@ -195,7 +195,7 @@
|
||||
我的社區
|
||||
<div class="header-icons">
|
||||
<img src="https://img.icons8.com/ios-filled/50/appointment-reminders.png" alt="通知" title="通知" />
|
||||
<img src="https://img.icons8.com/ios-filled/50/qr-code.png" alt="條碼" title="我的條碼" />
|
||||
<img src="https://img.icons8.com/ios-filled/50/qr-code.png" alt="條碼" onclick="window.location.href='scan_activate.html'" title="我的條碼" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
97
resgiter.html
Normal file
97
resgiter.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!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);
|
||||
}
|
||||
.verify-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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success { color: green; }
|
||||
.fail { color: red; }
|
||||
</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="verify-container">
|
||||
<!-- 步驟指示 -->
|
||||
<div class="step-indicator text-center mb-2">
|
||||
步驟 <strong>1</strong> 之 <strong>3</strong>
|
||||
</div>
|
||||
|
||||
<h4 class="text-center mb-4">輸入電子郵件</h4>
|
||||
|
||||
<form onsubmit="sendVerification(event)">
|
||||
<div class="mb-3">
|
||||
<label for="emailInput" class="form-label">電子郵件</label>
|
||||
<input type="email" class="form-control" id="emailInput" placeholder="example@mail.com" required />
|
||||
</div>
|
||||
<button type="submit" onclick="location.href='resgiter_2.html'" class="btn btn-primary btn-lg w-100">發送驗證碼</button>
|
||||
</form>
|
||||
|
||||
<div id="statusMessage" class="status-message text-center"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function sendVerification(event) {
|
||||
event.preventDefault();
|
||||
const email = document.getElementById("emailInput").value;
|
||||
const status = document.getElementById("statusMessage");
|
||||
|
||||
if (email && email.includes("@")) {
|
||||
status.innerHTML = '<span class="success">📧 驗證碼已寄出至 ' + email + '</span>';
|
||||
} else {
|
||||
status.innerHTML = '<span class="fail">❌ 請輸入有效的 Email</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
resgiter_2.html
Normal file
150
resgiter_2.html
Normal file
@ -0,0 +1,150 @@
|
||||
<!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);
|
||||
}
|
||||
.verify-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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.code-input {
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success { color: green; }
|
||||
.fail { color: red; }
|
||||
.resend-btn {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</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="verify-container">
|
||||
<!-- 步驟指示 -->
|
||||
<div class="step-indicator text-center mb-2">
|
||||
步驟 <strong>2</strong> 之 <strong>3</strong>
|
||||
</div>
|
||||
|
||||
<h4 class="text-center mb-3">請輸入驗證碼</h4>
|
||||
<p class="text-center text-muted mb-4">我們已將 6 位數驗證碼寄至您的 Email</p>
|
||||
|
||||
<form onsubmit="verifyCode(event)" class="text-center">
|
||||
<div class="d-flex justify-content-center mb-4">
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
<input type="text" maxlength="1" class="form-control code-input" required />
|
||||
</div>
|
||||
<button type="submit" onclick="location.href='resgiter_3.html'" class="btn btn-primary btn-lg w-100">驗證並繼續</button>
|
||||
</form>
|
||||
|
||||
<div class="text-center resend-btn">
|
||||
<button id="resendBtn" class="btn btn-link" onclick="resendCode()">重新發送驗證碼</button>
|
||||
</div>
|
||||
|
||||
<div id="statusMessage" class="status-message text-center"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function verifyCode(event) {
|
||||
event.preventDefault();
|
||||
const inputs = document.querySelectorAll('.code-input');
|
||||
const code = Array.from(inputs).map(input => input.value.trim()).join('');
|
||||
const status = document.getElementById("statusMessage");
|
||||
|
||||
if (code.length === 6 && /^\d{6}$/.test(code)) {
|
||||
status.innerHTML = '<span class="success">✅ 驗證成功！</span>';
|
||||
} else {
|
||||
status.innerHTML = '<span class="fail">❌ 請輸入正確的 6 位數驗證碼</span>';
|
||||
}
|
||||
}
|
||||
|
||||
// 自動跳到下一格
|
||||
document.querySelectorAll('.code-input').forEach((input, idx, arr) => {
|
||||
input.addEventListener('input', () => {
|
||||
if (input.value.length === 1 && idx < arr.length - 1) {
|
||||
arr[idx + 1].focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 重新發送功能
|
||||
function resendCode() {
|
||||
const resendBtn = document.getElementById("resendBtn");
|
||||
const status = document.getElementById("statusMessage");
|
||||
|
||||
resendBtn.disabled = true;
|
||||
let countdown = 60;
|
||||
resendBtn.textContent = `重新發送中... (${countdown}s)`;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
countdown--;
|
||||
resendBtn.textContent = `重新發送中... (${countdown}s)`;
|
||||
|
||||
if (countdown <= 0) {
|
||||
clearInterval(timer);
|
||||
resendBtn.disabled = false;
|
||||
resendBtn.textContent = '重新發送驗證碼';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
status.innerHTML = '<span class="success">📨 驗證碼已重新寄出，請再次查收 Email。</span>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
157
resgiter_3.html
Normal file
157
resgiter_3.html
Normal file
@ -0,0 +1,157 @@
|
||||
<!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>
|
||||
118
resgiter_4.html
Normal file
118
resgiter_4.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!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);
|
||||
}
|
||||
|
||||
.waiting-container {
|
||||
background-color: #fff;
|
||||
margin: 20px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.waiting-container h4 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.waiting-container p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.waiting-button {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.waiting-button:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
等待管理員驗證
|
||||
</header>
|
||||
|
||||
<div class="waiting-container">
|
||||
<h4>親愛的用戶您好</h4>
|
||||
<p>您的新用戶申請已送至管理室，請等候開通。</p>
|
||||
<button class="waiting-button" onclick="location.href='scan_activate.html'">同戶掃描開通</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
scan_activate.html
Normal file
132
scan_activate.html
Normal file
@ -0,0 +1,132 @@
|
||||
<!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);
|
||||
}
|
||||
|
||||
.scan-container {
|
||||
background-color: #fff;
|
||||
margin: 20px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scan-container img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.scan-button:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
</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="scan-container">
|
||||
<h4 class="mb-3">掃描 QR Code 來開通</h4>
|
||||
<p class="description">請使用手機掃描下面的 QR Code 開通此住戶。</p>
|
||||
|
||||
<!-- QR Code 圖片 -->
|
||||
<img src="https://docs.lightburnsoftware.com/legacy/img/QRCode/ExampleCode.png" alt="QR Code" />
|
||||
|
||||
<button class="scan-button" onclick="startScan()">開始掃描</button>
|
||||
|
||||
<p class="description">如果無法掃描，請確保您的手機相機已開啟並正常工作。</p>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// 假設這個是觸發掃描操作的函數
|
||||
function startScan() {
|
||||
alert("開始掃描 QR Code!");
|
||||
// 在實際情況中，這會調用你的掃描程式碼
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user