| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| |
| <!-- <link rel="stylesheet" href="css/topcoat-desktop-dark.min.css"/> --> |
| <link id="hostStyle" rel="stylesheet" href="css/boilerplate.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/styles.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/compsSelection.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/compsRender.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/message.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/info.css"/> |
| <link id="hostStyle" rel="stylesheet" href="css/snapshot.css"/> |
| |
| <title></title> |
| </head> |
| |
| <body class="hostElt"> |
| |
| <div id="content"> |
| <div id='compsSelection'> |
| <div class='buttons'> |
| <button class='generalButton rightFloat settings'>Player</button> |
| <div class='buttonSeparator rightFloat'></div> |
| <button class='generalButton rightFloat snapshot'>Preview</button> |
| <button class='generalButton refresh'>Refresh</button> |
| <div class='buttonSeparator'></div> |
| <button class='generalButton highlightButton render disabled'>Render</button> |
| </div> |
| <table class='compsTable'> |
| <thead> |
| <tr> |
| <th class='th state'>Selected</th> |
| <th class='th settings'>Settings</th> |
| <th class='th name'>Name</th> |
| <th class='th destination'>Destination Folder</th> |
| </tr> |
| </thead> |
| <tbody class='compsList'> |
| </tbody> |
| </table> |
| <div class='settingsView'> |
| <div class='settingsBox'> |
| <div class='segments'> |
| <h3>Segments</h3> |
| <div class='checkboxCombo'> |
| <div class='checkbox'> |
| <div class='circle'></div> |
| </div> |
| <div class='checkboxLabel'>Split animation in segments</div> |
| </div> |
| <div class='segmentsTime'> |
| <div>Time for each segment (in seconds)</div> |
| <input class='inputText' type="text" /> |
| </div> |
| <div class='settingsSeparator'></div> |
| </div> |
| <div class='glyphs'> |
| <div class='checkboxCombo'> |
| <div class='checkbox'> |
| <div class='circle'></div> |
| </div> |
| <div class='checkboxLabel'>Glyphs (Checked converts fonts to shapes.)</div> |
| </div> |
| <div class='settingsSeparator'></div> |
| </div> |
| <div class='standalone'> |
| <div class='checkboxCombo'> |
| <div class='checkbox'> |
| <div class='circle'></div> |
| </div> |
| <div class='checkboxLabel'>Standalone (Exports animation and player in single file.)</div> |
| </div> |
| <div class='settingsSeparator'></div> |
| </div> |
| <div class='demo'> |
| <div class='checkboxCombo'> |
| <div class='checkbox'> |
| <div class='circle'></div> |
| </div> |
| <div class='checkboxLabel'>Demo (Exports an html for local use)</div> |
| </div> |
| <div class='settingsSeparator'></div> |
| </div> |
| <div class='buttons'> |
| <button class='generalButton cancel'>Cancel</button> |
| <button class='generalButton return'>Save</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id='compsRender'> |
| <div class='renders'> |
| </div> |
| <div class='buttons'> |
| <button class='generalButton highlightButton cancel'>Cancel</button> |
| <button class='generalButton highlightButton return'>Return</button> |
| </div> |
| </div> |
| <div id='snapshot'> |
| <div class='header'> |
| <h1>Select animation</h1> |
| <div class='buttons'> |
| <button class='generalButton current'>Current renders</button> |
| <div class='buttonSeparator'></div> |
| <button class='generalButton browse'>Browse</button> |
| <button class='generalButton return rightFloat'>Back</button> |
| </div> |
| </div> |
| <div class="animContainer"></div> |
| <div class="controls"> |
| <div class="sliderBg"></div> |
| <div class="slider"></div> |
| <div class="thumb"></div> |
| <button class="snapshotButton generalButton highlightButton">Take Snapshot</button> |
| <div class="frames"> |
| <div class="current" contenteditable="true"></div> |
| <div class="total" >/<span class='value'></span></div> |
| </div> |
| </div> |
| <div class="rendersSelection"> |
| <div class="topSpace"></div> |
| <div class="listContainer"> |
| |
| </div> |
| <div> |
| </div> |
| </div> |
| </div> |
| <div id='info'> |
| <div class='buttons'> |
| <button class='generalButton return'>Back</button> |
| </div> |
| <div class='animHeader'> |
| </div> |
| <h1>BODYMOVIN</h1> |
| <h2>After Effects to html exporter</h2> |
| <p>This plugin exports After Effects animations to a web compatible format.</p> |
| <p>In order to play the exported animation on your browser please follow the instructions at <a class='link' href='#'>Bodymovin on github</a></p> |
| <br /> |
| <p>You can get the latest version of the player from the repository or copy the one included in the extension here.</p> |
| <div class="buttons"> |
| <button class='generalButton highlightButton save unzipped'>Get Player</button> |
| <div class='buttonSeparator'></div> |
| <button class='generalButton highlightButton save zipped'>Get Player Gzipped</button> |
| </div> |
| </div> |
| |
| </div> |
| |
| <div id='message'> |
| <div class='messageBox'> |
| <div class='content'> |
| <div class='alertAnimation sucessAnimation'></div> |
| <div class='alertAnimation failAnimation'></div> |
| <div class='text'></div> |
| <div class='buttons'> |
| <button class='generalButton ok'>Ok</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <svg width='10000' height='10000' style='position:absolute;bottom:0;left:-10000px' preserveAspectRatio='meet xMidYMid' viewBox='0 0 10000 10000'> |
| <text id='textHelper' x='5000' y='5000' font-size='20' font-family='Grafolita Script' fill='#00ff00'>holala</text> |
| </svg> |
| |
| <script src="js/libs/CSInterface.js"></script> |
| <script src="js/libs/jquery-2.0.2.min.js"></script> |
| <script src="js/libs/bodymovin.js"></script> |
| <script src="js/libs/bm.js"></script> |
| <script src="js/libs/mustache.js"></script> |
| |
| <script src="js/animations/radio.js"></script> |
| <script src="js/animations/alert.js"></script> |
| <script src="js/animations/bm.js"></script> |
| <script src="js/animations/rendering.js"></script> |
| <script src="js/animations/sucess.js"></script> |
| <script src="js/animations/folder.js"></script> |
| <script src="js/animations/check.js"></script> |
| <script src="js/animations/gear.js"></script> |
| |
| <script src="js/themeManager.js"></script> |
| <script src="js/controllers/CompSelectionController.js"></script> |
| <script src="js/controllers/CompRenderController.js"></script> |
| <script src="js/controllers/messageController.js"></script> |
| <script src="js/controllers/InfoController.js"></script> |
| <script src="js/utils/storage.js"></script> |
| <script src="js/controllers/snapshotController.js"></script> |
| <script src="js/main.js"></script> |
| |
| <script id="elementTemplate" type="text/html"> |
| <div class='renderingElement'> |
| <div class='header'> |
| <div class='compName'>{{name}}</div> |
| </div> |
| <div class='progressBar'></div> |
| <div class='status'> |
| <div class='compAnim'></div> |
| <div class='statusText'></div> |
| <div class='folder'></div> |
| <div class='buttonHover'></div> |
| </div> |
| <div class='fontsContainer'> |
| <div class='fontsList'></div> |
| <div class='buttons'> |
| <button class='generalButton continue'>Continue</button> </div> |
| </div> |
| </div> |
| </script> |
| <script id="fontTemplate" type="text/html"> |
| <div class="fontElement"> |
| <div class="fontTitle">{{fontData.name}}</div> |
| <div class="origin"> |
| <div class="title">Select font origin:</div> |
| <div class="group"> |
| <input type="radio" id="fontOrigin_g_{{fontData.__index}}" name="fontOrigin_{{fontData.__index}}" value="g"/> |
| <label for="fontOrigin_g_{{fontData.__index}}">Google font</label> |
| </div> |
| <div class="group"> |
| <input type="radio" id="fontOrigin_t_{{fontData.__index}}" name="fontOrigin_{{fontData.__index}}" value="t"/> |
| <label for="fontOrigin_t_{{fontData.__index}}">Typekit</label> |
| </div> |
| <div class="group"> |
| <input type="radio" id="fontOrigin_p_{{fontData.__index}}" name="fontOrigin_{{fontData.__index}}" value="p"/> |
| <label for="fontOrigin_p_{{fontData.__index}}">URL</label> |
| </div> |
| <div class="group"> |
| <input type="radio" id="fontOrigin_n_{{fontData.__index}}" name="fontOrigin_{{fontData.__index}}" value="n"/> |
| <label for="fontOrigin_n_{{fontData.__index}}">None</label> |
| </div> |
| </div> |
| <div class="fontFormItem"> |
| <span>CSS Class (optional)</span> |
| <input class="fontClass" type="text" value="{{storedData.fClass}}" /> |
| </div> |
| <div class="fontFormItem"> |
| <span>Font path (optional)</span> |
| <input class="fontPath" type="text" value="{{storedData.fPath}}" /> |
| </div> |
| <div class="fontFormItem"> |
| <span>Font Family (optional)</span> |
| <input class="fontFamily" type="text" value="{{fontData.family}}" /> |
| </div> |
| <div class="fontFormItem"> |
| <span>Font Weight (optional)</span> |
| <input class="fontWeight" type="text" value="{{storedData.fWeight}}"/> |
| </div> |
| <div class="fontFormItem"> |
| <span>Font Style (optional)</span> |
| <input class="fontStyle" type="text" value="{{fontData.style}}"/> |
| </div> |
| </div> |
| </script> |
| |
| <script type='text/javascript'> |
| /*var view = {testVar:'llll123132'}; |
| var template = document.getElementById('template').innerHTML; |
| var output = Mustache.render(template, view); |
| document.getElementById('message').innerHTML = output;*/ |
| </script> |
| |
| |
| </body> |
| </html> |