diff --git a/README.md b/README.md
index 4f41109..7fcb93e 100644
--- a/README.md
+++ b/README.md
@@ -11,4 +11,19 @@ Plugins
ionic plugin add cordova-plugin-screen-orientation
cordova plugin add cordova-plugin-media
-cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git
\ No newline at end of file
+cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git
+
+
+
+Css
+================
+https://github.com/miniMAC/magic
+http://www.justinaguilar.com/animations/index.html
+
+
+
+
+Animations Tuts
+==============
+https://jonsuh.com/blog/animate-svg-with-css/
+
diff --git a/package.json b/package.json
index b48d863..8af0e41 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,10 @@
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
- "ionic-plugin-keyboard"
+ "ionic-plugin-keyboard",
+ "cordova-plugin-screen-orientation"
],
- "cordovaPlatforms": []
+ "cordovaPlatforms": [
+ "android"
+ ]
}
diff --git a/res/drawable-land-hdpi/screen.png b/res/drawable-land-hdpi/screen.png
new file mode 100644
index 0000000..66b12fe
Binary files /dev/null and b/res/drawable-land-hdpi/screen.png differ
diff --git a/res/drawable-land-ldpi/screen.png b/res/drawable-land-ldpi/screen.png
new file mode 100644
index 0000000..7dceec7
Binary files /dev/null and b/res/drawable-land-ldpi/screen.png differ
diff --git a/res/drawable-land-mdpi/screen.png b/res/drawable-land-mdpi/screen.png
new file mode 100644
index 0000000..0dc2ba7
Binary files /dev/null and b/res/drawable-land-mdpi/screen.png differ
diff --git a/res/drawable-land-xhdpi/screen.png b/res/drawable-land-xhdpi/screen.png
new file mode 100644
index 0000000..39ae00c
Binary files /dev/null and b/res/drawable-land-xhdpi/screen.png differ
diff --git a/res/drawable-land-xxhdpi/screen.png b/res/drawable-land-xxhdpi/screen.png
new file mode 100644
index 0000000..3f591b1
Binary files /dev/null and b/res/drawable-land-xxhdpi/screen.png differ
diff --git a/res/drawable-land-xxxhdpi/screen.png b/res/drawable-land-xxxhdpi/screen.png
new file mode 100644
index 0000000..253e6f1
Binary files /dev/null and b/res/drawable-land-xxxhdpi/screen.png differ
diff --git a/res/drawable-port-hdpi/screen.png b/res/drawable-port-hdpi/screen.png
new file mode 100644
index 0000000..e0dbb62
Binary files /dev/null and b/res/drawable-port-hdpi/screen.png differ
diff --git a/res/drawable-port-ldpi/screen.png b/res/drawable-port-ldpi/screen.png
new file mode 100644
index 0000000..8e93c2d
Binary files /dev/null and b/res/drawable-port-ldpi/screen.png differ
diff --git a/res/drawable-port-mdpi/screen.png b/res/drawable-port-mdpi/screen.png
new file mode 100644
index 0000000..0aaad62
Binary files /dev/null and b/res/drawable-port-mdpi/screen.png differ
diff --git a/res/drawable-port-xhdpi/screen.png b/res/drawable-port-xhdpi/screen.png
new file mode 100644
index 0000000..64c27f8
Binary files /dev/null and b/res/drawable-port-xhdpi/screen.png differ
diff --git a/res/drawable-port-xxhdpi/screen.png b/res/drawable-port-xxhdpi/screen.png
new file mode 100644
index 0000000..f605e6a
Binary files /dev/null and b/res/drawable-port-xxhdpi/screen.png differ
diff --git a/res/drawable-port-xxxhdpi/screen.png b/res/drawable-port-xxxhdpi/screen.png
new file mode 100644
index 0000000..2b993cf
Binary files /dev/null and b/res/drawable-port-xxxhdpi/screen.png differ
diff --git a/res/mipmap-hdpi/icon.png b/res/mipmap-hdpi/icon.png
new file mode 100644
index 0000000..b910093
Binary files /dev/null and b/res/mipmap-hdpi/icon.png differ
diff --git a/res/mipmap-ldpi/icon.png b/res/mipmap-ldpi/icon.png
new file mode 100644
index 0000000..16cd5db
Binary files /dev/null and b/res/mipmap-ldpi/icon.png differ
diff --git a/res/mipmap-mdpi/icon.png b/res/mipmap-mdpi/icon.png
new file mode 100644
index 0000000..64a6cbc
Binary files /dev/null and b/res/mipmap-mdpi/icon.png differ
diff --git a/res/mipmap-xhdpi/icon.png b/res/mipmap-xhdpi/icon.png
new file mode 100644
index 0000000..1605f69
Binary files /dev/null and b/res/mipmap-xhdpi/icon.png differ
diff --git a/res/mipmap-xxhdpi/icon.png b/res/mipmap-xxhdpi/icon.png
new file mode 100644
index 0000000..56fb29e
Binary files /dev/null and b/res/mipmap-xxhdpi/icon.png differ
diff --git a/res/mipmap-xxxhdpi/icon.png b/res/mipmap-xxxhdpi/icon.png
new file mode 100644
index 0000000..e4a9152
Binary files /dev/null and b/res/mipmap-xxxhdpi/icon.png differ
diff --git a/www/css/animations.css b/www/css/animations.css
new file mode 100644
index 0000000..c704ce9
--- /dev/null
+++ b/www/css/animations.css
@@ -0,0 +1,1126 @@
+/*
+==============================================
+CSS3 ANIMATION CHEAT SHEET
+==============================================
+
+Made by Justin Aguilar
+
+www.justinaguilar.com/animations/
+
+Questions, comments, concerns, love letters:
+justin@justinaguilar.com
+==============================================
+*/
+
+/*
+==============================================
+slideDown
+==============================================
+*/
+
+
+.slideDown{
+ animation-name: slideDown;
+ -webkit-animation-name: slideDown;
+
+ animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+
+ animation-timing-function: ease;
+ -webkit-animation-timing-function: ease;
+
+ visibility: visible !important;
+}
+
+@keyframes slideDown {
+ 0% {
+ transform: translateY(-100%);
+ }
+ 50%{
+ transform: translateY(8%);
+ }
+ 65%{
+ transform: translateY(-4%);
+ }
+ 80%{
+ transform: translateY(4%);
+ }
+ 95%{
+ transform: translateY(-2%);
+ }
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@-webkit-keyframes slideDown {
+ 0% {
+ -webkit-transform: translateY(-100%);
+ }
+ 50%{
+ -webkit-transform: translateY(8%);
+ }
+ 65%{
+ -webkit-transform: translateY(-4%);
+ }
+ 80%{
+ -webkit-transform: translateY(4%);
+ }
+ 95%{
+ -webkit-transform: translateY(-2%);
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ }
+}
+
+/*
+==============================================
+slideUp
+==============================================
+*/
+
+
+.slideUp{
+ animation-name: slideUp;
+ -webkit-animation-name: slideUp;
+
+ animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+
+ animation-timing-function: ease;
+ -webkit-animation-timing-function: ease;
+
+ visibility: visible !important;
+}
+
+@keyframes slideUp {
+ 0% {
+ transform: translateY(100%);
+ }
+ 50%{
+ transform: translateY(-8%);
+ }
+ 65%{
+ transform: translateY(4%);
+ }
+ 80%{
+ transform: translateY(-4%);
+ }
+ 95%{
+ transform: translateY(2%);
+ }
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@-webkit-keyframes slideUp {
+ 0% {
+ -webkit-transform: translateY(100%);
+ }
+ 50%{
+ -webkit-transform: translateY(-8%);
+ }
+ 65%{
+ -webkit-transform: translateY(4%);
+ }
+ 80%{
+ -webkit-transform: translateY(-4%);
+ }
+ 95%{
+ -webkit-transform: translateY(2%);
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ }
+}
+
+/*
+==============================================
+slideLeft
+==============================================
+*/
+
+
+.slideLeft{
+ animation-name: slideLeft;
+ -webkit-animation-name: slideLeft;
+
+ animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+
+ animation-timing-function: ease-in-out;
+ -webkit-animation-timing-function: ease-in-out;
+
+ visibility: visible !important;
+}
+
+@keyframes slideLeft {
+ 0% {
+ transform: translateX(150%);
+ }
+ 50%{
+ transform: translateX(-8%);
+ }
+ 65%{
+ transform: translateX(4%);
+ }
+ 80%{
+ transform: translateX(-4%);
+ }
+ 95%{
+ transform: translateX(2%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+@-webkit-keyframes slideLeft {
+ 0% {
+ -webkit-transform: translateX(150%);
+ }
+ 50%{
+ -webkit-transform: translateX(-8%);
+ }
+ 65%{
+ -webkit-transform: translateX(4%);
+ }
+ 80%{
+ -webkit-transform: translateX(-4%);
+ }
+ 95%{
+ -webkit-transform: translateX(2%);
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ }
+}
+
+/*
+==============================================
+slideRight
+==============================================
+*/
+
+
+.slideRight{
+ animation-name: slideRight;
+ -webkit-animation-name: slideRight;
+
+ animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+
+ animation-timing-function: ease-in-out;
+ -webkit-animation-timing-function: ease-in-out;
+
+ visibility: visible !important;
+}
+
+@keyframes slideRight {
+ 0% {
+ transform: translateX(-150%);
+ }
+ 50%{
+ transform: translateX(8%);
+ }
+ 65%{
+ transform: translateX(-4%);
+ }
+ 80%{
+ transform: translateX(4%);
+ }
+ 95%{
+ transform: translateX(-2%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+@-webkit-keyframes slideRight {
+ 0% {
+ -webkit-transform: translateX(-150%);
+ }
+ 50%{
+ -webkit-transform: translateX(8%);
+ }
+ 65%{
+ -webkit-transform: translateX(-4%);
+ }
+ 80%{
+ -webkit-transform: translateX(4%);
+ }
+ 95%{
+ -webkit-transform: translateX(-2%);
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ }
+}
+
+/*
+==============================================
+slideExpandUp
+==============================================
+*/
+
+
+.slideExpandUp{
+ animation-name: slideExpandUp;
+ -webkit-animation-name: slideExpandUp;
+
+ animation-duration: 1.6s;
+ -webkit-animation-duration: 1.6s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease -out;
+
+ visibility: visible !important;
+}
+
+@keyframes slideExpandUp {
+ 0% {
+ transform: translateY(100%) scaleX(0.5);
+ }
+ 30%{
+ transform: translateY(-8%) scaleX(0.5);
+ }
+ 40%{
+ transform: translateY(2%) scaleX(0.5);
+ }
+ 50%{
+ transform: translateY(0%) scaleX(1.1);
+ }
+ 60%{
+ transform: translateY(0%) scaleX(0.9);
+ }
+ 70% {
+ transform: translateY(0%) scaleX(1.05);
+ }
+ 80%{
+ transform: translateY(0%) scaleX(0.95);
+ }
+ 90% {
+ transform: translateY(0%) scaleX(1.02);
+ }
+ 100%{
+ transform: translateY(0%) scaleX(1);
+ }
+}
+
+@-webkit-keyframes slideExpandUp {
+ 0% {
+ -webkit-transform: translateY(100%) scaleX(0.5);
+ }
+ 30%{
+ -webkit-transform: translateY(-8%) scaleX(0.5);
+ }
+ 40%{
+ -webkit-transform: translateY(2%) scaleX(0.5);
+ }
+ 50%{
+ -webkit-transform: translateY(0%) scaleX(1.1);
+ }
+ 60%{
+ -webkit-transform: translateY(0%) scaleX(0.9);
+ }
+ 70% {
+ -webkit-transform: translateY(0%) scaleX(1.05);
+ }
+ 80%{
+ -webkit-transform: translateY(0%) scaleX(0.95);
+ }
+ 90% {
+ -webkit-transform: translateY(0%) scaleX(1.02);
+ }
+ 100%{
+ -webkit-transform: translateY(0%) scaleX(1);
+ }
+}
+
+/*
+==============================================
+expandUp
+==============================================
+*/
+
+
+.expandUp{
+ animation-name: expandUp;
+ -webkit-animation-name: expandUp;
+
+ animation-duration: 0.7s;
+ -webkit-animation-duration: 0.7s;
+
+ animation-timing-function: ease;
+ -webkit-animation-timing-function: ease;
+
+ visibility: visible !important;
+}
+
+@keyframes expandUp {
+ 0% {
+ transform: translateY(100%) scale(0.6) scaleY(0.5);
+ }
+ 60%{
+ transform: translateY(-7%) scaleY(1.12);
+ }
+ 75%{
+ transform: translateY(3%);
+ }
+ 100% {
+ transform: translateY(0%) scale(1) scaleY(1);
+ }
+}
+
+@-webkit-keyframes expandUp {
+ 0% {
+ -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
+ }
+ 60%{
+ -webkit-transform: translateY(-7%) scaleY(1.12);
+ }
+ 75%{
+ -webkit-transform: translateY(3%);
+ }
+ 100% {
+ -webkit-transform: translateY(0%) scale(1) scaleY(1);
+ }
+}
+
+/*
+==============================================
+fadeIn
+==============================================
+*/
+
+.fadeIn{
+ animation-name: fadeIn;
+ -webkit-animation-name: fadeIn;
+
+ animation-duration: 1.5s;
+ -webkit-animation-duration: 1.5s;
+
+ animation-timing-function: ease-in-out;
+ -webkit-animation-timing-function: ease-in-out;
+
+ visibility: visible !important;
+}
+
+@keyframes fadeIn {
+ 0% {
+ transform: scale(0);
+ opacity: 0.0;
+ }
+ 60% {
+ transform: scale(1.1);
+ }
+ 80% {
+ transform: scale(0.9);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeIn {
+ 0% {
+ -webkit-transform: scale(0);
+ opacity: 0.0;
+ }
+ 60% {
+ -webkit-transform: scale(1.1);
+ }
+ 80% {
+ -webkit-transform: scale(0.9);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/*
+==============================================
+expandOpen
+==============================================
+*/
+
+
+.expandOpen{
+ animation-name: expandOpen;
+ -webkit-animation-name: expandOpen;
+
+ animation-duration: 1.2s;
+ -webkit-animation-duration: 1.2s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ visibility: visible !important;
+}
+
+@keyframes expandOpen {
+ 0% {
+ transform: scale(1.8);
+ }
+ 50% {
+ transform: scale(0.95);
+ }
+ 80% {
+ transform: scale(1.05);
+ }
+ 90% {
+ transform: scale(0.98);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@-webkit-keyframes expandOpen {
+ 0% {
+ -webkit-transform: scale(1.8);
+ }
+ 50% {
+ -webkit-transform: scale(0.95);
+ }
+ 80% {
+ -webkit-transform: scale(1.05);
+ }
+ 90% {
+ -webkit-transform: scale(0.98);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ }
+}
+
+/*
+==============================================
+bigEntrance
+==============================================
+*/
+
+
+.bigEntrance{
+ animation-name: bigEntrance;
+ -webkit-animation-name: bigEntrance;
+
+ animation-duration: 1.6s;
+ -webkit-animation-duration: 1.6s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ visibility: visible !important;
+}
+
+@keyframes bigEntrance {
+ 0% {
+ transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
+ opacity: 0.2;
+ }
+ 30% {
+ transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
+ opacity: 1;
+ }
+ 45% {
+ transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 60% {
+ transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 75% {
+ transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 90% {
+ transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes bigEntrance {
+ 0% {
+ -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
+ opacity: 0.2;
+ }
+ 30% {
+ -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
+ opacity: 1;
+ }
+ 45% {
+ -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 60% {
+ -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 75% {
+ -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 90% {
+ -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
+ opacity: 1;
+ }
+}
+
+/*
+==============================================
+hatch
+==============================================
+*/
+
+.hatch{
+ animation-name: hatch;
+ -webkit-animation-name: hatch;
+
+ animation-duration: 2s;
+ -webkit-animation-duration: 2s;
+
+ animation-timing-function: ease-in-out;
+ -webkit-animation-timing-function: ease-in-out;
+
+ transform-origin: 50% 100%;
+ -ms-transform-origin: 50% 100%;
+ -webkit-transform-origin: 50% 100%;
+
+ visibility: visible !important;
+}
+
+@keyframes hatch {
+ 0% {
+ transform: rotate(0deg) scaleY(0.6);
+ }
+ 20% {
+ transform: rotate(-2deg) scaleY(1.05);
+ }
+ 35% {
+ transform: rotate(2deg) scaleY(1);
+ }
+ 50% {
+ transform: rotate(-2deg);
+ }
+ 65% {
+ transform: rotate(1deg);
+ }
+ 80% {
+ transform: rotate(-1deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@-webkit-keyframes hatch {
+ 0% {
+ -webkit-transform: rotate(0deg) scaleY(0.6);
+ }
+ 20% {
+ -webkit-transform: rotate(-2deg) scaleY(1.05);
+ }
+ 35% {
+ -webkit-transform: rotate(2deg) scaleY(1);
+ }
+ 50% {
+ -webkit-transform: rotate(-2deg);
+ }
+ 65% {
+ -webkit-transform: rotate(1deg);
+ }
+ 80% {
+ -webkit-transform: rotate(-1deg);
+ }
+ 100% {
+ -webkit-transform: rotate(0deg);
+ }
+}
+
+
+/*
+==============================================
+bounce
+==============================================
+*/
+
+
+.bounce{
+ animation-name: bounce;
+ -webkit-animation-name: bounce;
+
+ animation-duration: 1.6s;
+ -webkit-animation-duration: 1.6s;
+
+ animation-timing-function: ease;
+ -webkit-animation-timing-function: ease;
+
+ transform-origin: 50% 100%;
+ -ms-transform-origin: 50% 100%;
+ -webkit-transform-origin: 50% 100%;
+}
+
+@keyframes bounce {
+ 0% {
+ transform: translateY(0%) scaleY(0.6);
+ }
+ 60%{
+ transform: translateY(-100%) scaleY(1.1);
+ }
+ 70%{
+ transform: translateY(0%) scaleY(0.95) scaleX(1.05);
+ }
+ 80%{
+ transform: translateY(0%) scaleY(1.05) scaleX(1);
+ }
+ 90%{
+ transform: translateY(0%) scaleY(0.95) scaleX(1);
+ }
+ 100%{
+ transform: translateY(0%) scaleY(1) scaleX(1);
+ }
+}
+
+@-webkit-keyframes bounce {
+ 0% {
+ -webkit-transform: translateY(0%) scaleY(0.6);
+ }
+ 60%{
+ -webkit-transform: translateY(-100%) scaleY(1.1);
+ }
+ 70%{
+ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
+ }
+ 80%{
+ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
+ }
+ 90%{
+ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
+ }
+ 100%{
+ -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
+ }
+}
+
+
+/*
+==============================================
+pulse
+==============================================
+*/
+
+.pulse{
+ animation-name: pulse;
+ -webkit-animation-name: pulse;
+
+ animation-duration: 1.5s;
+ -webkit-animation-duration: 1.5s;
+
+ animation-iteration-count: infinite;
+ -webkit-animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(0.9);
+ opacity: 0.7;
+ }
+ 50% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(0.9);
+ opacity: 0.7;
+ }
+}
+
+@-webkit-keyframes pulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ opacity: 0.7;
+ }
+ 50% {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scale(0.95);
+ opacity: 0.7;
+ }
+}
+
+/*
+==============================================
+floating
+==============================================
+*/
+
+.floating{
+ animation-name: floating;
+ -webkit-animation-name: floating;
+
+ animation-duration: 1.5s;
+ -webkit-animation-duration: 1.5s;
+
+ animation-iteration-count: infinite;
+ -webkit-animation-iteration-count: infinite;
+}
+
+@keyframes floating {
+ 0% {
+ transform: translateY(0%);
+ }
+ 50% {
+ transform: translateY(8%);
+ }
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@-webkit-keyframes floating {
+ 0% {
+ -webkit-transform: translateY(0%);
+ }
+ 50% {
+ -webkit-transform: translateY(8%);
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ }
+}
+
+/*
+==============================================
+tossing
+==============================================
+*/
+
+.tossing{
+ animation-name: tossing;
+ -webkit-animation-name: tossing;
+
+ animation-duration: 2.5s;
+ -webkit-animation-duration: 2.5s;
+
+ animation-iteration-count: infinite;
+ -webkit-animation-iteration-count: infinite;
+}
+
+@keyframes tossing {
+ 0% {
+ transform: rotate(-4deg);
+ }
+ 50% {
+ transform: rotate(4deg);
+ }
+ 100% {
+ transform: rotate(-4deg);
+ }
+}
+
+@-webkit-keyframes tossing {
+ 0% {
+ -webkit-transform: rotate(-4deg);
+ }
+ 50% {
+ -webkit-transform: rotate(4deg);
+ }
+ 100% {
+ -webkit-transform: rotate(-4deg);
+ }
+}
+
+/*
+==============================================
+pullUp
+==============================================
+*/
+
+.pullUp{
+ animation-name: pullUp;
+ -webkit-animation-name: pullUp;
+
+ animation-duration: 1.1s;
+ -webkit-animation-duration: 1.1s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ transform-origin: 50% 100%;
+ -ms-transform-origin: 50% 100%;
+ -webkit-transform-origin: 50% 100%;
+}
+
+@keyframes pullUp {
+ 0% {
+ transform: scaleY(0.1);
+ }
+ 40% {
+ transform: scaleY(1.02);
+ }
+ 60% {
+ transform: scaleY(0.98);
+ }
+ 80% {
+ transform: scaleY(1.01);
+ }
+ 100% {
+ transform: scaleY(0.98);
+ }
+ 80% {
+ transform: scaleY(1.01);
+ }
+ 100% {
+ transform: scaleY(1);
+ }
+}
+
+@-webkit-keyframes pullUp {
+ 0% {
+ -webkit-transform: scaleY(0.1);
+ }
+ 40% {
+ -webkit-transform: scaleY(1.02);
+ }
+ 60% {
+ -webkit-transform: scaleY(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleY(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleY(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleY(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ }
+}
+
+/*
+==============================================
+pullDown
+==============================================
+*/
+
+.pullDown{
+ animation-name: pullDown;
+ -webkit-animation-name: pullDown;
+
+ animation-duration: 1.1s;
+ -webkit-animation-duration: 1.1s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ -webkit-transform-origin: 50% 0%;
+}
+
+@keyframes pullDown {
+ 0% {
+ transform: scaleY(0.1);
+ }
+ 40% {
+ transform: scaleY(1.02);
+ }
+ 60% {
+ transform: scaleY(0.98);
+ }
+ 80% {
+ transform: scaleY(1.01);
+ }
+ 100% {
+ transform: scaleY(0.98);
+ }
+ 80% {
+ transform: scaleY(1.01);
+ }
+ 100% {
+ transform: scaleY(1);
+ }
+}
+
+@-webkit-keyframes pullDown {
+ 0% {
+ -webkit-transform: scaleY(0.1);
+ }
+ 40% {
+ -webkit-transform: scaleY(1.02);
+ }
+ 60% {
+ -webkit-transform: scaleY(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleY(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleY(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleY(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ }
+}
+
+/*
+==============================================
+stretchLeft
+==============================================
+*/
+
+.stretchLeft{
+ animation-name: stretchLeft;
+ -webkit-animation-name: stretchLeft;
+
+ animation-duration: 1.5s;
+ -webkit-animation-duration: 1.5s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ -webkit-transform-origin: 100% 0%;
+}
+
+@keyframes stretchLeft {
+ 0% {
+ transform: scaleX(0.3);
+ }
+ 40% {
+ transform: scaleX(1.02);
+ }
+ 60% {
+ transform: scaleX(0.98);
+ }
+ 80% {
+ transform: scaleX(1.01);
+ }
+ 100% {
+ transform: scaleX(0.98);
+ }
+ 80% {
+ transform: scaleX(1.01);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+}
+
+@-webkit-keyframes stretchLeft {
+ 0% {
+ -webkit-transform: scaleX(0.3);
+ }
+ 40% {
+ -webkit-transform: scaleX(1.02);
+ }
+ 60% {
+ -webkit-transform: scaleX(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleX(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleX(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleX(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ }
+}
+
+/*
+==============================================
+stretchRight
+==============================================
+*/
+
+.stretchRight{
+ animation-name: stretchRight;
+ -webkit-animation-name: stretchRight;
+
+ animation-duration: 1.5s;
+ -webkit-animation-duration: 1.5s;
+
+ animation-timing-function: ease-out;
+ -webkit-animation-timing-function: ease-out;
+
+ transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ -webkit-transform-origin: 0% 0%;
+}
+
+@keyframes stretchRight {
+ 0% {
+ transform: scaleX(0.3);
+ }
+ 40% {
+ transform: scaleX(1.02);
+ }
+ 60% {
+ transform: scaleX(0.98);
+ }
+ 80% {
+ transform: scaleX(1.01);
+ }
+ 100% {
+ transform: scaleX(0.98);
+ }
+ 80% {
+ transform: scaleX(1.01);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+}
+
+@-webkit-keyframes stretchRight {
+ 0% {
+ -webkit-transform: scaleX(0.3);
+ }
+ 40% {
+ -webkit-transform: scaleX(1.02);
+ }
+ 60% {
+ -webkit-transform: scaleX(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleX(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleX(0.98);
+ }
+ 80% {
+ -webkit-transform: scaleX(1.01);
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ }
+}
diff --git a/www/css/magic.css b/www/css/magic.css
new file mode 100644
index 0000000..d676492
--- /dev/null
+++ b/www/css/magic.css
@@ -0,0 +1,1173 @@
+@charset "UTF-8";
+/*
+Magic - Ver 1.2.0 - https://minimamente.com
+Licensed under the MIT license
+Copyright (c) 2016 Christian Pucci
+*/
+.magictime {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
+
+.puffIn {
+ animation-name: puffIn;
+}
+@keyframes puffIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(2,2);
+ filter: blur(2px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1,1);
+ filter: blur(0px);
+ }
+}
+.puffOut {
+ animation-name: puffOut;
+}
+@keyframes puffOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1,1);
+ filter: blur(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(2,2);
+ filter: blur(2px);
+ }
+}
+.vanishIn {
+ animation-name: vanishIn;
+}
+@keyframes vanishIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(2, 2);
+ filter: blur(90px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1);
+ filter: blur(0px);
+ }
+}
+.vanishOut {
+ animation-name: vanishOut;
+}
+@keyframes vanishOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1);
+ filter: blur(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(2, 2);
+ filter: blur(20px);
+ }
+}
+.boingInUp {
+ animation-name: boingInUp;
+}
+@keyframes boingInUp {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 0%;
+ transform: perspective(800px) rotateX(-90deg);
+ }
+
+ 50% {
+ opacity: 1;
+ transform-origin: 50% 0%;
+ transform: perspective(800px) rotateX(50deg);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 0%;
+ transform: perspective(800px) rotateX(0deg);
+ }
+}
+.boingOutDown {
+ animation-name: boingOutDown;
+}
+@keyframes boingOutDown {
+ 0% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: perspective(800px) rotateX(0deg) rotateY(0deg);
+ }
+
+ 20% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: perspective(800px) rotateX(0deg) rotateY(10deg);
+ }
+
+ 30% {
+ opacity: 1;
+ transform-origin: 0% 100%;
+ transform: perspective(800px) rotateX(0deg) rotateY(0deg);
+ }
+
+ 40% {
+ opacity: 1;
+ transform-origin: 0% 100%;
+ transform: perspective(800px) rotateX(10deg) rotateY(10deg);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 100% 100%;
+ transform: perspective(800px) rotateX(90deg) rotateY(0deg);
+ }
+}
+.bombLeftOut {
+ animation-name: bombLeftOut;
+}
+@keyframes bombLeftOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: rotate(0deg);
+ filter: blur(0px);
+ }
+
+ 50% {
+ opacity: 1;
+ transform-origin: -100% 50%;
+ transform: rotate(-160deg);
+ filter: blur(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: -100% 50%;
+ transform: rotate(-160deg);
+ filter: blur(20px);
+ }
+}
+.bombRightOut {
+ animation-name: bombRightOut;
+}
+@keyframes bombRightOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: rotate(0deg);
+ filter: blur(0px);
+ }
+
+ 50% {
+ opacity: 1;
+ transform-origin: 200% 50%;
+ transform: rotate(160deg);
+ filter: blur(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 200% 50%;
+ transform: rotate(160deg);
+ filter: blur(20px);
+ }
+}
+.magic {
+ animation-name: magic;
+}
+@keyframes magic {
+ 0% {
+ opacity: 1;
+ transform-origin: 100% 200%;
+ transform: scale(1, 1) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 200% 500%;
+ transform: scale(0, 0) rotate(270deg);
+ }
+}
+.swap {
+ animation-name: swap;
+}
+@keyframes swap {
+ 0% {
+ opacity: 0;
+ transform-origin: 0 100%;
+ transform: scale(0, 0) translate(-700px, 0px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: scale(1, 1) translate(0px, 0px);
+ }
+}
+.twisterInDown {
+ animation-name: twisterInDown;
+}
+@keyframes twisterInDown {
+ 0% {
+ opacity: 0;
+ transform-origin: 0 100%;
+ transform: scale(0, 0) rotate(360deg) translateY(-100%);
+ }
+
+ 30% {
+ transform-origin: 0 100%;
+ transform: scale(0, 0) rotate(360deg) translateY(-100%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: scale(1, 1) rotate(0deg) translateY(0%);
+ }
+}
+.twisterInUp {
+ animation-name: twisterInUp;
+}
+@keyframes twisterInUp {
+ 0% {
+ opacity: 0;
+ transform-origin: 100% 0;
+ transform: scale(0, 0) rotate(360deg) translateY(100%);
+ }
+
+ 30% {
+ transform-origin: 100% 0;
+ transform: scale(0, 0) rotate(360deg) translateY(100%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: scale(1, 1) rotate(0deg) translateY(0);
+ }
+}
+.foolishIn {
+ animation-name: foolishIn;
+}
+@keyframes foolishIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(0, 0) rotate(360deg);
+ }
+
+ 20% {
+ opacity: 1;
+ transform-origin: 0% 100%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 40% {
+ opacity: 1;
+ transform-origin: 100% 100%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 60% {
+ opacity: 1;
+ transform-origin: 0%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 80% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1) rotate(0deg);
+ }
+}
+.foolishOut {
+ animation-name: foolishOut;
+}
+@keyframes foolishOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1) rotate(360deg);
+ }
+
+ 20% {
+ opacity: 1;
+ transform-origin: 0% 0%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 40% {
+ opacity: 1;
+ transform-origin: 100% 0%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 60% {
+ opacity: 1;
+ transform-origin: 0%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 80% {
+ opacity: 1;
+ transform-origin: 0% 100%;
+ transform: scale(0.5, 0.5) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(0, 0) rotate(0deg);
+ }
+}
+.holeOut {
+ animation-name: holeOut;
+}
+@keyframes holeOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1) rotateY(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(0, 0) rotateY(180deg);
+ }
+}
+.swashIn {
+ animation-name: swashIn;
+}
+@keyframes swashIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(0, 0);
+ }
+
+ 90% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(0.9, 0.9);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1);
+ }
+}
+.swashOut {
+ animation-name: swashOut;
+}
+@keyframes swashOut {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(1, 1);
+ }
+
+ 80% {
+ opacity: 1;
+ transform-origin: 50% 50%;
+ transform: scale(0.9, 0.9);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 50%;
+ transform: scale(0, 0);
+ }
+}
+.spaceInDown {
+ animation-name: spaceInDown;
+}
+@keyframes spaceInDown {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(.2) translate(0%, 200%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 100%;
+ transform: scale(1) translate(0%, 0%);
+ }
+}
+.spaceInLeft {
+ animation-name: spaceInLeft;
+}
+@keyframes spaceInLeft {
+ 0% {
+ opacity: 0;
+ transform-origin: 0% 50%;
+ transform: scale(.2) translate(-200%, 0%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 0% 50%;
+ transform: scale(1) translate(0%, 0%);
+ }
+}
+.spaceInRight {
+ animation-name: spaceInRight;
+}
+@keyframes spaceInRight {
+ 0% {
+ opacity: 0;
+ transform-origin: 100% 50%;
+ transform: scale(.2) translate(200%, 0%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 100% 50%;
+ transform: scale(1) translate(0%, 0%);
+ }
+}
+.spaceInUp {
+ animation-name: spaceInUp;
+}
+@keyframes spaceInUp {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 0%;
+ transform: scale(.2) translate(0%, -200%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform-origin: 50% 0%;
+ transform: scale(1) translate(0%, 0%);
+ }
+}
+.spaceOutDown {
+ animation-name: spaceOutDown;
+}
+@keyframes spaceOutDown {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 100%;
+ transform: scale(1) translate(0%, 0%);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(.2) translate(0%, 200%);
+ }
+}
+.spaceOutLeft {
+ animation-name: spaceOutLeft;
+}
+@keyframes spaceOutLeft {
+ 0% {
+ opacity: 1;
+ transform-origin: 0% 50%;
+ transform: scale(1) translate(0%, 0%);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 0% 50%;
+ transform: scale(.2) translate(-200%, 0%);
+ }
+}
+.spaceOutRight {
+ animation-name: spaceOutRight;
+}
+@keyframes spaceOutRight {
+ 0% {
+ opacity: 1;
+ transform-origin: 100% 50%;
+ transform: scale(1) translate(0%, 0%);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 100% 50%;
+ transform: scale(.2) translate(200%, 0%);
+ }
+}
+.spaceOutUp {
+ animation-name: spaceOutUp;
+}
+@keyframes spaceOutUp {
+ 0% {
+ opacity: 1;
+ transform-origin: 50% 0%;
+ transform: scale(1) translate(0%, 0%);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 0%;
+ transform: scale(.2) translate(0%, -200%);
+ }
+}
+.perspectiveDown {
+ animation-name: perspectiveDown;
+}
+@keyframes perspectiveDown {
+ 0% {
+ transform-origin: 0 100%;
+ transform: perspective(800px) rotateX(0deg);
+ }
+
+ 100% {
+ transform-origin: 0 100%;
+ transform: perspective(800px) rotateX(-180deg);
+ }
+}
+.perspectiveDownReturn {
+ animation-name: perspectiveDownReturn;
+}
+@keyframes perspectiveDownReturn {
+ 0% {
+ transform-origin: 0 100%;
+ transform: perspective(800px) rotateX(-180deg);
+ }
+
+ 100% {
+ transform-origin: 0 100%;
+ transform: perspective(800px) rotateX(0deg);
+ }
+}
+.perspectiveLeft {
+ animation-name: perspectiveLeft;
+}
+@keyframes perspectiveLeft {
+ 0% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(0deg);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(-180deg);
+ }
+}
+.perspectiveLeftReturn {
+ animation-name: perspectiveLeftReturn;
+}
+@keyframes perspectiveLeftReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(-180deg);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(0deg);
+ }
+}
+.perspectiveRight {
+ animation-name: perspectiveRight;
+}
+@keyframes perspectiveRight {
+ 0% {
+ transform-origin: 100% 0;
+ transform: perspective(800px) rotateY(0deg);
+ }
+
+ 100% {
+ transform-origin: 100% 0;
+ transform: perspective(800px) rotateY(180deg);
+ }
+}
+.perspectiveRightReturn {
+ animation-name: perspectiveRightReturn;
+}
+@keyframes perspectiveRightReturn {
+ 0% {
+ transform-origin: 100% 0;
+ transform: perspective(800px) rotateY(180deg);
+ }
+
+ 100% {
+ transform-origin: 100% 0;
+ transform: perspective(800px) rotateY(0deg);
+ }
+}
+.perspectiveUp {
+ animation-name: perspectiveUp;
+}
+@keyframes perspectiveUp {
+ 0% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(0deg);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(180deg);
+ }
+}
+.perspectiveUpReturn {
+ animation-name: perspectiveUpReturn;
+}
+@keyframes perspectiveUpReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(180deg);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(0deg);
+ }
+}
+.rotateDown {
+ animation-name: rotateDown;
+}
+@keyframes rotateDown {
+ 0% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(0deg) translateZ(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: perspective(800px) rotateX(-180deg) translateZ(300px);
+ }
+}
+.rotateLeft {
+ animation-name: rotateLeft;
+}
+@keyframes rotateLeft {
+ 0% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(0deg) translateZ(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 0;
+ transform: perspective(800px) rotateY(180deg) translateZ(300px);
+ }
+}
+.rotateRight {
+ animation-name: rotateRight;
+}
+@keyframes rotateRight {
+ 0% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateY(0deg) translate3d(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 0;
+ transform: perspective(800px) rotateY(-180deg) translateZ(150px);
+ }
+}
+
+.rotateUp {
+ animation-name: rotateUp;
+}
+@keyframes rotateUp {
+ 0% {
+ opacity: 1;
+ transform-origin: 0 0;
+ transform: perspective(800px) rotateX(0deg) translateZ(0px);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 0;
+ transform: perspective(800px) rotateX(180deg) translateZ(100px);
+ }
+}
+.slideDown {
+ animation-name: slideDown;
+}
+@keyframes slideDown {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(100%);
+ }
+}
+.slideDownReturn {
+ animation-name: slideDownReturn;
+}
+@keyframes slideDownReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(100%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ }
+}
+.slideLeft {
+ animation-name: slideLeft;
+}
+@keyframes slideLeft {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(-100%);
+ }
+}
+.slideLeftReturn {
+ animation-name: slideLeftReturn;
+}
+@keyframes slideLeftReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(-100%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ }
+}
+.slideRight {
+ animation-name: slideRight;
+}
+@keyframes slideRight {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(100%);
+ }
+}
+.slideRightReturn {
+ animation-name: slideRightReturn;
+}
+@keyframes slideRightReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateX(100%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateX(0%);
+ }
+}
+.slideUp {
+ animation-name: slideUp;
+}
+@keyframes slideUp {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(-100%);
+ }
+}
+.slideUpReturn {
+ animation-name: slideUpReturn;
+}
+@keyframes slideUpReturn {
+ 0% {
+ transform-origin: 0 0;
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform-origin: 0 0;
+ transform: translateY(0%);
+ }
+}
+.openDownLeft {
+ animation-name: openDownLeft;
+}
+@keyframes openDownLeft {
+ 0% {
+ transform-origin: bottom left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ transform-origin: bottom left;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openDownLeftReturn {
+ animation-name: openDownLeftReturn;
+}
+@keyframes openDownLeftReturn {
+ 0% {
+ transform-origin: bottom left;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ transform-origin: bottom left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+}
+.openDownRight {
+ animation-name: openDownRight;
+}
+@keyframes openDownRight {
+ 0% {
+ transform-origin: bottom right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ transform-origin: bottom right;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+
+.openDownRightReturn {
+ animation-name: openDownRightReturn;
+}
+@keyframes openDownRightReturn {
+ 0% {
+ transform-origin: bottom right;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ transform-origin: bottom right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+}
+.openUpLeft {
+ animation-name: openUpLeft;
+}
+@keyframes openUpLeft {
+ 0% {
+ transform-origin: top left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ transform-origin: top left;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openUpLeftReturn {
+ animation-name: openUpLeftReturn;
+}
+@keyframes openUpLeftReturn {
+ 0% {
+ transform-origin: top left;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ transform-origin: top left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+}
+.openUpRight {
+ animation-name: openUpRight;
+}
+@keyframes openUpRight {
+ 0% {
+ transform-origin: top right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ transform-origin: top right;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openUpRightReturn {
+ animation-name: openUpRightReturn;
+}
+@keyframes openUpRightReturn {
+ 0% {
+ transform-origin: top right;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ transform-origin: top right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+}
+.openDownLeftOut {
+ animation-name: openDownLeftOut;
+}
+@keyframes openDownLeftOut {
+ 0% {
+ opacity: 1;
+ transform-origin: bottom left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: bottom left;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openDownRightOut {
+ animation-name: openDownRightOut;
+}
+@keyframes openDownRightOut {
+ 0% {
+ opacity: 1;
+ transform-origin: bottom right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: bottom right;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openUpLeftOut {
+ animation-name: openUpLeftOut;
+}
+@keyframes openUpLeftOut {
+ 0% {
+ opacity: 1;
+ transform-origin: top left;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: top left;
+ transform: rotate(110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.openUpRightOut {
+ animation-name: openUpRightOut;
+}
+@keyframes openUpRightOut {
+ 0% {
+ opacity: 1;
+ transform-origin: top right;
+ transform: rotate(0deg);
+ animation-timing-function: ease-out;
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: top right;
+ transform: rotate(-110deg);
+ animation-timing-function: ease-in-out;
+ }
+}
+.tinDownIn {
+ animation-name: tinDownIn;
+}
+@keyframes tinDownIn {
+ 0% {
+ opacity: 0;
+ transform: scale(1, 1) translateY(900%);
+ }
+
+ 50%, 70%, 90% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateY(0);
+ }
+
+ 60%, 80%, 100% {
+ opacity: 1;
+ transform: scale(1, 1) translateY(0);
+ }
+}
+.tinDownOut {
+ animation-name: tinDownOut;
+}
+@keyframes tinDownOut {
+ 0%, 20%, 40%, 50% {
+ opacity: 1;
+ transform: scale(1, 1) translateY(0);
+ }
+
+ 10%, 30% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1, 1) translateY(900%);
+ }
+}
+.tinLeftIn {
+ animation-name: tinLeftIn;
+}
+@keyframes tinLeftIn {
+ 0% {
+ opacity: 0;
+ transform: scale(1, 1) translateX(-900%);
+ }
+
+ 50%, 70%, 90% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateX(0);
+ }
+
+ 60%, 80%, 100% {
+ opacity: 1;
+ transform: scale(1, 1) translateX(0);
+ }
+}
+.tinLeftOut {
+ animation-name: tinLeftOut;
+}
+@keyframes tinLeftOut {
+ 0%, 20%, 40%, 50% {
+ opacity: 1;
+ transform: scale(1, 1) translateX(0);
+ }
+
+ 10%, 30% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1, 1) translateX(-900%);
+ }
+}
+.tinRightIn {
+ animation-name: tinRightIn;
+}
+@keyframes tinRightIn {
+ 0% {
+ opacity: 0;
+ transform: scale(1, 1) translateX(900%);
+ }
+
+ 50%, 70%, 90% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateX(0);
+ }
+
+ 60%, 80%, 100% {
+ opacity: 1;
+ transform: scale(1, 1) translateX(0);
+ }
+}
+.tinRightOut {
+ animation-name: tinRightOut;
+}
+@keyframes tinRightOut {
+ 0%, 20%, 40%, 50% {
+ opacity: 1;
+ transform: scale(1, 1) translateX(0);
+ }
+
+ 10%, 30% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1, 1) translateX(900%);
+ }
+}
+.tinUpIn {
+ animation-name: tinUpIn;
+}
+@keyframes tinUpIn {
+ 0% {
+ opacity: 0;
+ transform: scale(1, 1) translateY(-900%);
+ }
+
+ 50%, 70%, 90% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateY(0);
+ }
+
+ 60%, 80%, 100% {
+ opacity: 1;
+ transform: scale(1, 1) translateY(0);
+ }
+}
+.tinUpOut {
+ animation-name: tinUpOut;
+}
+@keyframes tinUpOut {
+ 0%, 20%, 40%, 50% {
+ opacity: 1;
+ transform: scale(1, 1) translateY(0);
+ }
+
+ 10%, 30% {
+ opacity: 1;
+ transform: scale(1.1, 1.1) translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: scale(1, 1) translateY(-900%);
+ }
+}
\ No newline at end of file
diff --git a/www/js/app.js b/www/js/app.js
index a8cc998..087713a 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -87,9 +87,9 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
templateUrl: 'templates/home.html',
controller: 'home'
})
- .state('spiel1', {
- url: '/spiel1',
- templateUrl: 'templates/spiel1.html',
+ .state('suchspiel', {
+ url: '/suchspiel',
+ templateUrl: 'templates/suchspiel.html',
controller: 'Suchspiel'
})
diff --git a/www/js/home_controller.js b/www/js/home_controller.js
index b1d95c1..8ed428b 100644
--- a/www/js/home_controller.js
+++ b/www/js/home_controller.js
@@ -3,21 +3,21 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia
$scope.showmentor=false;
$ionicPlatform.ready(function() {
-var mediastartespiel1 = new Media('/android_asset/www/sounds/spiel1.mp3', spiel1_intro_finish,null);
-$scope.mediastartespiel1=mediastartespiel1;
+var mediastartesuchspiel = new Media('/android_asset/www/sounds/suchspiel.mp3', suchspiel_intro_finish,null);
+$scope.mediastartesuchspiel=mediastartesuchspiel;
backgroundsounds_mediahandler.playbackgroundmusic();
});
- $scope.spiel1_intro = function(){
+ $scope.suchspiel_intro = function(){
$scope.showmentor=true;
- $scope.mediastartespiel1.play();
- $scope.mediastartespiel1.setVolume('1.0');
+ $scope.mediastartesuchspiel.play();
+ $scope.mediastartesuchspiel.setVolume('1.0');
}
- function spiel1_intro_finish() {
- $scope.mediastartespiel1.release();
+ function suchspiel_intro_finish() {
+ $scope.mediastartesuchspiel.release();
$scope.showmentor=false;
- $state.go('spiel1');
+ $state.go('suchspiel');
}
});
\ No newline at end of file
diff --git a/www/sounds/suchspiel.mp3 b/www/sounds/suchspiel.mp3
new file mode 100644
index 0000000..e251024
Binary files /dev/null and b/www/sounds/suchspiel.mp3 differ
diff --git a/www/templates/home.html b/www/templates/home.html
index be1789e..ee576a4 100644
--- a/www/templates/home.html
+++ b/www/templates/home.html
@@ -3,7 +3,7 @@
-
+
diff --git a/www/templates/spiel1.html b/www/templates/suchspiel.html
similarity index 100%
rename from www/templates/spiel1.html
rename to www/templates/suchspiel.html