<link rel="stylesheet" href="/skineditor/css/styles.css">
                <script src="/skineditor/js/skineditor.js"></script>
                <div class="container">
                    <div id="skineditor-actions">
                        <a id="skin-download" class="btn change" download="skin.png"><i class="fa fa-save"></i>Сохранить</a>
                   <a id="skin-clean" class="btn change"><i class="fa fa-ban"></i>Очистить</a>
                        <form>
                            <label class="btn" for="load_skin"><i class="fa fa-upload"></i>Загрузить</label>
                            <input type="file" id="load_skin" name="load_skin" style="display:none"/>
                        </form>
                        <form enctype="multipart/form-data" action="/testkraft.html" method="POST"
                              style="display:none">
                            <input type="hidden" name="skin_image_data"/>
                            <input type="submit" value="Загрузить" id="form_submit" style="display:none"/>
                        </form>
                    </div>

                    <div id="skineditor">
                        <div id="canvas"></div>
                              <div class="conf">
                        <div id="bodyparts">
            
                            <div class="bodyparts">
                                <span>Туловище</span>
                                <div class="bodypart head" data-bodypart="head" data-layer="base"></div>
                                <div class="bodypart torso" data-bodypart="torso" data-layer="base"></div>
                                <div class="bodypart arm_left" data-bodypart="left_arm" data-layer="base"></div>
                                <div class="bodypart arm_right" data-bodypart="right_arm" data-layer="base"></div>
                                <div class="bodypart leg_left" data-bodypart="left_leg" data-layer="base"></div>
                                <div class="bodypart leg_right" data-bodypart="right_leg" data-layer="base"></div>
                            </div>
                            <div class="bodyparts">
                                <span style="padding-left: 6px;">Второй слой</span>
                                <div class="bodypart head hidden" data-bodypart="head" data-layer="overlay"></div>
                                <div class="bodypart torso hidden" data-bodypart="torso" data-layer="overlay"></div>
                                <div class="bodypart arm_left hidden" data-bodypart="left_arm"
                                     data-layer="overlay"></div>
                                <div class="bodypart arm_right hidden" data-bodypart="right_arm"
                                     data-layer="overlay"></div>
                                <div class="bodypart leg_left hidden" data-bodypart="left_leg"
                                     data-layer="overlay"></div>
                                <div class="bodypart leg_right hidden" data-bodypart="right_leg"
                                     data-layer="overlay"></div>
                            </div>
                        </div> 
                  </div>
                        <div id="skineditor-controls"><div align="center">Если зажать правую кнопку мыши - пермещение скина, если левую вне скина - вращение.</div>
                  
                            <div id="skineditor-tools">
                                <a href="#" class="tool active" id="brush" title="Кисть">
                                    <i class="fa fa-paint-brush"></i>
                                </a>
                                <a href="#" class="tool" id="eyedropper" title="Пипетка, позволят узнать цвет">
                                    <i class="fa fa-eyedropper"></i>
                                </a>
                                <a href="#" class="tool" id="fill" title="Заливка">
                                    <i class="fa fa-tint"></i>
                                </a>
                                 <a href="#" class="tool" id="eraser" title="Ластик, убирает любой цвет, работает только на 2 слое">
                                    <i class="fa fa-eraser"></i>
                                </a>
                                <a href="#" id="zoomout" title="Уменьшение">
                                    <i class="fa fa-search-minus"></i>
                                </a>
                                <a href="#" id="zoomin" title="Увеличение">
                                    <i class="fa fa-search-plus"></i>
                                </a>
                                <a href="#" id="reset-view" title="Сбросить вид">
                                    <i class="fa fa-camera"></i>
                                </a>
                                <a href="#" id="move" title="Переместить модель, зажми ЛКМ на кнопке и води">
                                    <i class="fa fa-arrows-alt"></i>
                                </a>
                                <a href="#" class="inactive" id="undo" title="Отменить">
                                    <i class="fa fa-undo"></i>
                                </a>
                                <a href="#" class="inactive" id="redo" title="Вернуть">
                                    <i class="fa fa-redo"></i>
                                </a>
                            </div>
                            <div id="skineditor-colors">
                                <div class="color active" data-color="#0074d9"
                                     style="background-color: rgb(0, 116, 217);"></div>
                                <div class="color" data-color="#7fdbff"
                                     style="background-color: rgb(127, 219, 255);"></div>
                                <div class="color" data-color="#01ff70"
                                     style="background-color: rgb(1, 255, 112);"></div>
                                <div class="color" data-color="#ffdc00"
                                     style="background-color: rgb(255, 220, 0);"></div>
                                <div class="color" data-color="#ff851b"
                                     style="background-color: rgb(255, 133, 27);"></div>
                                <div class="color" data-color="#ff4136"
                                     style="background-color: rgb(255, 65, 54);"></div>
                                <div class="color" data-color="#f012be"
                                     style="background-color: rgb(240, 18, 190);"></div>
                                <div class="color" data-color="#ffffff"
                                     style="background-color: rgb(255, 255, 255);"></div>
                                <div class="color" data-color="#111111"
                                     style="background-color: rgb(17, 17, 17);"></div>
                            </div>
                            <div id="skineditor-options">
                               
                                <label>Положение:</label>
                                <select id="pose">
                                    <option value="Default">Нормальное</option>
                                    <option value="Walk">Ходьба</option>
                                    <option value="Hug">Зарядка</option>
                                    <option value="Run">Бег</option>
                                    <option value="Fly">Полет</option>
                                </select>
                                <label for="showgrid">Сетка:</label><input type="checkbox" id="showgrid" checked>
                            </div>
                        </div>
                    </div>
                </div>
            
            


  <script type="text/javascript" src="/skineditor/js/editor.js"></script>