mirror of
https://github.com/ysoftdevs/pf2015.git
synced 2026-01-11 22:41:36 +01:00
100 lines
3.8 KiB
HTML
100 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us" ng-app="app">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>PF2015</title>
|
|
<meta name="author" content="Juraj Michálek" />
|
|
<meta name="description" content="PF 2015 greeting - card puzzle game - find similar cards" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
|
|
|
|
<script type="text/javascript" src="js/angularjs/1.3.7/angular.min.js"></script>
|
|
|
|
<script type="text/javascript" src="js/level-data-service.js"></script>
|
|
<script type="text/javascript" src="js/pexeso-controller.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/pexeso.css" type="text/css" />
|
|
|
|
<!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> -->
|
|
<link href="css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<script src="js/angular-local-storage.min.js"></script>
|
|
|
|
<script type="text/javascript" src="js/level-selector-controller.js"></script>
|
|
<link rel="stylesheet" href="css/level-selector.css" type="text/css" />
|
|
|
|
<script type="text/javascript" src="js/level-complete-controller.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/flippy.css" />
|
|
<script type="text/javascript" src="js/flippy.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Level Selector -->
|
|
<div id="levelSelector"
|
|
ng-controller="LevelSelectorController"
|
|
ng-show="isLevelSelectorVisible"
|
|
>
|
|
|
|
<h2>How to play:</h2>
|
|
<div id="infoGraphics">
|
|
<!--<img src="img/info.png"/>-->
|
|
</div>
|
|
<h2>Select level:</h2>
|
|
<div ng-repeat="level in levelLock" class="levelItem {{level.state}}" ng-click="startLevel(level.state, $index)">
|
|
<div ng-show="level.state == 'unlocked'" >{{level.text}}</div>
|
|
<div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
|
|
<!-- Game board -->
|
|
<div ng-controller="PexesoController" ng-show="isLevelVisible">
|
|
<div id="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>
|
|
</div>
|
|
|
|
<div id="mainContent" ng-style="containerStyle">
|
|
|
|
<flippy ng-repeat="card in board"
|
|
class="fancy"
|
|
ng-class="card.flipState"
|
|
ng-click="selectCard(card)"
|
|
ng-style="cardStyle"
|
|
flip-duration="800"
|
|
timing-function="ease-in-out">
|
|
|
|
<flippy-front>
|
|
<span class="cardHelper"></span><img ng-src="img/cards/question.png">
|
|
</flippy-front>
|
|
|
|
<flippy-back>
|
|
<span class="cardHelper" ng-show="card.cardType == 'picture'"></span><img ng-src="img/cards/{{card.image}}.png" ng-show="card.cardType == 'picture'">
|
|
<div class="textCard" ng-hide="card.cardType == 'picture'"><div class="textCardLabel">{{card.label}}</div></div>
|
|
</flippy-back>
|
|
|
|
|
|
</flippy>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level complete panel -->
|
|
<div id="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">
|
|
<a class="levelButton" id="webButton" ng-click="openUrl('http://www.ysofters.com/2014/12/30/pf2015')" ng-show="isFinalScreenVisible">
|
|
<i class="fa fa-thumbs-up" ></i> Visit PF 2015 website</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|