@phoenix-plugin-registry/swmitra.html-designer/toolboxhtml/toolboxTemplate.html

NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.

<style>
    .property-toolbox {
        pointer-events: all;
        z-index: 50;
        margin-top:26px !important;
        border: 1px solid #2d2e30;
        border-top-width: 0px;
    }
    
    .property-toolbox *.topcoat-button{
        margin:0px;
    }
    
    .propertyToolboxHeader {
        background-color: rgb(74, 77, 78);
        background: #2d2e30;
        position: absolute;
        width: 100%;
        height: 24px;
        bottom: 100%;
        left: -1px;
        color: rgb(211, 211, 211);
        border: 1px solid #2d2e30;
        border-bottom-width: 0px;
        border-top: 1px solid rgba(219, 210, 219, 0.2);
        text-align: center;
        padding-top: 2px;
    }
    
    .propertyToolboxHeader .close {
        float: right;
        color: lightgray;
        margin-right: 6px;
        margin-top: 1px;
    }
    
    .toolboxHeaderBottom {
        position: absolute;
        width: calc(100% - 2px);
        height: 0px;
        bottom: 0px;
        left: 1px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: rgba(219, 210, 219, 0.2) 0px 1px 0px 0px;
    }
    
    .designToolBoxItem {
        display:block;
        margin:auto;
        margin-top:5px;
        padding:5px;
        padding-left: 3px;
    }
</style>

<div id="design-toolbox" style="position: absolute;top:0px;left: 0px;display: none;background-color: transparent;width: 100%;height:100%;">
    <img class="designToolBoxItem" id="element-search-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Search.png" title="Search"/>
    <img class="designToolBoxItem" id="load-as-fragment" src="{{module_path}}/toolboxhtml/toolbarIcons/Fragment.png" title="Load As Fragment"/>
    <img class="designToolBoxItem" id="sandbox-frame" src="{{module_path}}/toolboxhtml/toolbarIcons/Sandbox.png" title="Enable Sandboxing"/>
    <span class="glyphicon glyphicon-wrench designToolBoxItem" id="design-settings-anchor" style="color:yellow;zoom: 1.4;margin-left: 2px;" title="Settings"></span>
    <img src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="width:100%;display:block;"/>
    <span class="glyphicon glyphicon-globe designToolBoxItem" id="open-network-page" title="Open network resource" style="color: limegreen;zoom: 1.6;margin: 0px;margin-top: -2px;"></span>
    <img src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="width:100%;display:block;"/>
    <img class="designToolBoxItem" id="bg-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Background.png" title="Background"/>
    <img class="designToolBoxItem" id="generic-border-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Border.png" title="Border"/>
    <img class="designToolBoxItem" id="transform-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Transform.png" title="Transform"/>
    <!--<img class="designToolBoxItem" id="layout-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Alignment.png" title="Layout"/>-->
    <img class="designToolBoxItem" id="shadow-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Shadow.png" title="Shadow"/>
    <img class="designToolBoxItem" id="text-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Text.png" title="Text"/>
    <!--<img class="designToolBoxItem" id="css-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/CSS.png" title="CSS"/>-->
    <div class="designToolBoxItem" id="transition-toolbox-anchor" style="color: lightgray;font-weight: bold;font-size: 25px;padding-left: 7px;" title="Transition Animation">t<small>r</small></div>
    <div class="designToolBoxItem" id="keyframe-toolbox-anchor" style="color: lightgray;font-weight: bold;font-size: 25px;padding-left: 6px;" title="Keyframe Animation">k<small>f</small></div>
</div>