150 lines
4.3 KiB
HTML
150 lines
4.3 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);
|
|
}
|
|
.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> |