Prototype Design On Figma

[mgao08]

Design Checklist:

Components

• [x] Navbar
• [x] Grid Layout
• [x] Responsive Design (use Bootstrap)
• [x] Card components
• [x] Slider components
• [x] Modal Window

Features

• [x] Authentication (with username & password)
• [x] Authorization (add roles such as Admin, User, Guest) -> Extra sections for Admin Panel

Figma Link To Prototype: https://www.figma.com/file/hVhau3YhArt2l9DgEgwI0z/Term-Project-Design

[mgao08]

Navbar will holds only links to other section (as well as the login/logout buttons).

• Navbar will be a vertical side-bar for large screen size and above.
• For middle screen size and below, it will be toggled as a full-screen menu by hamburger icon on the top-right.
• Will need to check for logged in or not & roles in order to toggle the display of Dashboard function & Admin panel

Grid layout & responsive design are automatically applied if we use Bootstrap and implement rows for each module.

Card component will be used in holding the Sudoku puzzle.

• Difficulty & level will goes into Card Header
• Puzzle Panel (square) will goes into Card Body
• Other informations will to Card Footer as reminder to the user.
  • Example: number of errors made, currently playing with pen/pencil

Modal window act as a reminder during registration & leaving current section during a game.

• During registration: user finished inputting username & password -> click on register button -> modal pops out with Terms & Policy -> check "I read the Terms & Policy" -> click "Okay.
• During a game: the user clicks on "Back" on top-left OR any other link in the Navbar -> toggle modal "Are you sure you wanna leave? You progress will not be saved." -> click "Okay" -> redirect.

(Below Are Under Construction) Slider components can fit in the non-logged in home page, as a description area including huge texts, pretty backgrounds about features of this website.