malaikaansar/spamshield

## ✨ 概述 SpamShield 是一款完全在客户端运行的威胁情报扫描器，其设计风格堪比真正的 AI 驱动初创产品。粘贴任何短信、电子邮件、私信或评论，引擎就会通过六个并行的检测引擎对其进行剖析，内联高亮每一个危险信号，并渲染出一个包含评分环、速度表和类别细分的实时威胁仪表板。 每次扫描都会通过 `localStorage` 私密地存储在您的浏览器中 —— 支持按风险状态进行搜索和筛选。 ## 🎯 功能 ### 🧭 导航与主视觉 - **粘性动画导航栏**，滚动时呈现毛玻璃效果，支持活动部分追踪和移动端汉堡菜单 - **全屏主视觉**，带有循环的**打字标题**（闪烁的光标）、渐变文本和双重 CTA - **分层动画背景** —— 漂浮的极光斑块、平移的赛博网格、晕影以及一个互联的**粒子画布** - **响应式深色/浅色模式** —— 持久化存储于 `localStorage` 中，并尊重系统偏好设置 ### 🔬 实时扫描器 - 带有**实时字符计数器**和防抖**“正在输入…”状态**的文本域 - **分析 / 重置 / 复制 / 示例**控件（支持 `Ctrl/Cmd + Enter` 快捷扫描） - 分析期间的**霓虹扫描光束动画** - **内联高亮输出** —— 每个可疑 token 均按类别进行颜色编码 ### 🧠 检测引擎（6 个并行） | 引擎 | 检测内容 | 示例 | |--------|---------|----------| | **关键词情报** | 40+ 个加权垃圾词汇 | `free`, `win`, `lottery`, `prize`, `claim now`, `verify now` | | **URL 与链接分析** | 嵌入的 URL 及可疑 TLD | `http://prize-claim.xyz`, `.tk`, `.loan`, `.win` | | **全部大写 (ALL-CAPS)** | 喊话词汇（4 个及以上大写字母） | `CONGRATULATIONS`, `WINNER` | | **重复符号** | 连续的符号 | `!!!`, `$$$`, `....` | | **紧急话术** | 施压策略 | `act now`, `expires in 24 hours`, `last chance` | | **数字诱饵** | 金钱与奖品数字 | `$1,000,000`, `5000 USD`, `million` | ### 📊 结果仪表板 - **动画环形评分环** (0–100)，带有颜色映射的渐变 - **威胁速度表**，带有旋转的指针和刻度尺 - **动画威胁级别条**，带有微光效果 - **四种颜色编码的风险状态**，带有点亮指示器： - 🟢 **安全** (0–20) · 🟡 **可疑** (21–45) · 🟠 **高风险** (46–70) · 🔴 **危险垃圾信息** (71–100) - **六张威胁情报卡片**，带有实时计数和详细字符串 - **动画统计计数器**，滚动时数字递增 ### 🗂️ 扫描历史 - **基于 `localStorage` 的保险库** —— 保存最近 60 次扫描，完全私密 - **文本搜索**和**风险状态筛选**下拉菜单 - **点击任意条目**，将其重新加载到扫描器中并重新分析 - 带有确认提示的**全部清除**操作 ### 🎨 设计与润色 - 带有渐变边框的毛玻璃面板 - 霓虹蓝 / 青 / 紫的辉光点缀 - 滚动展现动画，平滑的悬停过渡 - 回到顶部按钮，完整的页脚 - 完全响应式（桌面端 → 平板 → 移动端） - 尊重 `prefers-reduced-motion` 设置 ## 🚀 快速开始 ### 前置条件 - [Node.js](https://nodejs.org/) `>= 18`（仅用于可选的 Vite 开发/构建工具） ### 本地运行 ``` # 1. Clone the repository git clone https://github.com/malaikaansar/spamshield.git cd spamshield # 2. 安装 dev dependencies（仅限 Vite） npm install # 3. 启动 dev server npm run dev ``` 然后打开打印出的本地 URL（通常是 `http://localhost:5173`）。 ### 生产环境构建 ``` npm run build # outputs to /dist npm run preview # preview the production build locally ``` ## 📁 项目结构 ``` spamshield/ ├── index.html # Markup: navbar, hero, scanner, dashboard, history, footer ├── style.css # All styling: themes, glassmorphism, animations, responsive ├── script.js # All logic: analysis engine, dashboard, history, particles ├── public/ │ └── favicon.svg # Shield logo favicon ├── vite.config.ts # Minimal Vite config (static build, no frameworks) └── package.json # Dev dependency on Vite only ``` 这三个核心文件特意不使用框架且完全独立自包含： | 文件 | 职责 | |------|----------------| | `index.html` | 语义化结构与内容 | | `style.css` | 主题设置（CSS 变量）、布局、动画、响应式设计 | | `script.js` | 垃圾信息分析引擎、UI 更新、仪表板、历史记录、粒子效果 | ## ⚙️ 评分原理 SpamShield 使用**透明的、加权模式匹配引擎** —— 没有黑盒 ML。每次检测都会贡献相应的分数： | 信号 | 权重 | |--------|--------| | 严重关键词 (`lottery`, `prize`, `claim now`…) | 每个 +9 | | 标准关键词 | 每个 +5 | | 可疑 URL | 每个 +11 | | 紧急话术 | 每个 +7 | | 全部大写 (ALL-CAPS) 词汇 | 每个 +3 | | 连续重复符号 | 每个 +4 | | 数字诱饵 | 每个 +4 | | 信号密度（每个词汇的标记数） | +14 × 密度 | | 3 个及以上感叹号 | +5 额外加分 | 总分将被截断至 **0–100** 之间，并映射到相应的风险状态： ``` 0 – 20 → 🟢 Safe 21 – 45 → 🟡 Suspicious 46 – 70 → 🟠 High Risk 71 – 100 → 🔴 Dangerous Spam ``` ## 🧪 试一试 点击扫描器中的 **Sample** 按钮加载内置的垃圾信息样本，或者粘贴您自己的文本。示例： ``` CONGRATULATIONS!! You have WON a $1,000,000 PRIZE!!! Click here http://prize-claim.xyz/now to claim now. This is a limited offer — act now, offer expires in 24 hours. Verify now or your account will be suspended. ``` ## 🛠️ 技术栈 - **HTML5** —— 语义化标记 - **CSS3** —— 自定义属性、毛玻璃效果、关键帧动画、grid/flexbox - **Vanilla JavaScript (ES Modules)** —— 无框架或库 - **localStorage** —— 私密的设备端历史记录 - **Vite** —— 可选的开发服务器和生产环境打包工具 - **Google Fonts** —— Orbitron, Space Grotesk, JetBrains Mono ## 🌐 浏览器支持 适用于所有现代常青浏览器（Chrome、Firefox、Safari、Edge）。使用了 `backdrop-filter`、`IntersectionObserver` 和 `localStorage` —— 这些均已被广泛支持。 ## 📜 许可证 基于 **MIT License** 发布。详情请参阅 [`LICENSE`](LICENSE)。 ## 👤 作者 **Your Name** - GitHub: [@malaikaansar(https://github.com/malaikaansar)] - LinkedIn: (https://www.linkedin.com/in/malaika-ansar-237aa8399/)

标签：CMS安全, HTML/CSS, JavaScript, 后端开发, 威胁情报, 开发者工具, 网络安全, 钓鱼检测, 隐私保护