Add the info in case of good result

src/app/game/tapdance/tapdance-game.tpl.html

@@ -6,8 +6,7 @@
         <p class="text-center">try out how it's done</p>
 
         <div class="button-modal button-go">
-            <a  ng-click="start_button.click($event)"
-                class="button">LET'S GO</a>
+            <a ng-click="start_button.click($event)" class="button">LET'S GO</a>
         </div>
     </div>
 

src/app/game/tapdance/tapdance-info.js

@@ -20,5 +20,15 @@ angular.module('Interactive.game.tapdance.info', [
 })
 
 .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);
+    };
 });

src/app/game/tapdance/tapdance-info.tpl.html

 <div class="game-background">
-    <img class="bg-image" src="/assets/bg_better.jpg" alt='bg'/>
-    <div class="popup-info">
+    <img ng-show="show_info" class="bg-image" src="/assets/bg_better_dark.jpg" alt='bg'/>
+    <div ng-show="show_info" ng-click="info_popup.click($event)" class="popup-info" >
         <div class="popup-info-header">
             <h1 >DID YOU KNOW</h1>
         </div>
         <div class="popup-info-content">
             <p>In 2014 H&M launched its first Conscious Denim collection that
             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>

src/less/main.less

@@ -176,10 +176,10 @@ img.bg-image {
 }
 
 .popup {
-    margin-left: auto;
-    padding: 0.5em 1em 0.5em 1em;
     line-height: 1em;
+    margin-left: auto;
     margin-right: auto;
+    padding: 0.5em 1em 0.5em 1em;
     position: relative;
     top: 80px;
     width: 250px;
@@ -217,24 +217,18 @@ img.bg-image {
 .popup-info {
     margin-left: auto;
     margin-right: auto;
-    width: 250px;
     padding: 1em 1em 0.3em 1em;
+    top: 55px;
+    position: relative;
+    width: @container-width - 20px;
 }
 
-.popup-info-content {
-    border-radius: 30px;
+.popup-info a.button {
+    background-color: #d0b745;
+    padding: 0.3em 1em 0.3em 1em;
     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;
-    width: 250px;
-    position: relative;
-    top: 80px;
-    margin: 0;
+    font-size: 2.0em;
+    font-weight: 600;
 }
 
 .popup-info-header h1 {
@@ -243,11 +237,9 @@ img.bg-image {
     font-size: 1.9em;
     font-weight: 900;
     line-height: 1em;
+    margin: 0;
 
-    position: relative;
-    padding: 1em 1em 0.3em 1em;
-    top: 80px;
-    width: 250px;
+    padding: 0.8em 0.2em 0.2em 0.2em;
 
     -webkit-border-top-left-radius: 30px;
     -webkit-border-top-right-radius: 30px;
@@ -258,6 +250,21 @@ img.bg-image {
     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 {
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;