Permalink
Browse files

Animations & Lesson Price Update & Minor style adjustments

  • Loading branch information...
myubi committed Aug 28, 2016
1 parent f7c9527 commit e1c5b9a12cd300bc59bc0ea47a4ff0922fdb31c2
View
@@ -9,11 +9,14 @@
}
@keyframes houseworkAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
0% { background-position: 0px; }
50% {
transform: translateX(20px);
}
100% {
background-position: -163px;
transform: translateX(-20px);
}
}
.spriteAnimation-babysitter {
@@ -28,13 +31,92 @@
}
@keyframes babysitterAnim {
0% { background-position: 0px; }
50% {
transform: translateX(20px);
}
100% {
background-position: -163px;
transform: translateX(-20px);
}
}
.spriteAnimation-farm {
min-width: 40px;
min-height: 49px;
animation: farmAnim .9s steps(5) infinite;
position: relative;
left: -60px;
top: 66px;
display: inline-block;
}
@keyframes farmAnim {
from { background-position: 0px; }
to {
background-position: -204px;
}
}
.spriteAnimation-church {
min-width: 40px;
min-height: 49px;
animation: churchAnim .9s steps(4) infinite;
position: relative;
left: 0px;
top: 66px;
display: inline-block;
}
@keyframes churchAnim {
0% { background-position: 0px; }
50% {
transform: translateX(20px);
}
100% {
background-position: -163px;
transform: translateX(-20px);
}
}
.spriteAnimation-inn {
min-width: 40px;
min-height: 78px;
animation: innAnim .9s steps(4) infinite;
position: relative;
left: -4px;
top: 2px;
display: inline-block;
}
@keyframes innAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-restaurant {
min-width: 40px;
min-height: 80px;
animation: restaurantAnim 1.3s steps(8) infinite;
position: relative;
left: 50px;
top: 35px;
display: inline-block;
}
@keyframes restaurantAnim {
0% { background-position: 0px; }
50% {
transform: translateX(20px);
}
100% {
background-position: -327px;
transform: translateX(-20px);
}
}
.spriteAnimation-bar {
min-width: 40px;
height: 80px;
@@ -140,7 +222,7 @@
}
.spriteAnimation-poetry {
min-width: 40px;
min-width: 30px;
height: 60px;
animation: poetryAnim .9s steps(4) infinite;
position: relative;
@@ -159,72 +241,68 @@
.spriteAnimation-protocol {
min-width: 40px;
height: 80px;
height: 52px;
animation: protocolAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
left: 133px;
top: 62px;
display: inline-block;
}
@keyframes protocolAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
background-position: -81px;
}
}
.spriteAnimation-strategy {
min-width: 40px;
height: 80px;
height: 52px;
animation: strategyAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
left: 100px;
top: 62px;
display: inline-block;
}
@keyframes strategyAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
from { background-position: 0px; }
to {
background-position: -81px;
}
}
.spriteAnimation-science {
min-width: 40px;
height: 80px;
height: 52px;
animation: scienceAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
left: 100px;
top: 62px;
display: inline-block;
}
@keyframes scienceAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
from { background-position: 0px; }
to {
background-position: -81px;
}
}
.spriteAnimation-theology {
min-width: 40px;
height: 80px;
height: 52px;
animation: theologyAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
left: 68px;
top: 61px;
display: inline-block;
}
@keyframes theologyAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
from { background-position: 0px; }
to {
background-position: -81px;
}
}
View
@@ -85,12 +85,13 @@ width: 30px;
text-align: center;
}
#attributes {
.attrBox {
padding: 10px;
outline: 2px solid #7b7b7b;
border: 3px solid #fff;
background-color: #a85050;
background-image: url('../img/background-pattern.png');
margin-bottom: 30px;
}
#attributes>div{
@@ -117,7 +118,7 @@ meter::-webkit-meter-optimum-value {
}
.attrName {
width: 130px;
width: 200px;
display: inline-block;
}
@@ -163,7 +164,11 @@ display: inline-block;
flex-direction: column-reverse;
background-repeat: no-repeat;
background-position: center;
outline: 2px solid #7b7b7b;
border: 3px solid #fff;
height: 400px;
max-width: 640px;
margin: 0 auto;
}
.calendar tr>td{
@@ -202,8 +207,6 @@ display: inline-block;
height: 128px;
}
#notifications {
background-image: url('../img/background-pattern.png');
background-color: #a85050;
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -89,14 +89,28 @@ var initLessons = {
"theology": 40
};
var attributesDiv = document.getElementById('attributes');
//var attributesDiv = document.getElementById('attributes');
var attrSet1Div = document.getElementById('attrSet1');
var attrSet2Div = document.getElementById('attrSet2');
var attrSet3Div = document.getElementById('attrSet3');
var count = 0;
for (var attribute in attributes){
var attributeDiv = document.createElement('div');
attributesDiv.appendChild(attributeDiv);
var attributeDiv = document.createElement('div');
if (count < 10){
attrSet1Div.appendChild(attributeDiv);
} else if(count < 18){
attrSet2Div.appendChild(attributeDiv);
} else {
attrSet3Div.appendChild(attributeDiv);
}
var spanTitle = document.createElement('span');
spanTitle.className = 'attrName';
spanTitle.innerHTML = attribute.charAt(0).toUpperCase() + attribute.slice(1);;
uppercaseTittle = attribute.replace(/([A-Z])/g, ' $1').trim();
spanTitle.innerHTML = uppercaseTittle.charAt(0).toUpperCase() + uppercaseTittle.slice(1);;
attributeDiv.appendChild(spanTitle);
var spanNumber = document.createElement('span');
spanNumber.className = 'attrValue';
@@ -109,8 +123,12 @@ for (var attribute in attributes){
meter.min = 0;
meter.max = 1000;
attributeDiv.appendChild(meter);
count += 1;
}
var jobsDiv = document.getElementById('jobs');
for (var job in initJobs){
Oops, something went wrong.

0 comments on commit e1c5b9a

Please sign in to comment.