From 5659ff118ebedbd211764b83c8d2638db6987cce Mon Sep 17 00:00:00 2001
From: Juraj Michalek <juraj.michalek@ysoft.com>
Date: Tue, 30 Dec 2014 17:32:05 +0000
Subject: [PATCH] add badges bar

---
 css/level-selector.css          |  10 ++++-
 css/pexeso.css                  |  49 +++++++++++++++++++++++--
 img/ysoft-logo.png              | Bin 0 -> 5646 bytes
 index.html                      |  63 +++++++++++++++++++++++++-------
 js/level-selector-controller.js |  10 +++++
 5 files changed, 115 insertions(+), 17 deletions(-)
 create mode 100644 img/ysoft-logo.png

diff --git a/css/level-selector.css b/css/level-selector.css
index 7ee68e6..6805944 100644
--- a/css/level-selector.css
+++ b/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;
diff --git a/css/pexeso.css b/css/pexeso.css
index 2cf91a4..f4e66b6 100644
--- a/css/pexeso.css
+++ b/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;
@@ -131,4 +140,38 @@ BODY, HTML {
 
 .signature {
 	padding-bottom: 2em;
-}
\ No newline at end of file
+}
+
+.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;
+}
diff --git a/img/ysoft-logo.png b/img/ysoft-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8168a4f2ff47a2de52113b705dcf20157e111577
GIT binary patch
literal 5646
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
H&%^!;hr5lH

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 9dc353b..5666ef8 100644
--- a/index.html
+++ b/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,19 +129,19 @@
 
 <!-- Level complete panel -->
 <div class="levelComplete" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
-   <div id="congratulation">Congratulations!</div>
-        <div class="levelCompleteButtons">
-            <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>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')">
-                <i class="fa fa-thumbs-up" ></i> Visit PF 2015 website</a>
-            </div>
+    <div id="congratulation" >Congratulations!</div>
+    <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="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')">
+            <i class="fa fa-thumbs-up" ></i> Visit PF 2015 website</a>
         </div>
     </div>
+    </div>
 </div>
 
 </body>
diff --git a/js/level-selector-controller.js b/js/level-selector-controller.js
index 9a2437e..461e155 100644
--- a/js/level-selector-controller.js
+++ b/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();  
     };