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