UI refresh: firmware-style animated hero + motion (WebPage) - #2819
UI refresh: firmware-style animated hero + motion (WebPage)#2819vnxdtzip wants to merge 3 commits into
Conversation
Preserves the in-progress webpage/ui-refresh work (components + Icon.svelte) so it can be merged with the latest origin/WebPage instead of being lost.
Resolved conflicts favoring the local UI-refresh redesign for presentational files, while pulling in online updates elsewhere: - store.ts: kept the redesign's added Page.Other enum value. - flasher: adopted the online firmware download host (dl.bruce.computer), dropping the temporary CORS-proxy workaround. - Components (NavLink, Card, SectionBackground, BoardCard) and routes (+layout, +page, appstore, boards, donate, my_bruce): kept the redesign. Note: online-only additions in the redesigned layout/home/my_bruce pages (e.g. Shop/Theme-Builder nav links, my_bruce Navigator modal) were not re-ported and can be re-added on top of the redesign if wanted.
Interface polish for the homepage, inspired by esp32marauder.com while keeping Bruce's purple/black palette. - Replace the fading device-image carousel with a DeviceScreen component that faithfully mocks the firmware UI: the icon-carousel main menu (WiFi/BLE/RF/ RFID icons matching the drawIcon shapes, chevrons, name, status bar, purple frame) then a WiFi scan screen with the titled frame, inverted rows and the signal-bar / lock icons the device draws. - Add a reusable `reveal` scroll action + motion utilities in app.css (entrance fade-up, terminal cursor, scanline, hover glow); wire them into the hero, feature grid, news and help sections. All gated by prefers-reduced-motion. - Primary button and interactive panels now lift + glow on hover. - Add the "Buy our Board HERE" hero CTA (shop.bruce.computer) with a new cart icon in the local Icon set. - Update the device/PCB product renders in static/img.
screen-capture.webm |
|
There are a few things I like, but unfortunately quite a few thinks I think miss the mark. OverallThis new design is so dark, where has the purple gone! I do like the more squared off buttons and top nav menu. I never touched those areas after the last person to work on the main theming other than to fix issues with the correct pages being selected. References to Svelt HomepageThe Bruce screen looks cool, but now we have lost the showcase of devices running Bruce. Compatible Devices looks so dull, nothing really stands out. FlasherA black and white page, looks bland. Did you theme the flasher itself? It was/is styled to match the flasher page. 
App StoreSorry to say, again a very bland page. There is an issue with the vertical alignment of the panel content: 
Device ImagesYou seem to have use AI to enhance the devices, some are OK, some are just wrong, they don't look like the actual devices! Smoochiee V2What happened to the button area!
ReaperJust wrong!
It lost an antenna and buttons are wrong.
CardputerTwo 5's, ABDF instead of ASDF and why did whatever AI engine you use decide to put 'SPAMS' across the top of the ESP32 module, I guess it might have been trying for 'STAMP'. I do love the silver keys though!
|
2 participants
Proposed Changes
A UI refresh of the website, kept on the existing purple/black palette and brought up to date with the latest
WebPage.Redesign (components + routes): a consistent design-token system in
app.css(panels, buttons, chips, eyebrow labels) applied across the layout, home, boards, flasher, app store, donate and my_bruce pages.Homepage hero now shows a DeviceScreen mock that faithfully reproduces the Bruce firmware UI instead of a fading image carousel — the icon-carousel main menu (WiFi / Bluetooth / RF / RFID icons matching the firmware's
drawIconshapes, chevrons, name label, status bar, purple frame) followed by a WiFi-scan screen with the titled frame, inverted rows and the signal-bar / lock icons the device draws. Pure SVG/CSS, no photos.Motion (inspired by esp32marauder.com, palette unchanged): a reusable
use:revealscroll action +app.cssutilities — entrance fade-up, blinking terminal cursor, CRT scanline, hover lift/glow — wired into the hero, feature grid, news and help sections. Primary buttons and interactive panels lift + glow on hover. Everything is gated byprefers-reduced-motion.Also adds the "Buy our Board HERE" hero CTA (shop.bruce.computer) with a new cart glyph in the local icon set, and refreshed device/PCB renders in
static/img.Types of Changes
UI/UX redesign + motion. No functional/behavioural changes to the flasher or data.
Verification
npm install && npm run dev, open the site: the hero plays the firmware-style device screen, sections reveal on scroll, buttons/cards glow on hover, and the "Buy our Board HERE" button links to the shop. With reduced-motion enabled everything renders static with no hidden content.Testing
Manual, via the dev server. No automated tests in this project.
Linked Issues
None — follow-up polish on the web UI.
User-Facing Change
Further Comments
Targets
WebPage(the site branch) and is already merged up to the latestWebPage. A couple of online-only extras (Theme Builder nav link, my_bruce Navigator modal) can be layered back on top of the redesign in a follow-up.