add badges bar

css/level-selector.css

@@ -39,13 +39,21 @@
 
 #badges {
     text-align: center;
-    vertical-align: top;
+    vertical-align: middle;
     position: fixed;
     left: 0px;
     right: 0px;
     bottom: 0px;
+    font-size: 4em;
 }
 
+.badge {
+    vertical-align: middle;
+}
+
+.ylogo {
+    width: 1em;
+}
 
 .instructionGreen {
     color: darkgreen;

css/pexeso.css

@@ -51,7 +51,7 @@ BODY, HTML {
 	text-align:left;
 }
 
-#navigationBar {
+.navigationBar {
 	background: #75755f;
 	font-size: xx-large;
 	padding: 2px 10px 2px 10px;
@@ -82,7 +82,7 @@ BODY, HTML {
     background:rgba(0,0,0,0.7);
     text-align: center;
     color: white;
-    height: 100%;
+    height: 10em;
 }
 
 #congratulation {
@@ -100,6 +100,15 @@ BODY, HTML {
 	text-align: center;
 }
 
+.levelCompleteButtonsFinal {
+	position: absolute;
+	margin-top: 10em;
+	width: 100%;
+	text-align: center;
+	height: 10em;
+	background:rgba(0,0,0,0.7);
+}
+
 .levelButton {
     font-size: 1.2em;
     background: gray;
@@ -132,3 +141,37 @@ BODY, HTML {
 .signature {
 	padding-bottom: 2em;
 }
+
+.info {
+	color: white;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	width: 100%;
+	height: 100%;
+	font-size: 1.5em;
+	text-align: left;
+	background: rgba(0,0,0,0.7);
+	overflow: auto;
+}
+
+.infoContent {
+	padding-left: 2em;
+}
+
+a {
+	color: yellow;
+}
+
+a:hover {
+	color: orange;
+}
+
+a.link {
+	color: purple;
+}
+
+.link {
+	cursor: pointer;
+}

index.html

@@ -39,7 +39,9 @@
     
     <h2 class="levelSelectorTitle">How to play</h2>
     <div id="infoGraphics">
-        <div><i class="fa fa-picture-o instructionGreen"></i> + <i class="fa fa-picture-o instructionGreen"></i> = <i class="fa fa-check-square-o instructionGreen"></i></div>
+        <div><i class="fa fa-picture-o instructionGreen"></i> 
+        + <i class="fa fa-picture-o instructionGreen"></i> 
+        = <i class="fa fa-check-square-o instructionGreen"></i></div>
     </div>
     <h2 class="levelSelectorTitle">Select level</h2>
     <div ng-repeat="level in levelLock" class="levelItem {{level.state}}"  ng-click="startLevel(level.state, $index)">
@@ -47,11 +49,46 @@
         <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
     </div>
     <div class="clearfix"></div>
+    
+    <!-- Badges -->
+    <div id="badges" ng-show="isLevelSelectorVisible">
+        <span class="link" ng-click="showInfo()"><i class="fa fa-info-circle"></i></span>
+        
+        <a class="link" href="https://github.com/ysoftdevs/pf2015">
+            <i class="fa fa-github"></i></a>
+
+        <span class="badge">
+            <a class="link" href="http://www.ysofters.com/2014/12/30/pf2015">
+                <img class="ylogo" alt="Read more at YSofters blog"
+                     src="img/ysoft-logo.png" /></a>
+        </span>
+    </div>
+    
+    <!-- Info -->
+    <div class="info" ng-show="isInfoVisible" ng-click="hideInfo()">
+        <div class="navigationBar">
+        <a class="navigationButton">
+            <i class="fa fa-arrow-left" ></i></a>
+        </div>
+        <div class="infoContent">
+            <h2>PF 2015 - Pexeso Puzzle Game</h2>
+            <div>Author: <a href="http://georgik.sinusgear.com">Juraj Michálek</a></div>
+            <div>Source code: <a href="https://github.com/ysoftdevs/pf2015">github.com/ysoftdevs/pf2015</a></div>
+            <div>Technologies: 
+                <ul>
+                    <li><a href="https://angularjs.org">AngularJS 1.3</a></li>
+                    <li><a href="https://github.com/zwacky/angular-flippy">Angular Flippy</a></li>
+                    <li><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li>
+                </ul>
+            </div>
+            <div>Artwork: CC OpenClips - Pixbay.com (<a href="img/cards/images.txt">list</a>)</div>
+        </div>
+    </div>
 </div>
 
 <!-- Game board -->
 <div ng-controller="PexesoController" ng-show="isLevelVisible">
-    <div id="navigationBar">
+    <div class="navigationBar">
         <a class="navigationButton" ng-click="cancelLevel()">
             <i class="fa fa-arrow-left" ></i></a>
         <div id="levelTitle"><span id="levelWord">Level </span>{{currentLevel.levelName}}</div>
@@ -92,12 +129,12 @@
 
 <!-- Level complete panel -->
 <div class="levelComplete" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
-   <div id="congratulation">Congratulations!</div>
+    <div id="congratulation" >Congratulations!</div>
-        <div class="levelCompleteButtons">
+    <div class="levelCompleteButtons" ng-hide="isFinalScreenVisible">
         <a class="levelButton" id="replayButton" ng-click="restartLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-repeat"></i> Play again</a>
         <a class="levelButton" id="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i> Next level</a>
     </div>
-        <div class="levelCompleteButtons" ng-show="isFinalScreenVisible">
+    <div class="levelCompleteButtonsFinal" ng-show="isFinalScreenVisible">
         <div>Wishing you all the best this New Year!</div>
         <div class="signature"> - Juraj</div>
         <div><a class="levelButton" id="webButton" ng-click="openUrl('http://www.ysofters.com/2014/12/30/pf2015')">

js/level-selector-controller.js

@@ -3,6 +3,8 @@ angular.module('level-selector', ['LocalStorageModule'])
     
     $scope.isLevelSelectorVisible = true;
     
+    $scope.isInfoVisible = false;
+    
     $scope.levelLock = [
             {state:'unlocked', text:'1'},
             {state:'locked', text:'2'},
@@ -67,6 +69,14 @@ angular.module('level-selector', ['LocalStorageModule'])
         }
     };
 
+    $scope.showInfo = function() {
+        $scope.isInfoVisible = true;
+    };
+    
+    $scope.hideInfo = function() {
+        $scope.isInfoVisible = false;
+    };
+
     var init = function() {
         $scope.loadConfiguration();  
     };