When I started out with HTML and CSS back in the day everything I learned was from random bits and pieces of information all over the internet, I’d spend more time than neccesary fiddling with the possibilities instead of actually knowing whats what.
I started by looking how others were solving this problem, there seems to be a common theme. A lot of the password managers tend to go with a interface similar to those we know from popular email clients. Three columns with more detailed views going to the right side of the viewport.
Something I wanted to do different is make it easier. Easier, so that even my grandmother could use it. Without her having to get her little book from under the houseplant. I tried achieving this by simplifying the complete experience. Minus of course that it is based on KeePass. By cutting out the whole panel layout and go for a single list like you would see in the chrome password list.
By simplifying the layout to a list and emphasis on the search. I’m trying to cut out all technicality while still keeping everything available. The goal isn’t to make it better, it’s to make it available to everyone. It’s not removing or adding features they’re all still there. But now likely in a different place you might be used to to remove some of the noise.
The focus was on me getting familiar with html & (s)css, I wanted to learn as much as I could. And try many different solutions to different problems.
The menu bar on the mobile view consists of four buttons. The menu itself stuffed with everything not located elsewhere. The search button, the filter button and last the lock button. For when the paranoia kick in 😅, I’m not here to judge. Or when you’re done using the application.
The list is quite self explanatory. With the logo and name first, followed by their category and then the options for that specific entry. First is ‘copy the username’, then copy the password and lastly options for that entry if you need more.