The Login Portal That Actively Hates You

Source: Dev.to

Overview

A tongue‑in‑cheek “Premium Secure Portal” built for the DEV April Fools Challenge. It deliberately employs anti‑UX patterns to make authentication impossible, turning typical accessibility and conversion concerns on their head.

Live Demo

• Demo:
• Source:

Technical Implementation

Panic Multiplier

The portal calculates the Euclidean distance between the cursor and an input’s center:

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

The inverse of this distance scales the escape velocity, so the closer the cursor gets, the faster the input flees. The multiplier also considers cursor movement velocity for a more frantic escape.

UI Behaviors

• Teleporting Inputs:
  Input fields detect cursor proximity within a 200 px radius and instantly relocate, preventing focus.

• Parasitic Fields:
  If a user forces an “emergency bypass,” typing in the email field triggers a script that deletes characters from the password field in real time.

• Disabled Yet Styled:
  Fields are technically disabled but styled to look active, leading users to suspect hardware, browser, or sanity issues.

• Glassmorphism & Animations:
  The form uses glass‑morphism card effects, linear‑gradient keyframe background animations, and a CSS ::before pseudo‑element flare to give a false sense of premium quality.

Gemini‑Assisted Development

Google Gemini was used for:

• Brainstorming frustrating logic flows.
• Refining the character‑deletion script to feel reactive and sentient.
• Optimizing the Panic Multiplier’s escape‑speed scaling.
• Generating satirical status messages for the fake submission sequence.

Status Messages (Fake Submission Sequence)

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

Compliance

The portal is HTCPCP compliant (Hyper Text Coffee Pot Control Protocol, RFC 2324). The footer references the classic “418 I’m a teapot” response, humorously equating a non‑functional login form with a teapot that refuses to brew coffee.

Stack

• Vanilla JavaScript
• CSS3 (including Glassmorphism and keyframe animations)
• Bootstrap 5
• Google Gemini (for brainstorming, script refinement, and message generation)