index.html 7.6 KB

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