主动讨厌你的登录门户

Source: Dev.to

概览

一个带有讽刺意味的 “Premium Secure Portal”，为 DEV 四月愚人节挑战而构建。它刻意使用反用户体验（anti‑UX）模式，使身份验证变得不可能，颠倒了常规的可访问性和转化率考量。

在线演示

• Demo:
• Source:

技术实现

Panic Multiplier

门户计算光标与输入框中心之间的欧氏距离：

[ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} ]

该距离的倒数用于缩放逃逸速度，光标越靠近，输入框逃跑得越快。该乘数还会考虑光标移动速度，以实现更疯狂的逃逸。

UI 行为

• 瞬移输入框：
  当光标在 200 px 半径范围内时，输入框会立即重新定位，阻止获得焦点。

• 寄生字段：
  若用户强行使用 “紧急绕过”，在邮箱字段输入时会触发脚本，实时删除密码字段中的字符。

• 已禁用但外观活跃：
  字段在技术上被设为 disabled，但样式看起来仍是可用的，导致用户怀疑硬件、浏览器或自身的正常性。

• 玻璃拟态与动画：
  表单使用玻璃拟态（glass‑morphism）卡片效果、线性渐变关键帧背景动画，以及 CSS ::before 伪元素的光晕，营造出一种虚假的高端质感。

Gemini‑辅助开发

使用 Google Gemini 完成以下工作：

• 为令人沮丧的逻辑流程进行头脑风暴。
• 优化字符删除脚本，使其表现得更具响应性和“有感”。
• 调整 Panic Multiplier 的逃逸速度缩放。
• 为虚假提交序列生成讽刺性的状态信息。

状态信息（虚假提交序列）

✅ Asking Trump for help...
✅ Verifying database from NASA...
✅ Cross-referencing with CERN...
✅ Almost there... (it never is)

合规性

该门户 HTCPCP 合规（Hyper Text Coffee Pot Control Protocol，RFC 2324）。页脚引用经典的 “418 I’m a teapot” 响应，幽默地将一个无功能的登录表单等同于拒绝冲咖啡的茶壶。

技术栈

• Vanilla JavaScript
• CSS3（包括玻璃拟态和关键帧动画）
• Bootstrap 5
• Google Gemini（用于头脑风暴、脚本细化和信息生成）