126 lines
7.8 KiB
HTML
126 lines
7.8 KiB
HTML
{% extends '__layout__.html' %}
|
|
{% block title %}Avatar{% endblock %}
|
|
{% block head %}
|
|
<link href="/static/css/avatar.css" rel="stylesheet"/>
|
|
<script src="/static/js/AvatarEditor.js?ver=4"></script>
|
|
<div class="col-3 p-1 asset-card-template" style="display: none;">
|
|
<div class="position-relative">
|
|
<img width="100%" src="" class="asset-card-img rounded" alt="Item">
|
|
<button class="btn-sm btn-primary btn position-absolute p-1 asset-card-button" style="top:10px;right:20px;font-size: 12px;">Wear</button>
|
|
</div>
|
|
<a class="text-decoration-none m-0 text-center w-100 asset-card-assetname" href="/catalog/12345676/" style="font-size:12px;">Test Item</a>
|
|
</div>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="main">
|
|
<div class="container" style="max-width: 900px;">
|
|
<h1>Avatar</h1>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="position-relative">
|
|
<img width="100%" style="height: auto;" class="rounded border p-1" id="avatar-image" src="/Thumbs/Avatar.ashx?x=420&y=420&userId={{user.id}}" alt="Your Avatar">
|
|
<!--<button class="btn btn-primary btn-sm position-absolute" style="bottom: 10px;right: 20px;">Refresh</button>-->
|
|
<div class="position-absolute w-100" style="bottom: 20px;display:none;" id="render-waiting-text">
|
|
<p class="fw-bold rounded text-white text-center m-0 ms-auto me-auto w-fit p-1 border" style="width:fit-content;background-color: rgba(31, 31, 31, 0.5);">Rendering in progress</p>
|
|
</div>
|
|
<button class="btn-outline-primary btn position-absolute" style="top: 20px;right: 20px;aspect-ratio: 1/1;padding: 0px;width: 35px;height: 35px;text-align: center;" id="change-rigtype-btn">R15</button>
|
|
</div>
|
|
<button class="btn btn-success fw-bold btn-sm w-100 mt-1" id="savechanges-btn" onclick="UpdateAvatar()" style="display: none;">Save Changes</button>
|
|
<div class="mt-1">
|
|
<p class="m-0" style="font-size:small;">Avatar isn't loading correctly? <a class="text-primary text-decoration-none" style="cursor:pointer;" onclick="RedrawAvatar()">Redraw</a></p>
|
|
<div class="w-100 mt-3 position-relative" style="min-height: 360px;">
|
|
<h5>Body Colors</h5>
|
|
<div class="overlay p-1" id="color-picker-overlay" style="display:none;">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="text-center m-0 ms-4">Select Body Color</h5>
|
|
<div class="ms-auto">
|
|
<button class="btn btn-close" id="color-picker-close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="row p-2" id="color-picker-content"></div>
|
|
</div>
|
|
<div class="head" id="head-bodycolor"></div>
|
|
<div class="torso" id="torso-bodycolor">
|
|
<div class="leftArm" id="rightarm-bodycolor"></div>
|
|
<div class="rightArm" id="leftarm-bodycolor"></div>
|
|
</div>
|
|
<div class="legs">
|
|
<div class="leftLeg" id="rightleg-bodycolor"></div>
|
|
<div class="rightLeg" id="leftleg-bodycolor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<select class="form-control mb-1" id="select-tab-input">
|
|
<option data-tab="1">Wear</option>
|
|
<option data-tab="2">Scaling</option>
|
|
</select>
|
|
<div id="equip-assets-tab">
|
|
<select class="form-control" id="select-asset-type">
|
|
<option data-type="17">Head</option>
|
|
<option data-type="18">Faces</option>
|
|
<option data-type="2">T-Shirts</option>
|
|
<option data-type="11" selected>Shirts</option>
|
|
<option data-type="12">Pants</option>
|
|
<option data-type="19">Gear</option>
|
|
<option data-type="8">Hats</option>
|
|
<option data-type="41">Hair Accessory</option>
|
|
<option data-type="42">Face Accessory</option>
|
|
<option data-type="43">Neck Accessory</option>
|
|
<option data-type="44">Shoulder Accessory</option>
|
|
<option data-type="45">Front Accessory</option>
|
|
<option data-type="46">Back Accessory</option>
|
|
<option data-type="47">Waist Accessory</option>
|
|
<option data-type="27">Torso</option>
|
|
<option data-type="29">Left Arms</option>
|
|
<option data-type="28">Right Arms</option>
|
|
<option data-type="30">Left Legs</option>
|
|
<option data-type="31">Right Legs</option>
|
|
</select>
|
|
<div class="row" id="assets-card-holder">
|
|
</div>
|
|
<div class="align-items-center d-flex justify-content-center">
|
|
<button class="btn btn-sm text-white btn-primary me-2" id="pagination-back-btn" disabled>Previous</button><p class="m-0" id="pagination-page-number">Page 1</p><button id="pagination-next-btn" class="btn btn-sm text-white btn-primary ms-2" disabled>Next</button>
|
|
</div>
|
|
<div class="linebreak"></div>
|
|
<h5>Currently Wearing</h5>
|
|
<div class="row" id="currentlywearing-card-holder">
|
|
</div>
|
|
</div>
|
|
<div id="avatar-scaling-tab" style="display: none;">
|
|
<div id="height-scale-group">
|
|
<div class="d-flex align-items-center">
|
|
<label for="height-scaling" class="form-label">Height</label>
|
|
<p class="m-0 ms-auto text-white scaling-value">100%</p>
|
|
</div>
|
|
<input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
|
|
</div>
|
|
<div id="width-scale-group">
|
|
<div class="d-flex align-items-center">
|
|
<label for="width-scaling" class="form-label">Width</label>
|
|
<p class="m-0 ms-auto text-white scaling-value">100%</p>
|
|
</div>
|
|
<input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
|
|
</div>
|
|
<div id="head-scale-group">
|
|
<div class="d-flex align-items-center">
|
|
<label for="head-scaling" class="form-label">Head</label>
|
|
<p class="m-0 ms-auto text-white scaling-value">100%</p>
|
|
</div>
|
|
<input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
|
|
</div>
|
|
<div id="proportion-scale-group">
|
|
<div class="d-flex align-items-center">
|
|
<label for="proportion-scaling" class="form-label">Proportion</label>
|
|
<p class="m-0 ms-auto text-white scaling-value">100%</p>
|
|
</div>
|
|
<input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|