Devlog #7
Today, i added lock emoji icon moeving with overlapping effect animation in PIN screen using CSS and CSS function keyframe. At that time i got another idea why should i add something like this animation on the background, So i just created a tiny-dot and added the same animation function then i connected with JS to visible multiple tiny-dots at a time using for-loop with same animation. Btw i used a root value in CSS for the both animation to delay the animation according to there class count, which will gave the animation at different timeing!

Then i changed the input box of the PIN screen into a completely invisible and only shows the dots so PIN with colours (as green for correct and red with shakeing the dots animation for incorrect PIN)..

I got a inspiration from a reel that i saw on Instagram today where the website is completely with theme of term GLASSMORPHISM. then i thought to add this theme into my project so changes the opacity of everything into .7 and remove some of the border and background colour and some with background colour with transparent!

Then I added a header at main screen with fixed position of the main and sub headings with the same theme glassmorphism effect!