18 lines
59 KiB
HTML
18 lines
59 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0026)https://revealjs.com/demo/ -->
|
|
<html lang="en" class="reveal-full-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo | reveal.js</title><meta name="description" content=""><link rel="stylesheet" href="./Demo _ reveal.js_files/main.css"><meta itemprop="name" content=" | reveal.js"><meta itemprop="description" content=""><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content=" | reveal.js"><meta name="twitter:description" content=""><meta name="twitter:site" content="@hakimel"><meta name="twitter:creator" content="@hakimel"><meta name="twitter:image:src" content="https://revealjs.com/images/meta/reveal-twitter-card-1024x512.png"><meta property="og:title" content=" | reveal.js"><meta property="og:description" content=""><meta property="og:image" name="image" content="https://revealjs.com/images/meta/reveal-og-card-1200-630.png"><meta property="og:url" content="https://revealjs.com/demo/"><meta property="og:site_name" content="reveal.js"><meta property="og:locale" content="en_US"><meta property="og:type" content="website"><link rel="icon" type="image/png" href="https://revealjs.com/images/favicon.svg"><link href="./Demo _ reveal.js_files/css2" rel="stylesheet"><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style></head><body class="h-screen full-page-demo reveal-viewport" data-page="demo" style="transition: transform 0.8s ease 0s; --slide-width:960px; --slide-height:700px; --slide-scale:1.16571;"><div class="reveal slide center focused has-vertical-slides has-horizontal-slides ready" role="application" data-transition-speed="default" data-background-transition="fade" style=""><div class="slides" style="width: 960px; height: 700px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(1.16571);"><section style="top: 89px; display: block;" class="present"><img src="./Demo _ reveal.js_files/reveal-white-text.svg" alt="reveal.js" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo"><h3>The HTML Presentation Framework</h3><p><small>Created by <a href="https://twitter.com/hakimel">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small></p><div style="display: flex; align-items: center; justify-content: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1.5rem; padding-top: 1.5rem;"><small>Sponsored by</small> <a href="https://codeless.co/" rel="dofollow"><img src="./Demo _ reveal.js_files/codeless_light.png" width="227" height="70"></a></div></section><section style="top: 225px; display: block;" hidden="" aria-hidden="true" class="future"><h2>Hello There</h2><p>reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.</p></section><section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future"><section style="top: 77.5px; display: block;"><h2>Vertical Slides</h2><p>Slides can be nested inside of each other.</p><p>Use the <em>Space</em> key to navigate through all slides.</p><br><a href="https://revealjs.com/demo/#" class="navigate-down" disabled="disabled"><img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" alt="Down arrow" src="./Demo _ reveal.js_files/arrow.png" data-lazy-loaded=""></a></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Basement Level 1</h2><p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Basement Level 2</h2><p>That's it, time to go back up.</p><br><a href="https://revealjs.com/demo/#/2"><img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" alt="Up arrow" src="./Demo _ reveal.js_files/arrow.png" data-lazy-loaded=""></a></section></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Slides</h2><p>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>.</p></section><section data-auto-animate="" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2 data-id="code-title">Pretty Code</h2><pre data-id="code-animation" class="code-wrapper"><code class="hljs javascript" data-trim="" data-line-numbers=""><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> ...</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9">}</td></tr></tbody></table></code></pre><p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p></section><section data-auto-animate="" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2 data-id="code-title">Even Prettier Animations</h2><pre data-id="code-animation" class="code-wrapper"><code class="hljs javascript" data-trim="" data-line-numbers=""><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SecondExample</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">}</td></tr></tbody></table></code><code class="hljs javascript fragment has-highlights" data-trim="" data-line-numbers="4,8-11" data-fragment-index="0"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"> Click me</td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SecondExample</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">}</td></tr></tbody></table></code><code class="hljs javascript fragment has-highlights" data-trim="" data-line-numbers="17" data-fragment-index="1"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SecondExample</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">}</td></tr></tbody></table></code><code class="hljs javascript fragment has-highlights" data-trim="" data-line-numbers="22-24" data-fragment-index="2"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9"><div class="hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10"><div class="hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10"> Click me</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11"><div class="hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12"><div class="hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13"><div class="hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14"><div class="hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14">}</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="15"><div class="hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="15"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="16"><div class="hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="16"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SecondExample</span>(<span class="hljs-params"></span>) </span>{</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="17"><div class="hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="17"> <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="18"><div class="hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="18"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="19"><div class="hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="19"> <span class="hljs-keyword">return</span> (</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="20"><div class="hljs-ln-n" data-line-number="20"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="20"> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="21"><div class="hljs-ln-n" data-line-number="21"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="21"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>You clicked {count} times<span class="hljs-tag"></<span class="hljs-name">p</span>></span></td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="22"><div class="hljs-ln-n" data-line-number="22"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="22"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =></span> setCount(count + 1)}></td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="23"><div class="hljs-ln-n" data-line-number="23"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="23"> Click me</td></tr><tr class="highlight-line"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="24"><div class="hljs-ln-n" data-line-number="24"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="24"> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="25"><div class="hljs-ln-n" data-line-number="25"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="25"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="26"><div class="hljs-ln-n" data-line-number="26"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="26"> );</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="27"><div class="hljs-ln-n" data-line-number="27"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="27">}</td></tr></tbody></table></code></pre></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Point of View</h2><p>Press <strong>ESC</strong> to enter the slide overview.</p><p>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.</p><p>(NOTE: Use ctrl + click in Linux.)</p></section><section data-auto-animate="" data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Auto-Animate</h2><p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p><div class="r-hstack justify-center"><div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div><div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div><div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div></div></section><section data-auto-animate="" data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><div class="r-hstack justify-center"><div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div><div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div><div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div></div><h2 style="margin-top: 20px;">Auto-Animate</h2></section><section data-auto-animate="" data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><div class="r-stack"><div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div><div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div><div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div></div><h2 style="margin-top: 20px;">Auto-Animate</h2></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Touch Optimized</h2><p>Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.</p></section><section data-markdown="" data-markdown-parsed="true" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2 id="markdown-support">Markdown support</h2>
|
|
<p>Write content using inline or external Markdown.
|
|
Instructions and more info available in the <a href="https://revealjs.com/markdown/">readme</a>.</p>
|
|
<pre class="code-wrapper"><code data-line-numbers="" class="html hljs xml"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-markdown</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> ## Markdown support</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> Write content using inline or external Markdown.</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> Instructions and more info available in the [readme](https://revealjs.com/markdown/).</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-tag"></<span class="hljs-name">section</span>></span></td></tr></tbody></table></code></pre></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><p>Add the <code>r-fit-text</code> class to auto-size text</p><h2 class="r-fit-text">FIT TEXT</h2></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="stack future"><section id="fragments" style="top: 350px; display: none;"><h2>Fragments</h2><p>Hit the next arrow...</p><p class="fragment" data-fragment-index="0">... to step through ...</p><p><span class="fragment" data-fragment-index="1">... a</span> <span class="fragment" data-fragment-index="2">fragmented</span> <span class="fragment" data-fragment-index="3">slide.</span></p><aside class="notes">This slide has fragments which are also stepped through in the notes window.</aside></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Fragment Styles</h2><p>There's different types of fragments, like:</p><p class="fragment grow" data-fragment-index="0">grow</p><p class="fragment shrink" data-fragment-index="1">shrink</p><p class="fragment fade-out" data-fragment-index="2">fade-out</p><p><span style="display: inline-block;" class="fragment fade-right" data-fragment-index="3">fade-right, </span><span style="display: inline-block;" class="fragment fade-up" data-fragment-index="4">up, </span><span style="display: inline-block;" class="fragment fade-down" data-fragment-index="5">down, </span><span style="display: inline-block;" class="fragment fade-left" data-fragment-index="6">left</span></p><p class="fragment fade-in-then-out" data-fragment-index="7">fade-in-then-out</p><p class="fragment fade-in-then-semi-out" data-fragment-index="8">fade-in-then-semi-out</p><p>Highlight <span class="fragment highlight-red" data-fragment-index="9">red</span> <span class="fragment highlight-blue" data-fragment-index="10">blue</span> <span class="fragment highlight-green" data-fragment-index="11">green</span></p></section></section><section id="transitions" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Transition Styles</h2><p>You can select from different transitions, like:<br><a href="https://revealjs.com/demo/?transition=none#/transitions">None</a> - <a href="https://revealjs.com/demo/?transition=fade#/transitions">Fade</a> - <a href="https://revealjs.com/demo/?transition=slide#/transitions">Slide</a> - <a href="https://revealjs.com/demo/?transition=convex#/transitions">Convex</a> - <a href="https://revealjs.com/demo/?transition=concave#/transitions">Concave</a> - <a href="https://revealjs.com/demo/?transition=zoom#/transitions">Zoom</a></p></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="stack future"><section data-background="#dddddd" style="top: 350px; display: none;" class="has-light-background"><h2>Slide Backgrounds</h2><p>Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.</p><a href="https://revealjs.com/demo/#" class="navigate-down" disabled="disabled"><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"></a></section><section data-background="https://static.slid.es/reveal/image-placeholder.png" class="future" aria-hidden="true" style="top: 350px; display: none;" data-background-image="https://static.slid.es/reveal/image-placeholder.png"><h2>Image Backgrounds</h2><pre class="code-wrapper"><code class="hljs html xml"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-background</span>=<span class="hljs-string">"image.png"</span>></span></code></pre></section><section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" class="future" aria-hidden="true" style="top: 350px; display: none;" data-background-image="https://static.slid.es/reveal/image-placeholder.png"><h2>Tiled Backgrounds</h2><pre class="code-wrapper"><code class="hljs html xml" style="word-wrap: break-word;"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-background</span>=<span class="hljs-string">"image.png"</span> <span class="hljs-attr">data-background-repeat</span>=<span class="hljs-string">"repeat"</span> <span class="hljs-attr">data-background-size</span>=<span class="hljs-string">"100px"</span>></span></code></pre></section><section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000" class="future has-dark-background" aria-hidden="true" style="top: 350px; display: none;"><div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"><h2>Video Backgrounds</h2><pre class="code-wrapper"><code class="hljs html xml" style="word-wrap: break-word;"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-background-video</span>=<span class="hljs-string">"video.mp4,video.webm"</span>></span></code></pre></div></section><section data-background="http://i.giphy.com/90F8aUepslB84.gif" class="future" aria-hidden="true" style="top: 350px; display: none;" data-background-image="http://i.giphy.com/90F8aUepslB84.gif"><h2>... and GIFs!</h2></section></section><section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom" style="top: 350px; display: none;" class="has-dark-background future" hidden="" aria-hidden="true"><h2>Background Transitions</h2><p>Different background transitions are available via the backgroundTransition option. This one's called "zoom".</p><pre class="code-wrapper"><code class="hljs javascript">Reveal.configure({ <span class="hljs-attr">backgroundTransition</span>: <span class="hljs-string">'zoom'</span> })</code></pre></section><section data-transition="slide" data-background="#b5533c" data-background-transition="zoom" style="top: 350px; display: none;" class="has-dark-background future" hidden="" aria-hidden="true"><h2>Background Transitions</h2><p>You can override background transitions per-slide.</p><pre class="code-wrapper"><code class="hljs html xml" style="word-wrap: break-word;"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-background-transition</span>=<span class="hljs-string">"zoom"</span>></span></code></pre></section><section data-background-iframe="https://hakim.se" data-background-interactive="" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><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;"><h2>Iframe Backgrounds</h2><p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p></div></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Marvelous List</h2><ul><li>No order here</li><li>Or here</li><li>Or here</li><li>Or here</li></ul></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Fantastic Ordered List</h2><ol><li>One is smaller than...</li><li>Two is smaller than...</li><li>Three!</li></ol></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Tabular Tables</h2><table><thead><tr><th>Item</th><th>Value</th><th>Quantity</th></tr></thead><tbody><tr><td>Apples</td><td>$1</td><td>7</td></tr><tr><td>Lemonade</td><td>$2</td><td>18</td></tr><tr><td>Bread</td><td>$3</td><td>2</td></tr></tbody></table></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Clever Quotes</h2><p>These guys come in two forms, inline: <q cite="./Demo _ reveal.js_files/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:</p><blockquote cite="./Demo _ reveal.js_files/Our-Favorite-Technology-Quotations">“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”</blockquote></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Intergalactic Interconnections</h2><p>You can link between slides internally, <a href="https://revealjs.com/demo/#/2/3">like this</a>.</p></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Speaker View</h2><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><p>Press the <em>S</em> key to try it out.</p><aside class="notes">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).</aside></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Export to PDF</h2><p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p><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="" src="./Demo _ reveal.js_files/saved_resource.html"></iframe></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Global State</h2><p>Set <code>data-state="something"</code> on a slide and <code>"something"</code> will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.</p></section><section data-state="customevent" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>State Events</h2><p>Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.</p><pre class="code-wrapper"><code class="javascript hljs" data-trim="" contenteditable="" style="font-size: 18px;">Reveal.on( <span class="hljs-string">'customevent'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
|
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'"customevent" has fired'</span> );
|
|
} );</code></pre></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Take a Moment</h2><p>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.</p></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Much more</h2><ul><li>Right-to-left support</li><li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li><li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li><li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li><li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li></ul></section><section style="text-align: left; top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h1>THE END</h1><p>- <a href="https://slides.com/">Try the online editor</a><br>- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a></p></section></div><div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" data-background-hash="#ddddddnullnullnullnullnullnullnullnullnullnull" style="background: rgb(221, 221, 221); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.pngnullnullnullnullnullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.png100pxnullnullnullnullnullrepeatnullnullnull" data-background-size="100px" style="display: none;"><div class="slide-background-content" style="background-size: 100px; background-repeat: repeat;"></div></div><div class="slide-background future" data-background-hash="0https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4null#000000nullnullnullnullnull" style="background-color: rgb(0, 0, 0); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="http://i.giphy.com/90F8aUepslB84.gifnullnullnullnullnullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" data-background-hash="#4d7e65nullnullnullnullnullnullnullnullzoomnull" data-background-transition="zoom" style="background: rgb(77, 126, 101); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="#b5533cnullnullnullnullnullnullnullnullzoomnull" data-background-transition="zoom" style="background: rgb(181, 83, 60); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="0https://hakim.senullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-number" style="display: none;"></div><aside class="controls" data-controls-layout="bottom-right" data-controls-back-arrows="faded" style="display: block;"><button class="navigate-left" aria-label="previous slide" disabled="disabled"><div class="controls-arrow"></div></button>
|
|
<button class="navigate-right enabled highlight" aria-label="next slide"><div class="controls-arrow"></div></button>
|
|
<button class="navigate-up" aria-label="above slide" disabled="disabled"><div class="controls-arrow"></div></button>
|
|
<button class="navigate-down" aria-label="below slide" disabled="disabled"><div class="controls-arrow"></div></button></aside><div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div><div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div><div class="pause-overlay"><button class="resume-button">Resume presentation</button></div><div class="aria-status" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">The HTML Presentation Framework Created by Hakim El Hattab and contributors Sponsored by </div></div><script src="./Demo _ reveal.js_files/main.js" defer="defer"></script><script async="" src="./Demo _ reveal.js_files/js"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-43375306-1');
|
|
</script></body></html> |