mperlet/index.html

## index.html
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stadt-Land-Fluss</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Kameron' rel='stylesheet' type='text/css'>
    <!-- Bootstrap -->
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');
var audiothink = new Audio('http://www.tvjukebox.net/themes/j/Jeopardy%20(Think%20Music%20-%20Version%201).mp3');
var wait = true;
$(document).ready(function () {

    $('.spinner').hide();
    $('body').keypress(function(){ main(); });
$('body').bind('mousedown touchstart', function () {
main();
});
});


function main(){
	if(wait) {
	wait = !wait;
        $('.spinner').show();
        audiothink.play();
        $('#letter').hide();
        setTimeout(shake, 5000 + Math.floor(Math.random()*20000));
	}
}

function rand_el() {
    var item = alphabet[Math.floor(Math.random()*alphabet.length)];
    $('#letter').text(item.toUpperCase());
    $('#letter').show();
    return item;
}

function shake(){
    var item = rand_el();
    var index = alphabet.indexOf(item);
    if (index > -1) {
        alphabet.splice(index, 1);
    }
    $('#alphabet').val(alphabet.join(""));
    if(alphabet.length > 0) {
    $('#letter').text(item.toUpperCase());
    } else {
    $('#letter').text("?");
    }
        $('.spinner').hide();
        audiothink.pause();
        audiothink.currentTime = 0;
        new Audio('https://www.wou.edu/~tbafarat06/1001%20Sound%20Effects/Animals/Chicken%20Cluck.wav').play();
        $('#letter').show();
    wait = true;
}

</script>
<style>
body {background-color: black;    overflow:hidden;
}
.letter-wrapper {
  position: relative;
  min-height: 120px;
  display: block;
  font-size:60vw;
  margin-top:-25%;
  font-family: 'Kameron', serif;
  color:white;
}

.letter {
  position: absolute;
  min-height: 100px;
  top: 50%;
  left: 25%;
  right: 0;
  bottom: 0;
}
/*<![CDATA[*/
    .spinner {
    margin: 200px auto;
    width: 200px;
    height: 200px;
    position: relative;
    }

    .container1 > div, .container2 > div, .container3 > div {
    width: 30px;
    height: 30px;
    background-color: #333;

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }

    .spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    }

    .container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    }

    .container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    }

    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }

    .container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
    }

    .container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }

    .container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }

    .container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }

    .container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
    }

    .container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
    }

    .container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    }

    .container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
    }

    .container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
    }

    .container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
    }

    .container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
    }

    @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
    }

    @keyframes bouncedelay {
    0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
    }
    /*]]>*/

</style>
</head>
  <body>
<div class="spinner">
            <div class="spinner-container container1">
                <div class="circle1"></div>

                <div class="circle2"></div>

                <div class="circle3"></div>

                <div class="circle4"></div>
            </div>

            <div class="spinner-container container2">
                <div class="circle1"></div>

                <div class="circle2"></div>

                <div class="circle3"></div>

                <div class="circle4"></div>
            </div>

            <div class="spinner-container container3">
                <div class="circle1"></div>

                <div class="circle2"></div>

                <div class="circle3"></div>

                <div class="circle4"></div>
            </div>
        </div>
<div class="letter-wrapper" id="char" >
<div class="letter" id="letter">?</div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Stadt-Land-Fluss</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Kameron' rel='stylesheet' type='text/css'>
	<!-- Bootstrap -->
	<!-- Das neueste kompilierte und minimierte CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

	<!-- Optionales Theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

	<!-- Das neueste kompilierte und minimierte JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');
	var audiothink = new Audio('http://www.tvjukebox.net/themes/j/Jeopardy%20(Think%20Music%20-%20Version%201).mp3');
	var wait = true;
	$(document).ready(function () {

	$('.spinner').hide();
	$('body').keypress(function(){ main(); });
	$('body').bind('mousedown touchstart', function () {
	main();
	});
	});


	function main(){
	if(wait) {
	wait = !wait;
	$('.spinner').show();
	audiothink.play();
	$('#letter').hide();
	setTimeout(shake, 5000 + Math.floor(Math.random()*20000));
	}
	}

	function rand_el() {
	var item = alphabet[Math.floor(Math.random()*alphabet.length)];
	$('#letter').text(item.toUpperCase());
	$('#letter').show();
	return item;
	}

	function shake(){
	var item = rand_el();
	var index = alphabet.indexOf(item);
	if (index > -1) {
	alphabet.splice(index, 1);
	}
	$('#alphabet').val(alphabet.join(""));
	if(alphabet.length > 0) {
	$('#letter').text(item.toUpperCase());
	} else {
	$('#letter').text("?");
	}
	$('.spinner').hide();
	audiothink.pause();
	audiothink.currentTime = 0;
	new Audio('https://www.wou.edu/~tbafarat06/1001%20Sound%20Effects/Animals/Chicken%20Cluck.wav').play();
	$('#letter').show();
	wait = true;
	}

	</script>
	<style>
	body {background-color: black; overflow:hidden;
	}
	.letter-wrapper {
	position: relative;
	min-height: 120px;
	display: block;
	font-size:60vw;
	margin-top:-25%;
	font-family: 'Kameron', serif;
	color:white;
	}

	.letter {
	position: absolute;
	min-height: 100px;
	top: 50%;
	left: 25%;
	right: 0;
	bottom: 0;
	}
	/<![CDATA[/
	.spinner {
	margin: 200px auto;
	width: 200px;
	height: 200px;
	position: relative;
	}

	.container1 > div, .container2 > div, .container3 > div {
	width: 30px;
	height: 30px;
	background-color: #333;

	border-radius: 100%;
	position: absolute;
	-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	animation: bouncedelay 1.2s infinite ease-in-out;
	/* Prevent first frame from flickering when animation starts */
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	.spinner .spinner-container {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.container2 {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	}

	.container3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
	}

	.circle1 { top: 0; left: 0; }
	.circle2 { top: 0; right: 0; }
	.circle3 { right: 0; bottom: 0; }
	.circle4 { left: 0; bottom: 0; }

	.container2 .circle1 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
	}

	.container3 .circle1 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
	}

	.container1 .circle2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
	}

	.container2 .circle2 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	}

	.container3 .circle2 {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
	}

	.container1 .circle3 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
	}

	.container2 .circle3 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
	}

	.container3 .circle3 {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
	}

	.container1 .circle4 {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
	}

	.container2 .circle4 {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
	}

	.container3 .circle4 {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
	}

	@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0.0) }
	40% { -webkit-transform: scale(1.0) }
	}

	@keyframes bouncedelay {
	0%, 80%, 100% {
	transform: scale(0.0);
	-webkit-transform: scale(0.0);
	} 40% {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	}
	}
	/]]>/

	</style>
	</head>
	<body>
	<div class="spinner">
	<div class="spinner-container container1">
	<div class="circle1"></div>

	<div class="circle2"></div>

	<div class="circle3"></div>

	<div class="circle4"></div>
	</div>

	<div class="spinner-container container2">
	<div class="circle1"></div>

	<div class="circle2"></div>

	<div class="circle3"></div>

	<div class="circle4"></div>
	</div>

	<div class="spinner-container container3">
	<div class="circle1"></div>

	<div class="circle2"></div>

	<div class="circle3"></div>

	<div class="circle4"></div>
	</div>
	</div>
	<div class="letter-wrapper" id="char" >
	<div class="letter" id="letter">?</div>
	</div>
	</body>
	</html>