Mentor eingebaut, CSS-Queries eingebaut, Hilfe eingebaut, Midi Files

www/css/htc.css

@@ -0,0 +1,30 @@
+
+
+/* ----------- HTC One ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+

www/css/ipads.css

@@ -0,0 +1,84 @@
+
+
+/* ----------- iPad mini ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* ----------- iPad 1 and 2 ----------- */
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 1) {
+
+}
+
+/* ----------- iPad 3 and 4 ----------- */
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: portrait) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 768px) 
+  and (max-device-width: 1024px) 
+  and (orientation: landscape) 
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+

www/css/iphones.css

@@ -0,0 +1,112 @@
+
+
+/* ----------- iPhone 4 and 4S ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) {
+
+}
+
+/* ----------- iPhone 5 and 5S ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 568px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) {
+
+}
+
+/* ----------- iPhone 6 ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2) { 
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: landscape) { 
+
+}
+
+/* ----------- iPhone 6+ ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3) { 
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3)
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 414px) 
+  and (max-device-width: 736px) 
+  and (-webkit-min-device-pixel-ratio: 3)
+  and (orientation: landscape) { 
+
+}
+

www/css/kindle_tablet.css

@@ -0,0 +1,56 @@
+
+
+/* ----------- Kindle Fire HD 7" ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Kindle Fire HD 8.9" ----------- */
+
+/* Portrait and Landscape */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) {
+
+}
+
+/* Portrait */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: portrait) {
+}
+
+/* Landscape */
+@media only screen 
+  and (min-device-width: 1200px) 
+  and (max-device-width: 1600px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+}
+

www/css/nexus_tablet.css

@@ -0,0 +1,33 @@
+
+
+/* ----------- Asus Nexus 7 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 601px) 
+  and (device-height: 906px) 
+  and (-webkit-min-device-pixel-ratio: 1.331) 
+  and (-webkit-max-device-pixel-ratio: 1.332) 
+  and (orientation: landscape) {
+
+}
+

www/css/samsung.css

@@ -0,0 +1,86 @@
+
+
+/* ----------- Galaxy S3 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 2) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Galaxy S4 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 320px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+
+/* ----------- Galaxy S5 ----------- */
+
+/* Portrait and Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) {
+
+}
+
+/* Portrait */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: portrait) {
+
+}
+
+/* Landscape */
+@media screen 
+  and (device-width: 360px) 
+  and (device-height: 640px) 
+  and (-webkit-device-pixel-ratio: 3) 
+  and (orientation: landscape) {
+
+}
+

www/css/samsung_tablet.css

@@ -0,0 +1,25 @@
+
+
+/* ----------- Galaxy Tab 10.1 ----------- */
+
+/* Portrait and Landscape */
+@media 
+  (min-device-width: 800px) 
+  and (max-device-width: 1280px) {
+
+}
+
+/* Portrait */
+@media 
+  (max-device-width: 800px) 
+  and (orientation: portrait) { 
+
+}
+
+/* Landscape */
+@media 
+  (max-device-width: 1280px) 
+  and (orientation: landscape) { 
+
+}
+

www/css/style.css

@@ -7,8 +7,10 @@
 
 }
 */
+
 .scroll-content {
 
+
 background: url("../img/background.svg");
 -webkit-animation: backgroundScroll 50s linear infinite;
  -webkit-background-size: cover;
@@ -20,11 +22,6 @@ animation: backgroundScroll 50s linear infinite;
 @-webkit-keyframes backgroundScroll {
 from {background-position: 0 0;}
 to {background-position: -2000px 0;}
-}
-        
-@keyframes backgroundScroll {
-from {background-position: 0 0;}
-to {background-position: -2000px 0;}
 }
      
  .myborder{
@@ -41,3 +38,45 @@ to {background-position: -2000px 0;}
   box-shadow: 0 5px #666;
   transform: translateY(4px);
 }
+
+.mentorborder {
+  position:fixed;
+  bottom:0;
+  left:0;  
+  width: 256px;
+  height: 256px;
+  overflow: hidden;
+}
+
+.mentor {
+  width: 256px;
+  height: 2560px;
+  background:  url('../img/mentor.png') left center;
+  -webkit-animation: mentorsprite 4.5s steps(10) infinite;
+}
+
+@-webkit-keyframes mentorsprite {
+    100% { background-position: 0 -2560px; }
+}
+
+
+.mentorborderbravo {
+  position:fixed;
+  bottom:0;
+  right:0;  
+  width: 256px;
+  height: 256px;
+  overflow: hidden;
+}
+
+.mentorbravo {
+  width: 256px;
+  height: 1024px;
+  background:  url('../img/mentor_bravo.png') left center;
+  -webkit-animation: mentorspritebravo 2.5s steps(4) infinite;
+}
+
+@-webkit-keyframes mentorspritebravo {
+    100% { background-position: 0 -1024px; }
+}
+

www/js/app.js

@@ -3,7 +3,7 @@
 // angular.module is a global place for creating, registering and retrieving Angular modules
 // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
 // the 2nd parameter is an array of 'requires'
-angular.module('kinderspiel', ['ionic', 'ngCordova', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services'])
+angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services'])
 
 .run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {

www/js/controllers.js

@@ -2,8 +2,11 @@ angular.module('kinderspiel.controllers', [])
 
 .controller('home', function($scope, $ionicPlatform, $cordovaMedia, $state ) {
 
+$scope.showmentor=false;
+
 $ionicPlatform.ready(function() {
-var media = new Media('/android_asset/www/sounds/hintergrundmusik1.mp3', fertig,null);
+var media = new Media('/android_asset/www/sounds/TORN.MID', fertig,null);
+//var media = new Media('/android_asset/www/sounds/hintergrundmusik1.mp3', fertig,null);
 var media1 = new Media('/android_asset/www/sounds/bravo.mp3', null,null);
 var mediastartespiel1 = new Media('/android_asset/www/sounds/spiel1.mp3', goto_spiel1,null);
 $scope.mymedia=media;
@@ -11,7 +14,7 @@ $scope.mymedia1=media1;
 $scope.mediastartespiel1=mediastartespiel1;
 
 $scope.mymedia.play();
-$scope.mymedia.setVolume('0.1');
+$scope.mymedia.setVolume('0.3');
 });
 
     $scope.play = function(src) {
@@ -26,28 +29,32 @@ $scope.mymedia.setVolume('0.1');
 
     $scope.starte_spiel2 = function(){
       $scope.mymedia1.play();
-      $scope.mymedia1.setVolume('0.6');
+      $scope.mymedia1.setVolume('1.0');
     }
 
     function fertig(){
       $scope.mymedia.play();
-      $scope.mymedia.setVolume('0.1');
+      $scope.mymedia.setVolume('0.3');
     }
 
 
     $scope.starte_spiel1 = function(){
+      $scope.showmentor=true;
       $scope.mediastartespiel1.play();
-      $scope.mediastartespiel1.setVolume('0.6');
+      $scope.mediastartespiel1.setVolume('1.0');
     }
 
     function goto_spiel1() {
       $scope.mediastartespiel1.release();
+      $scope.showmentor=false;
       $state.go('spiel1');
     }
 
 })
 .controller('Spiel1Ctrl', function($scope,  $ionicPlatform, $cordovaMedia, $state, $timeout) {
 
+$scope.showmentor=false;
+$scope.showmentorbravo=false;
 $scope.spiele=[];
 $scope.spieleview=[];
 $scope.tierfinden='';
@@ -171,6 +178,13 @@ var tier7 = {
 $scope.spiele.push(tier7);
 
 
+$scope.hilfe = function() {
+  $scope.showmentor=true;
+  $timeout(function () {
+      $scope.showmentor=false;
+    }, 3500);
+  $scope.sounds[$scope.randomid].play();
+}
 
 $scope.answer = function(src) {
 
@@ -188,7 +202,11 @@ $scope.answer = function(src) {
               }, 500);
             }, 500);
     }, 500);
-
+    $scope.showmentorbravo=true;
+    $timeout(function () {
+        $scope.showmentorbravo=false;
+        $timeout(function () {$scope.showmentor=true;}, 1200);
+      }, 2400);
     $scope.bravosound.play();
   }
   else{
@@ -222,8 +240,14 @@ var shuffleArray = function(array) {
 }
 
 function goto_newspiel() {
+
+  $scope.showmentor=true;
+
   $scope.randomid = getRandomInt(1, 8);
   //$scope.play('/android_asset/www/sounds/' + $scope.sounds[$scope.randomid]);
+  $timeout(function () {
+      $scope.showmentor=false;
+    }, 3500);
   $scope.sounds[$scope.randomid].play();
 }
 

www/templates/home.html

@@ -6,6 +6,8 @@
         <img class="myborder" src="img/elefant.jpg" height="128" width="128" ng-click="starte_spiel1()">
       </div>
     </div>
-
+    <div class="mentorborder" ng-show="showmentor">
+        <div class="mentor"></div>
+    </div>
   </ion-content>
 </ion-view>

www/templates/spiel1.html

@@ -8,6 +8,16 @@
                 <br>
             </div>
     </div>
-
+    <div class="row" style="font-size: 12px;" >
+        <div style="width: 100%;  text-align: center;" class="col">
+                <img class="myborder animated" src="img/mentorhelp.png" width="64" height="64" alig="center" ng-click="hilfe()">
+        </div>
+    </div>
+    <div class="mentorborder" ng-show="showmentor">
+        <div class="mentor"></div>
+    </div>
+    <div class="mentorborderbravo" ng-show="showmentorbravo">
+        <div class="mentorbravo"></div>
+    </div>
   </ion-content>
 </ion-view>