383 lines
No EOL
17 KiB
HTML
Executable file
383 lines
No EOL
17 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;
|
||
}
|
||
|
||
[class^="p+outfit_overwrite_button"]:hover, [class^="p+outfit_delete_button"]:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
[id="p+retro_items_warning"] {
|
||
display: none;
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
body:has([data-tab="retro"].active) [id="p+retro_items_warning"] {
|
||
display: block;
|
||
}
|
||
</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-3">
|
||
<button class="btn btn-info w-100 mx-auto" onclick="this.parentElement.parentElement.parentElement.close();">X</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="wrapper">
|
||
<div class="colorpicker-color" style="background-color: #f8f8f8"></div>
|
||
<div class="colorpicker-color" style="background-color: #cdcdcd"></div>
|
||
<div class="colorpicker-color" style="background-color: #111111"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff0000"></div>
|
||
<div class="colorpicker-color" style="background-color: #a34b4b"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffc9c9"></div>
|
||
<div class="colorpicker-color" style="background-color: #957977"></div>
|
||
<div class="colorpicker-color" style="background-color: #c4281c"></div>
|
||
<div class="colorpicker-color" style="background-color: #da867a"></div>
|
||
<div class="colorpicker-color" style="background-color: #694028"></div>
|
||
<div class="colorpicker-color" style="background-color: #cc8e69"></div>
|
||
<div class="colorpicker-color" style="background-color: #a05f35"></div>
|
||
<div class="colorpicker-color" style="background-color: #7c5c46"></div>
|
||
<div class="colorpicker-color" style="background-color: #eab892"></div>
|
||
<div class="colorpicker-color" style="background-color: #da8541"></div>
|
||
<div class="colorpicker-color" style="background-color: #aa5500"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffcc99"></div>
|
||
<div class="colorpicker-color" style="background-color: #e29b40"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffaf00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffb000"></div>
|
||
<div class="colorpicker-color" style="background-color: #d7c59a"></div>
|
||
<div class="colorpicker-color" style="background-color: #f5cd30"></div>
|
||
<div class="colorpicker-color" style="background-color: #fdea8d"></div>
|
||
<div class="colorpicker-color" style="background-color: #e5e4df"></div>
|
||
<div class="colorpicker-color" style="background-color: #c1be42"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffff00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ffffcc"></div>
|
||
<div class="colorpicker-color" style="background-color: #a4bd47"></div>
|
||
<div class="colorpicker-color" style="background-color: #7f8e64"></div>
|
||
<div class="colorpicker-color" style="background-color: #a1c48c"></div>
|
||
<div class="colorpicker-color" style="background-color: #3a7d15"></div>
|
||
<div class="colorpicker-color" style="background-color: #4b974b"></div>
|
||
<div class="colorpicker-color" style="background-color: #00ff00"></div>
|
||
<div class="colorpicker-color" style="background-color: #ccffcc"></div>
|
||
<div class="colorpicker-color" style="background-color: #27462d"></div>
|
||
<div class="colorpicker-color" style="background-color: #287f47"></div>
|
||
<div class="colorpicker-color" style="background-color: #789082"></div>
|
||
<div class="colorpicker-color" style="background-color: #9ff3e9"></div>
|
||
<div class="colorpicker-color" style="background-color: #12eed4"></div>
|
||
<div class="colorpicker-color" style="background-color: #f2f3f3"></div>
|
||
<div class="colorpicker-color" style="background-color: #00ffff"></div>
|
||
<div class="colorpicker-color" style="background-color: #008f9c"></div>
|
||
<div class="colorpicker-color" style="background-color: #04afec"></div>
|
||
<div class="colorpicker-color" style="background-color: #80bbdb"></div>
|
||
<div class="colorpicker-color" style="background-color: #b4d2e4"></div>
|
||
<div class="colorpicker-color" style="background-color: #0d69ac"></div>
|
||
<div class="colorpicker-color" style="background-color: #1b2a35"></div>
|
||
<div class="colorpicker-color" style="background-color: #afddff"></div>
|
||
<div class="colorpicker-color" style="background-color: #6e99ca"></div>
|
||
<div class="colorpicker-color" style="background-color: #74869d"></div>
|
||
<div class="colorpicker-color" style="background-color: #2154b9"></div>
|
||
<div class="colorpicker-color" style="background-color: #002060"></div>
|
||
<div class="colorpicker-color" style="background-color: #0000ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #b1a7ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #a3a2a5"></div>
|
||
<div class="colorpicker-color" style="background-color: #6225d1"></div>
|
||
<div class="colorpicker-color" style="background-color: #b480ff"></div>
|
||
<div class="colorpicker-color" style="background-color: #8c5b9f"></div>
|
||
<div class="colorpicker-color" style="background-color: #6b327c"></div>
|
||
<div class="colorpicker-color" style="background-color: #aa00aa"></div>
|
||
<div class="colorpicker-color" style="background-color: #635f62"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff00bf"></div>
|
||
<div class="colorpicker-color" style="background-color: #ff66cc"></div>
|
||
<div class="colorpicker-color" style="background-color: #e8bac8"></div>
|
||
</div>
|
||
<div class="input-group mt-2">
|
||
<input type="text" class="form-control bg-dark" placeholder="HEX Code..">
|
||
<button id="p+bodypart_customhex" class="btn btn-primary">Set</button>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
<dialog id="p+outfit_create" 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;">Create Outfit</h5>
|
||
Save this avatar for later!
|
||
</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">
|
||
<div class="input-group mb-2">
|
||
<input type="text" class="form-control" placeholder="Outfit Name...">
|
||
<button id="p+save_outfit_confirm" class="btn btn-success">Save</button>
|
||
</div>
|
||
<b id="p+outfit_create_error" class="text-muted" style="font-size: 0.85rem;"><i class="fa-duotone fa-square-question mr-1"></i> ...</b>
|
||
</div>
|
||
</dialog>
|
||
<dialog id="p+outfit_rename" 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;">Rename Outfit</h5>
|
||
Renaming Outfit "<i id="p+outfit_rename_name">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">
|
||
<div class="input-group mb-2">
|
||
<input type="text" class="form-control" placeholder="New Outfit Name...">
|
||
<button id="p+rename_outfit_confirm" class="btn btn-success">Save</button>
|
||
</div>
|
||
<b id="p+outfit_rename_error" class="text-muted" style="font-size: 0.85rem;"><i class="fa-duotone fa-square-question mr-1"></i> ...</b>
|
||
</div>
|
||
</dialog>
|
||
<span class="badge bg-warning mb-2" id="view-cache">Poly+</span>
|
||
<h4 class="d-none d-lg-block">
|
||
Avatar Sandbox
|
||
</h4>
|
||
<div class="row">
|
||
<div class="col-12 col-lg-3">
|
||
<div class="card mcard mb-3">
|
||
<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 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">
|
||
<div class="card mcard mb-3">
|
||
<h6 class="card-header text-center">
|
||
<i class="fad fa-wrench"></i>
|
||
Advanced
|
||
</h6>
|
||
<div class="card-body">
|
||
<small class="text-muted mb-1" style="font-size: 0.7rem;">Wear asset by ID</small>
|
||
<br>
|
||
<select class="form-select bg-dark mb-1" id="load-asset-type">
|
||
<option value="hat" selected>Hat</option>
|
||
<option value="tool">Tool</option>
|
||
<option value="face">Face</option>
|
||
<option value="torso">Body Part</option>
|
||
<hr>
|
||
<option value="shirt">Shirt</option>
|
||
<option value="pants">Pants</option>
|
||
<hr>
|
||
<option value="user">User Avatar</option>
|
||
</select>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control bg-dark" placeholder="Asset ID.." />
|
||
<button class="btn btn-primary" id="load-asset">Wear</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mcard mb-1">
|
||
<h6 class="card-header text-center">
|
||
<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;">thanks to <a href="https://polytoria.com/u/Hawli">@Hawli</a> and <a href="https://polytoria.com/u/Emir">@Emir</a> for letting me use their<br><a href="https://poly-archive.vercel.app/" target="_blank">Poly-Archive</a> website's assets!</small>
|
||
<hr class="mt-2 mb-1">
|
||
<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 no-shrink avatar-nav-pills nav-justified row" id="tabs">
|
||
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
|
||
<a class="nav-link active" data-tab="hat">
|
||
<i class="fas fa-hat-wizard me-1"></i>
|
||
<span class="pilltitle">Accessories</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
|
||
<a class="nav-link" data-tab="shirt">
|
||
<i class="fas fa-tshirt me-1"></i>
|
||
<span class="pilltitle">Shirts</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
|
||
<a class="nav-link" data-tab="pants">
|
||
<i class="fas fa-socks me-1"></i>
|
||
<span class="pilltitle">Pants</span>
|
||
</a>
|
||
</li>
|
||
<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">
|
||
<i class="fas fa-cube me-1"></i>
|
||
<span class="pilltitle">Body Parts</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
|
||
<a class="nav-link" data-tab="retro" data-bs-toggle="tooltip" data-bs-title="Items from Bloxtopia, Superium, and Polytoria v1!">
|
||
<i class="fa-solid fa-tv-retro me-1"></i>
|
||
<span class="pilltitle">Retro</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-4 col-xl-3" style="flex: unset">
|
||
<a class="nav-link" data-tab="outfit">
|
||
<i class="fas fa-person me-1"></i>
|
||
<span class="pilltitle">Outfits</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div role="alert" class="alert bg-warning text-center mb-1 mt-2" id="p+retro_items_warning">
|
||
Items in this category are from past iterations of Polytoria. They can only be worn in the Avatar Sandbox.
|
||
</div>
|
||
<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-1">
|
||
<div class="col-md-4">
|
||
<div class="input-group">
|
||
<select id="item-sort" class="form-select retro-items-disable">
|
||
<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 retro-items-disable">
|
||
<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 retro-items-disable" placeholder="Search for an item..." />
|
||
<button id="search-btn" class="btn btn-primary h-100 retro-items-disable">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: transparent; border-color: transparent; border-top-left-radius: 20px; border-top-right-radius: 20px;">
|
||
<div class="row alignleft itemgrid" id="wearing"></div>
|
||
</div>
|
||
</div>
|
||
</div> |