Features
Menu highlighting
Location: in Navigation bar or Navigation sidebar on every page
Features: The navigation will highlight the menu item corresponding to the current page
Same as delivery checkbox
Location: in Order page (order.html#same-as-delivery)
Note that normally the checkbox isn't shown in the form. User has to choose "Delivery" as the method of delivery in order to show the checkbox. The checkbox is located below the billing address.
Features: Allow user to quickly fill Billing address with Delivery address if Delivery address has been given.
Variable length credit card number
Location: in Order page (order.html#credit-card-number)
Note that normally the credit card number textbox isn't shown in the form. User has to choose "Online" as the mode of payment in order to show the three credit card type options and the credit card number textbox. The user also has to choose one of the three credit card type before being able to input the credit card number.
Features: Allow user to choose between three credit card type, and the limited length of the credit card number will adapt to the selected type.
Image banner
Location: in Homepage (index.html#banner)
Features: The banner will show some featured images of products, and will automatically change image after five seconds. There are some control buttons for user to manually switch images.
Product cards
Location: in Homepage (index.html#product-card)
Features: a product card consists of a product image and several product tags. Each tag represent different variations of the product. When user click on a tag, the image will change to the corresponding product variation.
Order form with image
Location: in Order page (order.html#product-selection)
Features: After user choosing ice-cream type and flavor, the corresponding image of the selected product will be shown.
Navigation sidebar
Location: on every page, with window width less than 768px. Accessing navigation sidebar by clicking the hamburger menu on the top left corner
Features: Navigation sidebar are used in place of normal navigation bar when the window width is small. The sidebar will open with an overlay when user clicks the hamburger menu. It will close when user clicks the close button, clicks outside the sidebar, or resizes the window to be wider than 768px.