2121
2222 ## User Personas
2323
24-- **Student**: The primary user of the fierce-calculator. They require a simple interface to perform basic arithmetic operations to assist with their studies.
24+- **Student**: The primary user of the todo-design calculator. They require a simple interface to perform basic arithmetic operations to assist with their studies.
2525
2626 ## Visuals Colors and Theme
2727
28-- **primary**: #4A90E2 (a calm blue, representing trust and reliability)
29-- **primary_light**: #A6C8FF (a lighter tint of the primary color for hover states)
30-- **secondary**: #F5A623 (a warm amber for emphasis and highlights)
31-- **accent**: #D0021B (a vibrant red for call-to-action buttons and active states)
32-- **highlight**: #F8E71C (a bright yellow for notifications and active indicators)
33-- **bg**: #FFFFFF (a clean white background for clarity)
34-- **surface**: rgba(255, 255, 255, 0.9) (a slightly translucent white for panels)
35-- **text**: #333333 (a dark gray for primary text for readability)
36-- **text_muted**: #777777 (a softer gray for secondary text)
37-- **border**: rgba(0, 0, 0, 0.1) (a subtle gray for borders)
28+- **primary**: #3B5998 (a deep indigo, symbolizing wisdom and reliability)
29+- **primary_light**: #8B9DC3 (a lighter tint of the primary color for hover states)
30+- **secondary**: #FF6F61 (a coral hue for emphasis and highlights)
31+- **accent**: #FFD700 (a vibrant gold for call-to-action buttons and active states)
32+- **highlight**: #FFB347 (a warm orange for notifications and active indicators)
33+- **bg**: #F5F5F5 (a soft gray background for clarity)
34+- **surface**: rgba(255, 255, 255, 0.95) (a slightly translucent white for panels)
35+- **text**: #2C2C2C (a dark charcoal for primary text for readability)
36+- **text_muted**: #6D6D6D (a softer gray for secondary text)
37+- **border**: rgba(0, 0, 0, 0.15) (a subtle gray for borders)
3838
3939 <!-- pagebreak -->
4040
4141 ## Signature Design Concept
4242
43-The fierce-calculator will feature an interactive "floating calculator" design on the homepage. Users will see a 3D calculator model that they can rotate and interact with using their mouse or touch gestures. As users hover over different buttons, the calculator will animate with subtle lighting effects, giving a sense of depth and engagement. The calculator's display will dynamically update with each input, providing immediate feedback. This concept will be implemented using `@react-three/fiber` for the 3D model and `framer-motion` for smooth animations and transitions.
43+The todo-design calculator will feature an interactive "floating notebook" design on the homepage. Users will see a 3D notebook model that they can flip through using their mouse or touch gestures. Each page of the notebook will represent a different arithmetic operation, and as users hover over different sections, the notebook will animate with subtle page-turning effects, giving a sense of engagement and interaction. The notebook's display will dynamically update with each input, providing immediate feedback. This concept will be implemented using `@react-three/fiber` for the 3D model and `framer-motion` for smooth animations and transitions.
4444
4545 ## Interaction Model & Motion Direction
4646
47-The landing page will utilize a "parallax" interaction model. The calculator will appear to float above a layered background that moves at different speeds as the user scrolls, creating a sense of depth. This approach will enhance the visual appeal and provide an engaging first impression. Internal pages, such as settings or history (if added in the future), will adopt a "static" model to prioritize clarity and ease of use.
47+The landing page will utilize a "parallax" interaction model. The notebook will appear to float above a layered background that moves at different speeds as the user scrolls, creating a sense of depth. This approach will enhance the visual appeal and provide an engaging first impression. Internal pages, such as settings or history (if added in the future), will adopt a "static" model to prioritize clarity and ease of use.
4848
4949 <!-- pagebreak -->
5050
No comments yet. Be the first!