borderdialog.php

9.3 KB PHP
        <div class="app-interface__window unvisible" id="borderdialog-interface__window">
            <header class="app-interface__titlebar" id="borderdialog-interface__titlebar">
                <div class="app-interface__titlebaricon" id="borderdialog-interface__titlebaricon">
                    <i class="fas fa-square"></i>
                </div>
                <div class="app-interface__titlebarcaption" id="borderdialog-interface__titlebarcaption">
                    Настройки границы
                </div>
                <div class="app-interface__closebutton" id="borderdialog-interface__closebutton">
                    <i class="fas fa-times"></i>
                </div>
            </header>
            <div class="app-interface__content" id="borderdialog-interface__content">
                <!-- Your App Here -->
                <section class="borderdialog-section">
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Размер</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_bordersize" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_bordersize" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Скругление</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_borderradius" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_borderradius" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Отступ слева</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_paddingleft" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_paddingleft" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Отступ справа</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_paddingright" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_paddingright" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Отступ сверху</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_paddingtop" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_paddingtop" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-optionblock">
                        <div class="om-label borderdialog-optionblock__label">Отступ снизу</div>
                        <input class="om-range borderdialog-optionblock__range"
                               id="borderdialog-optionblock__range_paddingbottom" type="range" value="0" min="0" max="100">
                        <input class="om-field borderdialog-optionblock__field"
                               id="borderdialog-optionblock__field_paddingbottom" type="text" value="0" maxlength="3">
                        <div class="om-button om-button__icon om-button__help borderdialog-optionblock__button"
                             data-help="Сброс">
                            <i class="fas fa-redo"></i> 
                        </div>
                    </div>
                    <div class="borderdialog-rgbacodeblock">
                        <div class="om-label borderdialog-rgbacodeblock__label"
                             id="borderdialog-section__label_color">Цвет тени</div>
                        <span class="borderdialog-rgbacodeblock__prefix"
                              id="borderdialog-section__prefix_r">R:
                            <input  type="text"
                                class="borderdialog-rgbacodeblock__rgba"
                                id="borderdialog-rgbacodeblock__rgba_borderr"
                                maxlength="3"
                                value="255">
                        </span>
                        <span class="borderdialog-rgbacodeblock__prefix"
                              id="borderdialog-section__prefix_g">G:
                            <input  type="text"
                                class="borderdialog-rgbacodeblock__rgba"
                                id="borderdialog-rgbacodeblock__rgba_borderg"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="borderdialog-rgbacodeblock__prefix"
                              id="borderdialog-section__prefix_b">B:
                            <input  type="text"
                                class="borderdialog-rgbacodeblock__rgba"
                                id="borderdialog-rgbacodeblock__rgba_borderb"
                                maxlength="3"
                                value="0">
                        </span>
                        <span class="borderdialog-rgbacodeblock__prefix"
                              id="borderdialog-section__prefix_a">A:
                            <input  type="text"
                                class="borderdialog-rgbacodeblock__rgba"
                                id="borderdialog-rgbacodeblock__rgba_bordera"
                                maxlength="4"
                                value="1.0">
                        </span>
                        <div class="borderdialog-rgbacodeblock__resultcolor"
                             id="borderdialog-rgbacodeblock__resultcolor_border"></div>
                        <div
                            class="om-button om-button__icon borderdialog-section__button"
                            id="borderdialog-section__button_bordertype"
                            data-info="solid">Сплошная</div>
                    </div>
                    <div class="borderdialog-codeblock__panel">
                        <div class="borderdialog-codeblock__codetab"
                             id="borderdialog-codeblock__codetab">CSS</div>
                        <div class="borderdialog-codeblock__copy">Копировать</div>
                        <div class="borderdialog-codeblock__codearea"
                             id="borderdialog-codeblock__codearea">
                            <span class="borderdialog-codeblock__linenumbers"></span>
                            <div class="borderdialog-codeblock__code"
                                 id="borderdialog-codeblock__code">border: 0px solid rgba(255, 255, 255, 0.0);
border-radius: 0px;
padding: 5px 5px 10px 10px;</div>
                        </div>
                    </div>
                </section>
                <!-- END: Your App Here -->
            </div>
        </div>

        <script src="/js/BorderDialog.js"></script>

О проекте

Описание

Генератор CSS кнопок с настраиваемыми стилями, тенями, границами и анимациями

Лицензия

GPL-3.0

Технологии

PHP JavaScript CSS HTML