index.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <title>reveal.js</title>
  7. <link rel="stylesheet" href="css/reset.css">
  8. <link rel="stylesheet" href="css/reveal.css">
  9. <link rel="stylesheet" href="css/theme/black.css">
  10. <!-- Theme used for syntax highlighting of code -->
  11. <link rel="stylesheet" href="lib/css/monokai.css">
  12. <!-- font awesome -->
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  14. <!-- Printing and PDF exports -->
  15. <script>
  16. var link = document.createElement( 'link' );
  17. link.rel = 'stylesheet';
  18. link.type = 'text/css';
  19. link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
  20. document.getElementsByTagName( 'head' )[0].appendChild( link );
  21. </script>
  22. </head>
  23. <body>
  24. <div class="reveal">
  25. <div class="slides">
  26. <section>Slide 1</section>
  27. <section>Slide 2</section>
  28. <section>Slide 3</section>
  29. </div>
  30. </div>
  31. <script src="js/reveal.js"></script>
  32. <script>
  33. // More info about config & dependencies:
  34. // - https://github.com/hakimel/reveal.js#configuration
  35. // - https://github.com/hakimel/reveal.js#dependencies
  36. Reveal.initialize({
  37. chalkboard: {
  38. // optionally load pre-recorded chalkboard drawing from file
  39. src: "chalkboard.json",
  40. },
  41. menu: {
  42. // Specifies which side of the presentation the menu will
  43. // be shown. Use 'left' or 'right'.
  44. side: 'left',
  45. // Specifies the width of the menu.
  46. // Can be one of the following:
  47. // 'normal', 'wide', 'third', 'half', 'full', or
  48. // any valid css length value
  49. width: 'normal',
  50. // Add slide numbers to the titles in the slide list.
  51. // Use 'true' or format string (same as reveal.js slide numbers)
  52. numbers: false,
  53. // Specifies which slide elements will be used for generating
  54. // the slide titles in the menu. The default selects the first
  55. // heading element found in the slide, but you can specify any
  56. // valid css selector and the text from the first matching
  57. // element will be used.
  58. // Note: that a section data-menu-title attribute or an element
  59. // with a menu-title class will take precedence over this option
  60. titleSelector: 'h1, h2, h3, h4, h5, h6',
  61. // If slides do not have a matching title, attempt to use the
  62. // start of the text content as the title instead
  63. useTextContentForMissingTitles: false,
  64. // Hide slides from the menu that do not have a title.
  65. // Set to 'true' to only list slides with titles.
  66. hideMissingTitles: false,
  67. // Adds markers to the slide titles to indicate the
  68. // progress through the presentation. Set to 'false'
  69. // to hide the markers.
  70. markers: true,
  71. // Specify custom panels to be included in the menu, by
  72. // providing an array of objects with 'title', 'icon'
  73. // properties, and either a 'src' or 'content' property.
  74. custom: false,
  75. // Specifies the themes that will be available in the themes
  76. // menu panel. Set to 'true' to show the themes menu panel
  77. // with the default themes list. Alternatively, provide an
  78. // array to specify the themes to make available in the
  79. // themes menu panel, for example...
  80. // [
  81. // { name: 'Black', theme: 'css/theme/black.css' },
  82. // { name: 'White', theme: 'css/theme/white.css' },
  83. // { name: 'League', theme: 'css/theme/league.css' }
  84. // ]
  85. themes: true,
  86. // Specifies the path to the default theme files. If your
  87. // presentation uses a different path to the standard reveal
  88. // layout then you need to provide this option, but only
  89. // when 'themes' is set to 'true'. If you provide your own
  90. // list of themes or 'themes' is set to 'false' the
  91. // 'themesPath' option is ignored.
  92. themesPath: 'css/theme/',
  93. // Specifies if the transitions menu panel will be shown.
  94. // Set to 'true' to show the transitions menu panel with
  95. // the default transitions list. Alternatively, provide an
  96. // array to specify the transitions to make available in
  97. // the transitions panel, for example...
  98. // ['None', 'Fade', 'Slide']
  99. transitions: true,
  100. // Adds a menu button to the slides to open the menu panel.
  101. // Set to 'false' to hide the button.
  102. openButton: true,
  103. // If 'true' allows the slide number in the presentation to
  104. // open the menu panel. The reveal.js slideNumber option must
  105. // be displayed for this to take effect
  106. openSlideNumber: false,
  107. // If true allows the user to open and navigate the menu using
  108. // the keyboard. Standard keyboard interaction with reveal
  109. // will be disabled while the menu is open.
  110. keyboard: true,
  111. // Normally the menu will close on user actions such as
  112. // selecting a menu item, or clicking the presentation area.
  113. // If 'true', the sticky option will leave the menu open
  114. // until it is explicitly closed, that is, using the close
  115. // button or pressing the ESC or m key (when the keyboard
  116. // interaction option is enabled).
  117. sticky: false,
  118. // If 'true' standard menu items will be automatically opened
  119. // when navigating using the keyboard. Note: this only takes
  120. // effect when both the 'keyboard' and 'sticky' options are enabled.
  121. autoOpen: true,
  122. // If 'true' the menu will not be created until it is explicitly
  123. // requested by calling RevealMenu.init(). Note this will delay
  124. // the creation of all menu panels, including custom panels, and
  125. // the menu button.
  126. delayInit: false,
  127. // If 'true' the menu will be shown when the menu is initialised.
  128. openOnInit: false,
  129. // By default the menu will load it's own font-awesome library
  130. // icons. If your presentation needs to load a different
  131. // font-awesome library the 'loadIcons' option can be set to false
  132. // and the menu will not attempt to load the font-awesome library.
  133. loadIcons: true,
  134. custom: [
  135. { title: 'Links', icon: '<i class="fa fa-external-link">', src: 'links.html' },
  136. { title: 'About', icon: '<i class="fa fa-info">', content: '<p>This slidedeck is created with reveal.js</p>' }
  137. ]
  138. },
  139. hash: true,
  140. dependencies: [
  141. { src: 'plugin/markdown/marked.js' },
  142. { src: 'plugin/markdown/markdown.js' },
  143. { src: 'plugin/highlight/highlight.js' },
  144. { src: 'plugin/notes/notes.js', async: true },
  145. // Whiteboard
  146. { src: 'reveal.js-plugins/chalkboard/chalkboard.js' },
  147. { src: 'node_modules/reveal.js-menu/menu.js' },
  148. ],
  149. keyboard: {
  150. // whiteboard
  151. 67: function() { RevealChalkboard.toggleNotesCanvas() }, // toggle notes canvas when 'c' is pressed
  152. 66: function() { RevealChalkboard.toggleChalkboard() }, // toggle chalkboard when 'b' is pressed
  153. 46: function() { RevealChalkboard.clear() }, // clear chalkboard when 'DEL' is pressed
  154. 8: function() { RevealChalkboard.reset() }, // reset chalkboard data on current slide when 'BACKSPACE' is pressed
  155. 68: function() { RevealChalkboard.download() }, // downlad recorded chalkboard drawing when 'd' is pressed
  156. 88: function() { RevealChalkboard.colorNext() }, // cycle colors forward when 'x' is pressed
  157. 89: function() { RevealChalkboard.colorPrev() }, // cycle colors backward when 'y' is pressed
  158. // audio
  159. 82: function() { Recorder.toggleRecording(); }, // press 'r' to start/stop recording
  160. 90: function() { Recorder.downloadZip(); }, // press 'z' to download zip containing audio files
  161. 84: function() { Recorder.fetchTTS(); }, // press 't' to fetch TTS audio files
  162. },
  163. });
  164. </script>
  165. </body>
  166. </html>