Switch demoes

jonahvsweb · Aug 6, 2015 · 65f4e6e · 65f4e6e
1 parent ad000ce
commit 65f4e6e
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ After you load the script you simply initialize TouchPoint and add an event list
 
 **That's it!**
 
-[Start clicking away on the page to see it in action.](http://jonahvsweb.com/in-the-lab/lib/touchpoint-js/)
+[Start clicking away on the page to see it in action.](http://jonahvsweb.com/in-the-lab/lib/touchpoint-js/basic-demo.html)
 
 ## Options
 TouchPoint is customizable. There are a number of options that you have access to to customize the look for your needs. It's important that these options be defined before you initialize TouchPoint with `TouchPoint.init()`. Otherwise, your updates won't show.

diff --git a/basic-demo.html b/basic-demo.html
@@ -0,0 +1,22 @@
+<html>
+	<head>
+		<title>TouchPoint.js Basic Demo</title>
+		<style>
+			body {
+				padding: 0; margin: 0 auto;
+				width: 100%; height: auto;
+				background-color: #000;
+				color: #FFF;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="dist/touchpoint.js"></script>
+		<script>
+			(function () {
+				TouchPoint.init(window); 
+			})();
+		</script>
+	</body>
+</html>
diff --git a/index.html b/index.html
@@ -1,23 +1,54 @@
 <html>
 	<head>
-		<title></title>
+		<title>TouchPoint.js - A Javascript library that shows taps/clicks for HTML prototypes on desktop and mobile</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="//jonahvsweb.com/in-the-lab/lib/devices.min.css">
 		<style>
 			body {
-				padding: 0; margin: 0 auto;
-				width: 100%; height: auto;
-				background-color: #000;
-				color: #FFF;
+			  width: 100%; height: auto;
+			  padding: 0;
+			  margin: 0 auto;
+			  background-color: #000;
+			  overflow: hidden;
+			}
+
+			.container {
+			  position: absolute;
+			  top: 50px;
+			  left: 30%;
 			}
 		</style>
 	</head>
 	<body>
-
-		<script src="touchpoint.js"></script>
+		<div class="container">
+		  <div class="marvel-device iphone6 silver">
+		      <div class="top-bar"></div>
+		      <div class="sleep"></div>
+		      <div class="volume"></div>
+		      <div class="camera"></div>
+		      <div class="sensor"></div>
+		      <div class="speaker"></div>
+		      <div class="screen">
+		          <!-- Content goes here -->
+		      </div>
+		      <div class="home"></div>
+		      <div class="bottom-bar"></div>
+		  </div>
+		</div>
+		<script src="dist/touchpoint.min.js"></script>
 		<script>
 			(function () {
-				TouchPoint.color = 'red';
-				TouchPoint.init(window); 
+			  TouchPoint.color = 'red';
+			  TouchPoint.init(window); 
 			})();
 		</script>
+		<script>
+			(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+			function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+			e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+			e.src='//www.google-analytics.com/analytics.js';
+			r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+			ga('create','UA-XXXXX-X');ga('send','pageview');
+		</script>
 	</body>
 </html>