-
Notifications
You must be signed in to change notification settings - Fork 7
/
demo.html
208 lines (155 loc) · 8.36 KB
/
demo.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<!--
This page is based on the offical demo of impress.js, a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
To learn about impress.js, find source at https://github.com/bartaz/impress.js/
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>impresto.js demo</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="Impress.js by Bartek Szopka; impresto extension by Pessimistress" />
<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" />
<!--
Like impress.js, the extension doesn't depend on any external stylesheet. These stylesheets are for this demo only and are not required to create a presentation.
-->
<link href="http://rmackinnon.github.io/impresto.js/css/impress-demo.css" rel="stylesheet" />
<link href="http://rmackinnon.github.io/impresto.js/css/impresto-demo.css" rel="stylesheet" />
<link rel="shortcut icon" href="http://rmackinnon.github.io/impresto.js/css/favicon.png" />
<link rel="apple-touch-icon" href="http://rmackinnon.github.io/impresto.js/css/apple-touch-icon.png" />
</head>
<!--
Body element is used by impresto to set some useful class names, that will allow you to detect the role of the user and the syncing state - such as .impress-narrator and .impress-sync-open
-->
<body class="impress-not-supported">
<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>
<!--
The sync indicator notifies when there is a problem communicating with the server
-->
<div id="sync-indicator"></div>
<!--
This timer is shown for the narrator only
-->
<div id="timer">00:00:00</div>
<script type="text/javascript">
// Start timer
(function() {
var big_bang = new Date;
var timer = document.getElementById("timer");
setInterval(function() {
var t = ((new Date) - big_bang) / 1000;
timer.innerHTML = ([t/3600, (t/60)%60, t%60]).map(function(x) {
x = ~~x%100;
return (x<10? "0":"") + x;
}).join(":");
}, 1000);
})();
</script>
<div id="impress">
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
<!--
The notes are visible to narrator only
-->
<div class="notes">Aren't you frustrated that html slides cannot give you multiple views?</div>
</div>
<div class="step slide" data-x="0" data-y="-1500">
<q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
<div class="notes">That you cannot have your audience see a beautiful, clean presentation on the large screen, while you read the notes off a second view?</div>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
<!--
The notes are just HTML so you can use any fancy formatting and/or images in them
-->
<div class="notes">Would you like to impress your audience <strong>even more</strong> by <i>projecting</i> your presentation to many screens: large, small and remote?</div>
</div>
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">then you should try</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
<div class="notes" style="margin:150px 0 0 480px;font-size:36px">with impresto.js</div>
</div>
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>It's a <strong>presentation tool</strong> <br/>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
<div class="notes" style="margin-top:-40px">It's an extension to impress.js that syncs your presentation progress over the web.</div>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
<div class="notes" style="margin-top:60px">Change the slides as a <strong>narrator</strong> and any other browser that opens the same page will follow.</div>
</div>
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>and <b>tiny</b> ideas</p>
<div class="notes" style="margin-top:-40px">Yes, it's simple like that.</div>
</div>
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>want to know more?</p>
<q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>one more thing...</p>
</div>
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* beat that, prezi ;)</span>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<!--
The hint visible to narrator(s)
-->
<div class="hint" id="narrator_hint">
<p>Open another window with the audience page. <br />Navigate the slides here, and the other window will be synced.</p>
</div>
<!--
The hint visible to audience(s)
-->
<div class="hint" id="audience_hint">
<p>Open another window with the narrator page. <br />Navigate the slides there, and this window will be synced.</p>
</div>
<!--
To make it work, you need to include impress.js THEN impresto.js in the page.
-->
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script src="http://rmackinnon.github.io/impresto.js/js/impresto.js"></script>
<script type="text/javascript">
/*
For the purpose of this demo, user settings are passed in the url.
You may attach a more secure permission control mechanism if necessary.
*/
var args = window.location.search;
var sessionID = args.match(/session=(\w+)/i);
sessionID = sessionID? sessionID[1]:0;
var asNarrator = (/\bnarrator\b/i).test(args);
/*
The API functions returned by the original impress() still work.
New functions added by impresto are:
api.connect(server_url, talk_id);
// server_url: url pointing to the impresto php script
// talk_id: an unique identifier shared among all meeting attendants
api.startSync(as_narrator);
// as_narrator:
// pass true if the user is a narrator and push slide change to other users.
// false if the user is an audience and could read the slides only
api.stopSync();
*/
impress().init()
.connect("impresto.php", sessionID)
.startSync(asNarrator);
</script>
</body>
</html>