 
<!--
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
!!!!!!! POURQUOI TU REGARDES LE CODE SOURCE !!!!!!!
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
!!!!!!! POURQUOI TU REGARDES LE CODE SOURCE !!!!!!!
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
!!!!!!! POURQUOI TU REGARDES LE CODE SOURCE !!!!!!!
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
!!!!!!! POURQUOI TU REGARDES LE CODE SOURCE !!!!!!!
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
###################################################
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>.........</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bennywong.net/wp-content/themes/bennywong.net/jquery.lettering.js"></script>
<script src="http://bennywong.net/wp-content/themes/bennywong.net/textillate.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="http://bennywong.net/wp-content/themes/bennywong.net/animate.css" />
</head>
<body>
    <style>
	@import 'https://fonts.googleapis.com/css?family=Roboto+Mono';
	body{
		padding:0;
		margin:0;
	}
	#question{
		padding:10px 5px;
		height:100%;
		margin: 0 auto;
		text-align:center;
		font-family: 'Roboto Mono', monospace;
		font-size:20px;
		line-height:30px;
	}
	#debut{
		font-size:14px;
		margin-bottom:10px;
		color:#999;
	}
	.lettres{
		font-family: 'Roboto Mono', monospace;
		text-transform:lowercase;
		text-align:center;
		display:inline-block;
		width:30px;
		height:30px;
		border: none;
		border-radius:3px;
		background:#EEE;
	}
	.soulignement{
		border-bottom:1px solid #000;
		display:inline-block;
		margin-right:2px;
	}
	#indice{
		font-style:italic;
		color:#CCC;
		font-size:16px;
	}
	#allez{
		font-family: 'Roboto Mono', monospace;
		border-radius:3px;
		border:1px solid #600;
		padding:10px 20px;
		letter-spacing:1px;
		background:#600;
		color:#333;
	}
	#allez.aller{
		box-shadow: 0 0 8px #900;
		background:#C00;
		color:#FFF;
	}
	.lueur{
		background:#FFF;
		color:#000;
	}
	</style>
    <div id="question">
    <div id="debut">Quelqu'un a dit que:</div>
    <div id="mot_de_passe">
    <em>Oui, oui,<br />
    la crème glacée et le <br /><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-1" placeholder="1" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-2" placeholder="2" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-3" placeholder="3" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-4" placeholder="4" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-5" placeholder="5" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-6" placeholder="6" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-7" placeholder="7" /></span><span class="soulignement"><input type="text" value="" maxlength="1" class="lettres" id="lettre-8" placeholder="8" /></span><br />
sont deux des plusieurs choses essentielles dans la vie!</em>
   	<div id="indice">Indice:<br />le vingt-quatre octobre</div>
	<p><button id="allez">MUAH</button></p>
    </div>
    </div>
    <script>
	$(document).ready(function(e) {
		$('#lettre-1').focus();
		$('.lettres').focus(function(){
			$(this).select();
		});
		$('.lettres').blur(function(){
			var _id = $(this).attr('id');
			if($(this).val()!=''){
				$(this).addClass('lueur');
			}
			var _lettre = _id.replace('lettre-','')*1+1;
			if(_lettre > 8){ 
				$('#allez').addClass('aller');
			}
		});
		var _lettres = '';
        $('#allez').click(function(){
			var _vide = 0;
			var _mot = '';
			$('.lettres').each(function(){
				var _this = $(this).val();
				if(_this==''){
					_vide = 1;
				}
				_mot += _this;
			});
			if(_vide==1){
				alert('Veuillez remplir tous les champs vides.');
				$('.lettres').each(function(){
				var _this = $(this).val();
				if(_this==''){
					$(this).focus();
					return (false);
				}
			});
			}else{
				window.location.href = '?&mot='+_mot;
			}
		});
    });
	</script>
</body>
</html>