Primarily wanted to add dark mode, but also took the opportunity to clean up some of the UX/UI of the controller's pages.
At some point this will need to be converted to React in the near future. Due to the nature of the initial build of the HTML dark mode is a bit wonky but the primary goal of not being blinded whilst in a dark hot tub or elsewhere is achieved.
Stylistically some of the CSS and design queues were updated to be cleaner, but work remains. For example, the buttons on the controller for temp/air temp, etc. need be improved.
moved VA logo from background to the header along side the page title, and added a subtitle
made this a link back to the home page
improved navigation and introduced a slide-in-out animation for navigation
added dark mode toggle in header which is stored in localstorage (which is why we need to switch to react as this needs to be set for each html page)
converted the menu hamburger to an HTML character allowing for the removal of menu.png
with VA logo being used in a smaller scale it could be rastered out smaller
^ should maybe be integrated into the favicon
updated the styling of toggles and sliders in general
removed the bottom border on Sections and converted the differentiation for sections to a contrasting background color instead
introduced ::root in the main.css to control and allow for faster color changes and future-proof for potential introduction of themes
adjusted the blue of the theme color in html element to match that of the blue in the header element
moved the Display component of the main page — which shows the current temp of the tub — to be immediately below the header, perhaps in the future it may be merged into the following section with the three Temp readings to improve the look of the app
adjuted the styling and some inconsistencies with buttons
Primarily wanted to add dark mode, but also took the opportunity to clean up some of the UX/UI of the controller's pages.
At some point this will need to be converted to React in the near future. Due to the nature of the initial build of the HTML dark mode is a bit wonky but the primary goal of not being blinded whilst in a dark hot tub or elsewhere is achieved.
Stylistically some of the CSS and design queues were updated to be cleaner, but work remains. For example, the buttons on the controller for temp/air temp, etc. need be improved.