Added eventlistener for visibilityChange to detect and to refresh the browser window when user opens/tabs to the browser window of the app, in order to show latest data
Recap: I started building psi.sg on 12 Oct and now 2 weeks later I think I'm finally done building it! 🥳🎉
Fixed typos, text alignment in color banding box
Added slideout transitions - it 99% mimics a carousel slider now
Added box-header to cards to add salience to header titles
Tweaked layout/text for better info hierarchy - improved white space/margins of color banding box, moved Health Advisory box up for more prominence, updated PSI "How to" text with example
Tweaked app icon yet again - made it bigger and more centered for more salience on phone screen
Tweaked favicon to just show "PSI" instead of "PSI SG" so that it's more salient
Added Font Awesome icons to replace unicode symbols
Added color banding dropdown info based on feedback
Tweaked the app icon, logo and favicon for the LAST TIME - gave the icon a dark green cos the white just wasn't salient at the size of the app icon on the phone screen
Trying to get exiting number to slide out while new number slide in, using CSS animation/transition but stuck 😤
4 generations of PSI.SG logo/app icon
4th iteration of PSI.SG logo and app icon. I think I'm done with designing this, not mission critical work!
Changed app icon to green version, shifted dot indicators, some spacing fixes
Changed favicon to something waaay simpler cos no one can see the details when it's just 32px
Selected 2 app icons generated by DALL-E 3 and cleaned up the design. Now faced with a choice... 🤔
Fixed positions of elements and weird margins/spacing on desktop+mobile for the FINAL time. Turns out, adding position: absolute; to app element was the fundamental mistake
Added swipe left and right gestures using vue2-touch-events package, but not perfect, need a carousel to complete the UX
Using Microsoft Bing to generate the app icons also mean direct click through to Microsoft Designer, the AI graphic design app to automate design assets for social media, ads, site banners, video reels, etc!
App icon and logo brainstorming with DALL-E 3.. super impressed! It's an obvious step up from the previous
Set psi.sg repo to public and open source - scared! 😅 - https://github.com/jasonleow/psisg/
Various fixes - footer and box margins, mobile responsiveness, proper positioning of finger icons
Added finger gesture icon with pulsing CSS animation, and made the regional readings into buttons like the buttons above, in order to signal interactivity
Prettified the top toggle bar to more clean buttons, and slight box-shadow to indicate which one is active ('pressed down')
