This repository has been archived on 2026-01-04. You can view files and clone it, but cannot push or open issues or pull requests.
polyplus/resources/avatar-sandbox.html
Index f3e33ea840 v1.2.2
- Avatar Sandbox rewrite

- Updated owned item tags code

- Inventory Collectibles Category

- Great Divide Features ("Potentially Unbalanced" indicator in server list and User Statistics tab on profiles)

- Refreshed Settings Page design

- Fixed library item type detection

- Breadcrumbs on the view page for models, audios, decals, and meshes now link to the Library instead of the Store.

- If the document loads prior to the DOMContentLoaded event being registered in the sitewide.js file, then it'll still run everything as normal instead of just not running

- Updated README.md

I was bored so:
- You can now make a profile act like a birthday profile by appending ?birthday=true to the URL
2024-06-25 09:14:52 -05:00

200 lines
No EOL
6.9 KiB
HTML
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
<div class="alert bg-danger" role="banner">
The Avatar Sandbox is currently being rewritten to have better caching and better, more reliable code. It should be included in v1.2.3
</div>
<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>
Poly+ Avatar Sandbox
</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>
<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">Load Asset</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>
</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>
</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;">
<input id="item-search" type="text" class="form-control mb-2" placeholder="Search for an item..." />
<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>
<script>
console.log('YPOFWPJGUWRHGUWHPOH')
var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
var list = [...tooltips].map((tool) => new bootstrap.Tooltip(tool));
</script>