mirror of
https://github.com/ysoftdevs/pf2015.git
synced 2026-01-11 14:30:52 +01:00
149 lines
6.1 KiB
HTML
149 lines
6.1 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 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>
|
|
<h2 class="levelSelectorTitle">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>
|
|
|
|
<!-- 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.rocks">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 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>
|
|
</div>
|
|
|
|
<!-- Start level instructions -->
|
|
<div class="startLevelInstructions" ng-show="isStartConfirmation">
|
|
<div class="instructionSymbols">
|
|
<span ng-repeat="icon in instructions track by $index"> <i class="fa" ng-class="icon"></i></span>
|
|
</div>
|
|
<div id="startLevel" class="levelButton" ng-click="playLevel()" >
|
|
<i class="fa fa-flag-checkered"></i> Start</div>
|
|
</div>
|
|
|
|
<div id="mainContent" ng-style="containerStyle" ng-hide="isStartConfirmatioxn">
|
|
|
|
<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 class="levelComplete" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
|
|
<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>
|
|
</html>
|