Skip to content
Snippets Groups Projects
Commit f1d6db9d authored by Richard Torenvliet's avatar Richard Torenvliet
Browse files

Add the info in case of good result

parent 7c33bbca
No related branches found
No related tags found
No related merge requests found
...@@ -6,8 +6,7 @@ ...@@ -6,8 +6,7 @@
<p class="text-center">try out how it's done</p> <p class="text-center">try out how it's done</p>
<div class="button-modal button-go"> <div class="button-modal button-go">
<a ng-click="start_button.click($event)" <a ng-click="start_button.click($event)" class="button">LET'S GO</a>
class="button">LET'S GO</a>
</div> </div>
</div> </div>
......
...@@ -20,5 +20,15 @@ angular.module('Interactive.game.tapdance.info', [ ...@@ -20,5 +20,15 @@ angular.module('Interactive.game.tapdance.info', [
}) })
.controller( 'infoCtrl', function IndexController($scope, game) { .controller( 'infoCtrl', function IndexController($scope, game) {
$scope.info_popup = {};
$scope.show_info = true;
$scope.info_popup.click = function(event) {
$scope.show_info = false;
$scope.show_bg = true;
setTimeout(function() {
$scope.show_bye = true;
$scope.$apply();
}, 3000);
};
}); });
<div class="game-background"> <div class="game-background">
<img class="bg-image" src="/assets/bg_better.jpg" alt='bg'/> <img ng-show="show_info" class="bg-image" src="/assets/bg_better_dark.jpg" alt='bg'/>
<div class="popup-info"> <div ng-show="show_info" ng-click="info_popup.click($event)" class="popup-info" >
<div class="popup-info-header"> <div class="popup-info-header">
<h1 >DID YOU KNOW</h1> <h1 >DID YOU KNOW</h1>
</div> </div>
<div class="popup-info-content"> <div class="popup-info-content">
<p>In 2014 H&M launched its first Conscious Denim collection that <p>In 2014 H&M launched its first Conscious Denim collection that
on average uses 56% less water and 58% less engery than comparable on average uses 56% less water and 58% less engery than comparable
denim.</p> denim.
</p>
</div>
</div>
<img ng-show="show_bg" class="bg-image" src="/assets/bg_better.jpg" alt='bg'/>
<div ng-show="show_bye" ng-click="bye_button.click($event)" class="popup-info" >
<div class="popup-info-header">
<h1>SEE YOU LATER</h1>
</div>
<div class="popup-info-content">
<p> You helped your conscience and it now lives in a greener
environment.Tomorrow you will have anotherchance to improve it even
more and get a happier conscience.
</p>
<div class="">
<a class="button">BYE BYE</a>
</div>
</div> </div>
</div> </div>
</div> </div>
src/assets/bg_better.jpg

18.3 KiB | W: | H:

src/assets/bg_better.jpg

23.9 KiB | W: | H:

src/assets/bg_better.jpg
src/assets/bg_better.jpg
src/assets/bg_better.jpg
src/assets/bg_better.jpg
  • 2-up
  • Swipe
  • Onion skin
src/assets/bg_better_dark.jpg

18.3 KiB

...@@ -176,10 +176,10 @@ img.bg-image { ...@@ -176,10 +176,10 @@ img.bg-image {
} }
.popup { .popup {
margin-left: auto;
padding: 0.5em 1em 0.5em 1em;
line-height: 1em; line-height: 1em;
margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0.5em 1em 0.5em 1em;
position: relative; position: relative;
top: 80px; top: 80px;
width: 250px; width: 250px;
...@@ -217,24 +217,18 @@ img.bg-image { ...@@ -217,24 +217,18 @@ img.bg-image {
.popup-info { .popup-info {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 250px;
padding: 1em 1em 0.3em 1em; padding: 1em 1em 0.3em 1em;
top: 55px;
position: relative;
width: @container-width - 20px;
} }
.popup-info-content { .popup-info a.button {
border-radius: 30px; background-color: #d0b745;
padding: 0.3em 1em 0.3em 1em;
color: white; color: white;
background: #e7d878; font-size: 2.0em;
-webkit-border-bottom-right-radius: 30px; font-weight: 600;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
width: 250px;
position: relative;
top: 80px;
margin: 0;
} }
.popup-info-header h1 { .popup-info-header h1 {
...@@ -243,11 +237,9 @@ img.bg-image { ...@@ -243,11 +237,9 @@ img.bg-image {
font-size: 1.9em; font-size: 1.9em;
font-weight: 900; font-weight: 900;
line-height: 1em; line-height: 1em;
margin: 0;
position: relative; padding: 0.8em 0.2em 0.2em 0.2em;
padding: 1em 1em 0.3em 1em;
top: 80px;
width: 250px;
-webkit-border-top-left-radius: 30px; -webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px; -webkit-border-top-right-radius: 30px;
...@@ -258,6 +250,21 @@ img.bg-image { ...@@ -258,6 +250,21 @@ img.bg-image {
border-top-right-radius: 30px; border-top-right-radius: 30px;
} }
.popup-info-content {
color: white;
background: #e7d878;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding: 1em;
font-size: 1.1em;
}
.white { .white {
-moz-border-radius: 30px; -moz-border-radius: 30px;
-webkit-border-radius: 30px; -webkit-border-radius: 30px;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment