Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 725acd1c41a92662d38867db8b2f185921da9944 / . / inst / reveal.js-5.2.1 / demo.html
blob: ab65497748349a4d6e84d486c1080da59d470543 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js – The HTML Presentation Framework</title>
8
9 <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
10 <meta name="author" content="Hakim El Hattab">
11
12 <meta name="apple-mobile-web-app-capable" content="yes">
13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
14
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
17 <link rel="stylesheet" href="dist/reset.css">
18 <link rel="stylesheet" href="dist/reveal.css">
19 <link rel="stylesheet" href="dist/theme/black.css" id="theme">
20
21 <!-- Theme used for syntax highlighting of code -->
22 <link rel="stylesheet" href="plugin/highlight/monokai.css">
23 </head>
24
25 <body>
26
27 <div class="reveal">
28
29 <!-- Any section element inside of this container is displayed as a slide -->
30 <div class="slides">
31 <section>
32 <a href="https://revealjs.com">
33 <img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
34 </a>
35 <h3>The HTML Presentation Framework</h3>
36 <p>
37 <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
38 </p>
39 </section>
40
41 <section>
42 <h2>Hello There</h2>
43 <p>
44 reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
45 </p>
46 </section>
47
48 <!-- Example of nested vertical slides -->
49 <section>
50 <section>
51 <h2>Vertical Slides</h2>
52 <p>Slides can be nested inside of each other.</p>
53 <p>Use the <em>Space</em> key to navigate through all slides.</p>
54 <br>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]55 <a href="#/2/1" class="navigate-down">
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]56 <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
57 </a>
58 </section>
59 <section>
60 <h2>Basement Level 1</h2>
61 <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
62 </section>
63 <section>
64 <h2>Basement Level 2</h2>
65 <p>That's it, time to go back up.</p>
66 <br>
67 <a href="#/2">
68 <img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
69 </a>
70 </section>
71 </section>
72
73 <section>
74 <h2>Slides</h2>
75 <p>
76 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
77 </p>
78 </section>
79
80 <section data-visibility="hidden">
81 <h2>Hidden Slides</h2>
82 <p>
83 This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
84 </p>
85 </section>
86
87 <section data-auto-animate>
88 <h2 data-id="code-title">Pretty Code</h2>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]89 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]90 import React, { useState } from 'react';
91
92 function Example() {
93 const [count, setCount] = useState(0);
94
95 return (
96 ...
97 );
98 }
99 </code></pre>
100 <p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
101 </section>
102
103 <section data-auto-animate>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]104 <h2 data-id="code-title">With Animations</h2>
105 <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]106 import React, { useState } from 'react';
107
108 function Example() {
109 const [count, setCount] = useState(0);
110
111 return (
112 <div>
113 <p>You clicked {count} times</p>
114 <button onClick={() => setCount(count + 1)}>
115 Click me
116 </button>
117 </div>
118 );
119 }
120
121 function SecondExample() {
122 const [count, setCount] = useState(0);
123
124 return (
125 <div>
126 <p>You clicked {count} times</p>
127 <button onClick={() => setCount(count + 1)}>
128 Click me
129 </button>
130 </div>
131 );
132 }
133 </script></code></pre>
134 </section>
135
136 <section>
137 <h2>Point of View</h2>
138 <p>
139 Press <strong>ESC</strong> to enter the slide overview.
140 </p>
141 <p>
142 Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
143 </p>
144 <p>
145 (NOTE: Use ctrl + click in Linux.)
146 </p>
147 </section>
148
149 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
150 <h2>Auto-Animate</h2>
151 <p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p>
152 <div class="r-hstack justify-center">
153 <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
154 <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
155 <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
156 </div>
157 </section>
158 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
159 <div class="r-hstack justify-center">
160 <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
161 <div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
162 <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
163 </div>
164 <h2 style="margin-top: 20px;">Auto-Animate</h2>
165 </section>
166 <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
167 <div class="r-stack">
Marc Kupietz9c036a42024-05-14 13:17:25 +0200[diff] [blame]168 <div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
169 <div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
170 <div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]171 </div>
172 <h2 style="margin-top: 20px;">Auto-Animate</h2>
173 </section>
174
175 <section>
176 <h2>Touch Optimized</h2>
177 <p>
178 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
179 </p>
180 </section>
181
182 <section data-markdown>
183 <script type="text/template">
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]184 ## Markdown Support
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]185
186 Write content using inline or external Markdown.
187 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
188
189 ```html []
190 <section data-markdown>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]191 ## Markdown Support
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]192
193 Write content using inline or external Markdown.
194 Instructions and more info available in the [docs](https://revealjs.com/markdown/).
195 </section>
196 ```
197 </script>
198 </section>
199
200 <section>
Marc Kupietzcf6e9982026-08-15 15:37:40 +0200[diff] [blame]201 <h2>Lightbox</h2>
202 Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
203 <div class="r-hstack" style="gap: 2rem;">
204 <div>
205 <pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
206 &lt;img src="image.png" data-preview-image="image.png"&gt;
207 </code></pre>
208 <img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
209 </div>
210 <div>
211 <pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
212 &lt;img src="video.png" data-preview-video="video.mp4"&gt;
213 </code></pre>
214 <img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
215 </div>
216 </div>
217 </section>
218
219 <section>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]220 <p>Add the <code>r-fit-text</code> class to auto-size text</p>
221 <h2 class="r-fit-text">FIT TEXT</h2>
222 </section>
223
224 <section>
225 <section id="fragments">
226 <h2>Fragments</h2>
227 <p>Hit the next arrow...</p>
228 <p class="fragment">... to step through ...</p>
229 <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
230
231 <aside class="notes">
232 This slide has fragments which are also stepped through in the notes window.
233 </aside>
234 </section>
235 <section>
236 <h2>Fragment Styles</h2>
237 <p>There's different types of fragments, like:</p>
238 <p class="fragment grow">grow</p>
239 <p class="fragment shrink">shrink</p>
240 <p class="fragment fade-out">fade-out</p>
241 <p>
242 <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
243 <span style="display: inline-block;" class="fragment fade-up">up, </span>
244 <span style="display: inline-block;" class="fragment fade-down">down, </span>
245 <span style="display: inline-block;" class="fragment fade-left">left</span>
246 </p>
247 <p class="fragment fade-in-then-out">fade-in-then-out</p>
248 <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
249 <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
250 </section>
251 </section>
252
253 <section id="transitions">
254 <h2>Transition Styles</h2>
255 <p>
256 You can select from different transitions, like: <br>
257 <a href="?transition=none#/transitions">None</a> -
258 <a href="?transition=fade#/transitions">Fade</a> -
259 <a href="?transition=slide#/transitions">Slide</a> -
260 <a href="?transition=convex#/transitions">Convex</a> -
261 <a href="?transition=concave#/transitions">Concave</a> -
262 <a href="?transition=zoom#/transitions">Zoom</a>
263 </p>
264 </section>
265
266 <section id="themes">
267 <h2>Themes</h2>
268 <p>
269 reveal.js comes with a few themes built in: <br>
270 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]271 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
272 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
273 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
274 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
275 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
276 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
277 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
278 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
279 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
280 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
281 <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]282 </p>
283 </section>
284
285 <section>
286 <section data-background="#dddddd">
287 <h2>Slide Backgrounds</h2>
288 <p>
289 Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
290 </p>
291 <a href="#" class="navigate-down">
292 <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
293 </a>
294 </section>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]295 <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
296 <h2>Gradient Backgrounds</h2>
297 <pre><code class="hljs html wrap">&lt;section data-background-gradient=
298 "linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
299 </section>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]300 <section data-background="https://static.slid.es/reveal/image-placeholder.png">
301 <h2>Image Backgrounds</h2>
302 <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
303 </section>
304 <section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
305 <h2>Tiled Backgrounds</h2>
306 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
307 </section>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]308 <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]309 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
310 <h2>Video Backgrounds</h2>
311 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
312 </div>
313 </section>
314 <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
315 <h2>... and GIFs!</h2>
316 </section>
317 </section>
318
319 <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
320 <h2>Background Transitions</h2>
321 <p>
322 Different background transitions are available via the backgroundTransition option. This one's called "zoom".
323 </p>
324 <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
325 </section>
326
327 <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
328 <h2>Background Transitions</h2>
329 <p>
330 You can override background transitions per-slide.
331 </p>
332 <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
333 </section>
334
335 <section data-background-iframe="https://hakim.se" data-background-interactive>
336 <div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
337 <h2>Iframe Backgrounds</h2>
338 <p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
339 </div>
340 </section>
341
342 <section>
343 <h2>Marvelous List</h2>
344 <ul>
345 <li>No order here</li>
346 <li>Or here</li>
347 <li>Or here</li>
348 <li>Or here</li>
349 </ul>
350 </section>
351
352 <section>
353 <h2>Fantastic Ordered List</h2>
354 <ol>
355 <li>One is smaller than...</li>
356 <li>Two is smaller than...</li>
357 <li>Three!</li>
358 </ol>
359 </section>
360
361 <section>
362 <h2>Tabular Tables</h2>
363 <table>
364 <thead>
365 <tr>
366 <th>Item</th>
367 <th>Value</th>
368 <th>Quantity</th>
369 </tr>
370 </thead>
371 <tbody>
372 <tr>
373 <td>Apples</td>
374 <td>$1</td>
375 <td>7</td>
376 </tr>
377 <tr>
378 <td>Lemonade</td>
379 <td>$2</td>
380 <td>18</td>
381 </tr>
382 <tr>
383 <td>Bread</td>
384 <td>$3</td>
385 <td>2</td>
386 </tr>
387 </tbody>
388 </table>
389 </section>
390
391 <section>
392 <h2>Clever Quotes</h2>
393 <p>
394 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
395 </p>
396 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
397 &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
398 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
399 </blockquote>
400 </section>
401
402 <section>
403 <h2>Intergalactic Interconnections</h2>
404 <p>
405 You can link between slides internally,
406 <a href="#/2/3">like this</a>.
407 </p>
408 </section>
409
410 <section>
411 <h2>Speaker View</h2>
412 <p>There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
413 <p>Press the <em>S</em> key to try it out.</p>
414
415 <aside class="notes">
416 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
417 </aside>
418 </section>
419
420 <section>
421 <h2>Export to PDF</h2>
422 <p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p>
423 <iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
424 </section>
425
426 <section>
427 <h2>Global State</h2>
428 <p>
429 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
430 will be added as a class to the document element when the slide is open. This lets you
431 apply broader style changes, like switching the page background.
432 </p>
433 </section>
434
435 <section data-state="customevent">
436 <h2>State Events</h2>
437 <p>
438 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
439 </p>
440 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
441Reveal.on( 'customevent', function() {
442 console.log( '"customevent" has fired' );
443} );
444 </code></pre>
445 </section>
446
447 <section>
448 <h2>Take a Moment</h2>
449 <p>
450 Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
451 </p>
452 </section>
453
454 <section>
455 <h2>Much more</h2>
456 <ul>
457 <li>Right-to-left support</li>
458 <li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
459 <li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
460 <li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li>
461 <li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
462 </ul>
463 </section>
464
465 <section style="text-align: left;">
466 <h1>THE END</h1>
467 <p>
468 - <a href="https://slides.com">Try the online editor</a> <br>
469 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
470 </p>
471 </section>
472
473 </div>
474
475 </div>
476
477 <script src="dist/reveal.js"></script>
478 <script src="plugin/zoom/zoom.js"></script>
479 <script src="plugin/notes/notes.js"></script>
480 <script src="plugin/search/search.js"></script>
481 <script src="plugin/markdown/markdown.js"></script>
482 <script src="plugin/highlight/highlight.js"></script>
483 <script>
484
485 // Also available as an ES module, see:
486 // https://revealjs.com/initialization/
487 Reveal.initialize({
488 controls: true,
489 progress: true,
490 center: true,
491 hash: true,
492
493 // Learn about plugins: https://revealjs.com/plugins/
494 plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
495 });
496
497 </script>
498
499 </body>
500</html>