A project by Peme969 and Z!

This is a browser-based avatar editor. It has a scrollable item list, layered preview, theme toggle, per-category random selection, and a live price display for the chosen items.

Live Demo: avatar.peme969.dev

• Layered avatar preview: body, clothing, neck, hair, background, nose/mouth, eyes, face, hat.
• Sidebar with category buttons to filter items.
• Item cards show an image, name, XP, and coin cost.
• Random button in each category to select a random item.
• Live total cost display that updates when you pick items.
• Dark and light themes with preference saved in localStorage.
• Layout works on both desktop and mobile screens.
• CSS variables for theme customization.

• Save and load avatars as JSON or an image.
• Allow users to upload custom images for layers.
• Multiple saved avatar slots.
• Drag-and-drop to reorder layers.
• More backgrounds, clothing, and accessories.

HTML

• .item cards for each avatar part.
• Stacked <img> layers for the preview.
• Total coin display below the preview.

CSS

• Scrollable inventory grid on the left.
• Fixed avatar preview on the right.
• Light and dark themes controlled by CSS variables and a .dark class.

JavaScript

• Click events update avatar layers.
• Randomizer picks an item in the current category.
• Updates total cost after each change.
• Category filter buttons change the displayed items.
• Theme toggle saves preference in localStorage.

Example .item card:

<div class="item eyes">
  <img class="item-img" src="path/to/image.png" />
  <span class="item-description">Name</span>
  <span class="item-xp">0</span>
  <span class="item-coins"><span class="coin-img"></span>125</span>
</div>