Initial commit

Dockerfile

@@ -0,0 +1,17 @@
+# Dockerfile
+
+FROM node
+
+COPY app /app
+
+RUN npm install -g uglify-js uglifycss \
+  && $(npm -g bin)/uglifyjs /app/app.js -cmo /app/app.min.js \
+  && $(npm -g bin)/uglifycss /app/app.css --output /app/app.min.css
+
+FROM nginx
+
+COPY app /usr/share/nginx/html
+ADD https://code.jquery.com/jquery-1.7.1.min.js /usr/share/nginx/html/
+COPY --from=0 /app/app.min.js /usr/share/nginx/html/
+COPY --from=0 /app/app.min.css /usr/share/nginx/html/
+RUN chown nginx:nginx -R /usr/share/nginx/html

app/app.css

@@ -0,0 +1,269 @@
+@font-face {
+    font-family: 'spirequalLightRegular';
+    src: url('spireq_l-webfont.eot');
+    src: url('spireq_l-webfont.eot?#iefix') format('embedded-opentype'),
+         url('spireq_l-webfont.woff') format('woff'),
+         url('spireq_l-webfont.ttf') format('truetype'),
+         url('spireq_l-webfont.svg#spirequalLightRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+#default
+{
+
+	color: #8ced6f;
+}
+
+#centerSelect
+{
+	position: absolute;
+	width: 100%;
+	top: 1px;
+}
+
+#characterHeadshot
+{
+	position: relative;
+	width: 150px;
+	height: 150px;
+	margin: 10px auto 10px auto;
+}
+
+#characterHeadBG
+{
+    
+}
+
+#characterTitle
+{
+	display: inline;
+	font-family: Baskerville, Marion;
+	font-size: 2em;
+	color: #fff;
+	text-align: center;
+	margin: 0 auto 0 auto;
+}
+
+#overlayedFrame
+{
+	position:absolute;
+    top: -2px;
+    left: 1px;
+    width:100%;
+    text-align:center
+}
+
+.categoryContainer
+{
+	font-size: 1.5em;
+	width: 100%;
+	text-align: center;
+	margin:30px auto;
+	display: -moz-box;
+	display: -webkit-box;
+	display: box;
+
+	-moz-box-align: center;
+	-webkit-box-align: center;
+	box-align: center;
+
+	-moz-box-pack: center;
+	-webkit-box-pack: center;
+	box-pack: center;
+
+	-moz-box-orient: horizontal;
+	-webkit-box-orient: horizontal;
+	-box-orient: horizontal;
+}
+
+.categoryContainer img
+{
+	margin: 5px;
+}
+
+.centerContainer
+{
+	text-align:center;
+    position:relative;
+	margin-bottom: 30px;
+}
+
+.modal
+{
+	position: absolute;
+	left:0px;
+	top:0px;
+	width: 100%;
+	height: 0%;
+	opacity:0.9;
+	overflow: hidden;
+	-webkit-transition: opacity 0.3s ease-out;
+    -moz-transition: opacity 0.3s ease-out;
+    -o-transition: opacity 0.3s ease-out;
+    -ms-transition: opacity 0.3s ease-out;
+}
+
+.modalContent
+{
+	width: 500px;
+	height: 0px;
+	background-color: #fff;
+	margin: auto;
+	color: #000;
+	overflow: hidden;
+	-webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+}
+
+.selectContainer
+{
+	position: relative;
+}
+
+.arrow
+{
+	display: inline;
+	margin: 4px;
+}
+
+.characterImages
+{
+	text-align:center;
+	position:relative;
+}
+
+.content
+{
+	margin: 0px auto;
+	max-width: 700px;
+}
+
+.handle
+{
+	z-index: -1;
+	/*background-color: #666;*/
+	position: absolute;
+	width: 81px;
+	height: 81px;
+	left: 0px;
+	top: 0px;
+	/*outline: 1px solid #f00;*/
+	visibility: hidden;
+	background-image: url(lookingGlass.png);
+	-webkit-transition: all 0.5s ease-out;
+    -moz-transition: all 0.5s ease-out;
+    -o-transition: all 0.5s ease-out;
+    -ms-transition: all 0.5s ease-out;
+}
+
+.info
+{
+	font-size: 0.7em;
+	margin-left: 5px;
+	margin-right:5px;
+}
+
+.trait
+{
+	font-family: "spirequalLightRegular";
+	width: 30px;
+	height: 30px;
+	text-align: center;
+	line-height: 1em;
+	letter-spacing: 0em;
+	font-size: 2.5em;
+	color: #fff;
+	-webkit-transition: all 0.1s ease-out;
+    -moz-transition: all 0.1s ease-out;
+    -o-transition: all 0.1s ease-out;
+    -ms-transition: all 0.1s ease-out;
+}
+
+.selected
+{
+	font-size: 4em;
+	line-height: 0.5em;
+	letter-spacing: -4px;
+
+}
+
+.traitContainer
+{
+	width: 100%;
+	
+	display: -moz-box;
+	display: -webkit-box;
+	display: box;
+
+	-moz-box-orient: horizontal;
+	-webkit-box-orient: horizontal;
+	box-orient: horizontal;
+	
+	-moz-box-pack: justify;
+	-webkit-box-pack: justify;
+	box-pack: justify;
+	
+	margin-top: 5px;
+	margin-bottom: 30px;
+}
+
+body
+{
+	font-family: Baskerville, Marion;
+	font-size: 0.7em;
+	letter-spacing: 0.2em;
+	color: #fff;
+	background-color: #333;
+	background-image: url(background.png);
+}
+
+select
+{
+    text-align:center;
+
+	opacity:0;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 1.7em;
+	background-color: transparent;
+	text-align: center;
+}
+
+p
+{
+	font-size: 1.5em;
+	width: 100%;
+	text-align: center;
+	margin-bottom:30px;
+}
+
+
+table
+{
+	width: 100%;
+}
+
+.specialOp
+{
+	text-align: center;
+	padding-left: 20px;
+}
+
+@media only screen and (max-device-width: 480px){
+
+	#characterHeadshot
+	{
+		width: 100px;
+		height: 100px;
+		position: relative;
+		margin: 10px auto 10px auto;
+	}
+
+	#characterHeadBG
+	{
+	    width: 114px;
+		height: 114px;
+	}
+}

app/app.js

@@ -0,0 +1,260 @@
+
+			// stores the currently selected element for each trait
+			var currentTraits = {might: 0, speed: 0, sanity: 0, knowledge: 0};
+			
+			// list of all available characters and their information
+			var characters;
+
+			// the currently selected character
+			var curCharacter;
+
+			$(window).load(initContent);
+
+			function initContent()
+			{
+				$.getJSON('getCharacters.php', function(data)
+				{
+					characters = data.person;
+
+					var i;
+					var currentPerson;
+					var len = characters.length;
+
+					var selector= $("#characterSelector");
+
+					selector.append("<option class='specialOp' value='-1'>CHOOSE A CHARACTER</option>");
+
+					for(i = 0; i<len; i++)
+					{
+						currentPerson = characters[i];
+
+						selector.append("<option class='specialOp' value='" + i + "'>" + currentPerson.name + "</option>");
+					}
+
+					// reset select width
+					//selector.width($(".selectContainer").width());
+
+					selector.change(function()
+						{
+							localStorage.removeItem('characterIndex');
+							localStorage.removeItem('currentTraitValues');
+							loadCharacter();
+						});
+
+					// setup animation event triggers for our handles
+					$('.handle').each(function(index)
+					{
+						$(this).bind('webkitTransitionEnd', handleAnimationComplete);
+						$(this).bind('transitionend', handleAnimationComplete);
+						$(this).bind('oTransitionEnd', handleAnimationComplete);
+					});
+
+					// retrieve/reset any previous character information
+					// (used when a web app reloads automatically when opening)
+					
+					if(localStorage.characterIndex)
+					{
+						selector.val( localStorage.characterIndex ).attr('selected',true);
+						loadCharacter();
+					}
+
+					// reset center positions for each trait if the window is resized
+					// and also re-center all handles
+					window.onresize = function(event)
+					{
+						setupTraitClicks();
+
+						//re-center handles
+						centerAllHandles();
+					}
+				});
+			}
+
+			function postCharacterLoadInit()
+			{
+				
+				setupTraitClicks();
+
+				// initialize the default traits as selected
+				$('#default.trait').each(function(index)
+				{
+					var parentID = $(this).parent().attr('id');
+
+					currentTraits[parentID] = this;
+
+					$(this).click();
+				});
+
+				centerAllHandles();
+			}
+
+			function loadCharacter()
+			{
+				// clear the defaults from the last character
+				$('.trait').each(function(index)
+			    { 
+			    	$(this).removeAttr("id");
+			    });
+
+				var index = $("#characterSelector option:selected").val();
+
+				curCharacter = characters[index];
+
+				// change character image
+				var charHead = $("#characterHeadshot");
+				charHead.attr("src", curCharacter.image);
+
+				// change character title
+				var charName = $("#characterTitle");
+
+				charName.html(curCharacter.name);
+
+				// reset select width
+				//$("#characterSelector").width($(".selectContainer").width());
+
+				// set default values for each trait category
+				
+				// might
+				var defaultSelector = '#might >.trait:nth-child('+ (eval(curCharacter.might.default) + 1) + ')';
+
+				$(defaultSelector).attr('id', 'default');
+
+				// speed
+				defaultSelector = '#speed >.trait:nth-child('+ (eval(curCharacter.speed.default) + 1) + ')';
+
+				$(defaultSelector).attr('id', 'default');
+
+				// sanity
+				defaultSelector = '#sanity >.trait:nth-child('+ (eval(curCharacter.sanity.default) + 1) + ')';
+
+				$(defaultSelector).attr('id', 'default');
+
+				// knowledge
+				defaultSelector = '#knowledge >.trait:nth-child('+ (eval(curCharacter.knowledge.default) + 1) + ')';
+
+				$(defaultSelector).attr('id', 'default');
+
+				//change all trait values
+
+				// might
+				$('#might >.trait').each(function(index)
+				{
+					$(this).html(curCharacter.might.value[index]);
+				});
+
+				// speed
+				$('#speed >.trait').each(function(index)
+				{
+					$(this).html(curCharacter.speed.value[index]);
+				});
+
+				// sanity
+				$('#sanity >.trait').each(function(index)
+				{
+					$(this).html(curCharacter.sanity.value[index]);
+				});
+
+				// knowledge
+				$('#knowledge >.trait').each(function(index)
+				{
+					$(this).html(curCharacter.knowledge.value[index]);
+				});
+
+				setupTraitClicks();
+
+				// if we have previously stored values, select those
+				if(localStorage.currentTraitValues)
+				{
+					var parsedOb = JSON.parse(localStorage.currentTraitValues)
+					for(var key in parsedOb)
+					{
+						$('#' + key +' >.trait:nth-child('+ (eval(parsedOb[key]) + 1) + ')').click();
+					}
+				}
+				else
+				{
+					// otherwise, initialize the default traits as selected
+					$('#default.trait').each(function(index)
+					{
+						$(this).click();
+					});
+				}
+				
+
+				centerAllHandles();
+
+			}
+
+			function setupTraitClicks()
+			{
+				$('.trait').each(function(index)
+			    { 
+			    	calculateCenter(this);
+
+					$(this).click(function()
+					{
+						var parentID = $(this).parent().attr('id');
+
+						var curTrait = currentTraits[parentID];
+
+						if(curTrait != this)
+						{
+
+							$(curTrait).removeClass("selected");
+							
+							currentTraits[parentID] = this;
+						}
+						
+						// save the new values to localStorage
+						localStorage.setItem('characterIndex', $("#characterSelector option:selected").val());
+
+						// store only the indices of our currentTraits
+						
+						var storedTraits = {might: $('#might >.trait').index(currentTraits["might"]),
+											speed: $('#speed >.trait').index(currentTraits["speed"]),
+											sanity: $('#sanity >.trait').index(currentTraits["sanity"]),
+											knowledge: $('#knowledge >.trait').index(currentTraits["knowledge"])};
+
+						localStorage.setItem('currentTraitValues', JSON.stringify(storedTraits));
+
+						centerParentHandle(this);
+					});
+			    });
+			}
+
+			function handleAnimationComplete(event)
+			{
+				$(event.target).css('visibility', 'visible');
+				$(currentTraits[$(event.target).attr('id')]).addClass("selected");
+			}
+
+			function centerAllHandles()
+			{
+				$('.trait.selected').each(function()
+				{
+					centerParentHandle(this);
+				});
+			}
+
+			function centerParentHandle(element)
+			{
+				element.handle.css('left', element.position.left);
+				element.handle.css('top', element.position.top);
+			}
+
+			function calculateCenter(element)
+			{
+				var parentID = $(element).parent().attr('id');
+
+		    	var handleSelector = "#"+parentID+".handle";
+
+		    	var handle = $(handleSelector);
+
+		    	var t_offset = $(element).offset();
+
+		    	var wDiff = ((handle.width()-$(element).width())/2) - 1;
+		    	var hDiff = ((handle.height()-$(element).height())/2) - 3;
+
+		    	element.position = { left: t_offset.left-wDiff, top: t_offset.top-hDiff };
+		    	element.handle = handle;
+			}

app/getCharacters.php

@@ -0,0 +1,796 @@
+{
+  "person": [
+    {
+      "name": "BRANDON JASPERS",
+      "image": "brandon_green.png",
+      "color": "Green",
+      "might": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "speed": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "4",
+        "value": [
+          "0",
+          "3",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "3",
+          "3",
+          "5",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "age": "12",
+      "height": "5'1\"",
+      "weight": "109 lbs.",
+      "hobbies": "Computers, Camping, Hockey",
+      "birthday": "May 21st"
+    },
+    {
+      "name": "PETER AKIMOTO",
+      "image": "peter_green.png",
+      "color": "Green",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      "speed": {
+        "default": "4",
+        "value": [
+          "0",
+          "3",
+          "3",
+          "3",
+          "4",
+          "6",
+          "6",
+          "7",
+          "7"
+        ]
+      },
+      "sanity": {
+        "default": "4",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "4",
+          "5",
+          "6",
+          "7",
+          "7",
+          "8"
+        ]
+      },
+      "age": "13",
+      "height": "4'11\"",
+      "weight": "98 lbs.",
+      "hobbies": "Bugs, Basketball",
+      "birthday": "September 3rd"
+    },
+    {
+      "name": "DARRIN \"FLASH\" WILLIAMS",
+      "image": "darrin_red.png",
+      "color": "Red",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "speed": {
+        "default": "5",
+        "value": [
+          "0",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "7",
+          "7",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "5",
+          "5",
+          "7"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "5",
+          "5",
+          "7"
+        ]
+      },
+      "age": "20",
+      "height": "5'11\"",
+      "weight": "188 lbs.",
+      "hobbies": "Track, Music, Shakespearean Literature",
+      "birthday": "June 6th"
+    },
+    {
+      "name": "OX BELLOWS",
+      "image": "ox_red.png",
+      "color": "Red",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "4",
+          "5",
+          "5",
+          "6",
+          "6",
+          "7",
+          "8",
+          "8"
+        ]
+      },
+      "speed": {
+        "default": "5",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "2",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "7"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "3",
+          "3",
+          "5",
+          "5",
+          "6",
+          "6"
+        ]
+      },
+      "age": "23",
+      "height": "6'4\"",
+      "weight": "288 lbs.",
+      "hobbies": "Football, Shiny Objects",
+      "birthday": "October 18th"
+    },
+    {
+      "name": "FATHER RHINEHARDT",
+      "image": "father_white.png",
+      "color": "White",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "2",
+          "2",
+          "4",
+          "4",
+          "5",
+          "5",
+          "7"
+        ]
+      },
+      "speed": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "7"
+        ]
+      },
+      "sanity": {
+        "default": "5",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "7",
+          "7",
+          "8"
+        ]
+      },
+      "knowledge": {
+        "default": "4",
+        "value": [
+          "0",
+          "1",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "8"
+        ]
+      },
+      "age": "62",
+      "height": "5'9\"",
+      "weight": "185 lbs.",
+      "hobbies": "Fencing, Gardening",
+      "birthday": "April 29th"
+    },
+    {
+      "name": "PROFESSOR LONGFELLOW",
+      "image": "professor_white.png",
+      "color": "White",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "6"
+        ]
+      },
+      "speed": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "4",
+          "4",
+          "5",
+          "5",
+          "6",
+          "6"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "3",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "7"
+        ]
+      },
+      "knowledge": {
+        "default": "5",
+        "value": [
+          "0",
+          "4",
+          "5",
+          "5",
+          "5",
+          "5",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "age": "57",
+      "height": "5'11\"",
+      "weight": "153 lbs.",
+      "hobbies": "Gaelic Music, Drama, Fine Wines",
+      "birthday": "July 27th"
+    },
+    {
+      "name": "HEATHER GRANVILLE",
+      "image": "heather_purple.png",
+      "color": "Purple",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "speed": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "6"
+        ]
+      },
+      "knowledge": {
+        "default": "5",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "age": "18",
+      "height": "5'2\"",
+      "weight": "120 lbs.",
+      "hobbies": "Television, Shopping",
+      "birthday": "August 2nd"
+    },
+    {
+      "name": "JENNY LECLERC",
+      "image": "jenny_purple.png",
+      "color": "Purple",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      "speed": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "5",
+        "value": [
+          "0",
+          "1",
+          "1",
+          "2",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "4",
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      "age": "21",
+      "height": "5'7\"",
+      "weight": "142 lbs.",
+      "hobbies": "Reading, Soccer",
+      "birthday": "March 4th"
+    },
+    {
+      "name": "MADAME ZOSTRA",
+      "image": "madame_blue.png",
+      "color": "Blue",
+      "might": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "4",
+          "5",
+          "5",
+          "5",
+          "6"
+        ]
+      },
+      "speed": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "5",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "8"
+        ]
+      },
+      "knowledge": {
+        "default": "4",
+        "value": [
+          "0",
+          "1",
+          "3",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "6"
+        ]
+      },
+      "age": "37",
+      "height": "5'0\"",
+      "weight": "150 lbs.",
+      "hobbies": "Astrology, Cooking, Baseball",
+      "birthday": "December 10th"
+    },
+    {
+      "name": "VIVIAN LOPEZ",
+      "image": "vivian_blue.png",
+      "color": "Blue",
+      "might": {
+        "default": "3",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "2",
+          "4",
+          "4",
+          "5",
+          "6",
+          "6"
+        ]
+      },
+      "speed": {
+        "default": "4",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "4",
+          "4",
+          "4",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "8"
+        ]
+      },
+      "knowledge": {
+        "default": "4",
+        "value": [
+          "0",
+          "4",
+          "5",
+          "5",
+          "5",
+          "5",
+          "6",
+          "6",
+          "7"
+        ]
+      },
+      "age": "42",
+      "height": "5'5\"",
+      "weight": "142 lbs.",
+      "hobbies": "Old Movies, Horses",
+      "birthday": "January 11th"
+    },
+    {
+      "name": "MISSY DUBOURDE",
+      "image": "missy_yellow.png",
+      "color": "Yellow",
+      "might": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "3",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7"
+        ]
+      },
+      "speed": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "5",
+          "6",
+          "6",
+          "6",
+          "7",
+          "7"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "7"
+        ]
+      },
+      "knowledge": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "3",
+          "4",
+          "4",
+          "5",
+          "6",
+          "6",
+          "6"
+        ]
+      },
+      "age": "9",
+      "height": "4'2\"",
+      "weight": "62 lbs.",
+      "hobbies": "Swimming, Medicine",
+      "birthday": "February 14th"
+    },
+    {
+      "name": "ZOE INGSTROM",
+      "image": "zoe_yellow.png",
+      "color": "Yellow",
+      "might": {
+        "default": "4",
+        "value": [
+          "0",
+          "2",
+          "2",
+          "3",
+          "3",
+          "4",
+          "4",
+          "6",
+          "7"
+        ]
+      },
+      "speed": {
+        "default": "4",
+        "value": [
+          "0",
+          "4",
+          "4",
+          "4",
+          "4",
+          "5",
+          "6",
+          "8",
+          "8"
+        ]
+      },
+      "sanity": {
+        "default": "3",
+        "value": [
+          "0",
+          "3",
+          "4",
+          "5",
+          "5",
+          "6",
+          "6",
+          "7",
+          "8"
+        ]
+      },
+      "knowledge": {
+        "default": "3",
+        "value": [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "4",
+          "5",
+          "5",
+          "5"
+        ]
+      },
+      "age": "8",
+      "height": "3'9\"",
+      "weight": "49 lbs.",
+      "hobbies": "Dolls, Music",
+      "birthday": "November 5th"
+    }
+  ]
+}

app/index.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+	<head>
+
+		<title>Betrayal at House on the Hill</title>
+
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+		<meta name="viewport" content="width=320.1, initial-scale=1, user-scalable=no">
+
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+
+    	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+		<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
+		<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
+		<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
+		<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad3.png" />
+
+		<link rel="stylesheet" href="app.min.css" />
+	</head>
+
+	<body>
+		<div class="content">
+			<div class="centerContainer">
+				 <div class="characterImages">
+            		<img id="characterHeadBG" src="avatarBG.png"/>
+            		<div id="overlayedFrame">
+                		<img id="characterHeadshot" src="blank.png"/>
+            		</div>
+        		</div>
+
+				<div class="centerContainer">
+					<div class="selectContainer">
+						<div id="characterTitle">CHOOSE A CHARACTER</div>
+						<img class="arrow" src="arrow.png"/>
+					</div>
+
+					<div id="centerSelect" class="centerContainer">
+						<select id="characterSelector"></select>
+					</div>
+				</div>
+			</div>
+
+			<div class="categoryContainer">
+				<img src="pointLeft.png"/>
+				<span>MIGHT</span>
+				<img src="pointRight.png"/>
+			</div>
+			<table>
+				<tr id="might">
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+				</tr>
+			</table>
+
+			<div class="categoryContainer">
+				<img src="pointLeft.png"/>
+				<span>SPEED</span>
+				<img src="pointRight.png"/>
+			</div>
+
+			<table>
+				<tr id="speed">
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+				</tr>
+			</table>
+
+			<div class="categoryContainer">
+				<img src="pointLeft.png"/>
+				<span>SANITY</span>
+				<img src="pointRight.png"/>
+			</div>
+
+			<table>
+				<tr id="sanity">
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+				</tr>
+			</table>
+
+			<div class="categoryContainer">
+				<img src="pointLeft_short.png"/>
+				<span>KNOWLEDGE</span>
+				<img src="pointRight_short.png"/>
+			</div>
+
+			<table>
+				<tr id="knowledge">
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+					<td class="trait">-</td>
+				</tr>
+			</table>
+		<div>
+		<div id="might" class="handle"></div>
+		<div id="speed" class="handle"></div>
+		<div id="sanity" class="handle"></div>
+		<div id="knowledge" class="handle"></div>
+
+		<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
+		<script src="app.min.js" type="text/javascript"></script>
+	</body>
+
+</html>