From a91b3874e7454f88712396054920423a68987377 Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Fri, 9 Apr 2021 19:13:04 +0200 Subject: Initial --- 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 | 176 ++++++++++++++++++++++++++++++ examples/backgrounds.html | 141 ++++++++++++++++++++++++ examples/barebones.html | 32 ++++++ examples/layout-helpers.html | 160 ++++++++++++++++++++++++++++ examples/markdown.html | 131 +++++++++++++++++++++++ examples/markdown.md | 36 +++++++ examples/math.html | 201 +++++++++++++++++++++++++++++++++++ examples/media.html | 75 +++++++++++++ examples/multiple-presentations.html | 102 ++++++++++++++++++ examples/transitions.html | 97 +++++++++++++++++ 14 files changed, 1153 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/backgrounds.html create mode 100644 examples/barebones.html create mode 100644 examples/layout-helpers.html create mode 100644 examples/markdown.html create mode 100644 examples/markdown.md create mode 100644 examples/math.html create mode 100644 examples/media.html create mode 100644 examples/multiple-presentations.html create mode 100644 examples/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..4af405f --- /dev/null +++ b/examples/auto-animate.html @@ -0,0 +1,176 @@ + + + + + + + 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/backgrounds.html b/examples/backgrounds.html new file mode 100644 index 0000000..19d40c3 --- /dev/null +++ b/examples/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/barebones.html b/examples/barebones.html new file mode 100644 index 0000000..50adcb8 --- /dev/null +++ b/examples/barebones.html @@ -0,0 +1,32 @@ + + + + + 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/layout-helpers.html b/examples/layout-helpers.html new file mode 100644 index 0000000..4e41630 --- /dev/null +++ b/examples/layout-helpers.html @@ -0,0 +1,160 @@ + + + + + + + reveal.js - Layout Helpers + + + + + + + + + + +
+ +
+ +
+

Layout Helper Examples

+ +
+ +
+

Fit Text

+

Resizes text to be as large as possible within its container.

+ 

+					  
FIT

+
+
+ +
+

FIT

+
+ +
+

HELLO WORLD

+

BOTH THESE TITLES USE FIT-TEXT

+
+ +
+

Stretch

+

Makes an element as tall as possible while remaining within the slide bounds.

+ 

+					  
Stretch Example

+					  
+					  
Image byline

+
+
+ +
+

Stretch Example

+ +

Image byline

+
+ +
+

Stack

+

Stacks multiple elements on top of each other, for use with fragments.

+ 

+					  

+					    <img class="fragment" width="450" height="300" src="...">
+					    <img class="fragment" width="300" height="450" src="...">
+					    <img class="fragment" width="400" height="400" src="...">
+					  

+
+
+ +
+

Stack Example

+
+

One

+

Two

+

Three

+

Four

+
+
+ + + +
+
+ +
+

Stack Example

+

fade-in-then-out fragments

+
+ + + +
+
+ +
+

HStack

+

Stacks multiple elements horizontally.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

HStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+

VStack

+

Stacks multiple elements horizontally.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

VStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+ +
+ + + + + + + diff --git a/examples/markdown.html b/examples/markdown.html new file mode 100644 index 0000000..9dece58 --- /dev/null +++ b/examples/markdown.html @@ -0,0 +1,131 @@ + + + + + + + reveal.js - Markdown Example + + + + + + + + + +
+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + + + + + + + + + diff --git a/examples/markdown.md b/examples/markdown.md new file mode 100644 index 0000000..89c7534 --- /dev/null +++ b/examples/markdown.md @@ -0,0 +1,36 @@ +# Markdown Demo + + + +## External 1.1 + +Content 1.1 + +Note: This will only appear in the speaker notes window. + + +## External 1.2 + +Content 1.2 + + + +## External 2 + +Content 2.1 + + + +## External 3.1 + +Content 3.1 + + +## External 3.2 + +Content 3.2 + + +## External 3.3 + +![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png) diff --git a/examples/math.html b/examples/math.html new file mode 100644 index 0000000..5861a71 --- /dev/null +++ b/examples/math.html @@ -0,0 +1,201 @@ + + + + + + + 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..388208f --- /dev/null +++ b/examples/media.html @@ -0,0 +1,75 @@ + + + + + + + reveal.js - Video, Audio and Iframes + + + + + + + + + +
+ +
+ +
+

Examples of embedded Video, Audio and Iframes

+
+ +
+

Iframe

+ +
+ +
+

Iframe Background

+
+ +
+

Video

+ +
+ +
+

Background Video

+
+ +
+

Auto-playing audio

+ +
+ +
+

Audio inside slide fragments

+
+ Beep 1 + +
+
+ Beep 2 + +
+
+ +
+

Audio with controls

+ +
+ +
+ +
+ + + + + + diff --git a/examples/multiple-presentations.html b/examples/multiple-presentations.html new file mode 100644 index 0000000..e5347d4 --- /dev/null +++ b/examples/multiple-presentations.html @@ -0,0 +1,102 @@ + + + + + + + reveal.js - Multiple Presentations + + + + + + + + + + +
+
+
+
Deck 1, Slide 1
+
Deck 1, Slide 2
+
+ 

+							import React, { useState } from 'react';
+							function Example() {
+							  const [count, setCount] = useState(0);
+							}
+
+
+
+
+ +
+
+
Deck 2, Slide 1
+
Deck 2, Slide 2
+
+ +
+
+

The Lorenz Equations

+ + \[\begin{aligned} + \dot{x} & = \sigma(y-x) \\ + \dot{y} & = \rho x - y - xz \\ + \dot{z} & = -\beta z + xy + \end{aligned} \] +
+
+
+
+ + + + + + + + + + + diff --git a/examples/transitions.html b/examples/transitions.html new file mode 100644 index 0000000..adbfd15 --- /dev/null +++ b/examples/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