Index/polyplus
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: redesigned avatar sandbox to look like avatar page

Browse source
This commit is contained in:
Index 2024-07-04 05:28:02 -05:00
parent e8ee269945
commit 870def2dc1
1 changed files with 31 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
resources/avatar-sandbox.html
View file

@ -112,14 +112,13 @@
<div class="colorpicker-color" style="background-color: #e8bac8"></div> <div class="colorpicker-color" style="background-color: #e8bac8"></div>
</div> </div>
</dialog> </dialog>
<span class="badge bg-warning mb-2" id="view-cache" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-title="Debug: Item Cache" data-bs-placement="right">Poly+</span>
<h4 class="d-none d-lg-block">
Avatar Sandbox
</h4>
<div class="row"> <div class="row">
<div class="col-12 col-lg-3"> <div class="col-12 col-lg-3">
<div class="card mcard mb-3"> <div class="card mcard mb-3">
<h6 class="card-header">
<i class="fad fa-user-crown"></i>
Avatar Sandbox
<span class="badge bg-warning float-end" id="view-cache" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-title="Debug: Item Cache">Poly+</span>
</h6>
<div class="card-body"> <div class="card-body">
<iframe id="viewFrame" style="width: 100%; height: 314px; border-radius: 0.65rem;"></iframe> <iframe id="viewFrame" style="width: 100%; height: 314px; border-radius: 0.65rem;"></iframe>
<div id="options"> <div id="options">
@ -180,8 +179,8 @@
<button class="btn btn-primary" id="load-asset">Wear</button> <button class="btn btn-primary" id="load-asset">Wear</button>
</div> </div>
<hr class="mt-2 mb-3"> <hr class="mt-2 mb-3">
<div class="card mcard mb-3"> <div class="card mcard mb-1">
<h6 class="card-header"> <h6 class="card-header text-center">
<i class="fad fa-palette"></i> <i class="fad fa-palette"></i>
Body Colors Body Colors
</h6> </h6>
@ -213,46 +212,46 @@
--> -->
</div> </div>
<div class="col-12 col-lg-9"> <div class="col-12 col-lg-9">
<ul class="nav nav-pills nav-justified mb-3" id="tabs"> <ul class="nav nav-pills no-shrink avatar-nav-pills nav-justified row" id="tabs">
<li class="nav-item"> <li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link active" data-tab="hat"> <a class="nav-link active" data-tab="hat">
<i class="fas fa-hat-cowboy me-1"></i> <i class="fas fa-hat-wizard me-1"></i>
Hats <span class="pilltitle">Accessories</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link" data-tab="tool">
<i class="fas fa-hammer me-1"></i>
Tools
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-tab="face">
<i class="fas fa-face-smile me-1"></i>
Faces
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-tab="shirt"> <a class="nav-link" data-tab="shirt">
<i class="fas fa-tshirt me-1"></i> <i class="fas fa-tshirt me-1"></i>
Shirts <span class="pilltitle">Shirts</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link" data-tab="pants"> <a class="nav-link" data-tab="pants">
<i class="fas fa-socks me-1"></i> <i class="fas fa-socks me-1"></i>
Pants <span class="pilltitle">Pants</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link" data-tab="tool">
<i class="fas fa-hammer me-1"></i>
<span class="pilltitle">Tools</span>
</a>
</li>
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link" data-tab="face">
<i class="fas fa-face-smile me-1"></i>
<span class="pilltitle">Faces</span>
</a>
</li>
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
<a class="nav-link" data-tab="torso"> <a class="nav-link" data-tab="torso">
<i class="fas fa-cube me-1"></i> <i class="fas fa-cube me-1"></i>
Torsos <span class="pilltitle">Body Parts</span>
</a> </a>
</li> </li>
</ul> </ul>
<div class="card px-2 pt-2 pb-2 mb-4" style="background: rgba(0, 0, 0, 0.23); border-color: rgba(0, 0, 0, 0.23); border-top-left-radius: 20px; border-top-right-radius: 20px;"> <div class="card px-2 pt-2 pb-2 mb-2" style="background: transparent; border-color: transparent; border-top-left-radius: 20px; border-top-right-radius: 20px;">
<div class="row mb-2"> <div class="row mb-1">
<div class="col-md-4"> <div class="col-md-4">
<div class="input-group"> <div class="input-group">
<select id="item-sort" class="form-select"> <select id="item-sort" class="form-select">
@ -299,7 +298,7 @@
</nav> </nav>
</div> </div>
<h6 class="card-header mb-2"><i class="fad fa-hat-wizard me-1"></i> Wearing</h6> <h6 class="card-header mb-2"><i class="fad fa-hat-wizard me-1"></i> Wearing</h6>
<div class="card px-2 pt-2 pb-2 mb-4" style="background: rgba(0, 0, 0, 0.23); border-color: rgba(0, 0, 0, 0.23); border-top-left-radius: 20px; border-top-right-radius: 20px;"> <div class="card px-2 pt-2 pb-2 mb-4" style="background: transparent; border-color: transparent; border-top-left-radius: 20px; border-top-right-radius: 20px;">
<div class="row alignleft itemgrid" id="wearing"></div> <div class="row alignleft itemgrid" id="wearing"></div>
</div> </div>
</div> </div>