From 3d0969166f5838df844d81d1926e761905cecc1f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 20 Mar 2016 18:50:14 +0100 Subject: [PATCH] new empty template at index.html, move old index to demo.html #1526 --- demo.html | 431 +++++++++++++++++++++++++++++++++++++++++++ index.html | 384 ++------------------------------------ lab.html | 526 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 969 insertions(+), 372 deletions(-) create mode 100644 demo.html create mode 100644 lab.html diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..17dfb35 --- /dev/null +++ b/demo.html @@ -0,0 +1,431 @@ + + + + + + + reveal.js – The HTML Presentation Framework + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Reveal.js

+

The HTML Presentation Framework

+

+ Created by Hakim El Hattab / @hakimel +

+
+ +
+

Hello There

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. --- +

+
+ + +
+
+

Vertical Slides

+

Slides can be nested inside of each other.

+

Use the Space key to navigate through all slides.

+
+ + Down arrow + +
+
+

Basement Level 1

+

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

+
+
+

Basement Level 2

+

That's it, time to go back up.

+
+ + Up arrow + +
+
+ +
+

Slides

+

+ Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. +

+
+ +
+

Point of View

+

+ Press ESC to enter the slide overview. +

+

+ Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. +

+
+ +
+

Touch Optimized

+

+ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +

+
+ +
+ +
+ +
+
+

Fragments

+

Hit the next arrow...

+

... to step through ...

+

... a fragmented slide.

+ + +
+
+

Fragment Styles

+

There's different types of fragments, like:

+

grow

+

shrink

+

fade-out

+

fade-up (also down, left and right!)

+

current-visible

+

Highlight red blue green

+
+
+ +
+

Transition Styles

+

+ You can select from different transitions, like:
+ None - + Fade - + Slide - + Convex - + Concave - + Zoom +

+
+ +
+

Themes

+

+ reveal.js comes with a few themes built in:
+ + Black (default) - + White - + League - + Sky - + Beige - + Simple
+ Serif - + Blood - + Night - + Moon - + Solarized +

+
+ +
+
+

Slide Backgrounds

+

+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported. +

+ + Down arrow + +
+
+

Image Backgrounds

+ 
<section data-background="image.png">
+
+
+

Tiled Backgrounds

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+
+

Video Backgrounds

+ 
<section data-background-video="video.mp4,video.webm">
+
+
+
+

... and GIFs!

+
+
+ +
+

Background Transitions

+

+ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
+
+ +
+

Background Transitions

+

+ You can override background transitions per-slide. +

+ 
<section data-background-transition="zoom">
+
+ +
+

Pretty Code

+ 

+function linkify( selector ) {
+  if( supports3DTransforms ) {
+
+    var nodes = document.querySelectorAll( selector );
+
+    for( var i = 0, len = nodes.length; i < len; i++ ) {
+      var node = nodes[i];
+
+      if( !node.className ) {
+        node.className += ' roll';
+      }
+    }
+  }
+}
+
+

Code syntax highlighting courtesy of highlight.js.

+
+ +
+

Marvelous List

+
    +
  • No order here
    • +
  • Or here
    • +
  • Or here
    • +
  • Or here
    • +
+
+ +
+

Fantastic Ordered List

+
    +
  1. One is smaller than...
    2. +
  2. Two is smaller than...
    3. +
  3. Three!
    4. +
+
+ +
+

Tabular Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
+ +
+

Clever Quotes

+

+ These guys come in two forms, inline: + “The nice thing about standards is that there are so many to choose from” and block: +

+
+ “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.” +
+
+ +
+

Intergalactic Interconnections

+

+ You can link between slides internally, + like this. +

+
+ +
+

Speaker View

+

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

+

Press the S key to try it out.

+ + +
+ +
+

Export to PDF

+

Presentations can be exported to PDF, here's an example:

+ +
+ +
+

Global State

+

+ Set data-state="something" on a slide and "something" + 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. +

+
+ +
+

State Events

+

+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name. +

+ 

+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+
+
+ +
+

Take a Moment

+

+ 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. +

+
+ +
+

Much more

+ +
+ +
+

THE END

+

+ - Try the online editor
+ - Source code & documentation +

+
+ +
+ +
+ + + + + + + + diff --git a/index.html b/index.html index 37b65e2..d278354 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,14 @@ - - + - reveal.js – The HTML Presentation Framework + reveal.js - - - - - - - + - + @@ -28,384 +21,31 @@ link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; document.getElementsByTagName( 'head' )[0].appendChild( link ); - - - -
- -
-
-

Reveal.js

-

The HTML Presentation Framework

-

- Created by Hakim El Hattab / @hakimel -

-
- -
-

Hello There

-

- reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. -

-
- - -
-
-

Vertical Slides

-

Slides can be nested inside of each other.

-

Use the Space key to navigate through all slides.

-
- - Down arrow - -
-
-

Basement Level 1

-

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

-
-
-

Basement Level 2

-

That's it, time to go back up.

-
- - Up arrow - -
-
- -
-

Slides

-

- Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. -

-
- -
-

Point of View

-

- Press ESC to enter the slide overview. -

-

- Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. -

-
- -
-

Touch Optimized

-

- Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. -

-
- -
- -
- -
-
-

Fragments

-

Hit the next arrow...

-

... to step through ...

-

... a fragmented slide.

- - -
-
-

Fragment Styles

-

There's different types of fragments, like:

-

grow

-

shrink

-

fade-out

-

fade-up (also down, left and right!)

-

current-visible

-

Highlight red blue green

-
-
- -
-

Transition Styles

-

- You can select from different transitions, like:
- None - - Fade - - Slide - - Convex - - Concave - - Zoom -

-
- -
-

Themes

-

- reveal.js comes with a few themes built in:
- - Black (default) - - White - - League - - Sky - - Beige - - Simple
- Serif - - Blood - - Night - - Moon - - Solarized -

-
- -
-
-

Slide Backgrounds

-

- Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported. -

- - Down arrow - -
-
-

Image Backgrounds

- 
<section data-background="image.png">
-
-
-

Tiled Backgrounds

- 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
-
-
-
-

Video Backgrounds

- 
<section data-background-video="video.mp4,video.webm">
-
-
-
-

... and GIFs!

-
-
- -
-

Background Transitions

-

- Different background transitions are available via the backgroundTransition option. This one's called "zoom". -

- 
Reveal.configure({ backgroundTransition: 'zoom' })
-
- -
-

Background Transitions

-

- You can override background transitions per-slide. -

- 
<section data-background-transition="zoom">
-
- -
-

Pretty Code

- 

-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i < len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) {
-        node.className += ' roll';
-      }
-    }
-  }
-}
-
-

Code syntax highlighting courtesy of highlight.js.

-
- -
-

Marvelous List

-
    -
  • No order here
    • -
  • Or here
    • -
  • Or here
    • -
  • Or here
    • -
-
- -
-

Fantastic Ordered List

-
    -
  1. One is smaller than...
    2. -
  2. Two is smaller than...
    3. -
  3. Three!
    4. -
-
- -
-

Tabular Tables

- - - - - - - - - - - - - - - - - - - - - - - - - -
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
-
- -
-

Clever Quotes

-

- These guys come in two forms, inline: - “The nice thing about standards is that there are so many to choose from” and block: -

-
- “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.” -
-
- -
-

Intergalactic Interconnections

-

- You can link between slides internally, - like this. -

-
- -
-

Speaker View

-

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

-

Press the S key to try it out.

- - -
- -
-

Export to PDF

-

Presentations can be exported to PDF, here's an example:

- -
- -
-

Global State

-

- Set data-state="something" on a slide and "something" - 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. -

-
- -
-

State Events

-

- Additionally custom events can be triggered on a per slide basis by binding to the data-state name. -

- 

-Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-
-
- -
-

Take a Moment

-

- 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. -

-
- -
-

Much more

- -
- -
-

THE END

-

- - Try the online editor
- - Source code & documentation -

-
- +
Slide 1
+
Slide 2
-
- diff --git a/lab.html b/lab.html new file mode 100644 index 0000000..0e1ae6b --- /dev/null +++ b/lab.html @@ -0,0 +1,526 @@ + + + + + + + reveal.js – The HTML Presentation Framework + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Reveal.js

+

The HTML Presentation Framework

+ +
+ +
+

Hello There

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+
+ + +
+
+

Vertical Slides

+

Slides can be nested inside of each other.

+

Use the Space key to navigate through all slides.

+
+ + Down arrow + +
+
+

Basement Level 1

+

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

+
+
+

Basement Level 2

+

That's it, time to go back up.

+
+ + Up arrow + +
+
+ +
+

Slides

+

+ Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at http://slides.com. +

+
+ +
+

Point of View

+

+ Press ESC to enter the slide overview. +

+

+ Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. +

+
+ +
+

Touch Optimized

+

+ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +

+
+ +
+ +
+ +
+
+

Fragments

+

Hit the next arrow...

+

... to step through ...

+

... a fragmented slide.

+ + +
+
+

Fragment Styles

+

There's different types of fragments, like:

+

grow

+

shrink

+

fade-out

+

fade-up (also down, left and right!)

+

current-visible

+

Highlight red blue green

+
+
+ +
+

Transition Styles

+

+ You can select from different transitions, like:
+ None - + Fade - + Slide - + Convex - + Concave - + Zoom +

+
+ +
+

Themes

+

+ reveal.js comes with a few themes built in:
+ + Black (default) - + White - + League - + Sky - + Beige - + Simple
+ Serif - + Blood - + Night - + Moon - + Solarized +

+
+ +
+
+

Slide Backgrounds

+

+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported. +

+ + Down arrow + +
+
+

Image Backgrounds

+ 
<section data-background="image.png">
+
+
+

Tiled Backgrounds

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+
+

Video Backgrounds

+ 
<section data-background-video="video.mp4,video.webm">
+
+
+
+

... and GIFs!

+
+
+ +
+

Background Transitions

+

+ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
+
+ +
+

Background Transitions

+

+ You can override background transitions per-slide. +

+ 
<section data-background-transition="zoom">
+
+ +
+

Pretty Code

+ 

+function linkify( selector ) {
+  if( supports3DTransforms ) {
+
+    var nodes = document.querySelectorAll( selector );
+
+    for( var i = 0, len = nodes.length; i < len; i++ ) {
+      var node = nodes[i];
+
+      if( !node.className ) {
+        node.className += ' roll';
+      }
+    }
+  }
+}
+
+

Code syntax highlighting courtesy of highlight.js.

+
+ +
+

Marvelous List

+
    +
  • No order here
    • +
  • Or here
    • +
  • Or here
    • +
  • Or here
    • +
+
+ +
+

Fantastic Ordered List

+
    +
  1. One is smaller than...
    2. +
  2. Two is smaller than...
    3. +
  3. Three!
    4. +
+
+ +
+

Tabular Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
+ +
+

Clever Quotes

+

+ These guys come in two forms, inline: + “The nice thing about standards is that there are so many to choose from” and block: +

+
+ “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.” +
+
+ +
+

Intergalactic Interconnections

+

+ You can link between slides internally, + like this. +

+
+ +
+

Speaker View

+

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

+

Press the S key to try it out.

+ + +
+ +
+

Export to PDF

+

Presentations can be exported to PDF, here's an example:

+ +
+ +
+

Global State

+

+ Set data-state="something" on a slide and "something" + 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. +

+
+ +
+

State Events

+

+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name. +

+ 

+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+
+
+ +
+

Take a Moment

+

+ 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. +

+
+ +
+

Much more

+ +
+ +
+

THE END

+

+ - Try the online editor
+ - Source code & documentation +

+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + +