Sprint Essay 2 about Building Page Themes by FZU Flying Club

---

This assignment belongs to which course	EE308FZ Software Engineering https://bbs.youkuaiyun.com/forums/ssynkqtd-04
Where this assignment is required	https://bbs.youkuaiyun.com/topics/617606376
Team name	FZU Flying Club
The goal of this assignment	Help students understand Alpha Sprint and promote course project progress
Other references	None

1 Project burn chart

2 Video demonstration of Building Page Themes

Sprint Plan 2 demonstration video

3 Task code embedding area

theme:
  name: material
  theme: name: material
    - scheme: default # day mode
      primary: deep purple # upper
      accent: blue # highlight colour for interactive elements such as links
      toggle.
        icon: material/weather-night # icons
        name: switch to night mode # mouse hover alerts
    - scheme: slate # night mode
      primary: indigo
      accent: amber
      toggle: icon: material/weather-sunny
        icon: material/weather-sunny
        name: switch to day mode
  features.
    - navigation.tabs # Use tabs to sort by categories
    - navigation.top # Button to go back to top appears on swipe up
    - navigation.indexes # Tabs will have an index.md instead of opening the first post when opening a tab.
    - navigation.path #
    - navigation.top #
    - search.suggest # Suggests completing the word when searching for some letters.
    - search.highlight # Highlight the keywords of the searched article.
  language: zh # Some suggestive text will be in Chinese.
  icon: # An alternative to the 'clound' icon in the top-right corner.
    repo: fontawesome/brands/github
  custom_dir: overrides
edit_uri: edit/main/docs # link to jump to with edit button

## [bottom-left corner]
copyright: © 2023 FZU-MIECer Copyleft ## Copyright statement in the lower left corner
## [lower right corner]
extra:
  social: # Icon
    - Icons: fontawesome/brands/github
      link: https://github.com/MIECer/FZU-flying-book
      Name: GitHub | FZU-flying-book
    - Icon: fontawesome/brands/docker
      Link: https://caihanlin.com/
      Name: Website | HanlinCAI
    # - icon: fontawesome/brands/twitter
      # - link: https://twitter.com/lancecai2002
      # - Name: Twitter | lancecai2002
    # - icon: fontawesome/brands/bilibili
      # link: https://space.bilibili.com/594030035
      # name: Bilibili | lance cai # mouse hover alerts
    # - icon: fontawesome/brands/linkedin
      # link: https://www.linkedin.com/in/hanlin-cai-07b53b23b/
      # name: Linkedin | hanlin-cai # mouse hover tip
    
# ======================================================

# [Extensions]
plugins.
  - search: # Chinese search is not supported yet. You can set the language when it is supported.
    # insider already supports Chinese word search https://squidfunk.github.io/mkdocs-material/blog/2022/chinese-search-support/
      lang.
        - ja
        - ja
  - tags # Add tags to a single post https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags
markdown_extensions.
  - pymdownx.arithmatex: # latex support
      generic: true
  - attr_list # Add {width="300"} to the back of an image to set the size.
 

Comment:

The code completes the content of sprint task 2, completes the task of building the page theme, implements the site’s day and night mode switching, simply builds the first level of the title, the menu bar and other content, and sets up the hover and the clicked item icons and buttons when the button colour change. The purpose is to enhance the user experience and improve the comfort of browsing the website.

4 Task code github repository

Link：
https://github.com/MIECer/FZU-flying-book

*Need VPN

5 Test Report

1. Introduction

We performed comprehensive functionality and performance testing of the website page theme build project. The project included testing of plugins such as day and night mode, title bar, etc.

2. Test Items

2.1 Day and night mode

2.1.1 Functionality Tests

1. Switching Mode: Test whether the user can successfully switch the day and night mode.
   Expected Result: Smooth transition of page elements during switching, without obvious flickering or misalignment.

2. Save Settings: After refreshing the page, test whether the user’s mode settings are correctly saved.
   Expected Result: After refreshing, the page should remain in the mode last selected by the user.

2.1.2 Compatibility Testing

1. Different browsers: Test the compatibility of the day and night mode on common browsers (Firefox, Safari, Edge).
   Expected results: Mode switching should be consistent across browsers and there should be no display anomalies.

2.2 Title Bar Plugin

2.2.1 Functional Tests

1. Display title: Test whether the title bar plugin displays the page title correctly.
   Expected Result: The title should be displayed at the top of the page in a legible font.

2. Header Links: Tests whether users can quickly jump to other pages via the title bar.
   Expected Results: After clicking on the title, the page should smoothly jump to the page with the relevant link.

3. Test Results

According to the above tests, the Day & Night Mode and Title Bar plugins of the Website Page Theme Builder project perform well in terms of functionality and compatibility. No obvious errors or anomalies were found.

4. Pending Issues

No obvious problems were found.

5. Recommendations and improvements

Based on the test results, the following improvements are recommended for consideration:

1. Add animation effect: Add gradient effect when switching between day and night modes to improve user experience.
2. Responsive design: further optimise the display effect on different devices to ensure that it can be displayed well in various resolutions.

6. Conclusion

After thorough testing, the website page theme building project performs well in terms of day and night mode and title bar plugin. It is recommended to continue to be sensitive to user feedback and fix any problems found in a timely manner.