306 lines
No EOL
14 KiB
HTML
Executable file
306 lines
No EOL
14 KiB
HTML
Executable file
<style>
|
||
#options {
|
||
position: absolute;
|
||
bottom: 0;
|
||
margin-bottom: 15px;
|
||
font-size: 1.25rem;
|
||
background: #1a1a1a;
|
||
border-radius: 10px;
|
||
padding: 2.5px;
|
||
font-size: 1.25rem;
|
||
|
||
/*
|
||
button iteration #2
|
||
|
||
font-size: 1.25rem;
|
||
background: #333333;
|
||
border-radius: var(--bs-card-border-radius);
|
||
padding: 2.5px;
|
||
font-size: 1.25rem;
|
||
left: -1px;
|
||
bottom: -1px;
|
||
border-top-left-radius: 0px;
|
||
border-bottom-right-radius: 0px;
|
||
*/
|
||
}
|
||
|
||
#options *:not(input) {
|
||
background: transparent;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
#options *:not(input):not(:nth-child(2)) {
|
||
margin-bottom: 3.5px;
|
||
}
|
||
</style>
|
||
<dialog id="p+body_colors" class="polyplus-modal" style="width: 375px; border: 1px solid #484848; background-color: #181818; border-radius: 20px; overflow: hidden;">
|
||
<div class="row text-muted mb-4" style="font-size: 0.8rem;">
|
||
<div class="col">
|
||
<h5 class="mb-0" style="color: #fff;">Modify Body Colors</h5>
|
||
Selected Body Part: <i id="p+selected-bodypart">none</i>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<button class="btn btn-info w-100 mx-auto" onclick="this.parentElement.parentElement.parentElement.close();">X</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body wrapper">
|
||
<div class="colorpicker-color" style="background-color: #f8f8f8" data-color="#f8f8f8"></div>
|
||
<div class="colorpicker-color" style="background-color: #cdcdcd" data-color="#cdcdcd"></div>
|
||
<div class="colorpicker-color" style="background-color: #111111" data-color="#111111"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff0000" data-color="#ff0000"></div>
|
||
<div class="colorpicker-color" style="background-color: #a34b4b" data-color="#a34b4b"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffc9c9" data-color="#ffc9c9"></div>
|
||
<div class="colorpicker-color" style="background-color: #957977" data-color="#957977"></div>
|
||
<div class="colorpicker-color" style="background-color: #c4281c" data-color="#c4281c"></div>
|
||
<div class="colorpicker-color" style="background-color: #da867a" data-color="#da867a"></div>
|
||
<div class="colorpicker-color" style="background-color: #694028" data-color="#694028"></div>
|
||
<div class="colorpicker-color" style="background-color: #cc8e69" data-color="#cc8e69"></div>
|
||
<div class="colorpicker-color" style="background-color: #a05f35" data-color="#a05f35"></div>
|
||
<div class="colorpicker-color" style="background-color: #7c5c46" data-color="#7c5c46"></div>
|
||
<div class="colorpicker-color" style="background-color: #eab892" data-color="#eab892"></div>
|
||
<div class="colorpicker-color" style="background-color: #da8541" data-color="#da8541"></div>
|
||
<div class="colorpicker-color" style="background-color: #aa5500" data-color="#aa5500"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffcc99" data-color="#ffcc99"></div>
|
||
<div class="colorpicker-color" style="background-color: #e29b40" data-color="#e29b40"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffaf00" data-color="#ffaf00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffb000" data-color="#ffb000"></div>
|
||
<div class="colorpicker-color" style="background-color: #d7c59a" data-color="#d7c59a"></div>
|
||
<div class="colorpicker-color" style="background-color: #f5cd30" data-color="#f5cd30"></div>
|
||
<div class="colorpicker-color" style="background-color: #fdea8d" data-color="#fdea8d"></div>
|
||
<div class="colorpicker-color" style="background-color: #e5e4df" data-color="#e5e4df"></div>
|
||
<div class="colorpicker-color" style="background-color: #c1be42" data-color="#c1be42"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffff00" data-color="#ffff00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffffcc" data-color="#ffffcc"></div>
|
||
<div class="colorpicker-color" style="background-color: #a4bd47" data-color="#a4bd47"></div>
|
||
<div class="colorpicker-color" style="background-color: #7f8e64" data-color="#7f8e64"></div>
|
||
<div class="colorpicker-color" style="background-color: #a1c48c" data-color="#a1c48c"></div>
|
||
<div class="colorpicker-color" style="background-color: #3a7d15" data-color="#3a7d15"></div>
|
||
<div class="colorpicker-color" style="background-color: #4b974b" data-color="#4b974b"></div>
|
||
<div class="colorpicker-color" style="background-color: #00ff00" data-color="#00ff00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ccffcc" data-color="#ccffcc"></div>
|
||
<div class="colorpicker-color" style="background-color: #27462d" data-color="#27462d"></div>
|
||
<div class="colorpicker-color" style="background-color: #287f47" data-color="#287f47"></div>
|
||
<div class="colorpicker-color" style="background-color: #789082" data-color="#789082"></div>
|
||
<div class="colorpicker-color" style="background-color: #9ff3e9" data-color="#9ff3e9"></div>
|
||
<div class="colorpicker-color" style="background-color: #12eed4" data-color="#12eed4"></div>
|
||
<div class="colorpicker-color" style="background-color: #f2f3f3" data-color="#f2f3f3"></div>
|
||
<div class="colorpicker-color" style="background-color: #00ffff" data-color="#00ffff"></div>
|
||
<div class="colorpicker-color" style="background-color: #008f9c" data-color="#008f9c"></div>
|
||
<div class="colorpicker-color" style="background-color: #04afec" data-color="#04afec"></div>
|
||
<div class="colorpicker-color" style="background-color: #80bbdb" data-color="#80bbdb"></div>
|
||
<div class="colorpicker-color" style="background-color: #b4d2e4" data-color="#b4d2e4"></div>
|
||
<div class="colorpicker-color" style="background-color: #0d69ac" data-color="#0d69ac"></div>
|
||
<div class="colorpicker-color" style="background-color: #1b2a35" data-color="#1b2a35"></div>
|
||
<div class="colorpicker-color" style="background-color: #afddff" data-color="#afddff"></div>
|
||
<div class="colorpicker-color" style="background-color: #6e99ca" data-color="#6e99ca"></div>
|
||
<div class="colorpicker-color" style="background-color: #74869d" data-color="#74869d"></div>
|
||
<div class="colorpicker-color" style="background-color: #2154b9" data-color="#2154b9"></div>
|
||
<div class="colorpicker-color" style="background-color: #002060" data-color="#002060"></div>
|
||
<div class="colorpicker-color" style="background-color: #0000ff" data-color="#0000ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #b1a7ff" data-color="#b1a7ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #a3a2a5" data-color="#a3a2a5"></div>
|
||
<div class="colorpicker-color" style="background-color: #6225d1" data-color="#6225d1"></div>
|
||
<div class="colorpicker-color" style="background-color: #b480ff" data-color="#b480ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #8c5b9f" data-color="#8c5b9f"></div>
|
||
<div class="colorpicker-color" style="background-color: #6b327c" data-color="#6b327c"></div>
|
||
<div class="colorpicker-color" style="background-color: #aa00aa" data-color="#aa00aa"></div>
|
||
<div class="colorpicker-color" style="background-color: #635f62" data-color="#635f62"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff00bf" data-color="#ff00bf"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff66cc" data-color="#ff66cc"></div>
|
||
<div class="colorpicker-color" style="background-color: #e8bac8" data-color="#e8bac8"></div>
|
||
</div>
|
||
</dialog>
|
||
<div class="row">
|
||
<div class="col-12 col-lg-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">
|
||
<iframe id="viewFrame" style="width: 100%; height: 314px; border-radius: 0.65rem;"></iframe>
|
||
<div id="options">
|
||
<input name="JSONUpload" type="file" accept="application/json" multiple="false" id="jsonUpload" aria-label="Upload JSON!" style="display: none;" />
|
||
|
||
<label for="JSONUpload" style="display: block;">
|
||
<button aria-label="Upload JSON!" onclick="this.parentElement.previousElementSibling.click()" data-bs-toggle="tooltip" data-bs-title="Upload" data-bs-placement="right">
|
||
<i class="fa-duotone fa-upload"></i>
|
||
</button>
|
||
</label>
|
||
|
||
<button id="jsonSave" aria-label="Save as JSON!" style="display: block;" data-bs-toggle="tooltip" data-bs-title="Download" data-bs-placement="right">
|
||
<i class="fa-duotone fa-download"></i>
|
||
</button>
|
||
|
||
<button id="openNewTab" aria-label="View in a new tab!" style="display: block;" data-bs-toggle="tooltip" data-bs-title="New Tab" data-bs-placement="right">
|
||
<i class="fa-duotone fa-up-right-from-square"></i>
|
||
</button>
|
||
|
||
<button aria-label="View in full screen!" style="display: block;" onclick="document.getElementById('viewFrame').requestFullscreen()" data-bs-toggle="tooltip" data-bs-title="Full Screen" data-bs-placement="right">
|
||
<i class="fa-duotone fa-minimize"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button id="myself" class="btn btn-outline-primary w-100 mb-2">
|
||
<i class="fa-duotone fa-shirt"></i>
|
||
Load Myself
|
||
</button>
|
||
<div class="row mb-3">
|
||
<div class="col">
|
||
<button id="clear" class="btn btn-outline-warning w-100">
|
||
<i class="fa-duotone fa-trash"></i>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
<div class="col">
|
||
<button id="saveOutfit" class="btn btn-outline-success w-100">
|
||
<i class="fa-duotone fa-save"></i>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<hr class="mt-2 mb-3">
|
||
<select class="form-select mb-2" id="load-asset-type">
|
||
<option value="hat" selected>Hat</option>
|
||
<option value="tool">Tool</option>
|
||
<option value="face">Face</option>
|
||
<option value="torso">Torso</option>
|
||
<hr>
|
||
<option value="shirt">Shirt</option>
|
||
<option value="pants">Pants</option>
|
||
<hr>
|
||
<option value="user">User Avatar</option>
|
||
</select>
|
||
<div class="input-group mb-3">
|
||
<input type="text" class="form-control bg-dark" placeholder="Asset ID.." />
|
||
<button class="btn btn-primary" id="load-asset">Wear</button>
|
||
</div>
|
||
<hr class="mt-2 mb-3">
|
||
<div class="card mcard mb-3">
|
||
<h6 class="card-header">
|
||
<i class="fad fa-palette"></i>
|
||
Body Colors
|
||
</h6>
|
||
<div class="card-body">
|
||
<div class="card-body text-center" id="body-parts">
|
||
<div style="margin-bottom: 5px">
|
||
<button id="head" class="avatarAction bodypart bp1x1" style="background-color: #e0e0e0;"></button>
|
||
</div>
|
||
<div style="margin-bottom: 5px">
|
||
<button id="rightArm" class="avatarAction bodypart bp1x2" style="background-color: #e0e0e0; margin-right: 5px;"></button>
|
||
<button id="torso" class="avatarAction bodypart bp2x2" style="background-color: #e0e0e0;"></button>
|
||
<button class="avatarAction bodypart bp1x2" id="leftArm" style="background-color: #e0e0e0; margin-left: 5px;"></button>
|
||
</div>
|
||
<div>
|
||
<button class="avatarAction bodypart bp1x2" id="rightLeg" style="background-color: #e0e0e0; margin-right: 5px; padding-right: 18px;"></button>
|
||
<button id="leftLeg" class="avatarAction bodypart bp1x2" style="background-color: #e0e0e0; padding-right: 18px;"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<small class="text-muted text-center" style="font-size: 0.7rem;">feature of Poly+</small>
|
||
<!--
|
||
Public API does not have an offsale parameter
|
||
|
||
<span class="form-check form-switch" style="font-size: 0.7rem;">
|
||
<input class="form-check-input" type="checkbox" role="switch" id="show-offsale" checked />
|
||
<label class="form-check-label" for="hide-user-ads-banner">Show Offsale Items</label>
|
||
</span>
|
||
-->
|
||
</div>
|
||
<div class="col-12 col-lg-9">
|
||
<ul class="nav nav-pills nav-justified mb-3" id="tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" data-tab="hat">
|
||
<i class="fas fa-hat-cowboy me-1"></i>
|
||
Hats
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<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">
|
||
<i class="fas fa-tshirt me-1"></i>
|
||
Shirts
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-tab="pants">
|
||
<i class="fas fa-socks me-1"></i>
|
||
Pants
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-tab="torso">
|
||
<i class="fas fa-cube me-1"></i>
|
||
Torsos
|
||
</a>
|
||
</li>
|
||
</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="row mb-2">
|
||
<div class="col-md-4">
|
||
<div class="input-group">
|
||
<select id="item-sort" class="form-select">
|
||
<option value="name">Name</option>
|
||
<option value="price">Price</option>
|
||
<option value="createdAt" selected>Creation Date</option>
|
||
<option value="updatedAt">Updated Date</option>
|
||
</select>
|
||
<select id="item-order" class="form-select">
|
||
<option value="asc">Ascending</option>
|
||
<option value="desc">Descending</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="input-group">
|
||
<input id="item-search" type="text" class="form-control mb-2" placeholder="Search for an item..." />
|
||
<button id="search-btn" class="btn btn-primary h-100">Search</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row alignleft itemgrid mb-4" id="inventory"></div>
|
||
<nav id="pagination" style="margin: auto;">
|
||
<ul class="pagination">
|
||
<li class="page-item disabled" id="pagination-first">
|
||
<a class="page-link" href="#!">«</a>
|
||
</li>
|
||
<li class="page-item disabled" id="pagination-prev">
|
||
<a class="page-link" href="#!">‹</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a class="page-link">
|
||
<span class="visually-hidden">Page</span>
|
||
<span id="pagination-current">1</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item" id="pagination-next">
|
||
<a class="page-link" href="#!">›</a>
|
||
</li>
|
||
<li class="page-item" id="pagination-last">
|
||
<a class="page-link" href="#!">»</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<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="row alignleft itemgrid" id="wearing"></div>
|
||
</div>
|
||
</div>
|
||
</div> |