A romantic birthday website that stays locked until someone types the secret code. Once they're in, they land on a page with a huge Happy Birthday heading, a paragraph written just for them, a photo gallery, and a list of reasons you love them.

Open the site · the code is ILOVEYOU (the hint on the page has been removed, so keep this somewhere safe)

Rendering mermaid diagram...

1. They type the code into the gate and hit Unlock my surprise.
2. The page fetches /unlock. The server compares the code and, if it matches, replies with a secret token (sha256 of the code + salt — not guessable).
3. The page shows an "Unlocking your surprise…" overlay, then navigates to /?k=TOKEN, which serves the birthday page.
4. A cookie is also set, so returning to / stays unlocked where cookies work.

The token-in-the-URL step is deliberate: a plain form POST + redirect gets swallowed inside preview iframes, which made it look like nothing happened.

• main.ts — the HTTP handler: checks the code, issues the token, serves the right page.
• index.html — the locked gate, with the unlock animation overlay.
• home.html — the birthday site: big heading, paragraph, letter, gallery, wishes.
• style.css — the pale avocado palette, floating hearts, polaroid grid, entrance animations.

1. Change the secret code — edit SECRET_CODE at the top of main.ts.

2. Add your photos — in home.html, swap the picsum.photos URLs for your own. Easiest way: drag your photos into the val as files (e.g. photos/us1.jpg), then use <img src="/photos/us1.jpg">. Add or remove <figure> blocks freely.

3. Rewrite the words — the four <!-- ✏️ TEXT INSERT --> sections in home.html are the paragraph under the big heading, the letter, the reasons list, and the closing wish.

4. Share it — send them the link and the code. They only need to type it once.

Every colour lives in one place — the :root block at the top of style.css:

Token	Value	Used for
--green-deep	#4a7038	headings, the big "Happy Birthday", button
--green	#6b9b4a	input focus
--green-soft	#c9dbaa	borders, dashed rule
--avocado-deep	#d7e8ba	the glow at the top of each page
--avocado	#f0f6e6	input backgrounds
--ink / --muted	#2c3a24 / #71835f	body text / secondary text

The page washes themselves are the background: rules on body, .gate, and body.home. If you change the palette, bump ?v= on the <link> in both HTML files so browsers fetch the new stylesheet instead of a cached copy.