83 lines
5.2 KiB
Vue
83 lines
5.2 KiB
Vue
<template>
|
|
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
|
<div class="m-4 relative">
|
|
<h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
|
|
<div class="flex justify-center items-center flex-wrap gap-20">
|
|
<div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
|
|
<div class="h-full flex flex-col justify-center items-center">
|
|
<h3>Ethereal</h3>
|
|
<img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
|
<span class="block text-sm">Level 69</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-3 mx-5 mt-2">
|
|
<div class="flex gap-3 justify-center">
|
|
<!-- Helmet -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
|
|
<!-- Head charm -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 justify-center">
|
|
<!-- Bracers -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
|
|
<!-- Chestplate -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
|
|
</div>
|
|
|
|
<!-- Primary Weapon -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 justify-center">
|
|
<!-- Legs -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<!-- Belt/pouch -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
|
|
<!-- Boots -->
|
|
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
|
<img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
|
|
</div>
|
|
<div class="m-4">
|
|
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
|
|
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
|
|
<ul class="p-0 m-0 list-none">
|
|
<li class="leading-6">Health:</li>
|
|
<li class="leading-6">Defense:</li>
|
|
<li class="leading-6">More stats:</li>
|
|
<li class="leading-6">Extra stats:</li>
|
|
</ul>
|
|
<ul class="p-0 m-0 list-none text-right">
|
|
<li class="leading-6">+15</li>
|
|
<li class="leading-6">500</li>
|
|
<li class="leading-6"></li>
|
|
<li class="leading-6"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |