playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
995 Commits
8 Branches
41 Tags
20 MiB
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
TimelineJS/website/templates/_make.html

253 lines
14 KiB
Raw Permalink Blame History

<!-- Make a Timeline -->
<section id="make" class="container">
<div class="row">
<div class="span12">
<h2>Make a Timeline</h2>
<p>TimelineJS works on any site or blog. Make your own in four easy steps. (<a href="http://www.youtube.com/watch?v=vAWbm4gF9lU">video tutorial</a>)</p>
<div id="body-teaser">
<p><span class="new">New!</span>There's a new version of TimelineJS that is now available for beta testing. TimelineJS 3 is a full rewrite designed to make this popular tool more flexible for authors and developers.</p>
<a class="btn btn-success" href="https://timeline3.knightlab.com">Try TimelineJS 3 now »</a>
</div>
</div>
<!-- Step 1 -->
<div class="step row">
<h2 class="span1">1</h2>
<div class="span11">
<h4>Create your spreadsheet</h4>
<p>Build a new Google Spreadsheet using our <a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" >template</a>. Drop dates, text and links to media into the appropriate columns. <b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
<p><a href="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public" target="_blank" class="btn">Google Spreadsheet Template</a></p>
</div>
</div>
<!-- Step 2 -->
<div class="step row">
<h2 class="span1">2</h2>
<div class="span11">
<h4>Publish to the web</h4>
<div class="row">
<div class="span5">
<p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_small.png" alt="Publish to Web"></p>
<p>Under the File menu, select <em>&ldquo;Publish to the Web.&rdquo;</em></p>
<p>In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.</p>
<p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
</div>
<div class="span6">
<p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_button_small.png" alt="Publish to Web 2"></p><p><img class="img-rounded img-polaroid" src="{{ static_url }}/img/make/publish_to_web_url_small.png" alt="Publish to Web 3"></p>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<form class="step row form form-horizontal">
<h2 class="span1">3</h2>
<div class="span11">
<h4>Copy/paste spreadsheet URL into the generator box below</h4>
<div class="control-group">
<label class="control-label">Google Spreadsheet URL</label>
<div class="controls">
<input type="text" id="embed-source-url" class="span4">
<p class="help-inline">Make sure you've published it.</p>
</div>
</div>
<!-- Size-->
<div class="control-group">
<label class="control-label">Size</label>
<div class="controls">
<div class="input-prepend"><span class="add-on">Width</span>
<input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini">
</div>
<div class="input-prepend"><span class="add-on">Height</span>
<input type="text" value="650" placeholder="650" id="embed-height" class="input-mini">
</div>
</div>
</div>
<!-- Extra Options -->
<p><a class="btn show-options" href="#">More Options <span class="caret"></span></a></p>
<div class="more-options">
<h4>Customize (Optional)</h4>
<!-- Language-->
<div class="control-group">
<label class="control-label">Language</label>
<div class="controls">
<select id="embed-language">
<option value="en">English</option>
<option value="en-24hr">English (24-hour time)</option>
<option value="af">Afrikaans</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-cn">Chinese</option>
<option value="hr">Croatian / Hrvatski</option>
<option value="cz">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="fo">Faroese</option>
<option value="fa">Farsi</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German / Deutsch</option>
<option value="el">Greek</option>
<option value="he">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="ms">Malay</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pt-br">Portuguese (Brazilian)</option>
<option value="ro">Romanian</option>
<option value="rm">Romansh</option>
<option value="ru">Russian</option>
<option value="sr-cy">Serbian - Cyrillic</option>
<option value="sr">Serbian - Latin</option>
<option value="si">Sinhalese</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
<option value="tl">Tagalog</option>
<option value="ta">Tamil</option>
<option value="zh-tw">Taiwanese</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
</select>
</div>
</div>
<!-- Map Type-->
<div class="control-group">
<label class="control-label">Map Type</label>
<div class="controls">
<select id="embed-maptype">
<option value="toner">Stamen Maps: Toner</option>
<option value="toner-lines">Stamen Maps: Toner Lines</option>
<option value="toner-labels">Stamen Maps: Toner Labels</option>
<option value="watercolor">Stamen Maps: Watercolor</option>
<option value="sterrain">Stamen Maps: Terrain</option>
<option value="osm">OpenStreetMap</option>
<option value="TERRAIN">Google Maps: Terrain</option>
<option value="ROADMAP">Google Maps: Roadmap</option>
<option value="HYBRID">Google Maps: Hybrid</option>
<option value="SATELLITE">Google Maps: Satellite</option>
</select>
<input type="text" placeholder="Google Maps API Key" id="embed-googlemapkey">
<p class="help-block">If you are using a Google map type, please enter your <a href="https://developers.google.com/places/documentation/#Authentication" target="_blank">API Key</a>.<!-- <br>
Stamen map types are temporarily disabled while we work out a bug. -->
</p>
</div>
</div>
<!-- Fonts-->
<div class="control-group">
<label class="control-label">Fonts</label>
<div class="controls">
<select id="embed-font">
<option value="Bevan-PotanoSans">Bevan & Potano Sans</option>
<option value="Georgia-Helvetica">Georgia & Helvetica Neue</option>
<option value="Merriweather-NewsCycle">Merriweather & News Cycle</option>
<option value="NewsCycle-Merriweather">News Cycle & Merriweather</option>
<option value="PoiretOne-Molengo">Poiret One & Molengo</option>
<option value="Arvo-PTSans">Arvo & PT Sans</option>
<option value="PTSerif-PTSans">PT Serif & PT Sans</option>
<option value="DroidSerif-DroidSans">Droid Serif & Droid Sans</option>
<option value="Lekton-Molengo">Lekton & Molengo</option>
<option value="NixieOne-Ledger">Nixie One & Ledger</option>
<option value="AbrilFatface-Average">Abril Fatface & Average</option>
<option value="PlayfairDisplay-Muli">Playfair Display & Muli</option>
<option value="Rancho-Gudea">Rancho & Gudea</option>
<option value="BreeSerif-OpenSans">Bree Serif & Open Sans</option>
<option value="SansitaOne-Kameron">Sansita One & Kameron</option>
<option value="Pacifico-Arimo">Pacifico & Arimo</option>
<option value="PT">PT Sans & PT Narrow & PT Serif</option>
</select>
<a href="#" onclick="return false;" id="font-preview-trigger" data-toggle="popover" data-placement="bottom" data-html="true" data-content="&lt;img src='{{ static_url }}/img/make/font-options.png' alt='Font Option Preview'&gt;">click to preview font combinations</a>
</div>
<!-- Wordpress Plugin-->
<div class="control-group">
<label class="control-label">Misc</label>
<div class="controls">
<label class="checkbox">
<input id="embed-wordpressplugin" type="checkbox" value="option1">Wordpress Plugin<span class="help-inline">Is the embed for the <a href="https://github.com/NUKnightLab/TimelineJS-Wordpress-Plugin" target="_blank">Wordpress Plugin</a>?</span>
</label>
<!-- Start at End?-->
<label class="checkbox">
<input id="embed-startatend" type="checkbox" value="option1">Start at the End?<span class="help-inline">The most recent event will be shown first.</span>
</label>
<!-- Hash Bookmarks-->
<label class="checkbox">
<input id="embed-hashbookmark" type="checkbox" value="option1">Hash Bookmarks<span class="help-inline">On each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline</span>
</label>
<!-- Debug-->
<label class="checkbox">
<input id="embed-debug" type="checkbox" value="option1">Debug<span class="help-inline">In debug mode, you will see console logs.</span>
</label>
</div>
</div>
<!-- Start Zoom Adjust-->
<div class="control-group">
<label class="control-label">Adjust the default calculated zoom level</label>
<div class="controls">
<input id="embed-startzoomadjust" type="text" value="0" placeholder="0" class="input-mini">
<p class="help-block">This will tweak the default zoom level. Equivalent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.</p>
</div>
</div>
<!-- Start at Slide-->
<div class="control-group">
<label class="control-label">Start at specific slide number?</label>
<div class="controls">
<div class="input-prepend"><span class="add-on">Slide</span>
<input id="embed-startatslide" type="text" value="0" placeholder="0" class="input-mini">
</div>
<p class="help-block">You can tell TimelineJS to start at a specific slide number</p>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Step 4 -->
<div class="step row last">
<h2 class="span1">4</h2>
<div class="span11">
<h4>Embed the code into your website</h4>
<p>Grab the embed code and paste it on your site where you want your TimelineJS to appear (just like a YouTube video).</p>
<textarea readonly="readonly" style="width: 100%; height: 160px; min-height: 110px; max-height: 300px; resize: none; font-family: Menlo,Monaco,'Courier New',monospace; font-size: 12px;" id="embed_code"><iframe src='https://cdn.knightlab.com/libs/timeline/latest/embed/?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&width=600&height=600' width='600' height='600' frameborder='0'></iframe></textarea><br><br>
<p><a href="#preview-embed" data-scroll="true" id="iframe-preview-button" class="btn btn-primary">Preview</a>
<a href="#preview-embed" data-scroll="true" id="preview-embed-link" target="_blank" class="btn">Link to Preview</a></p>
</div>
</div>
<!-- Preview -->
<div id="preview" class="row">
<div id="preview-embed">
<h2>Preview</h2>
<div id="preview-embed-iframe" class="span12"></div>
</div>
</div>
</section>