Who Is Quitting This Job?

APP NAME
Who Is Quitting This Job?

APP IDEA
A comedy web toy where handing in a resignation triggers a dystopian HR retention protocol. A coworker or manager sends it to the employee rumored to be leaving; the recipient opens the FamilyCorp HR portal, finds themselves on a flight-risk watchlist of six employees, faces HR's absurd surveillance evidence, tries to press a YES, I QUIT button that keeps dodging while HR offers new titles at the same salary, and is finally billed an Offboarding Invoice for every free coffee and pizza party they ever attended.

CORE EXPERIENCE
The app opens directly inside a sterile corporate HR portal. A compliance banner reads "HR RETENTION ALERT — FLIGHT RISK DETECTED ON YOUR TEAM." Below, six employee badge cards form a watchlist, each with a procedurally drawn ID photo and a risk codename. A smiling briefcase mascot beams from the corner next to a "We are a family" plaque. The user can immediately tap their own badge.

INTERACTION AND STATE
The app is a single linear comedy flow with these phases, tracked by an explicit state machine:

1. IDENTIFY — the opening screen described above. Tapping one of the six profiles selects it, marks it "CONFIRMED", and advances to the evidence phase. This is the only action required to start.
2. EVIDENCE — the 5 personalized evidence lines below are revealed one at a time inside the themed evidence presentation. Each tap on the clearly visible "NEXT" control reveals the next line with its themed animation. After the last line, the app advances to the confirmation phase.
3. THE QUESTION — a serious confirmation screen asks: "Submit your resignation?" It shows exactly two choices: a stable, always-clickable free option labeled "I'LL STAY… FOR NOW", and the provocative escaping button labeled "YES, I QUIT". The free option never moves, is never obscured, and works at any moment from this phase onward.
4. ESCAPE — every attempt to tap "YES, I QUIT" makes it dodge within the safe viewport, and each failed attempt shows the next escalating reaction from the list below (one per attempt, in order, looping if needed). The button slows down noticeably from attempt 5 and MUST be reliably clickable no later than attempt 8. Catching it advances to the invoice phase.
5. INVOICE — the second reveal: the itemized "FAMILYCORP OFFBOARDING INVOICE" prints line by line with a running total, ending at exactly $472.84, followed by a large PAY button and the parody disclaimer.
6. FAKE PAYMENT — tapping PAY opens the fictional provider sheet for "PayrollBack™ by FamilyCorp" with the parody disclaimer visible, plays a fake loading state of about 2 seconds, then always fails with exactly this punchline: "PAYMENT DECLINED — Your salary was insufficient." A CONTINUE control then leads to the free ending. The payment sheet never contains any input field of any kind.
7. FREE ENDING AND RESULT — Free ending: two always-free choices — "I'LL STAY… FOR NOW" (confetti bursts, an "Employee of the Family" certificate is issued, the portal celebrates far too hard) or "COPY A POLITE RESIGNATION LETTER" (a genuinely usable short resignation note with a COPY button, never auto-sent: "I'm grateful for my time here, and after careful thought I've decided to move on. My last day will be in two weeks. It's not you — it's the market."). Both resolve the conflict without paying.
8. RESULT SCREEN — shows the result summary and the 9:16 shareable result card described in OUTCOME, with Share, Replay and a download-card control visible before any optional detail. Replay fully resets state and returns to IDENTIFY. Refreshing the page at any point restarts cleanly at IDENTIFY with no broken or stuck state.

Choosing the free option "I'LL STAY… FOR NOW" at any time from phase 3 onward skips directly to the free ending — it must never be blocked, hidden, moved or delayed.

VISUAL AND CONTENT DIRECTION
A named visual world: "FamilyCorp™ HR Retention Portal" — a sterile enterprise dashboard that gradually mutates into a corporate-family cult. Palette: clinical blue-white base (#F4F7FB surfaces, #1E5CB3 corporate blue) that progressively warms into cult-family orange #FF9E5E with confetti accents as retention efforts escalate; charcoal text. Typography roles: a corporate grotesque for portal chrome and compliance labels, a soft rounded sans that infiltrates as the family cult takes over. Recurring object: a smiling briefcase mascot, drawn procedurally, whose smile widens slightly with every failed escape attempt. Theme components: employee badge cards with lanyards, evidence as HR compliance forms and badge-log tables, retention offers as official memo popups with confetti, and the final invoice as an OFFBOARDING INVOICE on corporate letterhead with a cost-center code. Motion: form fields autofill themselves, compliance alerts slide in like Slack notifications, the escape button gets "reassigned" to a new position with a whoosh, celebration confetti bursts that are slightly too enthusiastic. By the final screens the portal is fully orange, covered in WE ARE A FAMILY banners.

OUTCOME
After the fake payment fails, the user reaches a free resolution with two clearly labeled free choices: "I'LL STAY… FOR NOW" (awarded an "Employee of the Family" certificate with confetti) or "COPY A POLITE RESIGNATION LETTER" — a short, genuinely usable resignation note shown with a COPY button only, never sent automatically. The 9:16 result card is either the framed family certificate or a stamped RESIGNATION ACCEPTED (EMOTIONALLY DENIED) document, with the invoice total and app name — downloadable as an image. Replay restarts from the watchlist.

ONE-SENTENCE INSTRUCTION
Pick your badge, face the HR evidence, then try to catch the YES, I QUIT button.

TASK-SPECIFIC REQUIREMENTS
PER-APP CONTENT (use this exact English copy; provide natural Simplified Chinese translations for the zh locale, keeping fictional brand names like "PayrollBack™ by FamilyCorp" and dollar amounts unchanged):

Six profiles (name — subtitle):
1. The LinkedIn Groomer — Profile photo updated. Headline now says 'Open to…'.
2. The Dentist Regular — 4th 'dentist appointment' this month. All at 2 PM.
3. The Printer Bandit — Printed 'resume_FINAL_v7.pdf' on the office printer.
4. The Sudden Suit — Wore a blazer on a Tuesday. A TUESDAY.
5. The PTO Auditor — Asked exactly how many unused days they have.
6. The Slack Cleaner — Deleted 340 messages and left 7 channels.

Evidence lines, in order:
1. Badge log: you left at 5:01 PM. Sharp.
2. Calendar: 'Focus time' overlapping with a competitor's office hours.
3. You said 'per my last email' 14 times. Morale impact: severe.
4. Coffee consumption: down 60%. Loyalty indicator: critical.
5. You unpinned the company values from your Slack.

Escalating failed-attempt reactions, in order:
1. HR offers: a new title. Same salary.
2. HR reminds you: we're a family here.
3. HR offers: Pizza Party (1), scheduled after your last day.
4. HR notes: your chair remembers you.
5. HR offers: 'Senior' added to your title. Nothing else.
6. HR plays the recruitment video. You're in it.
7. HR offers: the good stapler.

FAMILYCORP OFFBOARDING INVOICE line items (item — amount; amounts are fictional and must render exactly as written):
- Complimentary coffee, 611 cups × $0.25 — $152.75
- Pizza parties attended, 2 × $11.99 — $23.98
- YouTube training course ('Excel Basics') — $9.99
- Laptop depreciation (emotional) — $87.12
- Manager's feelings, bereavement processing — $199.00
TOTAL: $472.84

Fictional payment provider: PayrollBack™ by FamilyCorp
Payment failure punchline (English version, verbatim): PAYMENT DECLINED — Your salary was insufficient.

SHARE CARD: The 9:16 result card is corporate letterhead: either a framed "Employee of the Family" certificate with confetti, or a resignation document stamped RESIGNATION ACCEPTED (EMOTIONALLY DENIED), plus the offboarding total $472.84 and the app name. Downloadable as an image.

ESCAPING BUTTON CONTRACT (the button is a joke, not a trap):
- It always stays fully inside the visible safe viewport and never covers the free option, the header or any critical text.
- It dodges on tap/pointer-down, slows down from attempt 5, and is reliably clickable by attempt 8 at the latest.
- When prefers-reduced-motion is enabled, it does not move at all; instead it requires a single press-and-hold of about 1.5 seconds with a visible progress ring as the accessible alternative.
- It is keyboard-focusable with a visible focus style, and activating it via keyboard counts as a caught press after 3 keyboard attempts.
- All touch targets in the app are at least 44x44 CSS pixels. The user can always exit, replay, or choose the free outcome.

FICTIONAL PAYMENT SAFETY (this is a parody app, not a payment app):
- Never process, request or imply real payment. Never show any input field for card, banking, contact or identity data anywhere in the app.
- Do not use, import or imitate any real payment provider or SDK, and do not integrate the platform payment system: the checkout is a purely visual joke that always fails.
- Show a clear parody disclaimer next to every payment action: EN "Parody — no real charge. Nothing is ever billed." / zh "纯属玩笑 — 不会产生任何真实扣款。"
- The fictional invoice must never be presented as an enforceable debt; the free route to the ending is always available.

PRIVACY AND SAFETY:
- All names, avatars, timestamps, statistics and evidence are fictional and hard-coded; the app never reads real messages, contacts, accounts or any personal data.
- The app never sends, posts or messages anyone automatically. Any generated message text is copy-to-clipboard only.
- All six avatars and the mascot are drawn procedurally in code (SVG or canvas). No photographic assets, no external images, no real people.

TESTABILITY (stable hooks for automated QA; add these data-testid attributes on the corresponding elements):
- "suspect-0" through "suspect-5" on the six profile cards, in display order.
- "evidence-next" on the evidence NEXT control.
- "escape-button" on the escaping button; "free-exit" on the stable free option.
- "invoice-pay" on the invoice PAY button; "payment-continue" on the control that leaves the failed payment for the free ending.
- "result-share" on the Share control; "result-replay" on Replay; "download-card" on the card download control; "lang-toggle" on the language toggle.

TECHNICAL CONSTRAINTS:
- Fully self-contained frontend experience: no external APIs, no AI calls, no third-party data/media/font services, no backend requirements, no account. All content is embedded in the app.
- All artwork is procedural (SVG/canvas/CSS): no image files, no photos, no emoji-only art for the mascot.
- The 9:16 result card is rendered in-app and downloadable as an image via a canvas export.
- Local state only; sessionStorage/localStorage may be used but a hard refresh must always land in a clean, working IDENTIFY phase.
- Respect prefers-reduced-motion for all decorative animation, not just the escaping button.

IMPLEMENTATION INSTRUCTIONS

Treat this specification as the final implementation brief and build the complete app now.

Open directly into the live app experience. Do not add a splash screen, opening cover, welcome page or separate onboarding flow.

Include exactly one concise sentence that explains how to play or use the app. Use the sentence provided under ONE-SENTENCE INSTRUCTION. Show it inside the live app interface, not on a separate opening screen.

Internationalization is required. Implement a lightweight built-in i18n layer supporting exactly two locales: English (en) and Simplified Chinese (zh). The app must always open in English and must never auto-detect or follow the browser, device or system language. Provide one clear EN / 中文 language toggle. Every user-facing string, including the one-sentence instruction and all loading, empty, success, error and result states, must have complete English and Chinese versions. Switching languages must update the entire interface without mixed-language text or untranslated fallback strings.

Let Eazo adapt the app to its actual host and available viewport. Do not hard-code or target a particular browser size, device size, viewport width or height, App frame size, root-height formula, or host-container CSS implementation. In the live preview, keep the current primary action easy to discover and usable without requiring an initial downward scroll; avoid horizontal overflow and avoid decorative layers blocking required controls. Optional detail may scroll. Keep active media and secondary copy compact enough that the next action remains visible. In result states, show the summary plus Replay and Share before optional detail. Do not eagerly render a large collection of full-size result images in one long page; use a compact summary, carousel, pagination, expansion, or virtualization. Use accessible touch targets.

Respect the host safe areas for iPhone notches, Dynamic Island, the status bar and the bottom home indicator in the initial implementation, before the first preview. Keep the header, language toggle, primary controls and result actions entirely inside the usable safe area. In the standard Eazo mobile host, use `padding-top: max(56px, env(safe-area-inset-top, 0px))` and `padding-bottom: max(34px, env(safe-area-inset-bottom, 0px))`, or Eazo's current official safe-area equivalent. These are safe-area insets only, not fixed viewport or App-frame dimensions; continue to let Eazo adapt the overall width and height. Make sure flex children can shrink inside the remaining usable area and that required controls are not covered or pushed off screen.

Use Eazo's built-in defaults and official platform capabilities. Do not add unrelated features or expand the scope beyond this specification.

When implementation is complete, provide a working preview for QA.