Devlog #6
Today, i decided to change the theme and color palette of the website and mind-set to add more animations!

I selected a colour palette with a bases of dark-theme which is more comfortable for the users. So i changed white-purple theme into black-blue theme. So i selected colours for all the elements and added box shadow and border outline and element shadow effect.

Then i changed the PIN screen buttons into circle from a semi-rectangular shape with suitable colours and hovering effects, Then i added a simple emoji icon on the PIN screen which gave more attraction and fill up the empty space. Put all the PIN screen elements such heading and subheadings, buttons and PIN input area in a box containing a special border and effect!

A added a simple transition animation between two sections (PIN Screen and Main screen) like fadeIn and fadeout animation effect!

Also added the colour effect for the PIN input box that indicates the correct PIN with green and incorrect with a shake animation with red colour effect which made the PIN screen more attractive and modern look, i also added a cyan colour effect to the input when the user clickes a number button.

Then change the empty state into new modern with new text format. As well as added a icon emoji on the each list menu like a pointer.

As well as changed the date format 3/8/2026 into 03-Aug-2026 which make the user more easier to understand the date.

Iam thinking to change the input text box into a modern look, so changed the width of the box into small and hide the submit button, the box will expand and show the submit button when the user focus on the box, and also added a ‘blur()’ in JS to came back to small size when the user clicks the submit button

Then finally added a animation thats perfectly matches for adding or removing list menu

As well as i choose some fonts style from google.fonts.com and decided to use in the website.