Devlog 11 - Frame 5 & Frame 6 & Frame 7

In these days, i made a lot of changes in the project. I started to make the project more attractive and i need to be show up this project as 100% simulation design of ATM Machine. So i decided to use font-family of inter and selected a dark-shade background and theme for the whole project though out the entire project!

In frame 5, As we know this frame is the main frame and important frame which is showing the main options and homepage of this simulation. For that i changed the text interface into more useful and attractive. Currently the text at the top is just “Welcome, {username}” below that “{accountnumber}” just these only, which gives a normal and booring look and not much branding look. I need to make sure that to look and design like a branding project! For that i changed the text into like these “Welcome Back, {username}” then “{accountnumber}” below that i added another text “What would you like to do?”. At last for these texts i added different colour pattern and size according to text importance!

then i spend time to work on the section of buttons, first of all i changed the texts from “Balance” into “Check Balance”, “Deposit” to “Deposit Money”, “Withdraw” to “Withdraw money” and “Quit” into “Exit”. As well as i changed the button background colour and border colours and removes the default border-radius and also added hovering animation which made the buttons more like a ATM.

In frame 6, I added another text below the current text and also changed the input box size and colour as well as the border and background colour and given the same button effects that of the main menu buttons (in frame 5). At there i added few more features - I updated pinInputFun() which is the user enters input with length of 4 letters then the dial-pad’s “Check” button will automatically highlights which the user can understand it time to enter that button and check the PIN. Then also removed the alert notification into that when the user enters wrong password the input password’s colour will change into red and then back to normal after 2 seconds.

In frame 7, I added another text below the current text and changed the button caption. And also designed the texts in different font size and font colour. and Addded the button style as in frame 5.

NB: Tried out a lot of animations and styling ways to occur this output which wasted me a much time to spend on it and need to remove into trash :)