index.html

@@ -61,6 +61,7 @@
 }
 .reveal .progress span {
   background: #ff0000;
+  opacity: 0.8;
 }
 .reveal .progress {
   height: 2rem;
@@ -790,8 +791,8 @@
 				margin: 0.05,
 
 				hash: true,
-				controls: true,
-				progress: true,
+				controls: false,
+				progress: false,
 				mouseWheel: false,
 				showNotes: false,
 				slideNumber: true,

lib/reveal-plugins/notes/notes.html

@@ -9,6 +9,7 @@
 			body {
 				font-family: Helvetica;
 				font-size: 18px;
+				background-color: black;
 			}
 
 			#current-slide,
@@ -23,7 +24,7 @@
 			#upcoming-slide iframe {
 				width: 100%;
 				height: 100%;
-				border: 1px solid #ddd;
+				border: 1px solid #272727;
 			}
 
 			#current-slide .label,
@@ -67,7 +68,7 @@
 			#current-slide {
 				position: absolute;
 				width: 60%;
-				height: 100%;
+				height: 60%;
 				top: 0;
 				left: 0;
 				padding-right: 0;
@@ -76,7 +77,7 @@
 			#upcoming-slide {
 				position: absolute;
 				width: 40%;
-				height: 40%;
+				height: 60%;
 				right: 0;
 				top: 0;
 			}
@@ -84,10 +85,11 @@
 			/* Speaker controls */
 			#speaker-controls {
 				position: absolute;
-				top: 40%;
-				right: 0;
-				width: 40%;
-				height: 60%;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+/*				height: 40%; */
+				text-align: center;
 				overflow: auto;
 				font-size: 18px;
 			}
@@ -99,6 +101,7 @@
 
 				.speaker-controls-time .label,
 				.speaker-controls-notes .label {
+					display: none;
 					text-transform: uppercase;
 					font-weight: normal;
 					font-size: 0.66em;
@@ -107,7 +110,7 @@
 				}
 
 				.speaker-controls-time {
-					border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
+					/* border-bottom: 1px solid rgba( 200, 200, 200, 0.5 ); */
 					margin-bottom: 10px;
 					padding: 10px 16px;
 					padding-bottom: 20px;
@@ -116,7 +119,7 @@
 
 				.speaker-controls-time .reset-button {
 					opacity: 0;
-					float: right;
+					/* float: right; */
 					color: #666;
 					text-decoration: none;
 				}
@@ -126,17 +129,22 @@
 
 				.speaker-controls-time .timer,
 				.speaker-controls-time .clock {
-					width: 50%;
-					font-size: 1.9em;
+					width: 100%;
+					font-size: 3em;
+					display: inline;
 				}
 
 				.speaker-controls-time .timer {
-					float: left;
+					/*  float: left;  */
+					text-align: center;
+					color: white;
+					display: inline;
 				}
 
 				.speaker-controls-time .clock {
-					float: right;
-					text-align: right;
+					/* float: right;*/
+					text-align: center;
+					color: #ccc;
 				}
 
 				.speaker-controls-time span.mute {
@@ -145,6 +153,7 @@
 
 				.speaker-controls-notes {
 					padding: 10px 16px;
+					display: none;
 				}
 
 				.speaker-controls-notes .value {
@@ -259,7 +268,7 @@
 
 			@media screen and (max-width: 1080px) {
 				body[data-speaker-layout="default"] #speaker-controls {
-					font-size: 16px;
+					font-size: 36px;
 				}
 			}
 
@@ -385,7 +394,6 @@
 						setupIframes( data );
 						setupKeyboard();
 						setupNotes();
-						setupTimer();
 					}
 
 				}
@@ -424,6 +432,9 @@
 				// Limit to max one state update per X ms
 				handleStateMessage = debounce( handleStateMessage, 200 );
 
+				// Start counter on first key press.
+				var presentationStarted = false
+
 				/**
 				 * Forward keyboard events to the current slide window.
 				 * This enables keyboard events to work even if focus
@@ -432,6 +443,12 @@
 				function setupKeyboard() {
 
 					document.addEventListener( 'keydown', function( event ) {
+
+						if (!presentationStarted) {
+							presentationStarted = true
+							setupTimer();
+						}
+
 						currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
 					} );
 

start

+web-server --port 999