From bb522c6efd9a02e611014038566b15feb28da0c8 Mon Sep 17 00:00:00 2001 From: Morgan Richomme Date: Mon, 23 May 2016 14:40:54 +0200 Subject: Add framework for presentations Change-Id: I8ba24fb4b2a3a6c8d8c69f15a1fd9259aea4ab6c Signed-off-by: Morgan Richomme --- docs/com/pres/index.template.html | 378 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 378 insertions(+) create mode 100755 docs/com/pres/index.template.html (limited to 'docs/com/pres/index.template.html') diff --git a/docs/com/pres/index.template.html b/docs/com/pres/index.template.html new file mode 100755 index 000000000..f9dd5a2d7 --- /dev/null +++ b/docs/com/pres/index.template.html @@ -0,0 +1,378 @@ + + + + + + + OPNFV presentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+

Project

+

subtitle

+


+
John Doe
+
+
whenever you want
+
+ +
+ +
+
+ “Good job. Chris Price - ” +
+
+ +
+

item

+
    +
  • another one
    • +
  • one more time
    • +
+
+ + + +
+
+ # Cool in markdow + ## really cool + - yep +
+
+

OPNFV

+ OPNFV +
+
+ # Markdown + ![OPNFV](https://www.opnfv.org/sites/all/themes/opnfv/logo.png "OPNFV") +
+
+ + +
+

THE END

+

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

+
+ +
+

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

+
+ +
+

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

+ +
+ + +
+
+ OPNFV logo +
+
+ + + + + + + + -- cgit 1.2.3-korg