Mentor eingebaut, CSS-Queries eingebaut, Hilfe eingebaut, Midi Files
This commit is contained in:
Carsten Hilmer
parent
4535d7751f
commit
379f039d51
30
www/css/htc.css
Normal file
30
www/css/htc.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
84
www/css/ipads.css
Normal file
84
www/css/ipads.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
112
www/css/iphones.css
Normal file
112
www/css/iphones.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
56
www/css/kindle_tablet.css
Normal file
56
www/css/kindle_tablet.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
33
www/css/nexus_tablet.css
Normal file
33
www/css/nexus_tablet.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
86
www/css/samsung.css
Normal file
86
www/css/samsung.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
25
www/css/samsung_tablet.css
Normal file
25
www/css/samsung_tablet.css
Normal file
@ -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) {
|
||||
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
|
||||
BIN
www/img/mentor.png
Normal file
BIN
www/img/mentor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
www/img/mentor.psd
Normal file
BIN
www/img/mentor.psd
Normal file
Binary file not shown.
BIN
www/img/mentor_bravo.png
Normal file
BIN
www/img/mentor_bravo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
www/img/mentor_bravo.psd
Normal file
BIN
www/img/mentor_bravo.psd
Normal file
Binary file not shown.
BIN
www/img/mentorhelp.png
Normal file
BIN
www/img/mentorhelp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -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() {
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
BIN
www/sounds/TORN.MID
Normal file
BIN
www/sounds/TORN.MID
Normal file
Binary file not shown.
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user