<div class="app-interface__window unvisible" id="getcolor-interface__window">
<header class="app-interface__titlebar" id="getcolor-interface__titlebar">
<div class="app-interface__titlebaricon" id="getcolor-interface__titlebaricon">
<i class="fas fa-square"></i>
</div>
<div class="app-interface__titlebarcaption" id="getcolor-interface__titlebarcaption">
Диалог цвета
</div>
<div class="app-interface__closebutton" id="getcolor-interface__closebutton">
<i class="fas fa-times"></i>
</div>
</header>
<div class="app-interface__content" id="getcolor-interface__content">
<!-- Your App Here -->
<!-- ******* TAB_1: Color *******-->
<section class="getcolor-fillswitcher getcolor-tabsection" data-info="color">
<div class="om-switch getcolor-switch" id="getcolor-switch">
<div class="om-switch__element om-switch__element_active getcolor-switch__element"
id="getcolor-switch__element_button">Кнопка</div>
<div class="om-switch__element getcolor-switch__element"
id="getcolor-switch__element_text">Текст</div>
</div>
</section>
<section class="getcolor-colorsblock getcolor-tabsection" data-info="color">
<?php
for ($i = 1; $i <= 22; $i++) {
echo '<div class="getcolor-colorsblock__color getcolor-colorsblock__color_c' . $i . '" id="getcolor-colorsblock__color_c' . $i . '"></div>';
}
?>
</section>
<section class="getcolor-pickerblock getcolor-tabsection" data-info="color">
<div class="getcolor-pickerblock__picker" id="getcolor-pickerblock__picker"
data-hue="0" data-sat="100" data-light="50" data-opacity="1.0">
<div class="getcolor-pickerblock__picker-cursor" id="getcolor-pickerblock__picker-cursor"></div>
</div>
</section>
<section class="getcolor-rgbacodeblock getcolor-tabsection" data-info="color">
<span class="getcolor-rgbacodeblock__prefix">R:
<input type="text"
class="getcolor-rgbacodeblock__rgba"
id="getcolor-rgbacodeblock__rgba_r"
maxlength="3"
value="255">
</span>
<span class="getcolor-rgbacodeblock__prefix">G:
<input type="text"
class="getcolor-rgbacodeblock__rgba"
id="getcolor-rgbacodeblock__rgba_g"
maxlength="3"
value="0">
</span>
<span class="getcolor-rgbacodeblock__prefix">B:
<input type="text"
class="getcolor-rgbacodeblock__rgba"
id="getcolor-rgbacodeblock__rgba_b"
maxlength="3"
value="0">
</span>
<span class="getcolor-rgbacodeblock__prefix">A:
<input type="text"
class="getcolor-rgbacodeblock__rgba"
id="getcolor-rgbacodeblock__rgba_a"
maxlength="4"
value="1.0">
</span>
<div class="getcolor-rgbacodeblock__resultcolor"
id="getcolor-rgbacodeblock__resultcolor"></div>
</section>
<section class="getcolor-huelineblock getcolor-tabsection" data-info="color">
<table class="getcolor-huelineblock__table" id="getcolor-huelineblock__table">
<tbody>
<tr>
<td class="getcolor-huelineblock__line" style="background:linear-gradient(to right,hsl(0,100%,50%),
hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))"></td>
</tr>
</tbody>
</table>
<table class="getcolor-huelineblock__table_cursor">
<tbody>
<tr>
<td>
<div class="getcolor-huelineblock__picker-cursor" id="getcolor-huelineblock__picker-cursor" style="left: 141px;"></div>
</td>
</tr>
</tbody>
</table>
</section>
<section class="getcolor-opacitylineblock getcolor-tabsection" data-info="color">
<table class="getcolor-opacitylineblock__table" id="getcolor-opacitylineblock__table">
<tbody>
<tr>
<td class="getcolor-opacitylineblock__line"
style="background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
data-info="background: linear-gradient(90deg, hsla(0, 100, 50, 0.0),hsla(0, 100, 50, 1.0))">
</td>
</tr>
</tbody>
</table>
<table class="getcolor-opacitylineblock__table_cursor">
<tbody>
<tr>
<td>
<div class="getcolor-opacitylineblock__picker-cursor" id="getcolor-opacitylineblock__picker-cursor" style="left: 141px;"></div>
</td>
</tr>
</tbody>
</table>
</section>
<!-- ******* TAB_2: Layers *******-->
<section class="getcolor-layerlist getcolor-tabsection unvisible" data-info="layers">
<div class="getcolor-layerlist__layerscontrol">
<div class="om-label getcolor-layerlist__label">Слои объекта</div>
<div class="getcolor-layerlist__layerbuttons">
<div class="getcolor-layerlist__listbutton"
id="getcolor-layerlist__listbutton_addlayer">
<i class="fas fa-plus"></i>
</div>
<div class="getcolor-layerlist__listbutton"
id="getcolor-layerlist__listbutton_removelayer">
<i class="far fa-trash-alt"></i>
</div>
</div>
</div>
<div class="getcolor-layerlist__layerelement getcolor-layerlist__layerelement_active">
<div class="om-button om-button__text getcolor-layerlist__buttonnumber
getcolor-layerlist__buttonnumber_active">1</div>
<div class="getcolor-layerlist__color"
id="getcolor-layerlist__color_1"></div>
<span class="getcolor-layerlist__prefix getcolor-layerlist__prefix_hexa">Hexa:
<input type="text"
class="getcolor-layerlist__field getcolor-layerlist__field_hexa"
maxlength="9"
value="#FFDDEE64">
</span>
<span class="getcolor-layerlist__prefix getcolor-layerlist__prefix_stop">Стоп:
<input type="text"
class="getcolor-layerlist__field getcolor-layerlist__field_stop"
maxlength="3"
value="0">
</span>
<div class="om-button om-button__text getcolor-layerlist__removebutton">
<i class="fas fa-times"></i>
</div>
</div>
<div class="getcolor-layerlist__layerelement">
<div class="om-button om-button__text getcolor-layerlist__buttonnumber">2</div>
<div class="getcolor-layerlist__color"
id="getcolor-layerlist__color_2"></div>
<span class="getcolor-layerlist__prefix getcolor-layerlist__prefix_hexa">Hexa:
<input type="text"
class="getcolor-layerlist__field getcolor-layerlist__field_hexa"
maxlength="9"
value="#FFDDEE64">
</span>
<span class="getcolor-layerlist__prefix getcolor-layerlist__prefix_stop">Стоп:
<input type="text"
class="getcolor-layerlist__field getcolor-layerlist__field_stop"
maxlength="3"
value="0">
</span>
<div class="om-button om-button__text getcolor-layerlist__removebutton">
<i class="fas fa-times"></i>
</div>
</div>
</section>
<section class="getcolor-gradientsblock getcolor-tabsection unvisible" data-info="gradient">
<?php
for ($i = 1; $i <= 14; $i++) {
echo '<div class="getcolor-gradientsblock__gradient getcolor-gradientsblock__gradient_g' . $i . '" id="getcolor-gradientsblock__gradient_g' . $i . '"></div>';
}
?>
</section>
<section class="getcolor-gradientsettings getcolor-tabsection unvisible" data-info="gradient"
id="getcolor-gradientsettings">
<div class="getcolor-gradientsettings__buttonradial getcolor-gradientsettings__element"
id="getcolor-gradientsettings__buttonradial">Радиальный градиент</div>
<div class="om-button om-button__icon getcolor-gradientsettings__button unvisible getcolor-gradientsettings__element"
id="getcolor-gradientsettings__buttonlinear">Линейный градиент</div>
<span class="getcolor-gradientsettings__prefix getcolor-gradientsettings__prefix_degree getcolor-gradientsettings__element unvisible">Градус:
<input type="text"
class="getcolor-gradientsettings__field getcolor-gradientsettings__field_degree"
id="getcolor-gradientsettings__field_degree"
maxlength="4"
value="0">
</span>
<div class="om-button om-button__icon getcolor-gradientsettings__button getcolor-gradientsettings__element unvisible"
id="getcolor-gradientsettings__button_rotateleft">
<i class="fas fa-undo"></i> 15
</div>
<div class="om-button om-button__icon getcolor-gradientsettings__button getcolor-gradientsettings__element unvisible"
id="getcolor-gradientsettings__button_rotateright">
<i class="fas fa-redo"></i> 15
</div>
</section>
<section class="getcolor-codeblock getcolor-tabsection unvisible" data-info="gradient">
<div class="getcolor-codeblock__panel">
<div class="getcolor-codeblock__codetab"
id="getcolor-codeblock__codetab">CSS</div>
<div class="getcolor-codeblock__copy">Копировать</div>
<div class="getcolor-codeblock__codearea"
id="getcolor-codeblock__codearea">
<span class="getcolor-codeblock__linenumbers"
id="getcolor-codeblock__linenumbers">1</span>
<div class="getcolor-codeblock__code"
id="getcolor-codeblock__code">background: linear-gradient(167deg, rgba(0,0,0,1) 0%, rgba(0,32,146,1) 98%, rgba(24,66,185,1) 100%);</div>
</div>
</div>
</section>
<section class="getcolor-tabssection">
<div class="getcolor-tabssection__tab getcolor-tabssection__tab_active"
id="getcolor-tabssection__tab_color">
<i class="fas fa-palette"></i>
<span class="getcolor-tabssection__title">Цвет</span>
</div>
<div class="getcolor-tabssection__tab"
id="getcolor-tabssection__tab_layers">
<i class="fas fa-layer-group"></i>
<span class="getcolor-tabssection__title">Слои</span>
</div>
<div class="getcolor-tabssection__tab"
id="getcolor-tabssection__tab_gradient">
<i class="fas fa-fill"></i>
<span class="getcolor-tabssection__title">Градиент</span>
</div>
</section>
<!-- END: Your App Here -->
</div>
</div>
<script src="/js/GetColor.js"></script>