<body>
<div class="wrapper" id="wrapper">
<div class="app" id="app">
<div class="app__icon" id="app__icon">
<i class="fas fa-broom"></i>
</div>
<h2 class="app__name">Get Color!</h2>
<p class="app__description">Сервис, в котором ты можешь получить необходимый цвет в Hex формате, а также в RGBA. Сохраняй полученные цвета, комбинируй, создавай!</p>
</div>
</div>
<!-- Desktop version -->
<div class="app-interface unvisible" id="app-interface">
<div class="app-interface__window" id="app-interface__window">
<header class="app-interface__titlebar" id="app-interface__titlebar">
<div class="app-interface__titlebaricon" id="app-interface__titlebaricon">
<i class="fas fa-broom"></i>
</div>
<div class="app-interface__titlebarcaption" id="app-interface__titlebarcaption">
Get Color!
</div>
<div class="app-interface__closebutton" id="app-interface__closebutton">
<i class="fas fa-times"></i>
</div>
</header>
<div class="app-interface__content" id="app-interface__content">
<!-- Your App Here -->
<section class="getcolor-colorsblock">
<?php
for ($i = 1; $i <= 48; $i++) {
echo '<div class="getcolor-colorsblock__color getcolor-colorsblock__color_c' . $i . '" id="getcolor-colorsblock__color_c' . $i . '"></div>';
}
?>
</section>
<section class="getcolor-pickerblock">
<div class="getcolor-pickerblock__picker" id="getcolor-pickerblock__picker">
<div class="getcolor-pickerblock__picker-cursor" id="getcolor-pickerblock__picker-cursor"></div>
</div>
</section>
<section class="getcolor-hslcodeblock">
<span class="getcolor-hslcodeblock__prefix">H:
<input type="text"
class="getcolor-hslcodeblock__hsl"
id="getcolor-hslcodeblock__hsl_h"
maxlength="3"
value="0">
</span>
<span class="getcolor-hslcodeblock__prefix">S:
<input type="text"
class="getcolor-hslcodeblock__hsl"
id="getcolor-hslcodeblock__hsl_s"
maxlength="3"
value="100">
</span>
<span class="getcolor-hslcodeblock__prefix">L:
<input type="text"
class="getcolor-hslcodeblock__hsl"
id="getcolor-hslcodeblock__hsl_l"
maxlength="3"
value="50">
</span>
<span class="getcolor-hslcodeblock__prefix">A:
<input type="text"
class="getcolor-hslcodeblock__hsl"
id="getcolor-hslcodeblock__hsl_a"
maxlength="4"
value="1.0">
</span>
</section>
<section class="getcolor-huelineblock">
<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-satlineblock">
<table class="getcolor-satlineblock__table" id="getcolor-satlineblock__table">
<tbody>
<tr>
<td class="getcolor-satlineblock__line" style="background:linear-gradient(to right, hsl(0,0%,50%),hsl(0,100%,50%))"></td>
</tr>
</tbody>
</table>
<table class="getcolor-satlineblock__table_cursor">
<tbody>
<tr>
<td>
<div class="getcolor-satlineblock__picker-cursor" id="getcolor-satlineblock__picker-cursor" style="left: 141px;"></div>
</td>
</tr>
</tbody>
</table>
</section>
<section class="getcolor-lightlineblock">
<table class="getcolor-lightlineblock__table" id="getcolor-lightlineblock__table">
<tbody>
<tr>
<td class="getcolor-lightlineblock__line" style="background:linear-gradient(to right, hsl(0,100%,0%),hsl(0,100%,50%),
hsl(0,100%,100%))"></td>
</tr>
</tbody>
</table>
<table class="getcolor-lightlineblock__table_cursor">
<tbody>
<tr>
<td>
<div class="getcolor-lightlineblock__picker-cursor" id="getcolor-lightlineblock__picker-cursor" style="left: 141px;"></div>
</td>
</tr>
</tbody>
</table>
</section>
<section class="getcolor-hexcodeblock">
<div class="getcolor-hexcodeblock__fieldblock">
<label for="getcolor-hexcodeblock__codefield_red"
class="getcolor-hexcodeblock__label">R:</label>
<input type="text"
class="getcolor-hexcodeblock__codefield getcolor-hexcodeblock__codefield_rgba"
id="getcolor-hexcodeblock__codefield_red"
maxlength="3"
value="255">
</div>
<div class="getcolor-hexcodeblock__fieldblock">
<label for="getcolor-hexcodeblock__codefield_green"
class="getcolor-hexcodeblock__label">G:</label>
<input type="text"
class="getcolor-hexcodeblock__codefield getcolor-hexcodeblock__codefield_rgba"
id="getcolor-hexcodeblock__codefield_green"
maxlength="3"
value="0">
</div>
<div class="getcolor-hexcodeblock__fieldblock">
<label for="getcolor-hexcodeblock__codefield_blue"
class="getcolor-hexcodeblock__label">B:</label>
<input type="text"
class="getcolor-hexcodeblock__codefield getcolor-hexcodeblock__codefield_rgba"
id="getcolor-hexcodeblock__codefield_blue"
maxlength="3"
value="0">
</div>
<div class="getcolor-hexcodeblock__fieldblock">
<label for="getcolor-hexcodeblock__codefield_alpha"
class="getcolor-hexcodeblock__label">A:</label>
<input type="text"
class="getcolor-hexcodeblock__codefield getcolor-hexcodeblock__codefield_rgba"
id="getcolor-hexcodeblock__codefield_alpha"
maxlength="4"
value="1.0">
</div>
<div class="getcolor-hexcodeblock__fieldblock">
<label for="getcolor-hexcodeblock__codefield_hex"
class="getcolor-hexcodeblock__label">HEX код:</label>
<span class="getcolor-hexcodeblock__codefield getcolor-hexcodeblock__codefield_prefix">#
<input type="text"
class="getcolor-hexcodeblock__codefield_hex"
id="getcolor-hexcodeblock__codefield_hex"
maxlength="6"
value="FF0000">
</span>
</div>
</section>
<section class="getcolor-buttonsblock">
<div
class="getcolor-buttonsblock__button"
id="getcolor-buttonsblock__button_rgb">
<i class="far fa-copy"></i>
<span>RGB</span>
</div>
<div
class="getcolor-buttonsblock__button unvisible"
id="getcolor-buttonsblock__button_rgba">
<i class="far fa-copy"></i>
<span>RGBA</span>
</div>
<div
class="getcolor-buttonsblock__button"
id="getcolor-buttonsblock__button_hsl">
<i class="far fa-copy"></i>
<span>HSL</span>
</div>
<div
class="getcolor-buttonsblock__button unvisible"
id="getcolor-buttonsblock__button_hsla">
<i class="far fa-copy"></i>
<span>HSLA</span>
</div>
<div
class="getcolor-buttonsblock__button"
id="getcolor-buttonsblock__button_hex">
<i class="far fa-copy"></i>
<span>Hex</span>
</div>
<div
class="getcolor-buttonsblock__button unvisible"
id="getcolor-buttonsblock__button_hexa">
<i class="far fa-copy"></i>
<span>HexA</span>
</div>
<div
class="getcolor-buttonsblock__button"
id="getcolor-buttonsblock__button_change">
<i class="fas fa-fill"></i>
</div>
<div
class="getcolor-buttonsblock__button"
id="getcolor-buttonsblock__button_help">
<i class="fas fa-question"></i>
</div>
<div class="getcolor__colorwrapper">
<div class="getcolor__color" id="getcolor__color"></div>
</div>
</section>
<!-- END: Your App Here -->
</div>
</div>
<div class="app-dialog unvisible" id="app-dialog">
<div class="app-dialog__window" id="app-dialog__window">
<header class="app-dialog__titlebar" id="app-dialog__titlebar">
<div class="app-interface__titlebaricon" id="app-dialog__titlebaricon">
<i class="fas fa-broom"></i>
</div>
<div class="app-dialog__titlebarcaption" id="app-dialog__titlebarcaption"></div>
<div class="app-dialog__closebutton" id="app-dialog__closebutton">
<i class="fas fa-times"></i>
</div>
</header>
<div class="app-dialog__content">
<section class="getcolor-helpblock" id="getcolor-helpblock"></section>
</div>
</div>
</div>
</div>
<!-- END: Desktop version -->
<div class="message" id="message">
<p class="message__text" id="message__text">Message</p>
<div class="message__btn-close" id="message__btn-close">
<i class="far fa-times-circle"></i>
</div>
</div>
<script src="/com/getcolor.min.js"></script>
<!--<script src="/js/GetColor.js"></script>-->
</body>