486 lines
5.4 KiB
Markdown
486 lines
5.4 KiB
Markdown
Mobile To-Do & Calendar App Specification
|
||
Overview
|
||
|
||
The application is a minimalist task management app consisting of three primary screens:
|
||
|
||
To-Do List
|
||
Add New Task
|
||
Calendar
|
||
|
||
Navigation between these screens is handled through a persistent bottom navigation bar.
|
||
|
||
The design should prioritize simplicity, quick task entry, and easy organization using categories, priorities, and scheduling.
|
||
|
||
General Layout
|
||
Device
|
||
Mobile-first
|
||
Portrait orientation
|
||
Responsive for Android and iOS
|
||
Safe-area support for notches and gesture navigation
|
||
Theme
|
||
White background
|
||
Rounded containers
|
||
Thin borders
|
||
Minimal shadows
|
||
Black typography
|
||
Accent colors used only for task categories and primary actions
|
||
Navigation
|
||
|
||
A bottom navigation bar is visible on every screen.
|
||
|
||
Navigation Items
|
||
1. Tasks
|
||
|
||
Icon:
|
||
Checklist
|
||
|
||
Destination:
|
||
To-Do List Screen
|
||
|
||
2. Calendar
|
||
|
||
Icon:
|
||
Calendar
|
||
|
||
Destination:
|
||
Calendar Screen
|
||
|
||
3. Settings
|
||
|
||
Icon:
|
||
Gear
|
||
|
||
Destination:
|
||
Settings Screen
|
||
|
||
The currently active tab should be highlighted using the primary accent color.
|
||
|
||
Screen 1 — To-Do List
|
||
Header
|
||
|
||
Height: approximately 80 px
|
||
|
||
Contains:
|
||
|
||
App logo aligned left
|
||
Title "TODO" centered
|
||
Rounded top corners
|
||
Category Filter
|
||
|
||
Directly below the header.
|
||
|
||
Layout
|
||
|
||
Horizontal scroll list.
|
||
|
||
Each category is displayed as a colored circular button.
|
||
|
||
Example:
|
||
|
||
🔴 Work
|
||
🟢 Personal
|
||
🔵 School
|
||
🟠 Shopping
|
||
🟣 Health
|
||
🟡 Finance
|
||
🌈 All
|
||
|
||
Requirements:
|
||
|
||
Scroll horizontally
|
||
Only one category selected at a time
|
||
Selected category has:
|
||
thicker border
|
||
slight shadow
|
||
scale animation
|
||
|
||
Selecting a category filters the visible tasks.
|
||
|
||
Task List
|
||
|
||
Vertical scrolling list.
|
||
|
||
Each row contains:
|
||
|
||
Left
|
||
|
||
Checkbox
|
||
|
||
States:
|
||
|
||
Empty
|
||
Checked
|
||
|
||
Checking a task should:
|
||
|
||
Strike through title
|
||
Reduce opacity
|
||
Optionally move task to completed section
|
||
Center
|
||
|
||
Task title
|
||
|
||
One line
|
||
|
||
If text exceeds width:
|
||
|
||
Truncate with ellipsis
|
||
Right
|
||
|
||
Three-dot overflow menu
|
||
|
||
Menu options:
|
||
|
||
Edit
|
||
Delete
|
||
Duplicate
|
||
Mark Complete
|
||
Change Category
|
||
Change Priority
|
||
Floating Action Button
|
||
|
||
Position:
|
||
|
||
Bottom-right
|
||
|
||
Shape:
|
||
|
||
Rounded square or circular
|
||
|
||
Color:
|
||
|
||
Primary accent (pink/red in sketch)
|
||
|
||
Icon:
|
||
|
||
Function:
|
||
|
||
Open Add Task Screen.
|
||
|
||
Screen 2 — Add New Task
|
||
|
||
Presented as a full screen.
|
||
|
||
Header
|
||
|
||
Same styling as home screen.
|
||
|
||
Contains:
|
||
|
||
Logo
|
||
|
||
TODO
|
||
|
||
Title
|
||
|
||
Add New Task
|
||
|
||
Category Selector
|
||
|
||
Horizontal row of colored circles.
|
||
|
||
User selects one.
|
||
|
||
Selection should update instantly.
|
||
|
||
Required field.
|
||
|
||
Task Name
|
||
|
||
Single-line text input.
|
||
|
||
Placeholder:
|
||
|
||
"Task name"
|
||
|
||
Required.
|
||
|
||
Maximum:
|
||
|
||
100 characters.
|
||
|
||
Subtasks
|
||
|
||
Section below task name.
|
||
|
||
Initially contains one button.
|
||
|
||
"+ Add Subtask"
|
||
|
||
Pressing button adds:
|
||
|
||
□ Subtask text field
|
||
|
||
Unlimited subtasks allowed.
|
||
|
||
Users can remove subtasks individually.
|
||
|
||
Date & Time
|
||
|
||
Single horizontal row.
|
||
|
||
Components:
|
||
|
||
Due Date field
|
||
|
||
Opens date picker.
|
||
|
||
Due Time field
|
||
|
||
Opens time picker.
|
||
|
||
Calendar button
|
||
|
||
Alternative method for selecting date.
|
||
|
||
Priority
|
||
|
||
Dropdown menu.
|
||
|
||
Options:
|
||
|
||
None
|
||
Low
|
||
Medium
|
||
High
|
||
Critical
|
||
|
||
Each priority has a corresponding color.
|
||
|
||
Description
|
||
|
||
Large multiline text area.
|
||
|
||
Placeholder:
|
||
|
||
"Add description..."
|
||
|
||
Maximum:
|
||
|
||
1000 characters.
|
||
|
||
Optional.
|
||
|
||
Buttons
|
||
|
||
Bottom aligned.
|
||
|
||
Submit
|
||
|
||
Primary button.
|
||
|
||
Creates task.
|
||
|
||
Returns to To-Do screen.
|
||
|
||
Cancel
|
||
|
||
Secondary button.
|
||
|
||
Discard changes.
|
||
|
||
Return without saving.
|
||
|
||
Screen 3 — Calendar
|
||
|
||
Displays scheduled tasks.
|
||
|
||
Header
|
||
|
||
Centered title:
|
||
|
||
Calendar
|
||
|
||
Date Strip
|
||
|
||
Horizontal row.
|
||
|
||
Shows days of current month.
|
||
|
||
Example:
|
||
|
||
1 2 3 4 5 6 7 8 9
|
||
|
||
Requirements:
|
||
|
||
Scrollable horizontally.
|
||
|
||
Current day highlighted.
|
||
|
||
Selecting a day refreshes task list.
|
||
|
||
Month Label
|
||
|
||
Displayed beneath date strip.
|
||
|
||
Example:
|
||
|
||
JAN 2026
|
||
|
||
Centered.
|
||
|
||
Calendar Body
|
||
|
||
Large content area.
|
||
|
||
Initially displays:
|
||
|
||
Tasks scheduled for selected day.
|
||
|
||
Each item includes:
|
||
|
||
Category color
|
||
Task title
|
||
Time
|
||
Completion status
|
||
|
||
If no tasks:
|
||
|
||
Display
|
||
|
||
"No tasks scheduled."
|
||
|
||
Task Object
|
||
|
||
Each task should contain:
|
||
|
||
{
|
||
"id": "",
|
||
"title": "",
|
||
"description": "",
|
||
"category": "",
|
||
"priority": "",
|
||
"completed": false,
|
||
"dueDate": "",
|
||
"dueTime": "",
|
||
"subtasks": [],
|
||
"createdAt": "",
|
||
"updatedAt": ""
|
||
}
|
||
Categories
|
||
|
||
Each category consists of:
|
||
|
||
{
|
||
"id": "",
|
||
"name": "",
|
||
"color": "#HEX"
|
||
}
|
||
|
||
Example:
|
||
|
||
Work
|
||
|
||
Red
|
||
|
||
Personal
|
||
|
||
Green
|
||
|
||
School
|
||
|
||
Blue
|
||
|
||
Shopping
|
||
|
||
Orange
|
||
|
||
Health
|
||
|
||
Purple
|
||
|
||
Finance
|
||
|
||
Yellow
|
||
|
||
Task States
|
||
|
||
A task can be:
|
||
|
||
Pending
|
||
|
||
Empty checkbox
|
||
Normal text
|
||
|
||
Completed
|
||
|
||
Checked checkbox
|
||
Strikethrough
|
||
Reduced opacity
|
||
|
||
Overdue
|
||
|
||
Red due date
|
||
Warning indicator
|
||
|
||
Due Today
|
||
|
||
Blue highlight
|
||
|
||
High Priority
|
||
|
||
Priority badge
|
||
Interactions
|
||
Tap Task
|
||
|
||
Opens edit screen.
|
||
|
||
Long Press Task
|
||
|
||
Selection mode.
|
||
|
||
Allows:
|
||
|
||
Delete multiple
|
||
Complete multiple
|
||
Change category
|
||
Change priority
|
||
Swipe Left
|
||
|
||
Delete task.
|
||
|
||
Swipe Right
|
||
|
||
Complete task.
|
||
|
||
Pull Down
|
||
|
||
Refresh list.
|
||
|
||
Category Tap
|
||
|
||
Filter tasks instantly.
|
||
|
||
FAB Tap
|
||
|
||
Open Add Task screen.
|
||
|
||
Submit
|
||
|
||
Validate required fields.
|
||
|
||
Save.
|
||
|
||
Return to task list.
|
||
|
||
Settings Screen
|
||
|
||
Although not drawn, the navigation implies a settings page containing:
|
||
|
||
Dark Mode toggle
|
||
Notification settings
|
||
Reminder preferences
|
||
Default category
|
||
Sort tasks by:
|
||
Date
|
||
Priority
|
||
Alphabetically
|
||
Creation date
|
||
Backup & Sync
|
||
About
|
||
Visual Style
|
||
Clean, minimal interface with ample whitespace.
|
||
Rounded corners (16–20 px) for cards, buttons, and input fields.
|
||
Consistent spacing (8 px grid) and typography hierarchy.
|
||
Category colors should be used sparingly for chips, icons, and badges to avoid overwhelming the interface.
|
||
Subtle animations (150–250 ms) for navigation, button presses, filtering, and task completion to create a responsive feel without distraction. |