init commit

.gitignore

+js/lib/
+css/helper.css
+css/normalize.min.css
\ No newline at end of file

css/main.css

+@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 {
+}

index.html

+<!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

js/TimeManager.js

+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

js/bind.js

+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

js/getPhotos.js

+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
+}