Skip to content

Instantly share code, notes, and snippets.

@brettgaylor
Created June 15, 2012 17:09
Show Gist options
  • Save brettgaylor/2937611 to your computer and use it in GitHub Desktop.
Save brettgaylor/2937611 to your computer and use it in GitHub Desktop.
Newscaster HTMl
<html><head><base href="http://storycamp.mozillapopcorn.org/templates/supported/newscaster/"><script async="" src="http://s.ytimg.com/yt/jsbin/www-widgetapi-vflAP7IME.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>News Caster</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link href="http://fonts.googleapis.com/css?family=Lato:300,700,300italic,700italic%7CAudiowide" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../shared/css/normalise.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="../shared/css/jquery-ui/jquery.ui.all.css">
<link rel="stylesheet" href="../shared/plugins/titlecard/popcorn.titlecard.css">
<link rel="stylesheet" href="../shared/plugins/shrink/popcorn.shrink.css">
<link rel="stylesheet" href="../shared/plugins/zoink/popcorn.zoink.css">
<link href="../../../css/butter.ui.css" rel="stylesheet"><script type="text/javascript" src="../../../external/popcorn-js/popcorn.js"></script><script src="../../../templates/supported/shared/plugins/shrink/popcorn.shrink.js"></script><script src="../../../templates/supported/shared/plugins/titlecard/popcorn.titlecard.js"></script><script src="../../../templates/supported/shared/plugins/photo/popcorn.photo.js"></script><script src="../../../templates/supported/shared/plugins/zoink/popcorn.zoink.js"></script></head><body class="butter-header-spacing butter-tray-spacing minimized">
<div class="wrapper">
<header>
<h2 class="logo">knn report</h2>
<article class="cube-container">
<section class="cube">
<div>
<div class="cube-side">
<h2>knn news</h2>
</div>
</div>
<div class="cube-side">
<div>
<h2>knn news</h2>
</div>
</div>
<div class="cube-side">
<div>
<h2>knn news</h2>
</div>
</div>
<div class="cube-side">
<div>
<h2>knn news</h2>
</div>
</div>
<div class="cube-top"></div>
<div class="cube-bottom"></div>
<div class="cube-shadow"></div>
</section>
</article>
</header>
<div role="main">
<section id="video-container" class="video-container">
<video src="http://videos-origin.mozilla.org/serv/webmademovies/Moz_Doc_0329_GetInvolved.webm" tabindex="0" id="video" preload="" controls="controls"></video>
<div id="video-overlay" class="video-overlay">
<div id="upper-corner" class="upper-corner"></div>
</div>
</section>
<section class="cf suplementary">
<article class="block" id="Area1">
</article>
<article class="block">
<p>Even the all-powerful Pointing has no control about the blind texts — it is an almost unorthographic life. One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</article>
<article class="block" id="Area2">
</article>
</section>
</div>
<footer>
<span>Creative commons</span>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript">(function(){
var popcorn = Popcorn.smart( '#video', ["http://videos-origin.mozilla.org/serv/webmademovies/Moz_Doc_0329_GetInvolved.webm"], {"frameAnimation":false} );
popcorn.text({
"start": 1.23,
"end": 2.23,
"target": "Area2",
"text": "Also in here!",
"escape": false,
"multiline": false
});
popcorn.photo({
"start": 3.988,
"end": 6.872,
"target": "video-overlay",
"src": "http://www.mozilla.org/img/covehead/firefox/brand-toolkit/identity-logo-firefox.png",
"href": "http://www.mozilla.org/",
"width": "150",
"height": "150",
"top": "25",
"left": "75"
});
popcorn.zoink({
"start": 7.477,
"end": 9.537,
"target": "video-overlay",
"text": "I am a Robot!",
"type": "thought",
"triangle": "top left",
"flip": false,
"classes": "none",
"order": "1",
"top": "200",
"left": "200",
"width": "200"
});
popcorn.titlecard({
"start": 3.988,
"end": 6.866,
"target": "video-overlay",
"title": "Popcorn rules!",
"subheading": "These dudes agree:"
});
popcorn.text({
"start": "0",
"end": 1,
"text": "Here you can put any text you like!",
"target": "Area1",
"escape": false,
"multiline": false
});
return popcorn;
}());</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment