index.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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. boardmarkerWidth: 3,
  42. chalkWidth: 7,
  43. chalkEffect: 1.0,
  44. // src: null,
  45. readOnly: undefined,
  46. toggleChalkboardButton: { left: "90px", bottom: "30px", top: "auto", right: "auto" },
  47. toggleNotesButton: { left: "60px", bottom: "30px", top: "auto", right: "auto" },
  48. transition: 800,
  49. theme: "chalkboard",
  50. // background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
  51. grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
  52. // eraser: { src: path + 'img/sponge.png', radius: 20},
  53. /* boardmarkers : [
  54. { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
  55. { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
  56. { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
  57. { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
  58. { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
  59. { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
  60. { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
  61. ],
  62. chalks: [
  63. { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
  64. { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
  65. { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
  66. { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
  67. { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
  68. { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
  69. { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
  70. ]
  71. */ },
  72. menu: {
  73. // Specifies which side of the presentation the menu will
  74. // be shown. Use 'left' or 'right'.
  75. side: 'left',
  76. // Specifies the width of the menu.
  77. // Can be one of the following:
  78. // 'normal', 'wide', 'third', 'half', 'full', or
  79. // any valid css length value
  80. width: 'normal',
  81. // Add slide numbers to the titles in the slide list.
  82. // Use 'true' or format string (same as reveal.js slide numbers)
  83. numbers: false,
  84. // Specifies which slide elements will be used for generating
  85. // the slide titles in the menu. The default selects the first
  86. // heading element found in the slide, but you can specify any
  87. // valid css selector and the text from the first matching
  88. // element will be used.
  89. // Note: that a section data-menu-title attribute or an element
  90. // with a menu-title class will take precedence over this option
  91. titleSelector: 'h1, h2, h3, h4, h5, h6',
  92. // If slides do not have a matching title, attempt to use the
  93. // start of the text content as the title instead
  94. useTextContentForMissingTitles: false,
  95. // Hide slides from the menu that do not have a title.
  96. // Set to 'true' to only list slides with titles.
  97. hideMissingTitles: false,
  98. // Adds markers to the slide titles to indicate the
  99. // progress through the presentation. Set to 'false'
  100. // to hide the markers.
  101. markers: true,
  102. // Specify custom panels to be included in the menu, by
  103. // providing an array of objects with 'title', 'icon'
  104. // properties, and either a 'src' or 'content' property.
  105. custom: false,
  106. // Specifies the themes that will be available in the themes
  107. // menu panel. Set to 'true' to show the themes menu panel
  108. // with the default themes list. Alternatively, provide an
  109. // array to specify the themes to make available in the
  110. // themes menu panel, for example...
  111. // [
  112. // { name: 'Black', theme: 'css/theme/black.css' },
  113. // { name: 'White', theme: 'css/theme/white.css' },
  114. // { name: 'League', theme: 'css/theme/league.css' }
  115. // ]
  116. themes: true,
  117. // Specifies the path to the default theme files. If your
  118. // presentation uses a different path to the standard reveal
  119. // layout then you need to provide this option, but only
  120. // when 'themes' is set to 'true'. If you provide your own
  121. // list of themes or 'themes' is set to 'false' the
  122. // 'themesPath' option is ignored.
  123. themesPath: 'css/theme/',
  124. // Specifies if the transitions menu panel will be shown.
  125. // Set to 'true' to show the transitions menu panel with
  126. // the default transitions list. Alternatively, provide an
  127. // array to specify the transitions to make available in
  128. // the transitions panel, for example...
  129. // ['None', 'Fade', 'Slide']
  130. transitions: true,
  131. // Adds a menu button to the slides to open the menu panel.
  132. // Set to 'false' to hide the button.
  133. openButton: true,
  134. // If 'true' allows the slide number in the presentation to
  135. // open the menu panel. The reveal.js slideNumber option must
  136. // be displayed for this to take effect
  137. openSlideNumber: false,
  138. // If true allows the user to open and navigate the menu using
  139. // the keyboard. Standard keyboard interaction with reveal
  140. // will be disabled while the menu is open.
  141. keyboard: true,
  142. // Normally the menu will close on user actions such as
  143. // selecting a menu item, or clicking the presentation area.
  144. // If 'true', the sticky option will leave the menu open
  145. // until it is explicitly closed, that is, using the close
  146. // button or pressing the ESC or m key (when the keyboard
  147. // interaction option is enabled).
  148. sticky: false,
  149. // If 'true' standard menu items will be automatically opened
  150. // when navigating using the keyboard. Note: this only takes
  151. // effect when both the 'keyboard' and 'sticky' options are enabled.
  152. autoOpen: true,
  153. // If 'true' the menu will not be created until it is explicitly
  154. // requested by calling RevealMenu.init(). Note this will delay
  155. // the creation of all menu panels, including custom panels, and
  156. // the menu button.
  157. delayInit: false,
  158. // If 'true' the menu will be shown when the menu is initialised.
  159. openOnInit: false,
  160. // By default the menu will load it's own font-awesome library
  161. // icons. If your presentation needs to load a different
  162. // font-awesome library the 'loadIcons' option can be set to false
  163. // and the menu will not attempt to load the font-awesome library.
  164. loadIcons: true,
  165. custom: [
  166. { title: 'Links', icon: '<i class="fa fa-external-link">', src: 'links.html' },
  167. { title: 'About', icon: '<i class="fa fa-info">', content: '<p>This slidedeck is created with reveal.js</p>' }
  168. ]
  169. },
  170. hash: true,
  171. dependencies: [
  172. { src: 'plugin/markdown/marked.js' },
  173. { src: 'plugin/markdown/markdown.js' },
  174. { src: 'plugin/highlight/highlight.js' },
  175. { src: 'plugin/notes/notes.js', async: true },
  176. // Whiteboard
  177. { src: 'reveal.js-plugins/chalkboard/chalkboard.js' },
  178. { src: 'node_modules/reveal.js-menu/menu.js' },
  179. ],
  180. keyboard: {
  181. // whiteboard
  182. 67: function() { RevealChalkboard.toggleNotesCanvas() }, // toggle notes canvas when 'c' is pressed
  183. 66: function() { RevealChalkboard.toggleChalkboard() }, // toggle chalkboard when 'b' is pressed
  184. 46: function() { RevealChalkboard.clear() }, // clear chalkboard when 'DEL' is pressed
  185. 8: function() { RevealChalkboard.reset() }, // reset chalkboard data on current slide when 'BACKSPACE' is pressed
  186. 68: function() { RevealChalkboard.download() }, // downlad recorded chalkboard drawing when 'd' is pressed
  187. 88: function() { RevealChalkboard.colorNext() }, // cycle colors forward when 'x' is pressed
  188. 89: function() { RevealChalkboard.colorPrev() }, // cycle colors backward when 'y' is pressed
  189. // audio
  190. 82: function() { Recorder.toggleRecording(); }, // press 'r' to start/stop recording
  191. 90: function() { Recorder.downloadZip(); }, // press 'z' to download zip containing audio files
  192. 84: function() { Recorder.fetchTTS(); }, // press 't' to fetch TTS audio files
  193. },
  194. });
  195. </script>
  196. </body>
  197. </html>