Shopping website with design inspired by the STALKER video game. Done for study as first semester work during the second university course in Java development.
First page to see after launch. Here we can both log in to an existing account, or, if you don't have one, go to the registration page. Also, authentication cookie is created, to avoid constant re-login.
Mobile-size variant, as all the pages are perfectly scaled automatically :
Registration page required to create new accounts. If registration is successful, the newly added user is saved in the database.
After successful authentication, you are taken to the profile page:
Mobile automatically scaled variant:
Here, by pressing according buttons, you can change avatar, go to the catalog and cart pages or log out of the account. Also, you can change avatar by pressing on your actual avatar image.
So, let's try it. After clicking, we get to the photo upload page:
Upload button appear only when file is chosen:
And then you are redirected bach to the profile page, with a fresh image displayed:
Pretty cool! This time let's try to press the 'delete profile image' button:
That's it! Now, image is back to the default one.
Let's move on to the catalog page:
A bunch of items present here:
Mobile-scaled variant:
Here we can select items and add them to a cart.
We can click on any item, and it's information page will open, in which we can also add it to cart:
(Do not worry, page is conveniently scrollable)
In catalog or cart pages we could notice that when you scroll through them, there is a button in right bottom corner allowing you to quickly return to the top of a page:
Let's add Gauss gun to the cart.
And then go check the cart page.
Looks like it's too expensive... I think I'll pick something else:
Here we go. As you can see, here is total cost, buttons to remove one item, to remove all and to buy them. Let's delete one item. Also notice that total price and item count is updated according to user's actions.
After buy button press cart is emptied:
Also, here is a mobile-sized variant:
Finally, let's sign out of our profile:
As the result we are redirected back to the 'Sign in' page:
The site icon was added, so you can see it in the tab bar:
Note, that every button have hover effect:
The same goes for pushing a button, but with a slightly lighter color:
As you can see, our project uses user-specific tokens stored among browser Cookies to automatically authenticate users:
Also, the application has animations when removing items from the cart, or after image is selected.