The Login Portal That Actively Hates You

#devchallenge #418challenge #showdev #webdev

April Fools Challenge Submission ☕️🤡

Submission for the DEV April Fools Challenge

🎭 What I Built

I built a Premium Secure Portal — a login form that uses advanced Anti-UX patterns to guarantee that no user, human or bot, can ever successfully authenticate.

While modern web development obsesses over accessibility and conversion rates, this project explores the opposite: Inaccessible Security.

The portal runs a three-phase frustration loop, escalating with every interaction attempt.

⚙️ The Three Phases of Suffering

Phase 1 — The Evasion Phase 🏃

Input fields detect cursor proximity within a 200px radius and teleport across the screen to avoid focus. You cannot click what you cannot catch.

Phase 2 — The Sabotage Phase 🪲

If the user manages to "stabilize" the UI via an emergency bypass, the fields turn parasitic. Typing into the email field triggers a script that actively deletes characters from the password field in real-time.

You give. It takes.

Phase 3 — The Gaslight Phase 🫠

Fields are technically set to disabled but styled with CSS to appear fully active — leading the user to believe their hardware, browser, or sanity has malfunctioned.

It's not a bug. It's a feature. It's you.

Demo & Code

Live Demo: [https://ahmershahdev.github.io/april_fool/]
GitHub Repo: [https://github.com/ahmershahdev/april_fool.git]

How I Built It

Stack: Vanilla JavaScript · CSS3 · Bootstrap 5

Evasion Physics

I implemented a Panic Multiplier in JavaScript. The closer the cursor gets to an input's center, the faster and further the input flees.

This uses the Euclidean distance between cursor position $(x_1, y_1)$ and element center $(x_2, y_2)$:

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

The inverse of this distance scales the escape velocity — proximity equals panic.

Visual Engineering

The "Modern Enterprise" aesthetic is built with:

Glassmorphism card effects
linear-gradient keyframe animations on the background
A CSS ::before pseudo-element flare that sweeps across the card — providing a false sense of premium quality to a form that refuses to function

🤖 AI Integration (Google Gemini)

I used Google Gemini at multiple points:

Brainstorming logic flows — Gemini helped map the most psychologically frustrating sequence of events
Refining the character-deletion script — ensuring the interval-based deletion felt reactive and sentient, not like an obvious bug
Generating satirical status messages shown during the final fake submission sequence:

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

Prize Category Submissions

🤖 Best Google AI Usage

Gemini was used to optimize the Panic Multiplier — specifically refining the escape speed scaling based on cursor movement velocity (not just position). It also generated the absurd status messages that make the fake auth sequence feel genuinely unhinged.

☕ Best Ode to Larry Masinter

This portal is officially HTCPCP compliant — Hyper Text Coffee Pot Control Protocol, per RFC 2324.

The footer acknowledges this. The philosophy: a login portal that refuses to work is no different than a teapot that refuses to brew coffee.

418 I'm a teapot. Also, I'm your login form.

💙 Community Favorite

As an active DEV community member publishing technical blogs weekly, this is my tribute to every maddening bug we've rage-quit over. I hope fellow developers see themselves in this portal — just unable to log in.