blob: 29ad525d0f9dda32b3dcec2d73a72c736a6623af [file] [log] [blame]
<!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 scrollable">
<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>
<tr>
<th class='th state'></th>
<th class='th settings'></th>
<th class='th name'>
<input id="compsFilter" class="textInput" type="text" />
</th>
<th class='th destination'></th>
</tr>
</thead>
<tbody class='compsList'>
</tbody>
</table>
<div class='settingsView scrollable'>
<div class='settingsBox'>
<div class='segments'>
<h3>Files</h3>
<div class='checkboxCombo'>
<div class='checkbox'>
<div class='circle'></div>
</div>
<div class='checkboxLabel'>Split animation in multiple files</div>
</div>
<div class='segmentsTime'>
<div>Time for each file (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='hiddens'>
<div class='checkboxCombo'>
<div class='checkbox'>
<div class='circle'></div>
</div>
<div class='checkboxLabel'>Hidden (Check if you need HIDDEN layers to be exported.)</div>
</div>
<div class='settingsSeparator'></div>
</div>
<div class='guideds'>
<div class='checkboxCombo'>
<div class='checkbox'>
<div class='circle'></div>
</div>
<div class='checkboxLabel'>Guides (Check if you need GUIDED layers to be exported.)</div>
</div>
<div class='settingsSeparator'></div>
</div>
<div class='extraComps'>
<div class='checkboxCombo'>
<div class='checkbox'>
<div class='circle'></div>
</div>
<div class='checkboxLabel'>Extra Comps (Check if expressions are pointing to external comps)</div>
</div>
<div class="extraCompositions">
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
</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 bundled in a 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='xMidYMid meet' 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/compsSelection/CompsSelectionSettingsController.js"></script>
<script src="js/controllers/compsSelection/ExtraCompsSelectionSettingsController.js"></script>
<script src="js/utils/messageParser.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 id="extraCompsSelectionTemplate" type="text/html">
<tr class="extraCompElement">
<td class="name"></td>
</tr>
</script>
</body>
</html>