一个非常好看的密码解锁访问页面代码双端自适应。
截面截图：
下面是代码：
<!-- ====== 密码保护模块 ====== -->
<!-- 1. 将此 HTML 放在 <body> 标签内的最前面 -->
<div id="password-overlay">
<div class="password-container">
<div class="lock-icon">🔐</div>
<h2>页面已锁定</h2>
<p>请输入密码以继续访问</p>
<input type="password" id="password-input" placeholder="请输入密码" autofocus />
<button id="unlock-btn">解锁</button>
<div id="password-error" class="error-msg">❌ 密码错误，请重试</div>
<div class="hint">💡 密码提示：无</div>
</div>
</div>
<!-- 2. 将此 CSS 放入 <style> 中 -->
<style>
#password-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg, #0b0e11);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.password-container {
background: var(--panel, #12161c);
border: 1px solid var(--border, #243140);
border-radius: 24px;
padding: 40px;
width: 380px;
max-width: 90%;
text-align: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.password-container .lock-icon {
font-size: 64px;
margin-bottom: 16px;
}
.password-container h2 {
margin: 0 0 8px 0;
font-size: 24px;
color: var(--text, #e7edf3);
}
.password-container p {
color: var(--muted, #9fb3c8);
margin-bottom: 24px;
font-size: 14px;
}
.password-container input {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--border, #243140);
background: var(--panel-2, #171c22);
color: var(--text, #e7edf3);
font-size: 16px;
margin-bottom: 16px;
outline: none;
transition: all 0.2s;
text-align: center;
letter-spacing: 2px;
}
.password-container input:focus {
border-color: var(--primary, #4c8bf5);
box-shadow: 0 0 0 2px rgba(76, 139, 245, 0.2);
}
.password-container button {
width: 100%;
padding: 12px;
border-radius: 12px;
border: none;
background: var(--primary, #4c8bf5);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.password-container button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.password-container .error-msg {
color: var(--negative, #ef4444);
font-size: 13px;
margin-top: 12px;
display: none;
}
.password-container .hint {
color: var(--muted, #9fb3c8);
font-size: 12px;
margin-top: 16px;
}
</style>
<!-- 3. 将此 JS 放在 <script> 中（页面其他逻辑之前） -->
<script>
(function() {
const PAGE_PASSWORD = "88"; // ← 修改此处设置密码
const passwordOverlay = document.getElementById('password-overlay');
const passwordInput = document.getElementById('password-input');
const unlockBtn = document.getElementById('unlock-btn');
const passwordError = document.getElementById('password-error');
function unlockPage() {
if (passwordInput.value === PAGE_PASSWORD) {
passwordOverlay.style.opacity = '0';
setTimeout(() => {
passwordOverlay.style.display = 'none';
}, 300);
// 解锁成功后的回调（可选）
if (typeof onUnlocked === 'function') onUnlocked();
} else {
passwordError.style.display = 'block';
passwordInput.value = '';
passwordInput.focus();
passwordInput.style.borderColor = 'var(--negative, #ef4444)';
setTimeout(() => {
passwordError.style.display = 'none';
passwordInput.style.borderColor = '';
}, 2000);
}
}
unlockBtn.onclick = unlockPage;
passwordInput.onkeypress = (e) => {
if (e.key === 'Enter') unlockPage();
};
})();
</script>
