Contributing with a Holodex for the community

Hello everyone, I have recently decided to take a break from drawing and fan arts for Holozing, to focus on another of my passions: programming. One of the characteristics that attracts me to this project is its similarity to Pokemon. Like any fan of this iconic saga, you will remember the Pokedex, that small device that the main character carried with him to obtain information about each Pokémon. Inspired by this, I decided to contribute to the community by creating an equivalent for Holozing, which I have called Holodex.

The Holodex is a simple interface that displays information about the creatures in the game. At the moment, there are only four creatures on the official site, but I plan to keep the Holodex updated as more are added.

I have uploaded this project to my GitHub repository link, where anyone can view the code. It is a fairly simple project, for which I have only used HTML, CSS and JavaScript. I based it on a Pokedex template made by a fan link.

As for the design, I started on the left side, where I added the “Z” for Holozing, accompanied by four circles that represent the colors of each Holozing element. Next, there is a screen where you can see the image of the searched creature, on an animated colored background. On the right side, I added a field to search by name and a panel to display information related to the creature.

A part of the code made is the one I used for the background animations I used the following CSS code:

.animategreen {
  background: linear-gradient(300deg,rgb(8, 82, 1),rgb(153, 245, 135),rgb(0, 255, 13));
  background-size: 180% 180%;
  animation: gradient-animation 2s ease infinite;
}

.animatered {
  background: linear-gradient(300deg,rgb(82, 1, 1),rgb(245, 135, 135),#a10b00);
  background-size: 180% 180%;
  animation: gradient-animation 2s ease infinite;
}

.animateyellow {
  background: linear-gradient(300deg,rgb(185, 173, 0),rgb(238, 245, 135),#d0ff00);
  background-size: 180% 180%;
  animation: gradient-animation 2s ease infinite;
}
.animateblue {
  background: linear-gradient(300deg,rgb(1, 6, 82),rgb(135, 186, 245),#382e64);
  background-size: 180% 180%;
  animation: gradient-animation 2s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Where I simply add a gradient background and take advantage of the keyframes to give it the effect of movement. The complete design of the Holodex is made with CSS. You can access from the following link:

https://6594551e03e2df195942b593--subtle-kringle-8c7033.netlify.app/

I have used Netlify to deploy the project so you could see its full functionality.

I would like to know what you think, and if you have any suggestions to add they would be greatly appreciated. Later I will also add information about the healers.