diff --git a/Janus-demo.html b/Janus-demo.html
new file mode 100644
index 0000000..244773d
--- /dev/null
+++ b/Janus-demo.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Janus Presentation Framework</title>
+    <link rel="stylesheet" href="styles/main.css" charset="utf-8">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>Presentation Title</h1>
+        <ul>
+          <li janus-timeline>Point one</li>
+          <li janus-timeline>Point two</li>
+          <li janus-timeline>Point three!</li>
+        </ul>
+      </section>
+      <section>
+        <img class="cover" src="https://placekitten.com/1024/768" alt="" />
+        <h1>Slide Two</h1>
+      </section>
+      <section>
+        <h1>Slide Three</h1>
+      </section>
+    </main>
+    <script type="text/javascript">/**
+ * http://www.openjs.com/scripts/events/keyboard_shortcuts/
+ * Version : 2.01.B
+ * By Binny V A
+ * License : BSD
+ */
+shortcut = {
+	'all_shortcuts':{},//All the shortcuts are stored in this array
+	'add': function(shortcut_combination,callback,opt) {
+		//Provide a set of default options
+		var default_options = {
+			'type':'keydown',
+			'propagate':false,
+			'disable_in_input':false,
+			'target':document,
+			'keycode':false
+		}
+		if(!opt) opt = default_options;
+		else {
+			for(var dfo in default_options) {
+				if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
+			}
+		}
+
+		var ele = opt.target;
+		if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
+		var ths = this;
+		shortcut_combination = shortcut_combination.toLowerCase();
+
+		//The function to be called at keypress
+		var func = function(e) {
+			e = e || window.event;
+
+			if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
+				var element;
+				if(e.target) element=e.target;
+				else if(e.srcElement) element=e.srcElement;
+				if(element.nodeType==3) element=element.parentNode;
+
+				if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
+			}
+
+			//Find Which key is pressed
+			if (e.keyCode) code = e.keyCode;
+			else if (e.which) code = e.which;
+			var character = String.fromCharCode(code).toLowerCase();
+
+			if(code == 188) character=","; //If the user presses , when the type is onkeydown
+			if(code == 190) character="."; //If the user presses , when the type is onkeydown
+
+			var keys = shortcut_combination.split("+");
+			//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
+			var kp = 0;
+
+			//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
+			var shift_nums = {
+				"`":"~",
+				"1":"!",
+				"2":"@",
+				"3":"#",
+				"4":"$",
+				"5":"%",
+				"6":"^",
+				"7":"&",
+				"8":"*",
+				"9":"(",
+				"0":")",
+				"-":"_",
+				"=":"+",
+				";":":",
+				"'":"\"",
+				",":"<",
+				".":">",
+				"/":"?",
+				"\\":"|"
+			}
+			//Special Keys - and their codes
+			var special_keys = {
+				'esc':27,
+				'escape':27,
+				'tab':9,
+				'space':32,
+				'return':13,
+				'enter':13,
+				'backspace':8,
+
+				'scrolllock':145,
+				'scroll_lock':145,
+				'scroll':145,
+				'capslock':20,
+				'caps_lock':20,
+				'caps':20,
+				'numlock':144,
+				'num_lock':144,
+				'num':144,
+
+				'pause':19,
+				'break':19,
+
+				'insert':45,
+				'home':36,
+				'delete':46,
+				'end':35,
+
+				'pageup':33,
+				'page_up':33,
+				'pu':33,
+
+				'pagedown':34,
+				'page_down':34,
+				'pd':34,
+
+				'left':37,
+				'up':38,
+				'right':39,
+				'down':40,
+
+				'f1':112,
+				'f2':113,
+				'f3':114,
+				'f4':115,
+				'f5':116,
+				'f6':117,
+				'f7':118,
+				'f8':119,
+				'f9':120,
+				'f10':121,
+				'f11':122,
+				'f12':123
+			}
+
+			var modifiers = {
+				shift: { wanted:false, pressed:false},
+				ctrl : { wanted:false, pressed:false},
+				alt  : { wanted:false, pressed:false},
+				meta : { wanted:false, pressed:false}	//Meta is Mac specific
+			};
+
+			if(e.ctrlKey)	modifiers.ctrl.pressed = true;
+			if(e.shiftKey)	modifiers.shift.pressed = true;
+			if(e.altKey)	modifiers.alt.pressed = true;
+			if(e.metaKey)   modifiers.meta.pressed = true;
+
+			for(var i=0; k=keys[i],i<keys.length; i++) {
+				//Modifiers
+				if(k == 'ctrl' || k == 'control') {
+					kp++;
+					modifiers.ctrl.wanted = true;
+
+				} else if(k == 'shift') {
+					kp++;
+					modifiers.shift.wanted = true;
+
+				} else if(k == 'alt') {
+					kp++;
+					modifiers.alt.wanted = true;
+				} else if(k == 'meta') {
+					kp++;
+					modifiers.meta.wanted = true;
+				} else if(k.length > 1) { //If it is a special key
+					if(special_keys[k] == code) kp++;
+
+				} else if(opt['keycode']) {
+					if(opt['keycode'] == code) kp++;
+
+				} else { //The special keys did not match
+					if(character == k) kp++;
+					else {
+						if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
+							character = shift_nums[character];
+							if(character == k) kp++;
+						}
+					}
+				}
+			}
+
+			if(kp == keys.length &&
+						modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
+						modifiers.shift.pressed == modifiers.shift.wanted &&
+						modifiers.alt.pressed == modifiers.alt.wanted &&
+						modifiers.meta.pressed == modifiers.meta.wanted) {
+				callback(e);
+
+				if(!opt['propagate']) { //Stop the event
+					//e.cancelBubble is supported by IE - this will kill the bubbling process.
+					e.cancelBubble = true;
+					e.returnValue = false;
+
+					//e.stopPropagation works in Firefox.
+					if (e.stopPropagation) {
+						e.stopPropagation();
+						e.preventDefault();
+					}
+					return false;
+				}
+			}
+		}
+		this.all_shortcuts[shortcut_combination] = {
+			'callback':func,
+			'target':ele,
+			'event': opt['type']
+		};
+		//Attach the function with the event
+		if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
+		else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
+		else ele['on'+opt['type']] = func;
+	},
+
+	//Remove the shortcut - just specify the shortcut and I will remove the binding
+	'remove':function(shortcut_combination) {
+		shortcut_combination = shortcut_combination.toLowerCase();
+		var binding = this.all_shortcuts[shortcut_combination];
+		delete(this.all_shortcuts[shortcut_combination])
+		if(!binding) return;
+		var type = binding['event'];
+		var ele = binding['target'];
+		var callback = binding['callback'];
+
+		if(ele.detachEvent) ele.detachEvent('on'+type, callback);
+		else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
+		else ele['on'+type] = false;
+	}
+}
+</script>
+    <script type="text/javascript">(function () {
+  'use strict';
+
+  var slides = [],
+  currentSlideNumber = 0,
+  slideNext,
+  slidePrev;
+
+  function $(selector) {
+    return document.querySelector(selector);
+  }
+  function $$(selector) {
+    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+  }
+
+  function setCurrentSlide(newSlideNumber) {
+    newSlideNumber = Math.max(Math.min(newSlideNumber, slides.length - 1), 0);
+    if (newSlideNumber !== currentSlideNumber) {
+      currentSlideNumber = newSlideNumber;
+      localStorage.setItem('janus-currentSlideNumber', currentSlideNumber);
+    }
+    slides.forEach(function (item, index, array) {
+      if (index < currentSlideNumber) {
+        if (slides[index].contains(slides[currentSlideNumber])) {
+          item.setAttribute('janus-timeline', 'present');
+        } else {
+          item.setAttribute('janus-timeline', 'past');
+        }
+      } else if (index === currentSlideNumber) {
+        item.setAttribute('janus-timeline', 'present');
+      } else {
+        item.setAttribute('janus-timeline', 'future');
+      }
+    });
+  }
+
+  var sessionListener = function(e) {
+    if (e.url === window.location.href) {
+      if (e.key === 'janus-currentSlideNumber') {
+        setCurrentSlide(+e.newValue);
+      }
+    }
+  };
+
+  var init = function() {
+    slides = $$('main>section, [janus-timeline]');
+    currentSlideNumber = 0;
+    shortcut.add('F1', function() {
+      document.body.classList.toggle('show-notes');
+    });
+    shortcut.add('Page_down', function() {
+      setCurrentSlide(currentSlideNumber + 1);
+    });
+    shortcut.add('Page_up', function() {
+      setCurrentSlide(currentSlideNumber - 1);
+    });
+    var storedSlideNumber;
+    if (storedSlideNumber = localStorage.getItem('janus-currentSlideNumber')) {
+      setCurrentSlide(storedSlideNumber);
+    } else {
+      setCurrentSlide(0);
+    }
+  };
+
+  document.addEventListener('DOMContentLoaded', init);
+  window.addEventListener('storage', sessionListener);
+})();
+</script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 5e59874..e675e00 100644
--- a/index.html
+++ b/index.html
@@ -7,20 +7,44 @@
   </head>
   <body>
     <main>
-      <section>
-        <h1>Presentation Title</h1>
-        <ul>
-          <li janus-timeline>Point one</li>
-          <li janus-timeline>Point two</li>
-          <li janus-timeline>Point three!</li>
-        </ul>
+      <section style="background: linear-gradient(-30deg, black, rebeccapurple)">
+        <h1>Janus Presentations</h1>
+        <h2>Hotkey powered, multi-window presentations</h2>
+        <div>Press <code>Page Down</code> to continue.</div>
       </section>
-      <section>
+      <section style="background: linear-gradient(-30deg, #400, black)">
+        <h1>Hotkeys</h1>
+        <div janus-timeline>
+          Clone Window: <code>F2</code>
+        </div>
+        <div janus-timeline>
+          Navigation: <code>Page Down</code>, <code>Page Up</code>
+        </div>
+        <div janus-timeline>
+          Toggle Presenter Mode: <code>F1</code>
+        </div>
+      </section>
+      <section style="text-shadow: 0 0 1em black;">
         <img class="cover" src="https://placekitten.com/1024/768" alt="" />
-        <h1>Slide Two</h1>
+        <h1>Self-scaling cover images with <code>object-fit</code></h1>
+      </section>
+      <section style="background: linear-gradient(60deg, #060, black)">
+        <h1>Simple default markup</h1>
+        <div>
+          Any <code>section</code> tag or item with attribute <code>janus-timeline</code> is added to the timeline and revealed in sequence.
+        </div>
+      </section>
+      <section style="background: linear-gradient(-60deg, black, #630)">
+        <h1>Animations controlled by CSS</h1>
+        <div>
+          Framework sets custom attribute <code>janus-timeline</code> to <code>past</code>, <code>present</code>, or <code>future</code>
+        </div>
+      </section>
+      <section style="color: black; background-color: #FA0">
+        <h1>Cross-window synchronization with JavaScript <code>localStorage</code> events.</h1>
       </section>
       <section>
-        <h1>Slide Three</h1>
+        <h1>The end.</h1>
       </section>
     </main>
     <script type="text/javascript" src="scripts/shortcut.js"></script>
diff --git a/scripts/app.js b/scripts/app.js
index a40dbe0..8e07faf 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -35,6 +35,7 @@
   }
 
   var sessionListener = function(e) {
+    console.log(e);
     if (e.url === window.location.href) {
       if (e.key === 'janus-currentSlideNumber') {
         setCurrentSlide(+e.newValue);
@@ -48,6 +49,9 @@
     shortcut.add('F1', function() {
       document.body.classList.toggle('show-notes');
     });
+    shortcut.add('F2', function() {
+      window.open(window.location.href, '_blank');
+    });
     shortcut.add('Page_down', function() {
       setCurrentSlide(currentSlideNumber + 1);
     });
diff --git a/styles/main.css b/styles/main.css
index c902662..fafbbb3 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -17,6 +17,21 @@ li {
   list-style: none;
 }
 
+code {
+  font-family: Consolas, monaco, monospace;
+  border: 2px dashed currentcolor;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+h2 {
+  font-size: 1rem;
+}
+h1, h2 {
+  font-weight: bold;
+}
+
 /* Layout */
 body {
   display: flex;
@@ -61,18 +76,21 @@ section {
   transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
 }
 
-@media only screen {
-  [janus-timeline='future'] {
-    opacity: 0.5;
-  }
-}
-
 @media not print {
   [janus-timeline='future'] {
     visibility: hidden;
   }
 }
 
+body.show-notes section [janus-timeline='future'] {
+  visibility: visible;
+  opacity: 0.25;
+}
+
+body.show-notes section[janus-timeline='future'] [janus-timeline='future'] {
+  opacity: 1;
+}
+
 section[janus-timeline='past'] {
   transform: translate3d(0, 0, 0) scale(5);
   opacity: 0;
@@ -116,6 +134,6 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu
   right: 0.4rem;
   opacity: 0.75;
   visibility: visible;
-  outline: 0.1rem solid white;
+  outline: 0.2rem solid white;
   z-index: 3;
 }
