HTCPCP Tea-Potty

*

HTCPCP Tea‑Potty
HTCPCP Tea‑Potty is a delightfully useless web toy built for the DEV April Fools Challenge. It channels the spirit of the Hyper‑Text Coffee Pot Control Protocol (IYKYK) and refuses to behave like any reasonable UI. The page is intentionally petty, passive‑aggressive, and theatrical: it will only brew if you flatter it, it sulks when you hover, and it speaks exclusively in faux HTTP status codes.

What I Built
A browser teapot that solves zero problems. It exists to confuse, amuse, and provoke the question “why?”

Compliment Gate. The teapot will only brew when you type a sufficiently sincere compliment into the input box. Short or vague praise returns HTTP 401 Not Flattered or HTTP 403 Compliment Not Specific Enough.

Passive‑aggressive animations. Hovering makes the teapot slowly rotate and slide away; it literally refuses to be clicked without attitude.

Volume Slider That Hates You. A faux volume control remains disabled until you wiggle your mouse or shake your phone; unlocking it is a small victory over a petty UI.

HTTP‑Only UI. Buttons labeled BREW, POUR, REFUSE, and 418 I’m a Teapot that respond with theatrical status messages rather than sensible actions.

Easter Eggs. Repeatedly click the teapot to reveal hidden ASCII art and haiku “recipes.”

Demo
Open index.html in a browser or paste the three files into a CodePen to try it instantly.

How to play

Type a compliment into Compliment Gate (aim for at least 15 characters and include a “nice” word).

Click BREW and watch the teapot judge you while it “brews.”

Try POUR before the tea is ready and receive a dramatic refusal.

Wiggle your mouse or shake your phone to unlock the volume slider.

Click the teapot seven times quickly to reveal secret recipes.

Code
The project is intentionally tiny and theatrical. It ships as three files:

index.html — markup for the teapot, controls, status area, and hidden recipes.

style.css — heavy on sulking keyframes, gradients, and passive‑aggressive visual flourishes.

script.js — a small behavior shim that enforces the compliment rules, fakes HTTP responses, detects wiggles/shakes, and reveals easter eggs.

Key implementation details:

Compliment evaluation requires ≥ 15 characters and at least one “nice” word (e.g., immaculate, lovely, elegant).

Status messages are rendered as faux HTTP responses (401, 403, 418, 451, etc.).

Mouse wiggle detection accumulates recent movement deltas and unlocks the slider when the sum exceeds a threshold. Device motion events unlock it on phones.

The teapot’s sulk is driven by CSS @keyframes and inline transform nudges from JavaScript for extra attitude.

If you want the full source pasted into the post body or a GitHub gist, I can include the three files verbatim for easy copying.

How I Built It
Technologies used: plain HTML, CSS, and vanilla JavaScript. No frameworks required — the point is theatrical minimalism.

Design approach: deliberately anti‑UX. Animations and microinteractions are exaggerated to make the teapot feel like a sentient, judgmental widget.

Accessibility: keyboard support for the teapot (press Enter while focused to trigger BREW) and ARIA labels for the main interactive elements. The project is playful, not malicious.

Prize Category
Community Favorite — this project is built to be shared, laughed at, and copied into silly posts. It’s a love letter to web pranks and RFC lore, and it’s designed to make readers grin and say “I would never ship this, but I want to show it to my friends.”

Final Notes
This submission is intentionally useless by design. It’s a tiny theatrical experiment in UX anti‑patterns, faux protocols, and passive‑aggressive microcopy. Drop the three files into a folder or paste them into CodePen to experience the full sulk. If you’d like, I can:

https://codepen.io/editor/Dancodepen-io/pen/019d542a-2a36-7a5c-b942-898774d74334

Paste the full index.html, style.css, and script.js into the post body.

Generate a short README or teaser blurb for the DEV post.

Produce a GIF demo or a short video script you can record for the submission