imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Finished equipment userpanel tab + small tweaks

Browse Source
This commit is contained in:
Colin Kallemein
2024-08-28 20:59:43 +02:00
parent 7f3e7df6c3
commit 8aaba2dee4
3 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/gui/partials/Equipment.vue
View File

@ -1,16 +1,16 @@
<template>
<div class="grow flex flex-col w-full h-full relative overflow-auto">
<div class="m-5 relative">
<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-4 flex-wrap max-w-[375px]">
<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-64 my-4 mx-auto" src="/assets/placeholders/inventory_player.png" />
<span class="block">Level 69</span>
<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 m-5">
<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">
@ -62,12 +62,21 @@
</div>
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
</div>
<div class="m-5">
<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]">
<div>
</div>
<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>