@phoenix-plugin-registry/swmitra.html-designer
Version:
NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.
94 lines (85 loc) • 6.8 kB
HTML
<head>
<style>
#animation-infinite-loop {
border: 1px dotted gray;
position: absolute;
width: 18px;
height: 17px;
top: 336px;
left: 126px;
}
#keyframe-cubic-bezier-container {
position: absolute;
left: 21px;
width: 211px;
height: 211px;
top: 33px;
}
.beziercontrolpointkf {
position: absolute;
background-color: white;
width: 9px;
height: 9px;
border: 1px solid blue;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.beziercontroldraggerkf {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="property-toolbox quiet-scrollbars" id="keyframe-associate-editor" style="color: rgb(211, 211, 211); font-size: 14px; position: absolute; background-color: rgb(74, 77, 78); width: 238px; height: 404px; display: none; right: 10px; top: 10px;">
<div class="propertyToolboxHeader" style="display: block;">KeyFrame Properties
<a class="close" id="keyframe-associate-editor-close" style="display: block;">×</a>
<div class="toolboxHeaderBottom" style="display: block;"></div>
</div>
<span style="float: left; margin-left: 8px; margin-top: -1px; position: absolute; left: 0px; top: 11px; display: block;">Timing-fn</span>
<select class="topcoat-select" id="keyframe-timing-fn-select" style="padding-top: 0px; position: absolute; height: 22px; left: 73px; width: 153px; top: 8px !important; display: block;" value="0.250, 0.100, 0.250, 1.000">
<optgroup label="defaults" style="display: block;">
<option value="0.250, 0.100, 0.250, 1.000" style="display: block;" selected="selected">ease(default)</option>
<option value="0.250, 0.250, 0.750, 0.750" style="display: block;">linear</option>
<option value="0.420, 0.000, 1.000, 1.000" style="display: block;">ease-in</option>
<option value="0.000, 0.000, 0.580, 1.000" style="display: block;">ease-out</option>
<option value="0.420, 0.000, 0.580, 1.000" style="display: block;">ease-in-out</option>
</optgroup>
<optgroup label="Penner Equations (approximated)" style="display: block;">
<option value="0.550, 0.085, 0.680, 0.530" style="display: block;">easeInQuad</option>
<option value="0.550, 0.055, 0.675, 0.190" style="display: block;">easeInCubic</option>
<option value="0.895, 0.030, 0.685, 0.220" style="display: block;">easeInQuart</option>
<option value="0.250, 0.460, 0.450, 0.940" style="display: block;">easeOutQuad</option>
<option value="0.215, 0.610, 0.355, 1.000" style="display: block;">easeOutCubic</option>
<option value="0.165, 0.840, 0.440, 1.000" style="display: block;">easeOutQuart</option>
<option value="0.455, 0.030, 0.515, 0.955" style="display: block;">easeInOutQuad</option>
<option value="0.645, 0.045, 0.355, 1.000" style="display: block;">easeInOutCubic</option>
<option value="0.770, 0.000, 0.175, 1.000" style="display: block;">easeInOutQuart</option>
</optgroup>
</select>
<div id="keyframe-cubic-bezier-container" style="display: block;">
<canvas id="cubic-bezier-curve-keyframe" width="200" height="200" style="position: absolute; top: 5px; left: 5px; box-shadow: gray 0px 0px 6px 1px inset; background-color: rgb(48, 50, 51); display: block;"></canvas>
<div class="beziercontrolpointkf" id="kf-bezier-cp1" style="display: block;">
<div class="beziercontroldraggerkf" style="display: block;"></div>
</div>
<div class="beziercontrolpointkf" id="kf-bezier-cp2" style="display: block;">
<div class="beziercontroldraggerkf" style="display: block;"></div>
</div>
</div>
<span style="float: left; margin-left: 178px; margin-top: 1px; position: absolute; left: -171px; top: 301px; display: block;">Duration</span>
<input class="topcoat-text-input" id="animation-duration-input" type="number" value="0" style="position: absolute; height: 24px; left: 62px; top: 297px; display: block; width: 33px;" title="Duration in ms">
<span style="float: left; margin-left: 243px; margin-top: 18px; position: absolute; top: 284px; display: block; left: -110px;">Delay</span>
<input class="topcoat-text-input" id="animation-delay-input" type="number" value="0" style="position: absolute; height: 24px; top: 297px; display: block; width: 33px; left: 171px;" title="Delay in ms">
<span style="float: left; margin-left: 8px; margin-top: -1px; position: absolute; -webkit-transform: rotate(270deg); left: -42px; top: 162px; display: block;">Animation(%) →</span><span style="float: left; margin-left: 8px; margin-top: -1px; position: absolute; left: 83px; top: 241px; display: block;">Time →</span>
<input style="text-align: center; position: absolute; width: 180px; left: 25px; top: 258px; display: block;" id="keyframe-timing-fn-value" value="0.250, 0.250, 0.750, 0.750" class="topcoat-text-input">
<button class="topcoat-button" type="button" id="apply-keyframe-animation" style="height: 28px; position: absolute; width: 31px; left: 196px; display: block; top: 371px;">✔</button>
<input class="topcoat-text-input" id="animation-selector-name" type="text" style="position: absolute; height: 24px; left: 7px; top: 372px; display: block; width: 127px;" disabled="" title="Animation configuration class name">
<span style="float: left; margin-left: 178px; margin-top: 1px; position: absolute; left: -171px; top: 337px; display: block;">Loop</span>
<input class="topcoat-text-input" id="animation-loop-count" type="number" value="1" style="position: absolute; height: 24px; left: 62px; top: 334px; display: block; width: 33px;" title="Loop count as Integer">
<input class="topcoat-checkbox" type="checkbox" id="animation-infinite-loop" style="margin-top:4px;"><span style="float: left; margin-left: 178px; margin-top: 1px; position: absolute; display: block; top: 338px; left: -27px;">Infinite Loop</span>
<button class="topcoat-button" type="button" id="timeline-anchor" style="height: 28px; position: absolute; width: 31px; display: block; left: 164px; top: 371px;"><strong style="color:red !important">t</strong>
</button>
</div>
</body>