docs/com/pres/index.template.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>OPNFV presentation</title>
   8
   9                 <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  10                 <meta name="author" content="Hakim El Hattab">
  11
  12                 <meta name="apple-mobile-web-app-capable" content="yes" />
  13                 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  14
  15                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  16
  17                 <link rel="stylesheet" href="css/reveal.css">
  18                 <link rel="stylesheet" href="css/theme/OPNFV.css" id="theme">
  19
  20                 <!-- Code syntax highlighting -->
  21                 <link rel="stylesheet" href="lib/css/zenburn.css">
  22
  23                 <!-- Printing and PDF exports -->
  24                 <script>
  25                         var link = document.createElement( 'link' );
  26                         link.rel = 'stylesheet';
  27                         link.type = 'text/css';
  28                         link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
  29                         document.getElementsByTagName( 'head' )[0].appendChild( link );
  30                 </script>
  31
  32                 <!--[if lt IE 9]>
  33                 <script src="lib/js/html5shiv.js"></script>
  34                 <![endif]-->
  35         </head>
  36
  37         <body>
  38
  39                 <div class="reveal">
  40                         <!-- Any section element inside of this container is displayed as a slide -->
  41                         <div class="slides">
  42
  43                                 <section data-background="../img/title-bg.png" data-background-transition="none">
  44                      <br>
  45                      <h1>Project </h1>
  46                      <h3>subtitle</h3>
  47                      <br><br><br>
  48                                          <h5>John Doe</h5>
  49                                          <br />
  50                                          <h5>whenever you want</h5>
  51                                          <br>
  52
  53                                 </section>
  54
  55                                 <section>
  56                                         <blockquote>
  57                                                 &ldquo;Good job. Chris Price - &rdquo;
  58                                         </blockquote>
  59                                 </section>
  60
  61                                 <section id="fragments">
  62                                         <h1>item</h1>
  63                                         <ul>
  64                                                 <li class="fragment">another one</li>
  65                                                 <li class="fragment">one more time</li>
  66                                         </ul>
  67                                 </section>
  68
  69
  70
  71                                 <section>
  72                                         <section data-markdown>
  73                                                 # Cool in markdow
  74                                                 ## really cool
  75                                                 - yep
  76                                         </section>
  77                                         <section>
  78                                                 <p>OPNFV</p>
  79                                                 <img width="400"  data-src="https://www.opnfv.org/sites/all/themes/opnfv/logo.png" alt="OPNFV">
  80                                         </section>
  81                                         <section data-markdown>
  82                                                 # Markdown
  83                                                 ![OPNFV](https://www.opnfv.org/sites/all/themes/opnfv/logo.png "OPNFV")
  84                                         </section>
  85                                 </section>
  86
  87
  88                                 <section style="text-align: left;">
  89                                         <h1>THE END</h1>
  90                                         <p>
  91                                                 - <a href="http://slides.com">Try the online editor</a> <br>
  92                                                 - <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
  93                                         </p>
  94                                 </section>
  95
  96                                         <section>
  97                                         <h2>Slides</h2>
  98                                         <p>
  99                                                 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
 100                                         </p>
 101                                 </section>
 102
 103                                 <section>
 104                                         <h2>Point of View</h2>
 105                                         <p>
 106                                                 Press <strong>ESC</strong> to enter the slide overview.
 107                                         </p>
 108                                         <p>
 109                                                 Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
 110                                         </p>
 111                                 </section>
 112
 113                                 <section>
 114                                         <h2>Touch Optimized</h2>
 115                                         <p>
 116                                                 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
 117                                         </p>
 118                                 </section>
 119
 120                                 <section id="transitions">
 121                                         <h2>Transition Styles</h2>
 122                                         <p>
 123                                                 You can select from different transitions, like: <br>
 124                                                 <a href="?transition=none#/transitions">None</a> -
 125                                                 <a href="?transition=fade#/transitions">Fade</a> -
 126                                                 <a href="?transition=slide#/transitions">Slide</a> -
 127                                                 <a href="?transition=convex#/transitions">Convex</a> -
 128                                                 <a href="?transition=concave#/transitions">Concave</a> -
 129                                                 <a href="?transition=zoom#/transitions">Zoom</a>
 130                                         </p>
 131                                 </section>
 132
 133                                 <section id="themes">
 134                                         <h2>Themes</h2>
 135                                         <p>
 136                                                 reveal.js comes with a few themes built in: <br>
 137                                                 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
 138                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
 139                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
 140                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
 141                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
 142                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
 143                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
 144                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
 145                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
 146                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
 147                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
 148                                                 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
 149                                         </p>
 150                                 </section>
 151
 152                                 <section>
 153                                         <section data-background="#dddddd">
 154                                                 <h2>Slide Backgrounds</h2>
 155                                                 <p>
 156                                                         Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
 157                                                 </p>
 158                                                 <a href="#" class="navigate-down">
 159                                                         <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 160                                                 </a>
 161                                         </section>
 162                                         <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
 163                                                 <h2>Image Backgrounds</h2>
 164                                                 <pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
 165                                         </section>
 166                                         <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
 167                                                 <h2>Tiled Backgrounds</h2>
 168                                                 <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
 169                                         </section>
 170                                         <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
 171                                                 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
 172                                                         <h2>Video Backgrounds</h2>
 173                                                         <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
 174                                                 </div>
 175                                         </section>
 176                                         <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
 177                                                 <h2>... and GIFs!</h2>
 178                                         </section>
 179                                 </section>
 180
 181                                 <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
 182                                         <h2>Background Transitions</h2>
 183                                         <p>
 184                                                 Different background transitions are available via the backgroundTransition option. This one's called "zoom".
 185                                         </p>
 186                                         <pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
 187                                 </section>
 188
 189                                 <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
 190                                         <h2>Background Transitions</h2>
 191                                         <p>
 192                                                 You can override background transitions per-slide.
 193                                         </p>
 194                                         <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
 195                                 </section>
 196
 197                                 <section>
 198                                         <h2>Pretty Code</h2>
 199                                         <pre><code class="hljs" data-trim contenteditable>
 200 function linkify( selector ) {
 201   if( supports3DTransforms ) {
 202
 203     var nodes = document.querySelectorAll( selector );
 204
 205     for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
 206       var node = nodes[i];
 207
 208       if( !node.className ) {
 209         node.className += ' roll';
 210       }
 211     }
 212   }
 213 }
 214                                         </code></pre>
 215                                         <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 216                                 </section>
 217
 218                                 <section>
 219                                         <h2>Marvelous List</h2>
 220                                         <ul>
 221                                                 <li>No order here</li>
 222                                                 <li>Or here</li>
 223                                                 <li>Or here</li>
 224                                                 <li>Or here</li>
 225                                         </ul>
 226                                 </section>
 227
 228                                 <section>
 229                                         <h2>Fantastic Ordered List</h2>
 230                                         <ol>
 231                                                 <li>One is smaller than...</li>
 232                                                 <li>Two is smaller than...</li>
 233                                                 <li>Three!</li>
 234                                         </ol>
 235                                 </section>
 236
 237                                 <section>
 238                                         <h2>Tabular Tables</h2>
 239                                         <table>
 240                                                 <thead>
 241                                                         <tr>
 242                                                                 <th>Item</th>
 243                                                                 <th>Value</th>
 244                                                                 <th>Quantity</th>
 245                                                         </tr>
 246                                                 </thead>
 247                                                 <tbody>
 248                                                         <tr>
 249                                                                 <td>Apples</td>
 250                                                                 <td>$1</td>
 251                                                                 <td>7</td>
 252                                                         </tr>
 253                                                         <tr>
 254                                                                 <td>Lemonade</td>
 255                                                                 <td>$2</td>
 256                                                                 <td>18</td>
 257                                                         </tr>
 258                                                         <tr>
 259                                                                 <td>Bread</td>
 260                                                                 <td>$3</td>
 261                                                                 <td>2</td>
 262                                                         </tr>
 263                                                 </tbody>
 264                                         </table>
 265                                 </section>
 266
 267                                 <section>
 268                                         <h2>Clever Quotes</h2>
 269                                         <p>
 270                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 271                                                 &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
 272                                         </p>
 273                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 274                                                 &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 275                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
 276                                         </blockquote>
 277                                 </section>
 278
 279                                 <section>
 280                                         <h2>Intergalactic Interconnections</h2>
 281                                         <p>
 282                                                 You can link between slides internally,
 283                                                 <a href="#/2/3">like this</a>.
 284                                         </p>
 285                                 </section>
 286
 287                                 <section>
 288                                         <h2>Speaker View</h2>
 289                                         <p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
 290                                         <p>Press the <em>S</em> key to try it out.</p>
 291
 292                                         <aside class="notes">
 293                                                 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).
 294                                         </aside>
 295                                 </section>
 296
 297                                 <section>
 298                                         <h2>Export to PDF</h2>
 299                                         <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
 300                                         <iframe 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> </iframe>
 301                                 </section>
 302
 303                                 <section>
 304                                         <h2>Global State</h2>
 305                                         <p>
 306                                                 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
 307                                                 will be added as a class to the document element when the slide is open. This lets you
 308                                                 apply broader style changes, like switching the page background.
 309                                         </p>
 310                                 </section>
 311
 312                                 <section data-state="customevent">
 313                                         <h2>State Events</h2>
 314                                         <p>
 315                                                 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 316                                         </p>
 317                                         <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
 318 Reveal.addEventListener( 'customevent', function() {
 319         console.log( '"customevent" has fired' );
 320 } );
 321                                         </code></pre>
 322                                 </section>
 323
 324                                 <section>
 325                                         <h2>Take a Moment</h2>
 326                                         <p>
 327                                                 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.
 328                                         </p>
 329                                 </section>
 330
 331                                 <section>
 332                                         <h2>Much more</h2>
 333                                         <ul>
 334                                                 <li>Right-to-left support</li>
 335                                                 <li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
 336                                                 <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
 337                                                 <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
 338                                                 <li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
 339                                         </ul>
 340                                 </section>
 341
 342
 343                         </div>
 344             <div class='footer'>
 345                                  <img src="./img/logo-OPNFV.png" alt="OPNFV logo">
 346                 </div>
 347                 </div>
 348
 349                 <script src="lib/js/head.min.js"></script>
 350                 <script src="js/reveal.js"></script>
 351
 352                 <script>
 353
 354                         // Full list of configuration options available at:
 355                         // https://github.com/hakimel/reveal.js#configuration
 356                         Reveal.initialize({
 357                                 controls: true,
 358                                 progress: true,
 359                                 history: true,
 360                                 center: true,
 361
 362                                 transition: 'slide', // none/fade/slide/convex/concave/zoom
 363
 364                                 // Optional reveal.js plugins
 365                                 dependencies: [
 366                                         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 367                                         { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 368                                         { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 369                                         { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
 370                                         { src: 'plugin/zoom-js/zoom.js', async: true },
 371                                         { src: 'plugin/notes/notes.js', async: true }
 372                                 ]
 373                         });
 374
 375                 </script>
 376
 377         </body>
 378 </html>