- Scan ID:
- 9f525bd2-5ed9-4f09-9dee-5e64a2f329a3Finished
- Submitted URL:
- https://hbtokenbuilder.ru/
- Report Finished:
Links · 3 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://discord.gg/DyPQYzm | Join our Discord community server |
| https://www.drsmyrke.ru | DrSmyrke |
| https://creativecommons.org/licenses/by/4.0/ | Creative Commons Attribution 4.0 international license. |
JavaScript Variables · 152 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| makeHttpObject | function |
| setCookie | function |
| getCookie | function |
| JSON_Parse | function |
| copyObject | function |
| chkCookie | function |
| acceptCookie | function |
Console log messages · 7 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| warning | other |
|
| log | other |
|
| log | other |
|
| error | network |
|
| error | network |
|
| error | network |
|
| error | network |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="Author" content="Прокофьев Юрий (Prokofiev Jura)">
<meta name="keywords" content="Historical, battlefields, token, builder, generator, games">
<meta name="description" content="Historical battlefields token builder">
<meta name="Generator" content="Notepad">
<!-- <link rel="shortcut icon" href="/data/images/ico.png"/> -->
<meta name="yandex-verification" content="0e250e9b08faee4f">
<link rel="stylesheet" type="text/css" href="/data/css/style.css">
<link rel="stylesheet" type="text/css" href="/data/css/animate.css">
<link rel="stylesheet" type="text/css" href="/data/css/scroll.css">
<link rel="stylesheet" type="text/css" href="/data/font.css">
<link rel="stylesheet" type="text/css" href="/data/css/cookie.css">
<link rel="stylesheet" type="text/css" href="/data/css/ui.css">
<link rel="stylesheet" type="text/css" href="/data/css/switchers.css">
<link rel="stylesheet" type="text/css" href="/data/css/color.css">
<!-- RSIZER -->
<script type="text/javascript" src="/data/js/resizer.js"></script>
<link rel="stylesheet" type="text/css" href="/data/css/resizer.css">
<script type="text/javascript" src="/data/js/contextMenu.js"></script>
<script type="text/javascript" src="/data/js/functions.js"></script>
<script type="text/javascript" src="/data/js/form.js"></script>
<script type="text/javascript" src="/data/js/app.js"></script>
<script type="text/javascript" src="/data/js/index.js"></script>
<title>-= Token builder =-</title>
</head>
<body>
<header>
<div class="flex vCenter" style="height: 100%;">
<a href="/" style="margin-right: 8px;"><img src="/data/images/logo.png" class="ico"></a>
<div>
token builder <sup style="font-size: 8pt; margin-right: 8px;">v3.9.610</sup>
</div>
<div id="menuBox" style="display: flex;"><div class="flex vCenter menu" id="editorMenu" link-menu="editorMenuBox"><svg class="ico" viewBox="0 0 24 24" fill="none"><rect class="stroke" x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle class="stroke" cx="8.5" cy="8.5" r="1.5"></circle><polyline class="stroke" points="21 15 16 10 5 21"></polyline></svg>Image</div>
<div class="flex vCenter menu" link-menu="infoMenuBox"><svg class="ico" viewBox="0 0 24 24" fill="none"><circle class="stroke" cx="12" cy="12" r="10"></circle><line class="stroke" x1="12" y1="16" x2="12" y2="12"></line><line class="stroke" x1="12" y1="7" x2="12" y2="8"></line></svg>Info</div>
</div>
</div>
<div style="padding-top: 5px;">
<!-- <a href="https://www.patreon.com/bePatron?u=11993996" target="_blank"><img src="/data/images/Patreon.png"></a> -->
<!-- <a href="https://discord.gg/DyPQYzm" target="_blank" class="button"><img title="discord" class="ico"></a> -->
</div>
</header>
<!-- MENU -->
<div class="hidden submenu" id="infoMenuBox">
<div class="button flex vCenter"><a href="https://discord.gg/DyPQYzm" target="_blank" class="flex vCenter"><svg class="ico" viewBox="0 0 32 32" fill="none"><path class="fill" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"></path></svg> Discord</a></div>
<!-- <div class="button"><img title="help" class="ico"> Help / FAQ</div> -->
<div class="button flex vCenter" onclick="show( 'shortCutsBox' );"><svg class="ico" viewBox="0 0 512 512" fill="none"><g><path class="fill" d="M451.791,76.035H60.21C27.018,76.035,0,103.059,0,136.25v221.526c0,43.111,35.072,78.189,78.178,78.189 h355.644c43.106,0,78.178-35.078,78.178-78.189V136.25C512,103.059,484.982,76.035,451.791,76.035z M481.582,357.776 c0,26.34-21.426,47.765-47.76,47.765H78.178c-26.334,0-47.76-21.425-47.76-47.765V136.25c0-16.43,13.367-29.791,29.792-29.791 h391.581c16.424,0,29.791,13.36,29.791,29.791V357.776z"></path><path class="fill" d="M150.967,281.349h32.636c4.986,0,9.028-4.042,9.028-9.028v-32.642c0-4.986-4.042-9.028-9.028-9.028h-32.636 c-4.987,0-9.029,4.042-9.029,9.028v32.642C141.938,277.307,145.98,281.349,150.967,281.349z"></path><path class="fill" d="M227.01,281.349h32.631c4.987,0,9.029-4.042,9.029-9.028v-32.642c0-4.986-4.042-9.028-9.029-9.028H227.01 c-4.986,0-9.029,4.042-9.029,9.028v32.642C217.981,277.307,222.024,281.349,227.01,281.349z"></path><path class="fill" d="M303.048,281.349h32.636c4.986,0,9.029-4.042,9.029-9.028v-32.642c0-4.986-4.043-9.028-9.029-9.028h-32.636 c-4.986,0-9.029,4.042-9.029,9.028v32.642C294.019,277.307,298.062,281.349,303.048,281.349z"></path><path class="fill" d="M437.067,306.694h-32.632c-4.986,0-9.028,4.043-9.028,9.029v32.631c0,4.986,4.042,9.029,9.028,9.029h32.632 c4.986,0,9.029-4.043,9.029-9.029v-32.631C446.096,310.737,442.052,306.694,437.067,306.694z"></path><path class="fill" d="M150.967,205.307h32.636c4.986,0,9.028-4.043,9.028-9.029v-32.631c0-4.986-4.042-9.028-9.028-9.028h-32.636 c-4.987,0-9.029,4.042-9.029,9.028v32.631C141.938,201.264,145.98,205.307,150.967,205.307z"></path><path class="fill" d="M107.566,230.651H74.929c-4.986,0-9.029,4.042-9.029,9.028v32.642c0,4.986,4.043,9.028,9.029,9.028h32.636 c4.986,0,9.029-4.042,9.029-9.028v-32.642C116.594,234.693,112.551,230.651,107.566,230.651z"></path><path class="fill" d="M107.566,154.619H74.929c-4.986,0-9.029,4.042-9.029,9.028v32.631c0,4.986,4.043,9.029,9.029,9.029h32.636 c4.986,0,9.029-4.043,9.029-9.029v-32.631C116.594,158.661,112.551,154.619,107.566,154.619z"></path><path class="fill" d="M107.566,306.694H74.934c-4.987,0-9.029,4.043-9.029,9.029v32.631c0,4.986,4.042,9.029,9.029,9.029h32.631 c4.986,0,9.029-4.043,9.029-9.029v-32.631C116.594,310.737,112.551,306.694,107.566,306.694z"></path><path class="fill" d="M227.01,205.307h32.631c4.987,0,9.029-4.043,9.029-9.029v-32.631c0-4.986-4.042-9.028-9.029-9.028H227.01 c-4.986,0-9.029,4.042-9.029,9.028v32.631C217.981,201.264,222.024,205.307,227.01,205.307z"></path><path class="fill" d="M303.048,205.307h32.636c4.986,0,9.029-4.043,9.029-9.029v-32.631c0-4.986-4.043-9.028-9.029-9.028h-32.636 c-4.986,0-9.029,4.042-9.029,9.028v32.631C294.019,201.264,298.062,205.307,303.048,205.307z"></path><path class="fill" d="M361.029,306.694H150.967c-4.987,0-9.029,4.043-9.029,9.029v32.631c0,4.986,4.042,9.029,9.029,9.029h210.062 c4.986,0,9.028-4.043,9.028-9.029v-32.631C370.057,310.737,366.014,306.694,361.029,306.694z"></path><path class="fill" d="M437.067,154.619h-57.981c-4.987,0-9.029,4.042-9.029,9.028v108.674c0,4.986,4.042,9.028,9.029,9.028h57.981 c4.986,0,9.029-4.042,9.029-9.028V163.647C446.096,158.661,442.052,154.619,437.067,154.619z"></path></g></svg> Hotkeys</div>
</div>
<!-- WINDOWS -->
<!-- <div id="windowsBox"> -->
<div id="welcomeBox" class="window active">
<div class="header" draggable="true">
Welcome
<svg class="button closeIco" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M15 9.00004L9 15M15 15L9 9.00004M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
<div class="content scroll">
<h1 class="text upper" style="margin-bottom: 0px; font-size: 48pt;">Token builder</h1>
<div class="hr" style="height: 4px;"></div>
<div class="text upper color" style="margin-top: 0px;font-size: 21pt;">Virtual tabletop assets editor</div>
<div class="text upper">Welcome to the Token Builder!</div>
<div class="text">With this tool you can create and customize content for your virtual tabletop needs as well as make custom paper miniature templates for your live sessions!</div>
<div class="text">We have a vast and constantly updated library of postures and items for you to browse through. If you have any suggestions or feedback, feel free to join our discord server.</div>
<div class="text">Thanks for passing by, and happy rolling!</div>
<center>
<a href="https://discord.gg/DyPQYzm" target="_blank" class="button text"><text class="upper">Join our Discord community server</text></a>
</center>
</div>
</div>
<div id="shortCutsBox" class="window hidden">
<div class="header" draggable="true">
Keyboard Shortcuts
<svg class="button closeIco" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M15 9.00004L9 15M15 15L9 9.00004M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
<div class="content scroll">
<div class="header"><b>Main</b></div>
<div><kbd>ESC</kbd><span class="info"> - Close last opened window</span></div>
<div><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd><span class="info"> - Activate debug mode</span></div>
<div class="header"><b>Editor</b></div>
<div><kbd>Mouse middle</kbd><span class="info"> - Move sprite</span></div>
<div><kbd>Mouse whell</kbd><span class="info"> - Zoom sprite</span></div>
<div><kbd>Ctrl</kbd> + <kbd>S</kbd><span class="info"> - Save sprite to image with custom name</span></div>
<div><kbd>Ctrl</kbd> + <kbd>Z</kbd><span class="info"> - Undo last operation</span></div>
</div>
</div>
<!-- </div> -->
<!-- END WINDOWS -->
<!-- COOKIE BOX -->
<div class="bottomCookieBlock flexbox" id="cookieBox">
<div style="display: flex; justify-content: space-around;">
<div>By using this website, you agree to our use of cookies. We use cookies to provide you with a great experience and to help our website run effectively.</div>
<div class="cookieBlockAccept" onclick="acceptCookie();">OK</div>
</div>
</div>
<!-- SHTORA -->
<div class="preloader mobile_ui_shtora">
<span style="text-align:center; margin-top: 12px;" class="flex">Please wait! The interface is being adapted for mobile devices...</span>
</div>
<!-- PRELOADER -->
<div class="preloader hidden" id="preloaderBox">
<img src="/data/images/logo2.png" class="animate__animated animate__pulse animate__infinite animate__slow">
<!-- <img src="/data/images/logo2.png" class="animate__animated animate__pulse animate__delay-3s animate__infinite "> -->
<span style="margin-top: 12px;">Loading...</span>
</div>
<!-- MINI PRELOADER -->
<div class="preloader" id="miniPreloader">
<img src="/data/images/lego-preloader1.svg">
</div>
<!-- MANUAL INCLUDEs -->
<script type="text/javascript" src="/data/js/canvas.js"></script>
<script type="text/javascript" src="/data/js/colorSliders.js"></script>
<script type="text/javascript" src="/data/js/presets.js"></script>
<script type="text/javascript" src="/data/js/effect.js"></script>
<script type="text/javascript" src="/data/js/editor.js"></script>
<link rel="stylesheet" type="text/css" href="/data/css/colorSliders.css">
<link rel="stylesheet" type="text/css" href="/data/css/editor.css">
<form id="spriteForm" data-group="saveGroup" lang="save" class="flexbox hidden" method="POST" target="_blank" action="">
<input type="hidden" name="data">
</form>
<div class="topPanel panel border">
<!-- <img title="menu" class="button" onClick="show( 'menuBox' );" onmouseover="app.tooltip.show( 'Menu' , event );"> -->
<!-- <div class="wr"></div> -->
<svg class="button effect selected" viewBox="0 0 512 512" fill="none" id="lpbPose"><path class="stroke" d="M314.21,482.32,257.44,367.58l-44.89-57.39a72.82,72.82,0,0,1-10.13-37.05V144h15.67a40.22,40.22,0,0,1,40.23,40.22V367.58" style="stroke-width:32px"></path><path class="stroke" d="M127.9,293.05V218.53S165.16,144,202.42,144" style="stroke-width:32px"></path><line class="stroke" x1="370.1" y1="274.42" x2="304" y2="231" style="stroke-width:32px"></line><line class="stroke" x1="170.53" y1="478.36" x2="224" y2="400" style="stroke-width:32px"></line><circle class="stroke" cx="258.32" cy="69.48" r="37.26" style="stroke-width:32px"></circle></svg>
<div class="wr"></div>
<svg class="button effect" viewBox="0 0 512 512" fill="none" id="lpbElements"><path class="fill" d="M262.406 17.188c-27.22 8.822-54.017 28.012-72.375 55.53 17.544 47.898 17.544 57.26 0 105.157 19.92 15.463 40.304 24.76 60.782 27.47-2.063-25.563-3.63-51.13 1.125-76.69-13.625-1.483-23.374-5.995-37-13.874V82.563c35.866 19.096 61.84 18.777 98.813 0v32.22c-13.364 6.497-21.886 11.16-35.25 13.218 3.614 25.568 3.48 51.15 1.375 76.72 18.644-3.265 37.236-12.113 55.5-26.845-14.353-47.897-14.355-57.26 0-105.156-16.982-28.008-47.453-46.633-72.97-55.532zm-129.594 8.218c-25.906 110.414-27.35 215.33-27.4 330.922-18.84-1.537-37.582-5.12-56.027-11.12v28.554h69.066c8.715 35.025 6.472 70.052-1.036 105.078h28.13c-7.195-35.026-8.237-70.053-.872-105.078h68.904v-28.555c-18.49 4.942-37.256 8.552-56.097 10.46.082-114.94 2.496-223.068-24.667-330.26zm89.47 202.375c0 117.27 25.517 233.342 120.155 257.97C446.62 464.716 462.72 345.374 462.72 227.78H222.28z" fill-opacity="1"></path></svg>
<svg class="button effect" viewBox="0 0 512 512" fill="none" id="lpbSets"><path d="M0 0h512v512H0z" fill="#412323" fill-opacity="0"></path><g transform="translate(0,0)"><path class="fill" d="M467.838 35.848c-53.208 3.518-101.284 8.091-139.14 50.18 9.869 29.563 26.168 65.884 46.613 95.234 20.504 29.436 44.758 50.59 68.61 53.297 35.265-33.057 53.699-112.599 23.917-198.711zM189.8 46.02a70.936 54.43 66.039 0 0-15.987 3.638 70.936 54.43 66.039 0 0-20.931 86.928 70.936 54.43 66.039 0 0 51.62 45.443c2.392 57.507-19.428 43.883-70.534 73.606l15.888 31.69c35.566-13.731 51.844-19.703 69.27-44.317 32.586 93.92-1.874 157.236-23.688 247.078l33.711 4.916c23.698-57.247 55.114-122.355 62.438-181.422 48.937 51.134 77.498 114.641 114.65 169.143l35.82-14.75c-45.81-80.724-65.633-128.371-150.591-262.19 26.819-.194 49.826-6.592 70.683-15.422-7.036-10.105-13.565-20.882-19.529-31.886-28.223 12.083-59.028 16.997-90.14.855a70.936 54.43 66.039 0 0-.118-66.955 70.936 54.43 66.039 0 0-62.562-46.355zM15.47 87.309l3.287 34.09 52.6 107.77 21.568-10.526-52.383-107.325-25.072-24.01zm97.066 139.566l-46.756 22.822 3.137 18.496 56.271-27.464-12.652-13.854zm2.318 36.701l-21.568 10.528 16.668 34.15 21.568-10.527-16.668-34.15z"></path></g></svg>
<div class="wr"></div>
<svg class="button effect" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline class="stroke" points="17 21 17 13 7 13 7 21"></polyline><polyline class="stroke" points="7 3 7 8 15 8"></polyline></svg>
<!-- <img title="random" class="button" onClick="randomizeElements();" onmouseover="app.tooltip.show( 'Randomize posture' , event );"> -->
<!-- <img title="rotate_ccw" class="button" onClick="selectDefaultElements();" onmouseover="app.tooltip.show( 'Restore default elements' , event );"> -->
<div class="wr hidden" id="nextPostureWr"></div>
<svg class="button effect hidden" viewBox="0 0 17 17" fill="none" id="nextPostureButton"><path class="stroke" d="M8.5 0.5c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zM8.5 1.5c1.75 0 3.348 0.65 4.577 1.716l-9.86 9.861c-1.067-1.228-1.717-2.827-1.717-4.577 0-3.859 3.14-7 7-7zM8.5 15.5c-1.75 0-3.348-0.65-4.577-1.716l9.86-9.861c1.067 1.228 1.717 2.827 1.717 4.577 0 3.859-3.14 7-7 7z" fill="#000000"></path></svg>
</div>
<div class="leftBox panel border scroll">
<div id="posturesBox" class="">
<div class="header"><span onclick="showHideElements( this );">Separated bits <a>V</a></span></div><div><div class="button posture selected" id="pb1" style="background-image: url( '/assets/postures/1.png' );" onmouseover="app.tooltip.show( 'Ranged weapons for full body portraits', event );" onclick="loadPosture( 1 );"></div><div class="button posture" id="pb16" style="background-image: url( '/assets/postures/16.png' );" onmouseover="app.tooltip.show( 'Topdown view handguns', event );" onclick="loadPosture( 16 );"></div><div class="button posture" id="pb15" style="background-image: url( '/assets/postures/15.png' );" onmouseover="app.tooltip.show( 'Handguns for full body portrait postures', event );" onclick="loadPosture( 15 );"></div><div class="button posture" id="pb14" style="background-image: url( '/assets/postures/14.png' );" onmouseover="app.tooltip.show( 'Melee weapon assets for use in full body portraits', event );" onclick="loadPosture( 14 );"></div></div><div class="header"><span onclick="showHideElements( this );">Human portrait <a>V</a></span></div><div><div class="button posture" id="pb70" style="background-image: url( '/assets/postures/70.png' );" onmouseover="app.tooltip.show( 'Human male full body portrait with a rifle grip long firearm', event );" onclick="loadPosture( 70 );"></div><div class="button posture" id="pb66" style="background-image: url( '/assets/postures/66.png' );" onmouseover="app.tooltip.show( 'Human male full body', event );" onclick="loadPosture( 66 );"></div><div class="button posture" id="pb68" style="background-image: url( '/assets/postures/68.png' );" onmouseover="app.tooltip.show( 'Human male portrait with long firearm', event );" onclick="loadPosture( 68 );"></div></div><div class="header"><span onclick="showHideElements( this );">Abhumans <a>V</a></span></div><div><div class="button posture" id="pb127" style="background-image: url( '/assets/postures/127.png' );" onmouseover="app.tooltip.show( 'Ogryn throwing a grenade', event );" onclick="loadPosture( 127 );"></div><div class="button posture" id="pb124" style="background-image: url( '/assets/postures/124.png' );" onmouseover="app.tooltip.show( 'Ogryn with a two handed ranged weapon', event );" onclick="loadPosture( 124 );"></div><div class="button posture" id="pb125" style="background-image: url( '/assets/postures/125.png' );" onmouseover="app.tooltip.show( 'Ogryn with a two handed ranged weapon', event );" onclick="loadPosture( 125 );"></div><div class="button posture" id="pb126" style="background-image: url( '/assets/postures/126.png' );" onmouseover="app.tooltip.show( 'Ogryn with two handed ranged weapon', event );" onclick="loadPosture( 126 );"></div><div class="button posture" id="pb129" style="background-image: url( '/assets/postures/129.png' );" onmouseover="app.tooltip.show( 'Ogryn armed with one handed melee weapons', event );" onclick="loadPosture( 129 );"></div><div class="button posture" id="pb130" style="background-image: url( '/assets/postures/130.png' );" onmouseover="app.tooltip.show( 'Ogryn with one handed melee weapon', event );" onclick="loadPosture( 130 );"></div><div class="button posture" id="pb131" style="background-image: url( '/assets/postures/131.png' );" onmouseover="app.tooltip.show( 'Ogryn pointing at something', event );" onclick="loadPosture( 131 );"></div><div class="button posture" id="pb128" style="background-image: url( '/assets/postures/128.png' );" onmouseover="app.tooltip.show( 'Ogryn armed with a heavy weapon', event );" onclick="loadPosture( 128 );"></div><div class="button posture" id="pb132" style="background-image: url( '/assets/postures/132.png' );" onmouseover="app.tooltip.show( 'Ogryn with a two handed melee weapon', event );" onclick="loadPosture( 132 );"></div><div class="button posture" id="pb133" style="background-image: url( '/assets/postures/133.png' );" onmouseover="app.tooltip.show( 'Horribly twisted mutated plague ogryn', event );" onclick="loadPosture( 133 );"></div><div class="button posture" id="pb134" style="background-image: url( '/assets/postures/134.png' );" onmouseover="app.tooltip.show( 'Horribly twisted mutated plague ogryn', event );" onclick="loadPosture( 134 );"></div><div class="button posture" id="pb135" style="background-image: url( '/assets/postures/135.png' );" onmouseover="app.tooltip.show( 'Horribly twisted mutated plague ogryn', event );" onclick="loadPosture( 135 );"></div></div><div class="header"><span onclick="showHideElements( this );">Orkz <a>V</a></span></div><div><div class="button posture" id="pb94" style="background-image: url( '/assets/postures/94.png' );" onmouseover="app.tooltip.show( 'Shoota most bigga!', event );" onclick="loadPosture( 94 );"></div><div class="button posture" id="pb93" style="background-image: url( '/assets/postures/93.png' );" onmouseover="app.tooltip.show( 'Da ork boy pointin at somethin', event );" onclick="loadPosture( 93 );"></div><div class="button posture" id="pb92" style="background-image: url( '/assets/postures/92.png' );" onmouseover="app.tooltip.show( 'Da ork boy pointin at somethin', event );" onclick="loadPosture( 92 );"></div><div class="button posture" id="pb91" style="background-image: url( '/assets/postures/91.png' );" onmouseover="app.tooltip.show( 'Shoota boy, luvz shootin gitz', event );" onclick="loadPosture( 91 );"></div><div class="button posture" id="pb59" style="background-image: url( '/assets/postures/59.png' );" onmouseover="app.tooltip.show( 'Da orky deffdred', event );" onclick="loadPosture( 59 );"></div><div class="button posture" id="pb90" style="background-image: url( '/assets/postures/90.png' );" onmouseover="app.tooltip.show( 'Shoota boy, luvz shootin gitz', event );" onclick="loadPosture( 90 );"></div><div class="button posture" id="pb89" style="background-image: url( '/assets/postures/89.png' );" onmouseover="app.tooltip.show( 'Shoota boy, luvz shootin gitz', event );" onclick="loadPosture( 89 );"></div><div class="button posture" id="pb88" style="background-image: url( '/assets/postures/88.png' );" onmouseover="app.tooltip.show( 'Da slugga boy, luv choppin gitz up', event );" onclick="loadPosture( 88 );"></div><div class="button posture" id="pb87" style="background-image: url( '/assets/postures/87.png' );" onmouseover="app.tooltip.show( 'Da slugga boy, luv choppin gitz up', event );" onclick="loadPosture( 87 );"></div><div class="button posture" id="pb86" style="background-image: url( '/assets/postures/86.png' );" onmouseover="app.tooltip.show( 'Da ork warbiker!', event );" onclick="loadPosture( 86 );"></div><div class="button posture" id="pb85" style="background-image: url( '/assets/postures/85.png' );" onmouseover="app.tooltip.show( 'Da squig rider', event );" onclick="loadPosture( 85 );"></div><div class="button posture" id="pb84" style="background-image: url( '/assets/postures/84.png' );" onmouseover="app.tooltip.show( 'Da slugga boy, luv choppin gitz up', event );" onclick="loadPosture( 84 );"></div><div class="button posture" id="pb95" style="background-image: url( '/assets/postures/95.png' );" onmouseover="app.tooltip.show( 'Hide yer bitz, datz da loota boy!', event );" onclick="loadPosture( 95 );"></div><div class="button posture" id="pb96" style="background-image: url( '/assets/postures/96.png' );" onmouseover="app.tooltip.show( 'Flashgit with da huge snazzgun!', event );" onclick="loadPosture( 96 );"></div><div class="button posture" id="pb97" style="background-image: url( '/assets/postures/97.png' );" onmouseover="app.tooltip.show( 'Grot wit da choppa', event );" onclick="loadPosture( 97 );"></div><div class="button posture" id="pb99" style="background-image: url( '/assets/postures/99.png' );" onmouseover="app.tooltip.show( 'Grot wit da choppa', event );" onclick="loadPosture( 99 );"></div><div class="button posture" id="pb100" style="background-image: url( '/assets/postures/100.png' );" onmouseover="app.tooltip.show( 'Grot wit da shoota', event );" onclick="loadPosture( 100 );"></div><div class="button posture" id="pb101" style="background-image: url( '/assets/postures/101.png' );" onmouseover="app.tooltip.show( 'Grot wit da shoota', event );" onclick="loadPosture( 101 );"></div><div class="button posture" id="pb102" style="background-image: url( '/assets/postures/102.png' );" onmouseover="app.tooltip.show( 'Grot wit da slugga', event );" onclick="loadPosture( 102 );"></div><div class="button posture" id="pb31" style="background-image: url( '/assets/postures/31.png' );" onmouseover="app.tooltip.show( 'Ork boss with two handed choppa', event );" onclick="loadPosture( 31 );"></div><div class="button posture" id="pb103" style="background-image: url( '/assets/postures/103.png' );" onmouseover="app.tooltip.show( 'Grot ammo runt', event );" onclick="loadPosture( 103 );"></div><div class="button posture" id="pb104" style="background-image: url( '/assets/postures/104.png' );" onmouseover="app.tooltip.show( 'Gretchin 2.psd', event );" onclick="loadPosture( 104 );"></div><div class="button posture" id="pb105" style="background-image: url( '/assets/postures/105.png' );" onmouseover="app.tooltip.show( 'Da orky wartrukk', event );" onclick="loadPosture( 105 );"></div><div class="button posture" id="pb106" style="background-image: url( '/assets/postures/106.png' );" onmouseover="app.tooltip.show( 'Da ork turret gunna', event );" onclick="loadPosture( 106 );"></div><div class="button posture" id="pb29" style="background-image: url( '/assets/postures/29.png' );" onmouseover="app.tooltip.show( 'Orky boss! Or nob, whateva', event );" onclick="loadPosture( 29 );"></div></div><div class="header"><span onclick="showHideElements( this );">Vehicles <a>V</a></span></div><div><div class="button posture" id="pb82" style="background-image: url( '/assets/postures/82.png' );" onmouseover="app.tooltip.show( 'Chimera based halftrack artillery platform', event );" onclick="loadPosture( 82 );"></div><div class="button posture" id="pb137" style="background-image: url( '/assets/postures/137.png' );" onmouseover="app.tooltip.show( 'Leman russ battle tank', event );" onclick="loadPosture( 137 );"></div><div class="button posture" id="pb139" style="background-image: url( '/assets/postures/139.png' );" onmouseover="app.tooltip.show( 'Chimera APC', event );" onclick="loadPosture( 139 );"></div><div class="button posture" id="pb81" style="background-image: url( '/assets/postures/81.png' );" onmouseover="app.tooltip.show( 'Chimera based halftracked APC', event );" onclick="loadPosture( 81 );"></div><div class="button posture" id="pb56" style="background-image: url( '/assets/postures/56.png' );" onmouseover="app.tooltip.show( 'Taurox (halftrack variant)', event );" onclick="loadPosture( 56 );"></div><div class="button posture" id="pb58" style="background-image: url( '/assets/postures/58.png' );" onmouseover="app.tooltip.show( 'Vulture gunship', event );" onclick="loadPosture( 58 );"></div></div><div class="header"><span onclick="showHideElements( this );">Post apocalypse <a>V</a></span></div><div><div class="button posture" id="pb120" style="background-image: url( '/assets/postures/120.png' );" onmouseover="app.tooltip.show( 'Fallout power armor with missile launcher', event );" onclick="loadPosture( 120 );"></div><div class="button posture" id="pb116" style="background-image: url( '/assets/postures/116.png' );" onmouseover="app.tooltip.show( 'Fallout power armor with a heavy weapon', event );" onclick="loadPosture( 116 );"></div><div class="button posture" id="pb115" style="background-image: url( '/assets/postures/115.png' );" onmouseover="app.tooltip.show( 'Top view fallout power armor posture with two handed weapon', event );" onclick="loadPosture( 115 );"></div><div class="button posture" id="pb118" style="background-image: url( '/assets/postures/118.png' );" onmouseover="app.tooltip.show( 'Fallout power armor with a pistol', event );" onclick="loadPosture( 118 );"></div><div class="button posture" id="pb119" style="background-image: url( '/assets/postures/119.png' );" onmouseover="app.tooltip.show( 'Fallout power armor melee', event );" onclick="loadPosture( 119 );"></div><div class="button posture" id="pb121" style="background-image: url( '/assets/postures/121.png' );" onmouseover="app.tooltip.show( 'Fallout power armors with two handed melee weapon', event );" onclick="loadPosture( 121 );"></div></div><div class="header"><span onclick="showHideElements( this );">Dwarf portraits <a>V</a></span></div><div><div class="button posture" id="pb138" style="background-image: url( '/assets/postures/138.png' );" onmouseover="app.tooltip.show( 'Male dwarf armed with one handed melee weapons', event );" onclick="loadPosture( 138 );"></div></div><div class="header"><span onclick="showHideElements( this );">Marines VTT token <a>V</a></span></div><div><div class="button posture" id="pb63" style="background-image: url( '/assets/postures/63.png' );" onmouseover="app.tooltip.show( 'Space marine casualty', event );" onclick="loadPosture( 63 );"></div><div class="button posture" id="pb64" style="background-image: url( '/assets/postures/64.png' );" onmouseover="app.tooltip.show( 'Space marine casualty', event );" onclick="loadPosture( 64 );"></div><div class="button posture" id="pb65" style="background-image: url( '/assets/postures/65.png' );" onmouseover="app.tooltip.show( 'Space marine casualty', event );" onclick="loadPosture( 65 );"></div><div class="button posture" id="pb111" style="background-image: url( '/assets/postures/111.png' );" onmouseover="app.tooltip.show( 'Predator space marine battle tank', event );" onclick="loadPosture( 111 );"></div><div class="button posture" id="pb109" style="background-image: url( '/assets/postures/109.png' );" onmouseover="app.tooltip.show( 'Rhino space marine APC', event );" onclick="loadPosture( 109 );"></div><div class="button posture" id="pb110" style="background-image: url( '/assets/postures/110.png' );" onmouseover="app.tooltip.show( 'Razorback space marine assault transport', event );" onclick="loadPosture( 110 );"></div></div><div class="header"><span onclick="showHideElements( this );">WW2 vehicles <a>V</a></span></div><div><div class="button posture" id="pb76" style="background-image: url( '/assets/postures/76.png' );" onmouseover="app.tooltip.show( 'Matilda 2 tank', event );" onclick="loadPosture( 76 );"></div><div class="button posture" id="pb71" style="background-image: url( '/assets/postures/71.png' );" onmouseover="app.tooltip.show( 'Hawker Hurricane british fighter, mk.1', event );" onclick="loadPosture( 71 );"></div><div class="button posture" id="pb62" style="background-image: url( '/assets/postures/62.png' );" onmouseover="app.tooltip.show( 'Consolidated B24D liberator', event );" onclick="loadPosture( 62 );"></div><div class="button posture" id="pb60" style="background-image: url( '/assets/postures/60.png' );" onmouseover="app.tooltip.show( 'Carro Armato M13-40 tank', event );" onclick="loadPosture( 60 );"></div></div><div class="header"><span onclick="showHideElements( this );">Space marine full body portraits <a>V</a></span></div><div><div class="button posture" id="pb83" style="background-image: url( '/assets/postures/83.png' );" onmouseover="app.tooltip.show( 'Space marine one handed melee portrait', event );" onclick="loadPosture( 83 );"></div><div class="button posture" id="pb113" style="background-image: url( '/assets/postures/113.png' );" onmouseover="app.tooltip.show( 'Space marine portrait with ranged weapon', event );" onclick="loadPosture( 113 );"></div></div><div class="header"><span onclick="showHideElements( this );">Mechs and robots <a>V</a></span></div><div><div class="button posture" id="pb3" style="background-image: url( '/assets/postures/3.png' );" onmouseover="app.tooltip.show( 'AMP suite. Patron commission by Amenadiel', event );" onclick="loadPosture( 3 );"></div><div class="button posture" id="pb5" style="background-image: url( '/assets/postures/5.png' );" onmouseover="app.tooltip.show( 'AMP suite in melee stance. Patron commission by Amenadiel.', event );" onclick="loadPosture( 5 );"></div><div class="button posture" id="pb54" style="background-image: url( '/assets/postures/54.png' );" onmouseover="app.tooltip.show( 'Riot control bot', event );" onclick="loadPosture( 54 );"></div><div class="button posture" id="pb53" style="background-image: url( '/assets/postures/53.png' );" onmouseover="app.tooltip.show( 'Defensive wall automaton', event );" onclick="loadPosture( 53 );"></div><div class="button posture" id="pb51" style="background-image: url( '/assets/postures/51.png' );" onmouseover="app.tooltip.show( 'Smiely dieselpunk mech', event );" onclick="loadPosture( 51 );"></div><div class="button posture" id="pb52" style="background-image: url( '/assets/postures/52.png' );" onmouseover="app.tooltip.show( 'Smiely dieselpunk mech', event );" onclick="loadPosture( 52 );"></div></div><div class="header"><span onclick="showHideElements( this );">Necrons <a>V</a></span></div><div><div class="button posture" id="pb6" style="background-image: url( '/assets/postures/6.png' );" onmouseover="app.tooltip.show( 'Necron warrior standing at attention', event );" onclick="loadPosture( 6 );"></div><div class="button posture" id="pb7" style="background-image: url( '/assets/postures/7.png' );" onmouseover="app.tooltip.show( 'Necron warrior advancing', event );" onclick="loadPosture( 7 );"></div><div class="button posture" id="pb8" style="background-image: url( '/assets/postures/8.png' );" onmouseover="app.tooltip.show( 'Necron warrior 3 standing at attention', event );" onclick="loadPosture( 8 );"></div><div class="button posture" id="pb9" style="background-image: url( '/assets/postures/9.png' );" onmouseover="app.tooltip.show( 'Necron warrior 4 aiming', event );" onclick="loadPosture( 9 );"></div><div class="button posture" id="pb10" style="background-image: url( '/assets/postures/10.png' );" onmouseover="app.tooltip.show( 'Necron warrior standing at attention', event );" onclick="loadPosture( 10 );"></div><div class="button posture" id="pb11" style="background-image: url( '/assets/postures/11.png' );" onmouseover="app.tooltip.show( 'Necron warrior aiming', event );" onclick="loadPosture( 11 );"></div><div class="button posture" id="pb12" style="background-image: url( '/assets/postures/12.png' );" onmouseover="app.tooltip.show( 'Necron immortal', event );" onclick="loadPosture( 12 );"></div></div><div class="header"><span onclick="showHideElements( this );">Tau <a>V</a></span></div><div><div class="button posture" id="pb18" style="background-image: url( '/assets/postures/18.png' );" onmouseover="app.tooltip.show( 'Fire warrior standing at attention', event );" onclick="loadPosture( 18 );"></div><div class="button posture" id="pb49" style="background-image: url( '/assets/postures/49.png' );" onmouseover="app.tooltip.show( 'Tau drone variant', event );" onclick="loadPosture( 49 );"></div><div class="button posture" id="pb35" style="background-image: url( '/assets/postures/35.png' );" onmouseover="app.tooltip.show( 'Stealth suit standing', event );" onclick="loadPosture( 35 );"></div><div class="button posture" id="pb32" style="background-image: url( '/assets/postures/32.png' );" onmouseover="app.tooltip.show( 'Stealth suit aiming', event );" onclick="loadPosture( 32 );"></div><div class="button posture" id="pb47" style="background-image: url( '/assets/postures/47.png' );" onmouseover="app.tooltip.show( 'Tau drone variant', event );" onclick="loadPosture( 47 );"></div><div class="button posture" id="pb19" style="background-image: url( '/assets/postures/19.png' );" onmouseover="app.tooltip.show( 'Fire warrior aiming', event );" onclick="loadPosture( 19 );"></div><div class="button posture" id="pb21" style="background-image: url( '/assets/postures/21.png' );" onmouseover="app.tooltip.show( 'Fire warrior with a lowered weapon', event );" onclick="loadPosture( 21 );"></div><div class="button posture" id="pb22" style="background-image: url( '/assets/postures/22.png' );" onmouseover="app.tooltip.show( 'Fire warrior standing at attention', event );" onclick="loadPosture( 22 );"></div><div class="button posture" id="pb34" style="background-image: url( '/assets/postures/34.png' );" onmouseover="app.tooltip.show( 'Stealth suit aiming', event );" onclick="loadPosture( 34 );"></div><div class="button posture" id="pb26" style="background-image: url( '/assets/postures/26.png' );" onmouseover="app.tooltip.show( 'Fire warrior with a pistol', event );" onclick="loadPosture( 26 );"></div><div class="button posture" id="pb25" style="background-image: url( '/assets/postures/25.png' );" onmouseover="app.tooltip.show( 'Fire warrior with binoculars', event );" onclick="loadPosture( 25 );"></div><div class="button posture" id="pb24" style="background-image: url( '/assets/postures/24.png' );" onmouseover="app.tooltip.show( 'Fire warrior pointing', event );" onclick="loadPosture( 24 );"></div><div class="button posture" id="pb23" style="background-image: url( '/assets/postures/23.png' );" onmouseover="app.tooltip.show( 'Fire warrior aiming', event );" onclick="loadPosture( 23 );"></div><div class="button posture" id="pb45" style="background-image: url( '/assets/postures/45.png' );" onmouseover="app.tooltip.show( 'Tau drone variant', event );" onclick="loadPosture( 45 );"></div><div class="button posture" id="pb46" style="background-image: url( '/assets/postures/46.png' );" onmouseover="app.tooltip.show( 'Tau drone variant', event );" onclick="loadPosture( 46 );"></div></div> </div>
<div id="elementsBox" class="hidden"></div>
<div id="setsBox" class="hidden">
<div class="header"><span onclick="showHideElements( this );">Public sets <a>></a></span></div>
<div class="hidden" id="publicSetsBox"></div>
<div class="header"><span onclick="showHideElements( this );">User sets <a>V</a></span></div>
<div id="usersSetsBox"></div>
</div>
</div>
<!-- <div id="prewBox" style="border: 1px solid orange;"></div> -->
<div id="prewBox" style="scale: 1;"></div>
<div id="importExportBox" class="window hidden">
<div class="header" draggable="true">
Import posture data
<svg class="button closeIco" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M15 9.00004L9 15M15 15L9 9.00004M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
<div class="content scroll">
<input type="text" id="importField" placeholder="Paste posture code here" style="width: 99%;">
<center>
<div class="button text" onclick="importPosture();"><text class="upper">Apply data</text></div>
</center>
</div>
</div>
<div class="rightBox panel scroll">
<div class="header"><span onclick="showHideElements( this );">Effects <a>></a></span></div>
<div class="effectsBox hidden">
<div class="box hCenter">
<button class="upper" onclick="resetsAllEffects();" onmouseover="app.tooltip.show( 'Reset all effects' , event );">Reset all effects</button>
</div>
<div class="box" id="effectsBox">
<!-- <div class="string">
<img title="frame" class="ico">
<div>Apply frame</div>
<input type="checkbox" class="style1" id="applyFrameCB" onChange="enableFrame( this.checked );">
</div> -->
<div class="string"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="fill" d="M10 21a.99018.99018 0 0 1-.71-.29 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 9 20a1 1 0 1 1 2 0 .99042.99042 0 0 1-1 1zM5.5 20a1.0032 1.0032 0 0 1 1-1h0a1.0032 1.0032 0 0 1 1 1h0a1.0032 1.0032 0 0 1-1 1h0A1.0032 1.0032 0 0 1 5.5 20zM3 21a.99018.99018 0 0 1-.71-.29 1.16044 1.16044 0 0 1-.21-.33008A.9994.9994 0 0 1 2 20a1.04778 1.04778 0 0 1 .29-.71 1.04667 1.04667 0 0 1 1.41992 0A1.05232 1.05232 0 0 1 4 20a.9994.9994 0 0 1-.08008.37988 1.16044 1.16044 0 0 1-.21.33008A.99349.99349 0 0 1 3 21zM3.75977 16.96973a.99816.99816 0 0 1-.7295-1.21h0a.99364.99364 0 0 1 1.21-.7295h0a.99891.99891 0 0 1 .7295 1.21h0A.992.992 0 0 1 4 17H4A.96451.96451 0 0 1 3.75977 16.96973zm.99023-4a.99212.99212 0 0 1-.71973-1.21h0a.99816.99816 0 0 1 1.21-.7295h0a.99891.99891 0 0 1 .7295 1.21h0A1.00024 1.00024 0 0 1 5 13H5A1.10439 1.10439 0 0 1 4.75 12.96973zm1.00977-4a.99816.99816 0 0 1-.7295-1.21h0a.99364.99364 0 0 1 1.21-.7295h0a.99891.99891 0 0 1 .7295 1.21h0A.992.992 0 0 1 6 9H6A.96451.96451 0 0 1 5.75977 8.96973zM7 5A.99042.99042 0 0 1 6 4a1.04778 1.04778 0 0 1 .29-.71 1.03423 1.03423 0 0 1 1.41016 0A1.01842 1.01842 0 0 1 8 4 1.00694 1.00694 0 0 1 7 5zM10 5A.99042.99042 0 0 1 9 4a1.04778 1.04778 0 0 1 .29-.71 1.04669 1.04669 0 0 1 1.41992 0A1.05232 1.05232 0 0 1 11 4a.99042.99042 0 0 1-1 1zM9 16a1.0032 1.0032 0 0 1 1-1h0a1.0032 1.0032 0 0 1 1 1h0a1.0032 1.0032 0 0 1-1 1h0A1.0032 1.0032 0 0 1 9 16zm0-4a1.0032 1.0032 0 0 1 1-1h0a1.0032 1.0032 0 0 1 1 1h0a1.0032 1.0032 0 0 1-1 1h0A1.0032 1.0032 0 0 1 9 12zM9 8a1.0032 1.0032 0 0 1 1-1h0a1.0032 1.0032 0 0 1 1 1h0a1.0032 1.0032 0 0 1-1 1h0A1.0032 1.0032 0 0 1 9 8z"></path><polygon class="fill" points="14 20 21 20 17 4 14 4 14 20"></polygon><path class="fill" d="M21,21H14a.99943.99943,0,0,1-1-1V4a.99943.99943,0,0,1,1-1h3a.99962.99962,0,0,1,.96973.75781l4,16A.9997.9997,0,0,1,21,21Zm-6-2h4.71875l-3.5-14H15Z"></path></svg><div>Mirror</div><input type="checkbox" class="style1"></div><div class="string"><svg class="ico" viewBox="0 0 24 24" fill="none"><circle class="stroke" cx="12" cy="12" r="5"></circle><line class="stroke" x1="12" y1="1" x2="12" y2="3"></line><line class="stroke" x1="12" y1="21" x2="12" y2="23"></line><line class="stroke" x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line class="stroke" x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line class="stroke" x1="1" y1="12" x2="3" y2="12"></line><line class="stroke" x1="21" y1="12" x2="23" y2="12"></line><line class="stroke" x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line class="stroke" x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg><div>Brightness</div><button class="value">Off ‣</button></div><div class="string hidden"><span class="ico"></span><div>Enable</div><input type="checkbox" class="style1"></div><div class="string hidden"><span class="ico"></span><div><img title="min-sun" class="ico"><input type="range" min="0" max="200"><svg class="ico" viewBox="0 0 24 24" fill="none"><circle class="stroke" cx="12" cy="12" r="5"></circle><line class="stroke" x1="12" y1="1" x2="12" y2="3"></line><line class="stroke" x1="12" y1="21" x2="12" y2="23"></line><line class="stroke" x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line class="stroke" x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line class="stroke" x1="1" y1="12" x2="3" y2="12"></line><line class="stroke" x1="21" y1="12" x2="23" y2="12"></line><line class="stroke" x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line class="stroke" x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></div></div><div class="string"><svg class="ico" viewBox="0 0 512 512" fill="none"><circle class="stroke" cx="256" cy="256" r="208" style="stroke-width:32px"></circle><path class="fill" d="M256,464C141.12,464,48,370.88,48,256S141.12,48,256,48Z"></path></svg><div>Contrast</div><button class="value">Off ‣</button></div><div class="string hidden"><span class="ico"></span><div>Enable</div><input type="checkbox" class="style1"></div><div class="string hidden"><span class="ico"></span><div><svg class="ico" viewBox="0 0 17 17" fill="none"><path class="stroke" d="M8.5 0.5c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zM8.5 1.5c1.75 0 3.348 0.65 4.577 1.716l-9.86 9.861c-1.067-1.228-1.717-2.827-1.717-4.577 0-3.859 3.14-7 7-7zM8.5 15.5c-1.75 0-3.348-0.65-4.577-1.716l9.86-9.861c1.067 1.228 1.717 2.827 1.717 4.577 0 3.859-3.14 7-7 7z" fill="#000000"></path></svg><input type="range" min="0" max="200"><svg class="ico" viewBox="0 0 512 512" fill="none"><circle class="stroke" cx="256" cy="256" r="208" style="stroke-width:32px"></circle><path class="fill" d="M256,464C141.12,464,48,370.88,48,256S141.12,48,256,48Z"></path></svg></div></div><div class="string"><svg class="ico" viewBox="0 0 20 20" fill="none"><path class="stroke" d="M10.203.561c-.027-.215-.38-.215-.406 0-.883 7.107-5.398 8.572-5.398 13.512 0 3.053 2.564 5.527 5.601 5.527 3.036 0 5.6-2.475 5.6-5.527 0-4.94-4.514-6.405-5.397-13.512zM9.35 8.418c-.059.219-.123.444-.189.678-.401 1.424-.856 3.039-.856 4.906 0 1.012-.598 1.371-1.156 1.371a1.161 1.161 0 0 1-1.156-1.166c0-2.207 1.062-3.649 2-4.92.295-.398.572-.775.797-1.15.103-.172.38-.164.506.006.059.08.079.182.054.275z"></path></svg><div>Saturation</div><button class="value">Off ‣</button></div><div class="string hidden"><span class="ico"></span><div>Enable</div><input type="checkbox" class="style1"></div><div class="string hidden"><span class="ico"></span><div><svg class="ico" viewBox="0 0 17 17" fill="none"><path class="stroke" d="M8.5 0.5c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zM8.5 1.5c1.75 0 3.348 0.65 4.577 1.716l-9.86 9.861c-1.067-1.228-1.717-2.827-1.717-4.577 0-3.859 3.14-7 7-7zM8.5 15.5c-1.75 0-3.348-0.65-4.577-1.716l9.86-9.861c1.067 1.228 1.717 2.827 1.717 4.577 0 3.859-3.14 7-7 7z" fill="#000000"></path></svg><input type="range" min="0" max="200"><svg class="ico" viewBox="0 0 20 20" fill="none"><path class="stroke" d="M10.203.561c-.027-.215-.38-.215-.406 0-.883 7.107-5.398 8.572-5.398 13.512 0 3.053 2.564 5.527 5.601 5.527 3.036 0 5.6-2.475 5.6-5.527 0-4.94-4.514-6.405-5.397-13.512zM9.35 8.418c-.059.219-.123.444-.189.678-.401 1.424-.856 3.039-.856 4.906 0 1.012-.598 1.371-1.156 1.371a1.161 1.161 0 0 1-1.156-1.166c0-2.207 1.062-3.649 2-4.92.295-.398.572-.775.797-1.15.103-.172.38-.164.506.006.059.08.079.182.054.275z"></path></svg></div></div><div class="string"><svg class="ico" viewBox="0 0 2048 2048" fill="none"><path class="fill" d="M896 128h1024v1792H128V896h384V640H128V128h512v384h256V128zm128 128v256h256V256h-256zM256 512h256V256H256v256zm384 128v256h256V640H640zm-384 384v256h256v-256H256zm1536 768V256h-384v384h-384v384H640v384H256v384h1536z"></path></svg><div>Pixelate</div><button class="value">Off ‣</button></div><div class="string hidden"><span class="ico"></span><div>Enable</div><input type="checkbox" class="style1"></div><div class="string hidden"><span class="ico"></span><div><svg class="ico" viewBox="0 0 17 17" fill="none"><path class="stroke" d="M8.5 0.5c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zM8.5 1.5c1.75 0 3.348 0.65 4.577 1.716l-9.86 9.861c-1.067-1.228-1.717-2.827-1.717-4.577 0-3.859 3.14-7 7-7zM8.5 15.5c-1.75 0-3.348-0.65-4.577-1.716l9.86-9.861c1.067 1.228 1.717 2.827 1.717 4.577 0 3.859-3.14 7-7 7z" fill="#000000"></path></svg><input type="range" min="0" max="99"><svg class="ico" viewBox="0 0 2048 2048" fill="none"><path class="fill" d="M896 128h1024v1792H128V896h384V640H128V128h512v384h256V128zm128 128v256h256V256h-256zM256 512h256V256H256v256zm384 128v256h256V640H640zm-384 384v256h256v-256H256zm1536 768V256h-384v384h-384v384H640v384H256v384h1536z"></path></svg></div></div><div class="string"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M12 3V11M12 11L9 8M12 11L15 8M2.5 14.5L3.11612 15.1161C3.68206 15.6821 4.44964 16 5.25 16C6.05036 16 6.81794 15.6821 7.38388 15.1161L7.61612 14.8839C8.18206 14.3179 8.94964 14 9.75 14C10.5504 14 11.3179 14.3179 11.8839 14.8839L12.1161 15.1161C12.6821 15.6821 13.4496 16 14.25 16C15.0504 16 15.8179 15.6821 16.3839 15.1161L16.6161 14.8839C17.1821 14.3179 17.9496 14 18.75 14C19.5504 14 20.3179 14.3179 20.8839 14.8839L21.5 15.5M2.5 19.5L3.11612 20.1161C3.68206 20.6821 4.44964 21 5.25 21C6.05036 21 6.81794 20.6821 7.38388 20.1161L7.61612 19.8839C8.18206 19.3179 8.94964 19 9.75 19C10.5504 19 11.3179 19.3179 11.8839 19.8839L12.1161 20.1161C12.6821 20.6821 13.4496 21 14.25 21C15.0504 21 15.8179 20.6821 16.3839 20.1161L16.6161 19.8839C17.1821 19.3179 17.9496 19 18.75 19C19.5504 19 20.3179 19.3179 20.8839 19.8839L21.5 20.5" stroke="#131A29"></path></svg><div>Blur</div><button class="value">Off ‣</button></div><div class="string hidden"><span class="ico"></span><div>Enable</div><input type="checkbox" class="style1"></div><div class="string hidden"><span class="ico"></span><div><svg class="ico" viewBox="0 0 17 17" fill="none"><path class="stroke" d="M8.5 0.5c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zM8.5 1.5c1.75 0 3.348 0.65 4.577 1.716l-9.86 9.861c-1.067-1.228-1.717-2.827-1.717-4.577 0-3.859 3.14-7 7-7zM8.5 15.5c-1.75 0-3.348-0.65-4.577-1.716l9.86-9.861c1.067 1.228 1.717 2.827 1.717 4.577 0 3.859-3.14 7-7 7z" fill="#000000"></path></svg><input type="range" min="0" max="10"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M12 3V11M12 11L9 8M12 11L15 8M2.5 14.5L3.11612 15.1161C3.68206 15.6821 4.44964 16 5.25 16C6.05036 16 6.81794 15.6821 7.38388 15.1161L7.61612 14.8839C8.18206 14.3179 8.94964 14 9.75 14C10.5504 14 11.3179 14.3179 11.8839 14.8839L12.1161 15.1161C12.6821 15.6821 13.4496 16 14.25 16C15.0504 16 15.8179 15.6821 16.3839 15.1161L16.6161 14.8839C17.1821 14.3179 17.9496 14 18.75 14C19.5504 14 20.3179 14.3179 20.8839 14.8839L21.5 15.5M2.5 19.5L3.11612 20.1161C3.68206 20.6821 4.44964 21 5.25 21C6.05036 21 6.81794 20.6821 7.38388 20.1161L7.61612 19.8839C8.18206 19.3179 8.94964 19 9.75 19C10.5504 19 11.3179 19.3179 11.8839 19.8839L12.1161 20.1161C12.6821 20.6821 13.4496 21 14.25 21C15.0504 21 15.8179 20.6821 16.3839 20.1161L16.6161 19.8839C17.1821 19.3179 17.9496 19 18.75 19C19.5504 19 20.3179 19.3179 20.8839 19.8839L21.5 20.5" stroke="#131A29"></path></svg></div></div></div>
<text class="header small">Post effects</text>
<div class="box" id="postEffectsBox"><div class="string"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path class="stroke" d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg><div>Crop</div><input type="checkbox" class="style1"></div><div class="string"><svg class="ico" viewBox="0 0 32 32" fill="none"><path class="stroke" d="M0 28v4h4v-1.984h-1.984v-2.016h-2.016zM0 4h2.016v-1.984h1.984v-2.016h-4v4zM4 28h24v-24h-24v24zM8 24v-16h16v16h-16zM10.016 22.016h2.656q-0.352-0.16-0.768-0.608t-1.056-1.28-0.832-1.12v3.008zM10.016 12q0 0.832 0.576 1.44t1.408 0.576 1.408-0.576 0.608-1.44-0.608-1.408-1.408-0.576-1.408 0.576-0.576 1.408zM13.216 22.016h8.8v-7.328q-0.48-0.512-0.96-0.608t-0.992 0.16-0.96 0.8-1.024 1.184-0.992 1.408-1.024 1.472-0.96 1.344-0.96 1.024-0.928 0.544zM28 30.016v1.984h4v-4h-1.984v2.016h-2.016zM28 2.016h2.016v1.984h1.984v-4h-4v2.016z"></path></svg><div>Content aware crop</div><input type="checkbox" class="style1"></div><div class="string"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="stroke" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle class="stroke" cx="9" cy="7" r="4"></circle><path class="stroke" d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path class="stroke" d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><div>Shadow</div><input type="checkbox" class="style1"></div></div>
</div>
<div id="rightBoxHeader" class="header">Color</div>
<div>Selected: <span id="selectedName">Nothing</span></div>
<div id="colorBoxes" class="hidden"></div>
<div id="slidersBox" class="sliderBox"><div class="contentBox"><div style="display: flex;"><input type="range" min="0" max="359" class="sliderHUE color" style="width: calc(100% - 70px);"><input type="text" class="sliderNumber" style="width: 24px;"></div><div style="display: flex;"><input type="range" min="0" max="100" class="sliderSaturation color" style="width: calc(100% - 70px);"><input type="text" class="sliderNumber" style="width: 24px;"></div><div style="display: flex;"><input type="range" min="0" max="200" class="sliderBrightness color" style="width: calc(100% - 70px);"><input type="text" class="sliderNumber" style="width: 24px;"></div></div><div class="previewBox"><div></div><input type="text" maxlength="7" class="sliderNumber" style="width: 55px;"></div></div>
<div id="presetsBox"><div class="header">Presets</div><div class="button color" lang="001f3f" id="presetButton1" style="background-color: rgb(0, 31, 63); box-shadow: rgb(0, 31, 63) 0px 0px 3px, rgb(0, 31, 63) 0px 0px 3px inset; border: 2px solid rgb(0, 11, 43);"></div><div class="button color" lang="0074d9" id="presetButton2" style="background-color: rgb(0, 116, 217); box-shadow: rgb(0, 116, 217) 0px 0px 3px, rgb(0, 116, 217) 0px 0px 3px inset; border: 2px solid rgb(0, 96, 197);"></div><div class="button color" lang="7fdbff" id="presetButton3" style="background-color: rgb(127, 219, 255); box-shadow: rgb(127, 219, 255) 0px 0px 3px, rgb(127, 219, 255) 0px 0px 3px inset; border: 2px solid rgb(107, 199, 235);"></div><div class="button color" lang="39cccc" id="presetButton4" style="background-color: rgb(57, 204, 204); box-shadow: rgb(57, 204, 204) 0px 0px 3px, rgb(57, 204, 204) 0px 0px 3px inset; border: 2px solid rgb(37, 184, 184);"></div><div class="button color" lang="3d9970" id="presetButton5" style="background-color: rgb(61, 153, 112); box-shadow: rgb(61, 153, 112) 0px 0px 3px, rgb(61, 153, 112) 0px 0px 3px inset; border: 2px solid rgb(41, 133, 92);"></div><div class="button color" lang="2ecc40" id="presetButton6" style="background-color: rgb(46, 204, 64); box-shadow: rgb(46, 204, 64) 0px 0px 3px, rgb(46, 204, 64) 0px 0px 3px inset; border: 2px solid rgb(26, 184, 44);"></div><div class="button color" lang="01ff70" id="presetButton7" style="background-color: rgb(1, 255, 112); box-shadow: rgb(1, 255, 112) 0px 0px 3px, rgb(1, 255, 112) 0px 0px 3px inset; border: 2px solid rgb(0, 235, 92);"></div><div class="button color" lang="ffdc00" id="presetButton8" style="background-color: rgb(255, 220, 0); box-shadow: rgb(255, 220, 0) 0px 0px 3px, rgb(255, 220, 0) 0px 0px 3px inset; border: 2px solid rgb(235, 200, 0);"></div><div class="button color" lang="ff851b" id="presetButton9" style="background-color: rgb(255, 133, 27); box-shadow: rgb(255, 133, 27) 0px 0px 3px, rgb(255, 133, 27) 0px 0px 3px inset; border: 2px solid rgb(235, 113, 7);"></div><div class="button color" lang="ff4136" id="presetButton10" style="background-color: rgb(255, 65, 54); box-shadow: rgb(255, 65, 54) 0px 0px 3px, rgb(255, 65, 54) 0px 0px 3px inset; border: 2px solid rgb(235, 45, 34);"></div><div class="button color" lang="85144b" id="presetButton11" style="background-color: rgb(133, 20, 75); box-shadow: rgb(133, 20, 75) 0px 0px 3px, rgb(133, 20, 75) 0px 0px 3px inset; border: 2px solid rgb(113, 0, 55);"></div><div class="button color" lang="f012be" id="presetButton12" style="background-color: rgb(240, 18, 190); box-shadow: rgb(240, 18, 190) 0px 0px 3px, rgb(240, 18, 190) 0px 0px 3px inset; border: 2px solid rgb(220, 0, 170);"></div><div class="button color" lang="b10dc9" id="presetButton13" style="background-color: rgb(177, 13, 201); box-shadow: rgb(177, 13, 201) 0px 0px 3px, rgb(177, 13, 201) 0px 0px 3px inset; border: 2px solid rgb(157, 0, 181);"></div><div class="button color" lang="111111" id="presetButton14" style="background-color: rgb(17, 17, 17); box-shadow: rgb(17, 17, 17) 0px 0px 3px, rgb(17, 17, 17) 0px 0px 3px inset; border: 2px solid rgb(0, 0, 0);"></div><div class="button color" lang="aaaaaa" id="presetButton15" style="background-color: rgb(170, 170, 170); box-shadow: rgb(170, 170, 170) 0px 0px 3px, rgb(170, 170, 170) 0px 0px 3px inset; border: 2px solid rgb(150, 150, 150);"></div><div class="button color" lang="dddddd" id="presetButton16" style="background-color: rgb(221, 221, 221); box-shadow: rgb(221, 221, 221) 0px 0px 3px, rgb(221, 221, 221) 0px 0px 3px inset; border: 2px solid rgb(201, 201, 201);"></div><div class="button color" lang="ffffff" id="presetButton17" style="background-color: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) 0px 0px 3px, rgb(255, 255, 255) 0px 0px 3px inset; border: 2px solid rgb(235, 235, 235);"></div></div>
<div id="palletsBox"><div class="header"><span onclick="showHideElements( this, true );">Skin <a>></a></span></div><div class="palette hidden"><div class="button color" lang="#d1b399" style="background-color: rgb(209, 179, 153);"></div><div class="button color" lang="#e0c1a7" style="background-color: rgb(224, 193, 167);"></div><div class="button color" lang="#f0d0b5" style="background-color: rgb(240, 208, 181);"></div><div class="button color" lang="#ffdfc4" style="background-color: rgb(255, 223, 196);"></div><div class="button color" lang="#ffeed3" style="background-color: rgb(255, 238, 211);"></div><div class="button color" lang="#fffde2" style="background-color: rgb(255, 253, 226);"></div><div class="button color" lang="#fffff1" style="background-color: rgb(255, 255, 241);"></div><div class="button color" lang="#837161" style="background-color: rgb(131, 113, 97);"></div><div class="button color" lang="#6B523D" style="background-color: rgb(107, 82, 61);"></div><div class="button color" lang="#503927" style="background-color: rgb(80, 57, 39);"></div></div><div class="header"><span onclick="showHideElements( this, true );">Eyes <a>></a></span></div><div class="palette hidden"><div class="button color" lang="#98f6ce" style="background-color: rgb(152, 246, 206);"></div><div class="button color" lang="#7ab2ff" style="background-color: rgb(122, 178, 255);"></div><div class="button color" lang="#8682ff" style="background-color: rgb(134, 130, 255);"></div><div class="button color" lang="#525063" style="background-color: rgb(82, 80, 99);"></div><div class="button color" lang="#453e47" style="background-color: rgb(69, 62, 71);"></div><div class="button color" lang="#615348" style="background-color: rgb(97, 83, 72);"></div><div class="button color" lang="#427447" style="background-color: rgb(66, 116, 71);"></div><div class="button color" lang="#542725" style="background-color: rgb(84, 39, 37);"></div></div><div class="header"><span onclick="showHideElements( this, true );">Leather/wood <a>></a></span></div><div class="palette hidden"><div class="button color" lang="#545148" style="background-color: rgb(84, 81, 72);"></div><div class="button color" lang="#574131" style="background-color: rgb(87, 65, 49);"></div><div class="button color" lang="#613D1C" style="background-color: rgb(97, 61, 28);"></div><div class="button color" lang="#81693D" style="background-color: rgb(129, 105, 61);"></div><div class="button color" lang="#B58B77" style="background-color: rgb(181, 139, 119);"></div></div><div class="header"><span onclick="showHideElements( this, true );">Metal <a>></a></span></div><div class="palette hidden"><div class="button color" lang="#585E62" style="background-color: rgb(88, 94, 98);"></div><div class="button color" lang="#808080" style="background-color: rgb(128, 128, 128);"></div><div class="button color" lang="#848D93" style="background-color: rgb(132, 141, 147);"></div><div class="button color" lang="#3F4346" style="background-color: rgb(63, 67, 70);"></div></div><div class="header"><span onclick="showHideElements( this, true );">Cloth <a>></a></span></div><div class="palette hidden"><div class="button color" lang="#58614A" style="background-color: rgb(88, 97, 74);"></div><div class="button color" lang="#907D5B" style="background-color: rgb(144, 125, 91);"></div><div class="button color" lang="#A31810" style="background-color: rgb(163, 24, 16);"></div><div class="button color" lang="#B34B47" style="background-color: rgb(179, 75, 71);"></div><div class="button color" lang="#688F9D" style="background-color: rgb(104, 143, 157);"></div></div></div>
</div>
<div class="zoomBox">
<svg class="ico" viewBox="0 0 24 24" fill="none"><circle class="stroke" cx="11" cy="11" r="8"></circle><line class="stroke" x1="21" y1="21" x2="16.65" y2="16.65"></line><line class="stroke" x1="8" y1="11" x2="14" y2="11"></line></svg>
<input type="range" min="-50" max="100" step="5" value="0" oninput="setZoom( this.value );" id="zoomRange">
<svg class="ico" viewBox="0 0 24 24" fill="none"><circle class="stroke" cx="11" cy="11" r="8"></circle><line class="stroke" x1="21" y1="21" x2="16.65" y2="16.65"></line><line class="stroke" x1="11" y1="8" x2="11" y2="14"></line><line class="stroke" x1="8" y1="11" x2="14" y2="11"></line></svg>
</div>
<!-- EDITOR MENU -->
<div class="hidden submenu" id="editorMenuBox">
<div class="button flex vCenter" onclick="printSprite();"><svg class="ico" viewBox="0 0 24 24" fill="none"><polyline class="stroke" points="6 9 6 2 18 2 18 9"></polyline><path class="stroke" d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect class="stroke" x="6" y="14" width="12" height="8"></rect></svg> Print</div>
<div class="button flex vCenter" onclick="exportToFrames();"><svg class="ico" viewBox="0 0 57 57" fill="none"><g><path class="fill" d="M47,12h-9.625l-6.652-5.82C31.497,5.537,32,4.581,32,3.5C32,1.57,30.43,0,28.5,0S25,1.57,25,3.5 c0,1.081,0.503,2.037,1.276,2.68L19.625,12H10c-0.553,0-1,0.448-1,1v43c0,0.552,0.447,1,1,1h37c0.553,0,1-0.448,1-1V13 C48,12.448,47.553,12,47,12z M11,15.414l6,6v26.172l-6,6V15.414z M44.586,14l-6,6H18.414l-6-6H44.586z M38,38.519l-3.747,2.998 L27.348,30.47c-0.152-0.244-0.402-0.411-0.687-0.457c-0.285-0.047-0.574,0.032-0.797,0.215L19,35.881V22h19V38.519z M19,38.472 l7.256-5.975l6.896,11.033c0.151,0.242,0.398,0.408,0.68,0.456C33.888,43.995,33.944,44,34,44c0.226,0,0.446-0.076,0.625-0.219 l3.375-2.7V47H19V38.472z M18.414,49h20.172l6,6H12.414L18.414,49z M40,47.586V21.414l6-6v38.172L40,47.586z M28.5,2 C29.327,2,30,2.673,30,3.5S29.327,5,28.5,5S27,4.327,27,3.5S27.673,2,28.5,2z M28.388,6.989C28.426,6.99,28.462,7,28.5,7 s0.074-0.01,0.112-0.011L34.339,12H22.661L28.388,6.989z"></path><path class="fill" d="M32,31c2.206,0,4-1.794,4-4s-1.794-4-4-4s-4,1.794-4,4S29.794,31,32,31z M32,25c1.103,0,2,0.897,2,2s-0.897,2-2,2 s-2-0.897-2-2S30.897,25,32,25z"></path></g></svg> Token stamp tool</div>
<!-- <div class="button flex vCenter" onClick="saveSprite();"><img title="save" class="ico"> Save</div> -->
<div class="button flex vCenter" onclick="exportAsLocalSet();" onmouseover="app.tooltip.show( 'Save as user set' , event );"><svg class="ico" viewBox="0 0 512 512" fill="none"><path class="stroke" d="M314.21,482.32,257.44,367.58l-44.89-57.39a72.82,72.82,0,0,1-10.13-37.05V144h15.67a40.22,40.22,0,0,1,40.23,40.22V367.58" style="stroke-width:32px"></path><path class="stroke" d="M127.9,293.05V218.53S165.16,144,202.42,144" style="stroke-width:32px"></path><line class="stroke" x1="370.1" y1="274.42" x2="304" y2="231" style="stroke-width:32px"></line><line class="stroke" x1="170.53" y1="478.36" x2="224" y2="400" style="stroke-width:32px"></line><circle class="stroke" cx="258.32" cy="69.48" r="37.26" style="stroke-width:32px"></circle></svg> Save as user set</div>
<div class="button flex vCenter" onclick="randomizeElements();" onmouseover="app.tooltip.show( 'Randomize posture' , event );"><svg class="ico" viewBox="0 0 24 24" fill="none"><path class="fill" d="M17,2H7A5,5,0,0,0,2,7V17a5,5,0,0,0,5,5H17a5,5,0,0,0,5-5V7A5,5,0,0,0,17,2Zm3,15a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V7A3,3,0,0,1,7,4H17a3,3,0,0,1,3,3ZM8,15a1,1,0,1,0,1,1A1,1,0,0,0,8,15Zm4-4a1,1,0,1,0,1,1A1,1,0,0,0,12,11ZM8,7A1,1,0,1,0,9,8,1,1,0,0,0,8,7Zm8,8a1,1,0,1,0,1,1A1,1,0,0,0,16,15Zm0-8a1,1,0,1,0,1,1A1,1,0,0,0,16,7Z"></path></svg> Randomize</div>
<div class="button flex vCenter" onclick="exportPosture();"><svg class="ico" viewBox="0 0 24 24" fill="none"><polyline class="stroke" points="16 16 12 12 8 16"></polyline><line class="stroke" x1="12" y1="12" x2="12" y2="21"></line><path class="stroke" d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline class="stroke" points="16 16 12 12 8 16"></polyline></svg> Export</div>
<div class="button flex vCenter" onclick="show( 'importExportBox' );"><svg class="ico" viewBox="0 0 24 24" fill="none"><polyline class="stroke" points="8 17 12 21 16 17"></polyline><line class="stroke" x1="12" y1="12" x2="12" y2="21"></line><path class="stroke" d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg> Import</div>
<div class="button flex vCenter" onclick="postSprite();"><svg class="ico" viewBox="0 0 32 32" fill="none"><path class="fill" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"></path></svg> Share on Discord</div>
<!-- <div class="button flex vCenter" onClick="copyTextToClipboard( document.location.href );"><img title="share" class="ico"> Share posture url</div> -->
<!--
<div class="button flex vCenter"><img title="help" class="ico"> Undo</div> -->
<div class="button flex vCenter" onclick="resetAll();clearAll( true );selectDefaultElements();" onmouseover="app.tooltip.show( 'Restore default elements' , event );"><svg class="ico" viewBox="0 0 24 24" fill="none"><polyline class="stroke" points="1 4 1 10 7 10"></polyline><polyline class="stroke" points="23 20 23 14 17 14"></polyline><path class="stroke" d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg> Reset</div>
<div class="button flex vCenter" onclick="undoOperation();" onmouseover="app.tooltip.show( 'Undo last operation' , event );"><svg class="ico" viewBox="0 0 24 24" fill="none"><polyline class="stroke" points="1 4 1 10 7 10"></polyline><path class="stroke" d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg> Undo</div>
<!-- <div class="button flex vCenter" onClick="copyTextToClipboard( document.location.href );"><img title="share" class="ico"> Share</div> -->
<!-- <div class="button flex vCenter" onClick="importPosture();"><img title="upload_cloud" class="ico"> Import posture</div> -->
<!-- <div class="button flex vCenter" onClick="exportPosture();"><img title="download-cloud" class="ico"> Export posture</div> -->
</div>
<script>
// Build effects
let effectBox = document.getElementById( 'effectsBox' );
editor.effects.mirrorH = new Effect( 0, 1, 'mirrorH', 'Mirror', 'flip_v', 'string' );
editor.effects.mirrorH.setChangeCallback( function( name, value ){
let canBox = getCanBox();
if( canBox != undefined ){
if( editor.effects.mirrorH.isEnable() ){
canBox.classList.add( 'mirror' );
}else{
canBox.classList.remove( 'mirror' );
}
}
} );
editor.effects.mirrorH.appendElement( effectBox );
editor.effects.brightness = new Effect( 0, 200, 'brightness', 'Brightness', 'sun', 'string', 100, 'min-sun' );
editor.effects.brightness.setChangeCallback( spriteSetEffect );
editor.effects.brightness.appendElement( effectBox );
editor.effects.contrast = new Effect( 0, 200, 'contrast', 'Contrast', 'contrast', 'string', 100 );
editor.effects.contrast.setChangeCallback( spriteSetEffect );
editor.effects.contrast.appendElement( effectBox );
editor.effects.saturation = new Effect( 0, 200, 'saturation', 'Saturation', 'saturation', 'string', 100 );
editor.effects.saturation.setChangeCallback( spriteSetEffect );
editor.effects.saturation.appendElement( effectBox );
editor.effects.pixelate = new Effect( 0, 99, 'pixelate', 'Pixelate', 'resolution', 'string', 0 );
editor.effects.pixelate.setChangeCallback( spriteSetEffect );
editor.effects.pixelate.appendElement( effectBox );
editor.effects.blur = new Effect( 0, 10, 'blur', 'Blur', 'water_arrow_up', 'string', 0 );
editor.effects.blur.setChangeCallback( spriteSetEffect );
editor.effects.blur.appendElement( effectBox );
// POST EFFECTS
let postBox = document.getElementById( 'postEffectsBox' );
editor.effects.crop = new Effect( 0, 1, 'crop', 'Crop', 'crop', 'string' );
editor.effects.crop.setChangeCallback( applyCropFrame );
editor.effects.crop.appendElement( postBox );
editor.effects.emptyCrop = new Effect( 0, 1, 'emptyCrop', 'Content aware crop', 'crop2', 'string' );
editor.effects.emptyCrop.setChangeCallback( function( name, value ){
if( editor.effects.emptyCrop.isEnable() ) message.info( 'Saved image will be cropped based on content' );
} );
editor.effects.emptyCrop.appendElement( postBox );
editor.effects.borderShadow = new Effect( 0, 1, 'shadow', 'Shadow', 'users', 'string' );
editor.effects.borderShadow.setChangeCallback( function( name, value ){
if( editor.effects.borderShadow.isEnable() ) message.info( 'Image will be saved with the shadow effect' );
} );
editor.effects.borderShadow.appendElement( postBox );
// END
window.onload = function(){
initColorSliders();
initPaletts();
initPresets();
loadData();
resetsAllEffects();
setZoom( 0 );
let mb = document.getElementById( 'editorMenu' );
if( mb != undefined ) mb.classList.remove( 'hidden' );
let menu = document.getElementById( 'menuBox' );
if( menu != undefined && mb != undefined ){
menu.prepend( mb );
}
// app.keysPress.ctrl_callback = unMovePreview;
colorSliders_setCustomCallback( function(){
if( colorSliders_data.targetLayer != undefined ){
presets_resetSelectPreset();
recolorLayer( colorSliders_data.targetLayer, colorSliders_data.hsb );
let elementID = editor.targetLayerElements[ colorSliders_data.targetLayer ];
//Если у элемента указан colorChild красим еще элемент
if( editor.elements[ elementID ] != undefined ){
let colorChilds = editor.elements[ elementID ].colorChilds;
for( let ind in colorChilds ){
let colorChild = colorChilds[ i ];
recolorLayer( editor.elements[ colorChild ].targetLayer, colorSliders_data.hsb );
}
}
}
}, 123 );
//FIXME: Убрать перед релизом
let button = document.getElementById( 'lpbPose' );
if( button == undefined ){
console.warn( 'inline lpbPose undefiend' );
}else{
if( button.onclick != undefined ) button.onclick();
}
loadPosture( 1 );
loadLocalSets();
};
function resetsAllEffects()
{
editor.effects.mirrorH.setEnable( false );
editor.effects.brightness.setEnable( false );
editor.effects.contrast.setEnable( false );
editor.effects.saturation.setEnable( false );
editor.effects.pixelate.setEnable( false );
editor.effects.blur.setEnable( false );
editor.effects.crop.setEnable( false );
editor.effects.emptyCrop.setEnable( false );
editor.effects.borderShadow.setEnable( false );
allRedraw();
}
</script>
<style>
.button.posture:hover, .button.element:hover, .button.filter:hover{
transform: none;
z-index: unset;
position: static;
transition: none;
}
#importExportBox.hidden{ top: 4px !important; left: 90px !important; }
#tooltipBox .preview{ width: 280px; }
</style>
<footer>2019 - 2024<br>Created by <a href="https://www.drsmyrke.ru" target="_blank"><b>DrSmyrke</b></a>, art by Grantovich and Grang. This is completely non-commerical, fan driven project. All reference images belong to their respective owners.<br>Original content is licensed under <a href="https://creativecommons.org/licenses/by/4.0/"><b>Creative Commons Attribution 4.0 international license.</b></a></footer>
<nav class="context-menu flex column hidden"></nav><style type="text/css">.effectsBox .ico{ width: 24px; }</style></body></html>