From 561c3ff4437ed334cbce66e279d17a3b11be7c38 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 16 Apr 2020 16:04:26 +0200 Subject: update presentation examples move to root @ /examples --- examples/assets/beeping.txt | 2 + examples/assets/beeping.wav | Bin 0 -> 422472 bytes examples/assets/image1.png | Bin 0 -> 21991 bytes examples/assets/image2.png | Bin 0 -> 10237 bytes examples/auto-animate.html | 175 +++++++++++++++++++++++++++++++++ examples/barebones.html | 38 ++++++++ examples/math.html | 202 +++++++++++++++++++++++++++++++++++++++ examples/media.html | 56 +++++++++++ examples/multiple-instances.html | 53 ++++++++++ examples/slide-backgrounds.html | 141 +++++++++++++++++++++++++++ examples/slide-transitions.html | 97 +++++++++++++++++++ 11 files changed, 764 insertions(+) create mode 100644 examples/assets/beeping.txt create mode 100644 examples/assets/beeping.wav create mode 100644 examples/assets/image1.png create mode 100644 examples/assets/image2.png create mode 100644 examples/auto-animate.html create mode 100644 examples/barebones.html create mode 100644 examples/math.html create mode 100644 examples/media.html create mode 100644 examples/multiple-instances.html create mode 100644 examples/slide-backgrounds.html create mode 100644 examples/slide-transitions.html (limited to 'examples') diff --git a/examples/assets/beeping.txt b/examples/assets/beeping.txt new file mode 100644 index 0000000..bf41997 --- /dev/null +++ b/examples/assets/beeping.txt @@ -0,0 +1,2 @@ +Source: https://freesound.org/people/fennelliott/sounds/379419/ +License: CC0 (public domain) \ No newline at end of file diff --git a/examples/assets/beeping.wav b/examples/assets/beeping.wav new file mode 100644 index 0000000..38747a5 Binary files /dev/null and b/examples/assets/beeping.wav differ diff --git a/examples/assets/image1.png b/examples/assets/image1.png new file mode 100644 index 0000000..8747594 Binary files /dev/null and b/examples/assets/image1.png differ diff --git a/examples/assets/image2.png b/examples/assets/image2.png new file mode 100644 index 0000000..6c403a0 Binary files /dev/null and b/examples/assets/image2.png differ diff --git a/examples/auto-animate.html b/examples/auto-animate.html new file mode 100644 index 0000000..0ebf3cc --- /dev/null +++ b/examples/auto-animate.html @@ -0,0 +1,175 @@ + + + + + + + reveal.js - Auto Animate + + + + + + + + + + +
+ +
+ +
+

Auto-Animate Example

+

This will fade out

+ + 

+						function Example() {
+						  const [count, setCount] = useState(0);
+						}
+
+
+
+

Auto-Animate Example

+

This will fade out

+

This element is unmatched

+ + 

+						function Example() {
+						  New line!
+						  const [count, setCount] = useState(0);
+						}
+
+
+ +
+

Line Height & Letter Spacing

+
+
+

Line Height & Letter Spacing

+
+ +
+
+ 

+							import React, { useState } from 'react';
+
+							function Example() {
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    ...
+							  );
+							}
+
+
+
+ 

+							function Example() {
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    <div>
+							      <p>You clicked {count} times</p>
+							      <button onClick={() => setCount(count + 1)}>
+							        Click me
+							      </button>
+							    </div>
+							  );
+							}
+
+
+
+ 

+							function Example() {
+							  // A comment!
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    <div>
+							      <p>You clicked {count} times</p>
+							      <button onClick={() => setCount(count + 1)}>
+							        Click me
+							      </button>
+							    </div>
+							  );
+							}
+
+
+
+ +
+
+

Swapping list items

+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • One
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • Three
    • +
  • One
    • +
+
+
+ +
+

SLIDE 1

+

Animate Anything

+
+
+
+
+
+
+

SLIDE 2

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+ +
+ +
+ + + + + + + diff --git a/examples/barebones.html b/examples/barebones.html new file mode 100644 index 0000000..28a4ea0 --- /dev/null +++ b/examples/barebones.html @@ -0,0 +1,38 @@ + + + + + + + reveal.js - Barebones + + + + + + +
+ +
+ +
+

Barebones Presentation

+

This example contains the bare minimum includes and markup required to run a reveal.js presentation.

+
+ +
+

No Theme

+

There's no theme included, so it will fall back on browser defaults.

+
+ +
+ +
+ + + + + + diff --git a/examples/math.html b/examples/math.html new file mode 100644 index 0000000..643bb6f --- /dev/null +++ b/examples/math.html @@ -0,0 +1,202 @@ + + + + + + + reveal.js - Math Plugin + + + + + + + + + +
+ +
+ +
+

reveal.js Math Plugin

+

A thin wrapper for MathJax

+
+ +
+

The Lorenz Equations

+ + \[\begin{aligned} + \dot{x} & = \sigma(y-x) \\ + \dot{y} & = \rho x - y - xz \\ + \dot{z} & = -\beta z + xy + \end{aligned} \] +
+ +
+

The Cauchy-Schwarz Inequality

+ + +
+ +
+

A Cross Product Formula

+ + \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} + \mathbf{i} & \mathbf{j} & \mathbf{k} \\ + \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ + \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 + \end{vmatrix} \] +
+ +
+

The probability of getting \(k\) heads when flipping \(n\) coins is

+ + \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \] +
+ +
+

An Identity of Ramanujan

+ + \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = + 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} + {1+\frac{e^{-8\pi}} {1+\ldots} } } } \] +
+ +
+

A Rogers-Ramanujan Identity

+ + \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = + \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\] +
+ +
+

Maxwell’s Equations

+ + \[ \begin{aligned} + \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ + \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ + \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} + \] +
+ +
+

TeX Macros

+ + Here is a common vector space: + \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\] + used in functional analysis. +
+ +
+
+

The Lorenz Equations

+ +
+ \[\begin{aligned} + \dot{x} & = \sigma(y-x) \\ + \dot{y} & = \rho x - y - xz \\ + \dot{z} & = -\beta z + xy + \end{aligned} \] +
+
+ +
+

The Cauchy-Schwarz Inequality

+ +
+ \[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \] +
+
+ +
+

A Cross Product Formula

+ +
+ \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} + \mathbf{i} & \mathbf{j} & \mathbf{k} \\ + \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ + \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 + \end{vmatrix} \] +
+
+ +
+

The probability of getting \(k\) heads when flipping \(n\) coins is

+ +
+ \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \] +
+
+ +
+

An Identity of Ramanujan

+ +
+ \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = + 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} + {1+\frac{e^{-8\pi}} {1+\ldots} } } } \] +
+
+ +
+

A Rogers-Ramanujan Identity

+ +
+ \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = + \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\] +
+
+ +
+

Maxwell’s Equations

+ +
+ \[ \begin{aligned} + \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ + \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ + \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} + \] +
+
+ +
+

TeX Macros

+ + Here is a common vector space: + \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\] + used in functional analysis. +
+
+ +
+ +
+ + + + + + diff --git a/examples/media.html b/examples/media.html new file mode 100644 index 0000000..8a982bc --- /dev/null +++ b/examples/media.html @@ -0,0 +1,56 @@ + + + + + + + reveal.js - Video, Audio and Iframes + + + + + + + + + +
+ +
+ +
+

Examples of embedded Video, Audio and Iframes

+
+ +
+

Iframe

+ +
+ +
+

Iframe Background

+
+ +
+

Auto-playing audio

+ +
+ +
+

Audio with controls

+ +
+ +
+ +
+ + + + + + diff --git a/examples/multiple-instances.html b/examples/multiple-instances.html new file mode 100644 index 0000000..9cf535a --- /dev/null +++ b/examples/multiple-instances.html @@ -0,0 +1,53 @@ + + + + + + + reveal.js - Multiple Instances + + + + + + + + + +
+
+
+
Deck 1, Slide 1
+
Deck 1, Slide 2
+
+
+ +
+
+
Deck 2, Slide 1
+
Deck 2, Slide 2
+
+
+
+ + + + + + diff --git a/examples/slide-backgrounds.html b/examples/slide-backgrounds.html new file mode 100644 index 0000000..81075c8 --- /dev/null +++ b/examples/slide-backgrounds.html @@ -0,0 +1,141 @@ + + + + + + + reveal.js - Slide Backgrounds + + + + + + + + + + +
+ +
+ +
+

data-background: #00ffff

+
+ +
+

data-background: #bb00bb

+
+ +
+

data-background: lightblue

+
+ +
+
+

data-background: #ff0000

+
+
+

data-background: rgba(0, 0, 0, 0.2)

+
+
+

data-background: salmon

+
+
+ +
+
+

Background applied to stack

+
+
+

Background applied to stack

+
+
+

Background applied to slide inside of stack

+
+
+ +
+

Background image

+
+ +
+
+

Background image

+
+
+

Background image

+
+
+ +
+

Background image

+ 
data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"
+
+ +
+

Same background twice (1/2)

+
+
+

Same background twice (2/2)

+
+ +
+

Video background

+
+ +
+

Iframe background

+
+ +
+
+

Same background twice vertical (1/2)

+
+
+

Same background twice vertical (2/2)

+
+
+ +
+

Same background from horizontal to vertical (1/3)

+
+
+
+

Same background from horizontal to vertical (2/3)

+
+
+

Same background from horizontal to vertical (3/3)

+
+
+ +
+ +
+ + + + + + diff --git a/examples/slide-transitions.html b/examples/slide-transitions.html new file mode 100644 index 0000000..8f928a6 --- /dev/null +++ b/examples/slide-transitions.html @@ -0,0 +1,97 @@ + + + + + + + reveal.js - Slide Transitions + + + + + + + + +
+ +
+ +
+

Default

+
+ +
+

Default

+
+ +
+

data-transition: zoom

+
+ +
+

data-transition: zoom-in fade-out

+
+ +
+

Default

+
+ +
+

data-transition: convex

+
+ +
+

data-transition: convex-in concave-out

+
+ +
+
+

Default

+
+
+

data-transition: concave

+
+
+

data-transition: convex-in fade-out

+
+
+

Default

+
+
+ +
+

data-transition: none

+
+ +
+

Default

+
+ +
+ +
+ + + + + + -- cgit v1.2.3