一个 11KB 的安全警示单页：安全猿每日警示教育

为什么做这个页面

班前会、安全培训、投屏展示，经常需要一句「安全警示语」。这个页面是基于一为忆的「毒鸡汤」版本改的。

站点整体改版时，顺手把它也重做了：界面与导航站、博客统一，去掉所有多余依赖。

它是什么

一个只有一句话和几个按钮的极简单页：

• 随机警示语：打开页面自动加载一条，共 160 条，一行一条维护；
• 换一句：点按钮，或按 空格 / →；
• 复制：一键复制当前语录；
• 全屏：适合投屏到会议室大屏；
• 明暗主题：跟随系统，可手动切换，记忆选择；
• 响应式：手机上同样可用。

在线体验：https://www.anquanyuan.cc/mrjj/

技术栈：刻意做小

前端只用原生 fetch('./api/') 取 JSON，没有构建步骤、没有框架。

设计

• 与导航站、博客统一：#faf8f8 背景、白色圆角大卡片、系统字体栈；
• 语录用低饱和砖红 #b23a3a（深色模式 #e8a09a），醒目但不刺眼；
• 卡片最大宽度 1140px、语录字号最大 42px，长句自动换行；

部署与定制

下载后目录结构如下：

mrjj/
  index.html        # 页面
  api/
    index.php       # 随机返回一条警示语
    hitokoto.txt    # 语录库（一行一条）
  LICENSE           # MIT
  README.md

• 需要支持 PHP 的空间（接口只用到 file() 和 mt_rand()）；
• 上传整个 mrjj/ 目录，访问对应地址即可；
• 增删语录：直接编辑 api/hitokoto.txt；
• 改站名 / 页脚 / 链接：编辑 index.html；
• 改语录颜色：编辑 index.html 中 :root 的 --quote 变量。

一些取舍

• 为什么不用数据库：160 条文本，file() + mt_rand() 就够了，不依赖 MySQL，放到任何 PHP 空间都能跑；
• 为什么去掉 jQuery：只用一个 fetch 和几处 DOM 操作，原生 JS 足够，省掉 93KB；
• 为什么保留 PHP 接口：改语录只要改文本文件，不需要重新生成页面或构建。

下载

• 打包下载：https://www.anquanyuan.cc/downloads/mrjj-v2.zip （含 README、MIT 协议，解压即用）
• 在线体验：https://www.anquanyuan.cc/mrjj/