123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>reveal.js</title>
- <link rel="stylesheet" href="css/reset.css">
- <link rel="stylesheet" href="css/reveal.css">
- <link rel="stylesheet" href="css/theme/black.css">
- <!-- Theme used for syntax highlighting of code -->
- <link rel="stylesheet" href="lib/css/monokai.css">
- <!-- Printing and PDF exports -->
- <script>
- var link = document.createElement( 'link' );
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
- document.getElementsByTagName( 'head' )[0].appendChild( link );
- </script>
- </head>
- <body>
- <div class="reveal">
- <div class="slides">
- <section>Slide 1</section>
- <section>Slide 2</section>
- <section>Slide 3</section>
- </div>
- </div>
- <script src="js/reveal.js"></script>
- <script>
- // More info about config & dependencies:
- // - https://github.com/hakimel/reveal.js#configuration
- // - https://github.com/hakimel/reveal.js#dependencies
- Reveal.initialize({
- chalkboard: {
- // optionally load pre-recorded chalkboard drawing from file
- src: "chalkboard.json",
- },
- menu: {
- // Specifies which side of the presentation the menu will
- // be shown. Use 'left' or 'right'.
- side: 'left',
- // Specifies the width of the menu.
- // Can be one of the following:
- // 'normal', 'wide', 'third', 'half', 'full', or
- // any valid css length value
- width: 'normal',
- // Add slide numbers to the titles in the slide list.
- // Use 'true' or format string (same as reveal.js slide numbers)
- numbers: false,
- // Specifies which slide elements will be used for generating
- // the slide titles in the menu. The default selects the first
- // heading element found in the slide, but you can specify any
- // valid css selector and the text from the first matching
- // element will be used.
- // Note: that a section data-menu-title attribute or an element
- // with a menu-title class will take precedence over this option
- titleSelector: 'h1, h2, h3, h4, h5, h6',
- // If slides do not have a matching title, attempt to use the
- // start of the text content as the title instead
- useTextContentForMissingTitles: false,
- // Hide slides from the menu that do not have a title.
- // Set to 'true' to only list slides with titles.
- hideMissingTitles: false,
- // Adds markers to the slide titles to indicate the
- // progress through the presentation. Set to 'false'
- // to hide the markers.
- markers: true,
- // Specify custom panels to be included in the menu, by
- // providing an array of objects with 'title', 'icon'
- // properties, and either a 'src' or 'content' property.
- custom: false,
- // Specifies the themes that will be available in the themes
- // menu panel. Set to 'true' to show the themes menu panel
- // with the default themes list. Alternatively, provide an
- // array to specify the themes to make available in the
- // themes menu panel, for example...
- // [
- // { name: 'Black', theme: 'css/theme/black.css' },
- // { name: 'White', theme: 'css/theme/white.css' },
- // { name: 'League', theme: 'css/theme/league.css' }
- // ]
- themes: true,
- // Specifies the path to the default theme files. If your
- // presentation uses a different path to the standard reveal
- // layout then you need to provide this option, but only
- // when 'themes' is set to 'true'. If you provide your own
- // list of themes or 'themes' is set to 'false' the
- // 'themesPath' option is ignored.
- themesPath: 'css/theme/',
- // Specifies if the transitions menu panel will be shown.
- // Set to 'true' to show the transitions menu panel with
- // the default transitions list. Alternatively, provide an
- // array to specify the transitions to make available in
- // the transitions panel, for example...
- // ['None', 'Fade', 'Slide']
- transitions: true,
- // Adds a menu button to the slides to open the menu panel.
- // Set to 'false' to hide the button.
- openButton: true,
-
- // If 'true' allows the slide number in the presentation to
- // open the menu panel. The reveal.js slideNumber option must
- // be displayed for this to take effect
- openSlideNumber: false,
-
- // If true allows the user to open and navigate the menu using
- // the keyboard. Standard keyboard interaction with reveal
- // will be disabled while the menu is open.
- keyboard: true,
-
- // Normally the menu will close on user actions such as
- // selecting a menu item, or clicking the presentation area.
- // If 'true', the sticky option will leave the menu open
- // until it is explicitly closed, that is, using the close
- // button or pressing the ESC or m key (when the keyboard
- // interaction option is enabled).
- sticky: false,
-
- // If 'true' standard menu items will be automatically opened
- // when navigating using the keyboard. Note: this only takes
- // effect when both the 'keyboard' and 'sticky' options are enabled.
- autoOpen: true,
-
- // If 'true' the menu will not be created until it is explicitly
- // requested by calling RevealMenu.init(). Note this will delay
- // the creation of all menu panels, including custom panels, and
- // the menu button.
- delayInit: false,
-
- // If 'true' the menu will be shown when the menu is initialised.
- openOnInit: false,
-
- // By default the menu will load it's own font-awesome library
- // icons. If your presentation needs to load a different
- // font-awesome library the 'loadIcons' option can be set to false
- // and the menu will not attempt to load the font-awesome library.
- loadIcons: true,
-
- custom: [
- { title: 'Links', icon: '<i class="fa fa-external-link">', src: 'links.html' },
- { title: 'About', icon: '<i class="fa fa-info">', content: '<p>This slidedeck is created with reveal.js</p>' }
- ]
- },
- hash: true,
- dependencies: [
- { src: 'plugin/markdown/marked.js' },
- { src: 'plugin/markdown/markdown.js' },
- { src: 'plugin/highlight/highlight.js' },
- { src: 'plugin/notes/notes.js', async: true },
- // Whiteboard
- { src: 'reveal.js-plugins/chalkboard/chalkboard.js' },
- { src: 'node_modules/reveal.js-menu/menu.js' },
- ],
- keyboard: {
- // whiteboard
- 67: function() { RevealChalkboard.toggleNotesCanvas() }, // toggle notes canvas when 'c' is pressed
- 66: function() { RevealChalkboard.toggleChalkboard() }, // toggle chalkboard when 'b' is pressed
- 46: function() { RevealChalkboard.clear() }, // clear chalkboard when 'DEL' is pressed
- 8: function() { RevealChalkboard.reset() }, // reset chalkboard data on current slide when 'BACKSPACE' is pressed
- 68: function() { RevealChalkboard.download() }, // downlad recorded chalkboard drawing when 'd' is pressed
- 88: function() { RevealChalkboard.colorNext() }, // cycle colors forward when 'x' is pressed
- 89: function() { RevealChalkboard.colorPrev() }, // cycle colors backward when 'y' is pressed
- // audio
- 82: function() { Recorder.toggleRecording(); }, // press 'r' to start/stop recording
- 90: function() { Recorder.downloadZip(); }, // press 'z' to download zip containing audio files
- 84: function() { Recorder.fetchTTS(); }, // press 't' to fetch TTS audio files
- },
- });
- </script>
- </body>
- </html>
|