-
Notifications
You must be signed in to change notification settings - Fork 12
/
example-deck-impress.html
138 lines (100 loc) · 5.73 KB
/
example-deck-impress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>onslyde - impress example presentation</title>
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
<meta name="author" content="Bartek Szopka" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="js/libs/impress/impress-demo.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<link href="css/deck/deck.css" rel="stylesheet" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div id="disagree" class="hide-disagree">
Disagree
</div>
<div id="agree" class="hide-agree">
Agree
</div>
<div id="stats">
<span style="color:#fff">0<span id="wscount"></span> Connected Attendees</span>
</div>
<div class="address">
<h4 style="text-transform: lowercase;">connect now <span style="color:#13daec;">http://onslyde.com/go/<span id="sessionID"></span></span></h4>
</div>
<!--
For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div id="impress">
<section class="slide-group">
<section id="bored" class="step slide" data-x="-1000" data-y="-1500">
<h2 class="send">onslyde example deck</h2>
<h3><a href="http://twitter.com/onslyde">@onslyde</a></h3>
</section>
</section>
<section class="slide-group">
<section class="step slide" data-x="0" data-y="-1500">
<p class="send">onslyde is a JavaScript based presentation tool that helps you present better.</p>
</section>
</section>
<section class="slide-group">
<section id="title" class="slide step" data-x="1200" data-y="600" data-rotate="180" data-option="master">
<h3 style="color:orange" class="send">Does this excite you?</h3>
</section>
<section class="slide step" data-option="Yes" data-x="8500" data-y="1100" data-rotate="140" data-scale="5">
<div class="send">
Awesome, then keep going
</div>
</section>
<section class="slide step" data-option="No Way" data-x="1200" data-y="-1100" data-rotate="20" data-scale="5">
<div class="send">
Alrighty, go use Keynote or Powerpoint and pray the audience stays awake ;)
</div>
</section>
</section>
<section class="slide-group">
<section class="slide step" data-x="1500" data-y="-300" data-rotate="50" data-scale="3">
<p><a target="_blank" href="http://onslyde.com/#!/analytics">You can view the analytics for this session</a></p>
<p>You can use other features (like Roulette) for random giveaways or to choose an audience member</p>
<a href="javascript:onslyde.slides.roulette();void(0)">Pick a winner</a>
</section>
</section>
<section class="slide-group" >
<section class="slide step" data-x="1500" data-y="500" data-rotate="80" data-scale="3">
<h3>Add more content to this presentation...</h3>
<p>Save this page to your computer.</p>
<p>Click File->Save Page As (make sure you select the Webpage, HTML only menu option)</p>
</section>
</section>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/libs/impress/impress.js"></script>
<script>impress().init();</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/deck/dist/onslyde-deck-1.0.0.min.js" ></script>
<script>
onslyde({
deck: {sessionID: 175, mode: 'bespoke'}
});
</script>
<script src="js/deck/libs/jquery.flot.js"></script>
<script src="js/deck/deck.js"></script>
</body>
</html>