@phoenix-plugin-registry/swmitra.html-designer/html/html-design-view.html

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

<div id="html-design-template" class="quiet-scrollbars" style="display:none;">
        <div id="html-design-editor" >
            <div id="element-search-panel">
                <input type="text" id="find-what-element" placeholder="jquery:search…">
                <button class="topcoat-select-button-dark" id="close-search-panel" style="right: 46px;position: absolute;">Close</button>
            </div>
            <div id="network-resource-bar">
                <input type="text" id="nw-resource-url" placeholder="www url here">
                <button class="topcoat-select-button-dark" id="close-nw-panel" style="right: 46px;position: absolute;">Close</button>
            </div>
            <div id="fragment-link-panel">
                <input type="text" id="main-doc-path" placeholder="index.html path" style="width: 473px;">
                <input class="topcoat-select-button-dark" type="button" value="..." id="browse-main-doc" style="margin-top: -8px;">
                <button class="topcoat-select-button-dark" id="close-fragment-link-panel" style="right: 46px;position: absolute;">Close</button>
            </div>
            <div id="designer-content-placeholder" class="designContent horz-resizable right-resizer vert-resizable bottom-resizer" style="position:absolute">
                <div class="designerArtBoard" >
                    <iframe id="htmldesignerIframe" src=""></iframe>
                    <!--<iframe id="htmldesignerShadowIframe" src="" ></iframe>
                    <iframe id="mediaDetectionFrame" src="" ></iframe>-->
                </div>
                <div class="eventListnerPane" style="">
                    <div id="scrollPlane" style="">
                        <div id="designer-content-scroll-mock" class="designContent" style="width:100% !important;height:100%;">
                        </div>
                    </div>
                    <div class="fluidGridPlane" style=""></div>
                </div>
            </div>
            <div class="guidePlane" style="">
                <div class="guidePosBox"></div>
            </div>
            <div id="element-drawing-plane"></div>
            <div id="element-resize-plane"></div>
            <div id="info-overlay-plane">
                <div id="cut-mask" ></div>
                <div class="offsetVAxis"></div>
                <div class="offsetHAxis"></div>
                <div class="hLayer Offset" id="h-layer1" style="margin-left: -24px;margin-top: -24px;position:absolute;height:0px;background-color:rgba(0, 0, 255, 0.1)"></div>
                <div class="vLayer Offset" id="v-layer1" style="margin-left: -24px;margin-top: -24px;position:absolute;width:0px;background-color:rgba(0, 0, 255, 0.1)"></div>
            </div>
        </div>
        <div id="design-toolbox-anchor"></div>
        <div id="design-modal-backdrop"></div>
        <div id="split-view-anchor"></div>
        <div id="design-view-anchor" style="display:none"></div>
        <div id="docked-toolbox"></div>
    </div>