Commit 867854de by christian

init commit

parents
js/lib/
css/helper.css
css/normalize.min.css
\ No newline at end of file
@import "normalize.min.css";
@import "helper.css";
/*MAIN STYLE*/
/*clearfix, image-replacement etc. prepared in -> helper.css*/
@keyframes loading {
0% {
color: #e35041;
}
10% {
color: rgba(0, 0, 0, 0.6);
}
20% {
color: #e35041;
}
30% {
color: rgba(0, 0, 0, 0.6);
}
40% {
color: #e35041;
}
50% {
color: rgba(0, 0, 0, 0.6);
}
60% {
color: #e35041;
}
70% {
color: rgba(0, 0, 0, 0.6);
}
80% {
color: #e35041;
}
90% {
color: rgba(0, 0, 0, 0.6);
}
100% {
color: #e35041;
}
}
@-webkit-keyframes loading {
0% {
color: #e35041;
}
10% {
color: rgba(0, 0, 0, 0.6);
}
20% {
color: #e35041;
}
30% {
color: rgba(0, 0, 0, 0.6);
}
40% {
color: #e35041;
}
50% {
color: rgba(0, 0, 0, 0.6);
}
60% {
color: #e35041;
}
70% {
color: rgba(0, 0, 0, 0.6);
}
80% {
color: #e35041;
}
90% {
color: rgba(0, 0, 0, 0.6);
}
100% {
color: #e35041;
}
}
@-moz-keyframes loading {
0% {
color: #e35041;
}
10% {
color: rgba(0, 0, 0, 0.6);
}
20% {
color: #e35041;
}
30% {
color: rgba(0, 0, 0, 0.6);
}
40% {
color: #e35041;
}
50% {
color: rgba(0, 0, 0, 0.6);
}
60% {
color: #e35041;
}
70% {
color: rgba(0, 0, 0, 0.6);
}
80% {
color: #e35041;
}
90% {
color: rgba(0, 0, 0, 0.6);
}
100% {
color: #e35041;
}
}
@keyframes ready {
0% {
color: #2ac56c;
}
95% {
color: #2ac56c;
}
100% {
color: #2ac56c;
}
}
@-webkit-keyframes ready {
0% {
color: #2ac56c;
}
95% {
color: #2ac56c;
}
100% {
color: #2ac56c;
}
}
@-moz-keyframes ready {
0% {
color: #2ac56c;
}
95% {
color: #2ac56c;
}
100% {
color: #2ac56c;
}
}
html {
background: #444;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#slider {
position: absolute;
bottom: 0;
width: 1024px;
height: 768px;
left: 0;
}
#container {
width: 1024px;
height: 848px;
background: #444;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(50%, 50%);
}
.hide-container {
position: absolute;
background: #444;
left: 50%;
top: 50%;
width: 1024px;
height: 848px;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(50%, 50%);
z-index: 2020;
display: none;
}
.slidebox {
width: 100%;
height: 100%;
/*background-size: cover;*/
background-repeat: no-repeat;
}
.ul {
/*overflow: hidden*/
height: 100%;
margin: 0;
padding: 0;
}
.ul:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
width: 0;
}
.li {
float: left;
}
#status-bar {
position: absolute;
top: 0;
z-index: 50000;
left: 0;
width: 1024px;
height: 80px;
}
.hint {
position: absolute;
right: 0;
top: 0;
height: 50px;
background: #01ffc0;
border: 0;
color: #444;
font-weight: 700;
text-transform: uppercase;
outline: 0 none;
width: 12%;
}
/*#timer span{
color: #fff;
width: 30%;
line-height: 50px;
height: 50px;
display: inline-block;
font-size: 1.15em;
text-align: center;
text-shadow: 1px 1px 0px #01CC9A;
}*/
.hint span {
text-shadow: 1px 1px 0px #01CC9A;
color: #fff;
line-height: 45px;
margin: 0;
padding: 0;
font-size: 1.15em;
}
#hint-text p {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 3em;
}
#hint-text {
top: 50%;
left: 50%;
z-index: 5000;
display: none;
position: absolute;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(50%, 50%);
width: 1024px;
padding: 1.2em 0;
background: #01ffc0;
}
.player-state {
position: absolute;
z-index: 2000;
display: inline;
font-weight: 700;
font-size: 1em;
font-family: Arial;
color: rgba(255, 255, 255, 0.8);
bottom: 0;
left: 0;
height: 30px;
}
.player-state p {
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
.player-state::before {
content: 'player state: ';
color: rgba(255, 255, 255, 0.5);
line-height: 30px;
}
#score {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin-right: 5%;
}
#score::before {
content: 'SCORE: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#best {
width: 20%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin: 0 5% 0 0;
}
#best::before {
content: 'BEST: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer {
width: 12%;
line-height: 50px;
height: 50px;
background: #01ffc0;
float: left;
margin-right: 5%;
}
#timer span {
color: #fff;
width: 30%;
line-height: 50px;
height: 50px;
display: inline-block;
font-size: 1.15em;
text-align: center;
text-shadow: 1px 1px 0px #01CC9A;
}
#timer::before {
content: 'TIME: ';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
#timer::after {
content: 'SEC.';
color: rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
font-weight: bold;
}
.ready-state {
display: inline;
}
.ready-state#render {
color: #01ffc0;
}
/* Progress bar */
.progress {
width: 0%;
height: 5em;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
background: rgba(0, 0, 0, 0.1);
z-index: 2030;
}
.progress::before {
position: absolute;
top: auto;
width: 100%;
height: inherit;
content: '';
}
.tiles {
-webkit-transition: -webkit-transform .6s ease, opacity .2s .55s linear;
transition: transform .6s ease, opacity .2s .5s linear;
}
.flip {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.player img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.player {
z-index: 5000;
}
.ready-state#wait {
animation: loading ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: loading ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: loading ease 2s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: loading ease 2s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: loading ease 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.ready-state#done {
animation: ready ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation: ready ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: ready ease 1s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-o-animation: ready ease 1s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-ms-animation: ready ease 1s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode: forwards;
}
.ready-state#done {
}
<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<title>CityGuess alpha</title>
<meta name="description" content="Guess the city by its skyline">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/modernizr-2.6.2.min.js"></script> <!--normal layout-->
</head>
<body id="body">
<div id="hint-text"><p></p></div>
<div id="player" class="player">
<img alt="play" id="play" src="http://www.tympanus.net/PausePlay/images/play.png" width="100" height="100" style="display:none;" />
<img alt="pause" id="pause" src="http://www.tympanus.net/PausePlay/images/pause.png" width="100" height="100" style="display:none;" />
</div>
<div id="container"><div class="progress"></div>
<div class="hide-container">
</div>
<div class="slides" id="slider">
<div class="slidebox"></div>
</div>
<div id="status-bar">
<div id="score"></div><div id="best"></div><div id="timer"></div>
<div class="player-state"></div><button class="hint"></button>
</div>
</div>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script src="/js/TimeManager.js"></script>
<script src="/js/bind.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
\ No newline at end of file
function TimeManager(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function () { },
counterEnd = options.onCounterEnd || function () { };
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
};
\ No newline at end of file
Function.prototype.bind = Function.prototype.bind || function (target) {
var self = this;
return function (args) {
if (!(args instanceof Array)) {
args = [args];
}
self.apply(target, args);
};
};
\ No newline at end of file
function db() {
var x = arguments;
var p = 'DEBUG from ' + (new Error).stack.split("\n")[2];
console.log.apply(console, [p].concat(Array.prototype.slice.call(x)));
}
function cl() {
var x = arguments;
var p = 'LOG: ';
console.log.apply(console, [p].concat(Array.prototype.slice.call(x)));
}
function CityGuess(el, lvl) {
'use strict';
this.element = el;
this.level = lvl;
this.terms = 'world_skylines';
this.apiKey = '4a4db211fadccefa706aeb033fdb64dd';
this.flickUrl = 'https://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key=' + this.apiKey;
this.imgUrl = this.flickUrl + '&sort=random&method=flickr.photos.search&text=' + this.terms + '&per_page=250&page=' + Math.ceil(Math.floor(Math.random() * 100)) + '&tag_mode=all&media=photos&accuracy=11&has_geo=1';
this.map = {
39: 1,
37: 2,
32: 3
};
this.setup(this.element, this.level);
//&per_page=10
}
CityGuess.prototype.setup = function (slides, size) {
// For the sake of simplicity, some jobs are going to jquery..
var tileSizes = {
'small': 12,
'medium': 8,
'big': 4
},
winW = $(window).width(),
winH = $(window).height(),
$slideContent = slides,
$slideUl = $('<ul class="ul"/>');
this.tagArr = [];
$($slideContent).css({
width: '100%',
height: winH,
background: '#eee'
});
//$slideUl.css({
// margin: 0,
// padding: 0,
// width: '100%',
// height: winH,
// listStyle: 'none'
//});
// start Ajax action
this.getAjax($slideContent, $slideUl, this.tagArr);
} // end setup
CityGuess.prototype.getAjax = function ($slideContent, $slideUl, tagArr) {
var self = this;
var flickURL = this.flickUrl;
$.getJSON(this.imgUrl, function (data) {
var j = Math.floor(Math.random() * 251);
var i = Math.floor(Math.random() * 100);
i = Math.ceil(i), j = Math.ceil(j);
var z = data.photos.photo[j];
var $slideBox = $('<div />'), $slideLi = $('<li class="li" />');
var imgSRC = 'http://farm' + z.farm + '.static.flickr.com/' + z.server + '/' + z.id + '_' + z.secret + '_m.jpg',
imgID = z.id,
tagUrl = flickURL + '&method=flickr.photos.getInfo&photo_id=' + imgID,
geoUrl = flickURL + '&method=flickr.photos.geo.getLocation&accuracy=11&has_geo=1&photo_id=' + imgID,
sizeUrl = flickURL + '&method=flickr.photos.getSizes&photo_id=' + imgID + '&extras=url_o';
$.getJSON(tagUrl, function (data) {
if (data.stat != 'fail') {
data.photo.tags.tag.forEach(function (i) {
self.tagArr.push(i.raw)
});
}
cl(self.tagArr)
$.getJSON(geoUrl, function (data) {
if (data.stat != 'fail') {
cl('geo', data.photo.location.locality._content)
cl('geo2', data.photo.location)
if (data.photo.location.accuracy == 11) {
$.getJSON(geoUrl, function (data) {
cl('bloorb')
}());
}
else {
$.getJSON(sizeUrl, function (data) {
if (data.stat != 'fail') {
var src = data.sizes.size.pop().source;
render(src)
}
});
}
}
});
});
function render(src) {
$slideBox.css({
backgroundImage: 'url(' + src + ')'
});
}
$slideBox.addClass('slidebox');
$slideBox.css({
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
width: '100%',
height: $(window).height(),
maxHeight: $(window).height()
});
//$slideLi.css({
// display: 'block',
// float: 'left',
// margin: 0,
// padding: 0,
// width: '100%',
// height: $(window).height()
//});