Initial commit
@ -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
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 249 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 422 KiB |
After Width: | Height: | Size: 400 KiB |
After Width: | Height: | Size: 392 KiB |
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
After Width: | Height: | Size: 452 KiB |
@ -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>
|
After Width: | Height: | Size: 413 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 488 KiB |
After Width: | Height: | Size: 457 KiB |
After Width: | Height: | Size: 403 KiB |
After Width: | Height: | Size: 421 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 390 KiB |
After Width: | Height: | Size: 403 KiB |
After Width: | Height: | Size: 465 KiB |