Prompt:

Build a mobile-responsive web app prototype called Lokclok — a sleek, minimalist “digital lockdown timer” that helps users focus by temporarily locking their phones for a set period.

🧠 Concept

Lokclok puts your device into Countdown Mode — blocking distractions for a chosen number of hours.

The user sets a timer, starts a focus session, and watches a full-screen countdown that they can’t exit unless they hit an Emergency Exit (which requires a short delay before confirming).

📱 Pages & Flow

1. Landing Screen

• App name: Lokclok (in clean sans-serif font)
• Tagline: “Lock in. Clock out.”
• Black-and-white color scheme, minimalist layout
• Dropdown or segmented buttons to choose focus duration (e.g. 30m, 1h, 2h, 4h, 8h)
• Prominent “Start Session” button
• Small line of text: “Emergency calls still get through.”
• Add a “Demo Mode” button that starts a sample 10-second countdown for demo purposes.

2. Countdown Mode Screen

• Full-screen black background with large white timer (HH:MM:SS)
• Smooth, centered countdown animation (fade or pulse)
• Disable all main UI except one subtle “Emergency Exit” icon (bottom corner)
• When pressed:
  • Show modal overlay:
    • Text: “Are you sure you want to break focus?”
    • Input field: “Reason for ending early” (optional)
    • 10-second delay before “Confirm Exit” button becomes active
  • “Cancel” returns to countdown.

3. Session Complete Screen

• White background, black text
• Subtle confetti animation or gradient pulse
• Text: “You stayed offline for X hours Y minutes. Well done.”
• Button: “Start Another Session”

🎨 Design Guidelines

• Color palette: strictly black (#000) and white (#FFF)
• Typography: modern sans-serif (like Inter, Satoshi, or Space Grotesk)
• Layout: minimalist, centered, high contrast
• Animations: smooth fade-ins, subtle scaling on transitions
• Responsive: optimized for mobile-first with fluid scaling for desktop view.

💡 Bonus Touches

• Add a simple progress ring around the countdown timer.
• Include a “Stats” placeholder on landing (e.g. “Total focus time: 12h 40m”).
• Keep all buttons rounded with soft shadows.
• On session complete, show a motivational quote like “Distraction is a choice.”

✅ Prototype Goal

Create a fully working front-end demo (no login or backend) that demonstrates:

• Selecting a duration
• Starting a timer
• Countdown mode lock screen
• Emergency exit confirmation delay
• Session completion flow