Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 94 lines (92 sloc) 3.117 kb
d310fef @chromakode Initial experimental code.
authored
1 <!doctype html>
2 <html>
e070883 @chromakode New demo slideshow for usepow.com.
authored
3 <head>
4 <script src="http://usepow.com"></script>
5 <!--
6 <script src="pow.init.js"></script>
7 <script src="pow.compat.js"></script>
8 <script src="pow.core.js"></script>
9 <script src="pow.nav.js"></script>
10 -->
11 <script src="highlight.pack.js" onload="hljs.tabReplace = ' '; hljs.initHighlightingOnLoad()"></script>
12 <link rel="stylesheet" href="ir_black.css">
13 <style>
14 .slide { font-family:sans-serif; text-align:center; }
15 .slide.logo { text-align:center; }
16 .slide h1 { font-size:48em; font-weight:normal; }
17 .slide h2 { font-size:40em; font-weight:bold; }
18 .slide h1, h2 { letter-spacing:-.05em; }
19 .slide h1 > object { height:1.75em; width:2.25em; vertical-align:middle; }
20 .slide h1 > button { font-size:1em; }
21 .slide a { border:none; color:black; background:#ddd; padding:.25em .5em; border-radius:.25em; }
22 .slide code { text-align:left; font-size:20em; font-family:monospace; padding:1em 2em; }
23 #demo-iframe { border:6em inset; }
24 #animated h1 { margin-top:.25em; }
25 #info { text-align:center; }
26 </style>
27 </head>
28 <body>
29 <div id="slides">
30 <div class="slide logo">
31 <script>
32 pow.slide.on.show(function() {
33 var logo = pow.slide.el.getElementsByTagName('object')[0]
34 pow.slide.animate(400, {
35 frame: function(val) {
36 logo.height = 50*Math.min(1, val*4)*(Math.sin(3*Math.PI*val)*(1-val)*.25+1) + "%"
37 },
38 finish: function() {}
39 }).play()
40 })
41 </script>
42 <object data="logo.svg" width="50%" height="50%"><h1>POW!</h1></object>
43 <h1>A simple web presentation tool.</h1>
44 </div>
45 <div class="slide">
46 <h1>Create simple, powerful presentations using just <strong>HTML</strong> and <strong>JavaScript</strong>.</h2>
47 </div>
48 <div class="slide" id="animated">
49 <h1>Presentations can be animated.</h1>
50 <iframe title="YouTube video player" width="100%" height="80%" src="http://www.youtube.com/embed/qs1bG6BIYlo" frameborder="0" allowfullscreen></iframe>
51 </div>
52 <div class="slide">
53 <h1>Presentations can be <button onclick="this.textContent = 'active'">interactive</button>.</h1>
54 </div>
55 <div class="slide">
56 <script>
57 pow.slide.on.load(function(slide) {
58 var code = document.getElementById('demo-code'),
59 iframe = document.getElementById('demo-iframe')
60
61 iframe.contentDocument.write(code.textContent = [
62 '<html>',
63 '<head>',
64 '\t<script src="http://usepow.com"></scr'+'ipt>',
65 '</head>',
66 '<body>',
67 '\t<div id="slides">',
68 '\t\t<div class="slide">',
69 '\t\t\t<h1>Hello, world.</h1>',
70 '\t\t</div>',
71 '\t</div>',
72 '</body>',
73 '</html>'
74 ].join('\n'))
75 iframe.contentDocument.close()
76 })
77 </script>
78 <h1>Presentations can be simple.</h1>
79 <pre><code class="html" id="demo-code"></code></pre>
80 </div>
81 <div class="slide">
82 <h1>This is <object data="logo.svg">POW!</object>.</h1>
83 <iframe id="demo-iframe" width="80%" height="60%"></iframe>
84 </div>
85 <div class="slide">
86 <h1>What will you make with it?</h1>
87 </div>
88 <div class="slide" id="info">
89 <p><a href="http://github.com/chromakode/pow">github.com/chromakode/pow</a></p>
90 </div>
91 </div>
92 </body>
d310fef @chromakode Initial experimental code.
authored
93 </html>
Something went wrong with that request. Please try again.