Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 696a6d9cbf
Fetching contributors…

Cannot retrieve contributors at this time

575 lines (514 sloc) 27.548 kb
<!doctype html>
<html lang="en" class="no-js">
<head>
<link rel="icon" href="images/icon.ico" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Popcorn Maker</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/popcorn-maker.css">
<link rel="stylesheet" href="css/trackLiner.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="lib/require/require.js"></script>
<script type="text/javascript" src="butter/src/butter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<!-- ########## START HEADER ########## -->
<header>
<h1 class="logo"><a href="#"><img class="logo-popcorn-maker" src="images/icon.ico" width="20" height="20" />Popcorn Maker</a></h1>
<div class="header-right">
<!--<div class="my-projects-drpdwn">
<select id="projects-dropdown" name="projects-dd" class="projects-dd" style="width:258px;" tabindex="1">
</select>
<ul class="actions">
<li class="bubble_pointer"></li>
<li class="edit"><a id="edit-selected-project" class="edit-selected-project" title="Edit Project" href="#">edit</a></li>
</ul>
</div>-->
<form action="">
<ul class="header-buttons">
<li class="add-btn"><a class="add-project-btn" href="#" title="New Project">New Project</a></li>
<li class="edit-proj-btn"><a id="edit-projects" class="edit-projects" title="Edit Projects" href="#">edit</a></li>
<li class="save-btn"><a class="save-project-btn" href="#" title="Save Project">Save Project</a></li>
<li class="help-btn"><a class="open-help" href="#" title="Help">Help</a></li>
</ul>
</form>
</div>
</header>
<!-- ########## END HEADER ########## -->
<!-- ########## START IFRAME SECTION ########## -->
<iframe id="main" src="">
</iframe>
<!-- ########## END IFRAME SECTION ########## -->
<!-- ########## START HIDE TIMELINE BUTTON ########## -->
<div class="hide-timeline">
<a href="#" >Hide Timeline</a>
</div>
<!-- ########## END HIDE TIMELINE BUTTON ########## -->
<!-- ########## START PROPERTIES PANEL ########## -->
<section id="properties-panel">
<!-- ***** START PROPERTIES HEADER ***** -->
<div class="properties-header">
<div class="timeline-heading">
<a href="#" class="timeline-title media-title-div">No Media</a>
<ul class="actions"><li class="bubble_pointer"></li><li class="edit"><a class="edit-timeline-media" href="#">edit</a></li></ul>
</div>
</div>
<!-- ***** END PROPERTIES HEADER ***** -->
<!-- ***** START TOOLBOX ***** -->
<div class="enable-scroll tiny-scroll toolbox collapsed">
<div class="collapse-btn collapse"><a href="#">Collapse</a><span></span></div>
<!-- ***** START SCROLLBAR ***** -->
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<!-- ***** END SCROLLBAR ***** -->
<!-- ***** START VIEWPORT ***** -->
<div class="viewport">
<div class="overview">
<script type="text/javascript">
window.fileSizes = {"stable":{"core":false,"plugins[bgiframe]":false},"nightly":{"core":54710}};
</script>
<div id="contentheader">
<ul class="tools" id="plugin-tray">
</ul>
</div>
</div>
</div>
<!-- ***** END SCROLLBAR ***** -->
</div>
<!-- ***** END TOOLBOX ***** -->
<!-- ***** START TIMELINE ***** -->
<div id="timeline" class="timeline">
<!-- ***** START PLAYBACK CONTROLS ***** -->
<div class="playback-controls">
<div class="play-btn"><a href="#"><span >play/pause</span></a></div>
<div class="timeline-duration" id="timeline-duration">00:00:00</div>
<div class="timeline-progress-wrapper disable-select">
<div id="scrubber-container" class="disable-select" style="z-index: 1; position: relative;">
<div id="scrubber-interact" class="disable-select" style="position: absolute; left: 0px; top: -10px; height: 400%; width: 100%;"></div>
<div class="timeline-bar disable-select">
<div id="progress-bar" class="timeline-progress-bar disable-select">
<div id="scrubber" class="current-line disable-select">
<div style="left: -5px"class="current-white disable-select">
</div>
</div>
</div>
</div>
</div>
<!-- ***** TIMING NOTCHES ***** -->
<div class="timing-notches-div disable-select">
<canvas id="timing-notches-canvas" class="disable-select"></canvas>
</div>
<!-- ***** END TIMING NOTCHES ***** -->
</div>
<div class="sound-btn"><a href="#"><span >play/pause</span></a></div>
</div>
<!-- ***** END PLAYBACK CONTROLS ***** -->
<!-- ***** START LAYERS PANEL ***** -->
<div class="enable-scroll">
<!-- ***** START VIEWPORT ***** -->
<div style="color: white; overflow: hidden; position: absolute; width: 180px; height: 108px;"><div style="position: absolute;" class="timeline-div" id="layers-div" >
</div></div>
<div align="center" style="position:absolute; bottom:0; margin-left:7px; width:93px; height:16px; margin-bottom:10px;"><div id="slider"></div></div>
<div class="viewport" id="tracks-div" style="position: absolute; overflow: scroll; left: 120px; right: 10px;">
<!--<div class="timeline-left timeline-div"></div>-->
<div class="overview timeline-right timeline-div" id="timeline-div">
</div>
</div>
<!-- ***** END VIEWPORT ***** -->
</div>
<!-- ***** END LAYERS PANEL ***** -->
</div>
<!-- ***** END TIMELINE ***** -->
</section>
<!-- ########## END PROPERTIES PANEL ########## -->
<!-- ########## START POPUPS ########## -->
<div class="popupDiv close-div">
<div class="balck-overlay balck-overlay-dims"></div>
<div class="popup-container">
<!--
<div id="captcha-popup">
</div>
-->
<div id="change-media-popup" class="change-media-popup pop-up close-div draggable"> <!-- popup 1 -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Change timeline media</h3>
</div>
<div class="popup-content">
<p>
<label for="url">url: </label>
<input type="text" name="url" id="url" value="">
</p>
<input type="submit" class="change-url-btn" value="change">
<p class="desc">Show us where your video file lives. Youtube and Vimeo embeds work too.<a href="#">Learn more about what kind videos work...</a></p>
</div>
</div><!-- end popup 1 -->
<div id="error-popup" class="error-popup pop-up close-div draggable">
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>An Error Occurred</h3>
</div>
<div class="popup-content">
<p class="desc"></p>
<div class="popup-btns">
<input name="ok" type="submit" class="ok-btn" value="Ok">
</div>
</div>
</div>
<div id="edit-track-popup" class="edit-track-popup pop-up close-div draggable"> <!-- popup 2 -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Track</h3>
<div class="tracks-drpdwn">
<select name="projects-dd" class="projects-dd" style="width:258px;" tabindex="1">
<option name="one" value="msDropDown" >msDropDown</option>
<option name="two" value="PrototypeCombobox" >Prototype Combobox</option>
<option selected="selected" value="jQuery Tabs" >jQuery Tabs</option>
<option value="Common Accordion" >Common Accordion</option>
</select>
</div>
</div>
<div class="popup-content">
<div class="track-content">
<p></p>
</div>
<div class="popup-btns">
<input type="submit" class="ok-btn" value="Ok">
<input type="submit" class="apply-btn" value="Apply">
<input type="submit" class="preview-btn" value="Preview">
</div>
</div>
</div><!-- end popup 2 -->
<div id="save-popup" class="save-popup pop-up close-div"> <!-- popup 3 -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Save / Export</h3>
</div>
<div class="popup-content">
<input type="button" class="show-json-btn" name="show-json-btn" value="Project JSON" />
<input type="button" class="show-html-btn" name="show-html-btn" value="html" />
<div class="track-content">
<textarea id="export-data"></textarea>
</div>
<p class="track-text html-text show-text">Copy this html code somewhere! or try <a href="#">htmlpad.org</a></p>
<p class="track-text json-text hide-text">Copy this Project data somewhere to backup your work!</p>
<div class="download-html">
<!--<input type="submit" class="download-btn" name="download-btn" value="Download as HTML">-->
<label class="save-prj-lbl" for="project-savename-textbox">Save As:</label><input type="text" id="project-title-textbox" class="project-title-textbox" name="project-title-textbox" >
<input type="submit" class="save-project-data-btn" name="save-project-data-btn" value="Save Project">
<!--<input type="button" class="publish-project-btn" name="publish-project-btn" value="Publish Project">-->
</div>
</div>
</div><!-- end popup 3 -->
<div id="editor-popup" class="editor-popup pop-up close-div draggable"> <!-- popup 4 -->
</div><!-- end popup 4 -->
<div id="edit-target-popup" class="edit-target-popup pop-up close-div draggable"> <!-- Track Editor Pop-up -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Edit Track</h3>
</div>
<div class="popup-content">
<span>Target Elements: </span><select id="track-edit-target" class="edit-track-button"></select>
<span>Track Title: </span><input type="text" maxlength="12" id="track-title-input-box"></input>
<br/>
<textarea rows="21" cols="85" id="track-edit-JSON"></textarea>
<br />
<div id="track-edit-btn-div">
<button id="apply-track-edit" class="edit-track-button">apply</button>
<button id="ok-track-edit" class="edit-track-button">ok</button>
<button id="delete-track-edit" class="edit-track-button">delete</button>
<button id="clear-track-edit" class="edit-track-button">clear</button>
</div>
</div>
</div><!-- Track Editor Pop-up -->
<div id="delete-track-popup" class="project-title-popup pop-up close-div draggable">
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Delete Track</h3>
</div>
<div class="popup-content">
<br />
<input id="deleteTrackBtn" type="submit" class="change-title-btn" value="Yes">
<p class="desc">Are you sure you want to delete this track?</p>
</div>
</div>
<div id="delete-project-popup" class="project-title-popup pop-up close-div draggable">
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Delete Saved Project?</h3>
</div>
<div class="popup-content">
<br />
<input id="confirm-deleteProjectBtn" type="submit" class="change-title-btn" value="Yes">
<p class="desc">Are you sure you want to permanently delete this project?</p>
</div>
</div>
<div id="edit-project-popup" class="project-title-popup pop-up close-div draggable"> <!-- project-title-popup -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Edit Projects</h3>
</div>
<div class="popup-content">
<div>
<select size="12" class="projects-list" >
</select>
<div class="project-info-div">
<span>
<br />
<textnode class="input-title-text">Title</textnode><br />
<input type="text" id="project-title-input-box" >
<br /><br />
<textnode class="input-title-text">Last Modified:</textnode><br />
<textNode id="date-saved"></textnode>
</span>
<br />
<br />
<div class="edit-project-buttons-div">
<input type="submit" id="change-title-btn" class="change-title-btn" value="Rename">
<input type="submit" id="load-selected-project-btn" class="change-title-btn" value="Load">
<input type="submit" id="delete-selected-project-btn" class="change-title-btn" value="Delete">
<br />
<p class="desc">Changes apply to the selected project in the list</p>
</div>
</div>
</div>
</div>
</div><!-- end popup project-title-popup -->
<div id="load-confirmation-dialog" class="project-title-popup pop-up close-div draggable">
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Load Project?</h3>
</div>
<div class="popup-content">
<p class="desc">Loading the selected project will erase any unsaved changes to the current project. Are you sure you wish to continue?</p>
<input type="submit" id="confirm-load-btn" class="confirm-load-btn" value="Load Project">
</div>
</div>
<div id="delete-track-confirmation" class="pop-up close-div draggable">
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Delete Track?</h3>
</div>
<div class="popup-content">
<p class="desc">Deleting a track cannot be undone. Are you sure you wish to continue?</p>
<input type="submit" id="delete-track-confirm-btn" class="confirm-load-btn" value="Delete">
</div>
</div>
<div id="clear-track-confirmation" class="pop-up close-div draggable">
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Clear Track?</h3>
</div>
<div class="popup-content">
<p class="desc">Clearing a track cannot be undone. Are you sure you wish to continue?</p>
<input type="submit" id="clear-track-confirm-btn" class="confirm-load-btn" value="Clear Track">
</div>
</div>
<div id="load-failed-popup" class="project-title-popup pop-up close-div draggable">
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Load Failed!</h3>
</div>
<div class="popup-content">
<p class="desc">Your desired media source could not be loaded. Please make sure the location is correct.</p>
<input type="submit" id="retry-load" class="confirm-load-btn" value="Change Media">
</div>
</div>
<div id="media-timeout-popup" class="project-title-popup pop-up close-div draggable">
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Media Timeout</h3>
</div>
<div class="popup-content">
<p class="desc">Your desired media source seems to be taking a while to load. Would you like to keep waiting or try a different media source?</p>
<input type="submit" id="timeout-retry-load" class="confirm-load-btn" value="Change Media">
<input type="submit" id="timeout-keep-waiting" class="confirm-load-btn" value="Wait">
</div>
</div>
<div id="add-project-popup"><!-- welcome popup -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3 class="welcome-header">Create / Import Project</h3>
</div>
<div class="scroll-popup-container spc-add-project">
<div class="padding-div add-project-padding-div">
<div id="template-thumbnail"></div>
<div class="proj-title-div">
<span class="input-title-text">Project Title</span><br />
<input type="text" class="proj-title-input" id="title-input-box" value="New Project"></input>
</div>
<br />
<div class="timeline-media-div">
<span class="input-title-text">Timeline Media</span><br />
<input type="text" class=proj-title-input" id="timeline-media-input-box" value="http://videos-cdn.mozilla.net/serv/webmademovies/Moz_Doc_0329_GetInvolved_ST.webm"></input><br />
<span class="tip-text-new-project"> Show us where your media file lives. Youtube, Vimeo,<br />
and Soundcloud URLs work too.<br /><br />
<a href="#">Learn more about what kinds of media work in Popcorn Maker.</a>
</span>
</div>
<br />
<div class="template-select-div">
<span class="input-title-text">Choose a Template</span><br />
<select id="layout-select"></select>
<input type="text" id="template-other"></input>
<div>
<span style="font-weight: bold;">Description:</span>
<div id="template-description"></div>
</div>
</div>
<br /><br />
<div class="new-proj-button-div">
<span class="import-screen-toggle"><a href="#" class="import-scroll-toggler" >Import Project..</a></span>
<input type="submit" class="create-new-btn" name="create-new-btn" value="Create">
</div>
</div>
<div class="padding-div add-project-padding-div">
<div class="import-json-div" >
<textarea rows="21" cols="51" id="import-json-area"></textarea><br />
<div class="new-proj-button-div" >
<span class="new-proj-screen-toggle"><a href="#" class="import-scroll-back-toggler" >..Create Project</a></span>
<input type="button" class="load-code-btn" id="import-json-btn" value="Import from JSON"></input>
</div>
</div>
</div>
</div>
</div>
<div id="credits-popup" class="credits-popup pop-up close-div draggable" style="display:none" >
<a class="popup-close-btn load" href="#"><span></span></a>
<div class="popup-header">
<h3>Popcorn Maker</h3>
</div>
<div class="popup-content">
<p class="desc">
Crafted lovingly by the <a class="credit-href" href="http://www.mozilla.org/" >Mozilla Foundation</a> and<br />
the <a class="credit-href" href="https://www.popcornjs.org/">Popcorn.js</a> team.<br />
Version 0.1<br />
<br/>
<h4>Credits:</h4><br />
Christopher De Cairos<br />
Mohammed Buttu<br />
Brian Chirls<br />
Gopal @ Productive Dreams<br />
Scott Downe<br />
Brett Gaylor<br />
Ben Moskowitz<br />
Bobby Richter<br />
Dave Seifried<br />
Rick Waldron<br />
Jon Buckley<br />
David Humphrey<br />
Boaz Sender<br />
Al Mcdonald
</p>
</div>
</div>
<!-- ###### FIRST RUN POPUPS ######## -->
<div id="welcome-popup"><!-- welcome popup -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3 class="welcome-header">Welcome</h3>
</div>
<div class="scroll-popup-container">
<div class="padding-div">
<h1>Welcome to Popcorn Maker</h1>
<h3 class="welcome-h3">Let's make some popcorn.</h3>
<p class="alpha-warning"><span>Please note: you are using Alpha Software which is intended as a proof of concept.</span></p>
<p class="alpha-warning">We are looking forward to your feedback, but please know this app is under active development. If you find any bugs, or have suggestions for new features, please report them <a href="https://webmademovies.lighthouseapp.com/projects/80723-popcorn-maker">here!</a></p>
<p class="alpha-warning">To view our roadmap, <a href="https://wiki.mozilla.org/PopcornMaker">please visit here.</a></p>
<h4>I want to jump right in!</h4>
<a href="#" class="wizard-create-new-btn">New Project</a>
<p>OR</p>
<h4>Help me get started</h4>
<a href="#" class="tutorial-btn">Tutorial</a>
<a href="#" class="mozilla-logo"><img src="images/logo_mozilla.png" width="109" height="28" alt="Mozilla Logo"></a>
<p class="copyright">&copy;2011<a href="#">Terms of service</a><a href="#">Fork me</a><a href="#">Popcorn.js.home</a><a href="#">Contact</a></p>
</div>
<div class="padding-div">
<h1>Welcome to Popcorn Maker</h1>
<h3>Let's make some popcorn.</h3>
<div class="left-div">
<p class="desc">Popcorn Maker is a fun and easy way to make interactive open video pages. Here's how to get started:</p>
<ul class="">
<li><p><b>1.</b> Make a new project from the welcome screen, or press the plus button <b>(+)</b> from within the app. <br><p>Pick a template. Remember, you can edit the final HTML when you are done to modify the design</p></li>
<li><p><b>2.</b> Use Popcorn Maker to add actions to the timeline of your video.<br></p></li>
<li><p><b>3.</b> When you're done, export using the save button<br><img src="images/save-btn.png"></li>
</ul>
<p class="desc">For more info, checkout the <a href="lib/userManual.html" id="_user_manual" target="_blank">user manual</a></p>
</div>
</div>
</div>
</div><!-- End welcome popup -->
<div id="help-popup"><!-- HELP popup -->
<a class="popup-close-btn" href="#"><span></span></a>
<div class="popup-header">
<h3>Help</h3>
</div>
<div class="help-header">
<h1>Popcorn Maker Help</h1>
<div class="social">
<ul class="">
<li class="twitter"><a href="https://twitter.com/#!/popcornjs" target="_blank" class="">Twitter</a></li>
</ul>
</div>
</div>
<div class="scroll-popup-container">
<div class="help-main padding-div">
<div class="inner">
<h2>About Popcorn Maker</h2>
<p>Popcorn Maker is a fun and easy way to make interactive open video pages. You can use it here or <a href="https://github.com/secretrobotron/popcorn-maker">clone it from our Github repo</a> to host it wherever you like!</p> <p>Crafted lovingly by the Mozilla Foundation and the popcorn.js team.</p>
<div class="help-section">
<section class="getting-started">
<h2>Getting Started</h2>
<ul class="">
<li class="users-manual"><a href="lib/userManual.html" id="_user_manual" target="_blank">Users Manual</a></li>
<!--
<li class="tutorials"><a href="#" id="_tutorials">Tutorials</a></li>-->
</ul>
</section>
<section class="contribute">
<h2>Contribute</h2>
<ul class="">
<!--
<li class="submit-template"><a href="#" id="_submit_template">Submit a Template</a></li>-->
<li class="file-a-bug"><a href="https://webmademovies.lighthouseapp.com/projects/80723-popcorn-maker/overview" target="_blank" id="_file_a_bug">File a bug</a></li>
<li class="download-sdk"><a href="https://github.com/secretrobotron/popcorn-maker" target="_blank" id="_download_sdk">Download the Butter SDK <span>and integrate Popcorn into your app.</span></a></li>
</ul>
</section>
<section class="partners">
<h2>Partners</h2>
<ul class="">
<li class="">CDOT</li>
<li class="">Zero Divide</li>
<li class="">BAVC</li>
</ul>
</section>
<a href="#" class="mozilla-logo"><img src="images/logo_mozilla.png" width="109" height="28" alt="Mozilla Logo"></a>
<p class="copyright">&copy;2011<a href="#">Terms of service</a><a href="https://github.com/secretrobotron/popcorn-maker">Fork me</a><a href="http://www.mozillapopcorn.org">Popcorn Home</a></p>
</div>
</div>
</div>
</div>
</div><!-- END HELP popup -->
<!-- ###### END FIRST RUN POPUPS ######## -->
</div>
</div>
<!-- ########## END POPUPS ########## -->
<div id="loading-overlay">
<h1>Loading...</h1>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.