<body>
<div class="wrapper" id="wrapper">
<div
class="app"
id="app"
data-app-name="Creative Button"
data-app-description="Сервис создания CSS стиля кнопки от Popov.Dev">
<div class="app__icon" id="app__icon">
<i class="fas fa-square"></i>
</div>
<h2 class="app__name">Creative Button</h2>
<p class="app__description">Хочешь создать свою неповторимую кнопку с помощью кода? Тогда это твой сервис. Есть библиотека готовых решений и можешь создать собственное.</p>
</div>
</div>
<!-- Desktop version -->
<div class="app-interface unvisible" id="app-interface">
<div class="app-interface__window" id="app-interface__window" data-info="app">
<header class="app-interface__titlebar" id="app-interface__titlebar">
<div class="app-interface__titlebaricon" id="app-interface__titlebaricon">
<i class="fas fa-square"></i>
</div>
<div class="app-interface__titlebarcaption" id="app-interface__titlebarcaption">
Creative Button
</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="creativebutton-managebutton">
<div
class="om-button om-button__icon om-button__help creativebutton-managebutton__button_menu"
id="creativebutton-managebutton__button_menu"
data-help="Шаблоны">
<i class="fas fa-bars"></i>
</div>
<div class="creativebutton-menuoverlay"
id="creativebutton-menuoverlay_app">
<div class="creativebutton-menuoverlay__content">
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_templatebasic">Basic</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_templatecreative">Creative</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_templatesolid">Solid</div>
<div class="creativebutton-menuoverlay__element
creativebutton-menuoverlay__element_close">Закрыть</div>
</div>
</div>
<input type="text"
class="om-field creativebutton-managebutton__field"
id="creativebutton-managebutton__field_buttonname"
maxlength="20"
value="Button caption">
<div
class="om-button om-button__icon om-button__help creativebutton-managebutton__button_code"
id="creativebutton-managebutton__button_code"
data-help="Код">
<i class="fas fa-code"></i>
</div>
</section>
<section
class="creativebutton-normalstate"
id="creativebutton-normalstate">
<div
class="om-button om-button__content creativebutton-normalstate__element"
id="creativebutton-normalstate__button_content">
Нормальное состояние
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-normalstate__button creativebutton-normalstate__button_back creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_back"
data-help="Скрыть">
<i class="fas fa-angle-left"></i>
</div>
<input type="text"
class="om-field creativebutton-normalstate__field creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__fontsize"
maxlength="4"
value="16"
data-info="16">
<div
class="om-button om-button__text creativebutton-normalstate__button creativebutton-normalstate__button_fontmetric creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_fontmetric">
px
</div>
<div
class="om-button om-button__text creativebutton-normalstate__button creativebutton-normalstate__button_font creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_font"
data-info="Arial">
Arial
</div>
<div class="creativebutton-menuoverlay"
id="creativebutton-menuoverlay_font">
<div class="creativebutton-menuoverlay__content">
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_arial">Arial</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_courier">Courier New</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_georgia">Georgia</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_impact">Impact</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_roboto">Roboto</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_times">Times New Roman</div>
<div class="creativebutton-menuoverlay__element"
id="creativebutton-menuoverlay__element_verdana">Verdana</div>
<div class="creativebutton-menuoverlay__element
creativebutton-menuoverlay__element_close">Закрыть</div>
</div>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-normalstate__button creativebutton-normalstate__button_border creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_border"
data-help="Граница">
<i class="far fa-square"></i>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-normalstate__button creativebutton-normalstate__button_color creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_color"
data-help="Цвет">
<i class="fas fa-palette"></i>
</div>
<div
class="om-button om-button__icon om-button__help om-button__help creativebutton-normalstate__button creativebutton-normalstate__button_shadow creativebutton-normalstate__element unvisible"
id="creativebutton-normalstate__button_shadow"
data-help="Тень">
<i class="fas fa-clone"></i>
</div>
</section>
<section
class="creativebutton-hoverstate"
id="creativebutton-hoverstate">
<div
class="om-button om-button__content creativebutton-hoverstate__element"
id="creativebutton-hoverstate__button_content">
При наведении
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-hoverstate__button creativebutton-hoverstate__button_back creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_back"
data-help="Скрыть">
<i class="fas fa-angle-left"></i>
</div>
<input type="text"
class="om-field creativebutton-hoverstate__field creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__fontsize"
maxlength="4"
value="16"
data-info="16">
<div
class="om-button om-button__text creativebutton-hoverstate__button creativebutton-hoverstate__button_fontmetric creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_fontmetric">
px
</div>
<div
class="om-button om-button__text creativebutton-hoverstate__button creativebutton-hoverstate__button_font creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_font"
data-info="Arial">
Arial
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-hoverstate__button creativebutton-hoverstate__button_border creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_border"
data-help="Граница">
<i class="far fa-square"></i>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-hoverstate__button creativebutton-hoverstate__button_color creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_color"
data-help="Цвет">
<i class="fas fa-palette"></i>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-hoverstate__button creativebutton-hoverstate__button_shadow creativebutton-hoverstate__element unvisible"
id="creativebutton-hoverstate__button_shadow"
data-help="Тень">
<i class="fas fa-clone"></i>
</div>
</section>
<section
class="creativebutton-pressedstate"
id="creativebutton-pressedstate">
<div
class="om-button om-button__content creativebutton-pressedstate__element"
id="creativebutton-pressedstate__button_content">
При нажатии кнопки
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-pressedstate__button creativebutton-pressedstate__button_back creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_back"
data-help="Скрыть">
<i class="fas fa-angle-left"></i>
</div>
<input type="text"
class="om-field creativebutton-pressedstate__field creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__fontsize"
maxlength="4"
value="16"
data-info="16">
<div
class="om-button om-button__text creativebutton-pressedstate__button creativebutton-pressedstate__button_fontmetric creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_fontmetric">
px
</div>
<div
class="om-button om-button__text creativebutton-pressedstate__button creativebutton-pressedstate__button_font creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_font"
data-info="Arial">
Arial
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-pressedstate__button creativebutton-pressedstate__button_border creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_border"
data-help="Граница">
<i class="far fa-square"></i>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-pressedstate__button creativebutton-pressedstate__button_color creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_color"
data-help="Цвет">
<i class="fas fa-palette"></i>
</div>
<div
class="om-button om-button__icon om-button__help creativebutton-pressedstate__button creativebutton-pressedstate__button_shadow creativebutton-pressedstate__element unvisible"
id="creativebutton-pressedstate__button_shadow"
data-help="Тень">
<i class="fas fa-clone"></i>
</div>
</section>
<section class="creativebutton-result">
<div class="creativebutton-result__normalbutton"
id="creativebutton-result__button">Button caption</div>
</section>
<!-- END: Your App Here -->
</div>
</div>
<?php
include "getcolor.php";
include "shadowdialog.php";
include "borderdialog.php";
include "codedialog.php";
?>
</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="/js/om_interface.js"></script>
<script src="/js/CreativeButton.js"></script>
</body>