📖 源码介绍
这是一段即插即用的轻量级前端密码验证代码块，专为需要快速给现有网页添加访问密码的开发者设计。它采用现代毛玻璃（Glassmorphism）设计语言，在未输入正确密码前，整个页面背景将处于模糊不可辨认的状态，有效防止内容被随意窥探。
✨ 核心特性
| 特性 | 说明 |
|---|---|
| 🔒 全屏背景模糊 | 未解锁时，页面背景被 backdrop-filter 强力模糊，内容完全无法辨认，同时无法进行任何点击操作 |
| 🎨 现代毛玻璃UI | 密码卡片采用半透明、高饱和模糊效果，配合柔和阴影与圆角，视觉精美且适配各种网站风格 |
| 😊 纯 Emoji 图标 | 所有图标均使用系统原生 Emoji，无需加载任何外部字体或图标库，极致轻量 |
| 🛡️ 防窥探机制 | 禁用右键菜单、屏蔽 F12 开发者工具、Ctrl+U 查看源码等快捷键，增加普通用户绕过门槛 |
| 💾 会话保持 | 密码验证通过后，刷新页面状态保持，无需重复输入（基于 sessionStorage） |
| 🔓 一键锁定 | 提供全局 lockPortal() 函数，可在页面内任意位置添加按钮，随时重新锁定页面 |
| 📦 零依赖·单文件嵌入 | 纯原生 HTML/CSS/JS，复制粘贴即可使用，无需 npm、webpack 或外部网络资源 |
🧩 使用场景
-
给临时演示站点、内部预览页面快速加一道访问屏障
-
为个人项目、作品集页面添加简单的隐私保护
-
在不改动后端的情况下，为静态 HTML 页面增加访问限制
⚡ 集成方式
-
将代码块中的
<style>部分粘贴到页面<head>中（或合并到现有样式表） -
将
<div id="glassPasswordPortal">覆盖层结构放在<body>开头 -
用
<div id="protectedContent">包裹原本的页面内容 -
将底部
<script>粘贴到</body>之前 -
修改脚本开头的
CORRECT_PASSWORD变量值为您自己的密码
默认密码：
gl4ss2024（请在部署前务必修改）
⚠️ 安全提示
此为前端视觉遮蔽方案，无法替代真正的服务端鉴权。任何具备浏览器开发者工具知识的用户仍有可能绕过保护。但对于普通访客和快速隐私隔离场景，它提供了优雅且足够的屏障。
🖼️ 效果预览描述
-
锁定状态：访客看到的是模糊不清的页面背景，中央悬浮一个毛玻璃卡片，提示输入密码。鼠标无法点击背景中的任何链接或按钮。
-
解锁状态：背景模糊瞬间消失，页面恢复清晰，所有功能正常可用。右上角可放置“锁定”按钮以重新隐藏内容。
源码查看
管理员已设置登录后刷新可查看
管理员已设置