<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>
	<script src="js/jquery.js"></script>
	
    <style>
	
	#tlo_pudelka {
		width: 820px;
		height: 530px;
		background: #002;
		margin: 10px auto;
		overflow-y: auto;
	}
	
      #pudelko0, #pudelko1, #pudelko2, #pudelko3, #pudelko4, #pudelko5, #pudelko6, #pudelko7, #pudelko8, #pudelko9 {
        width:60px;
        height:80px;
        perspective:400px;
        -webkit-perspective:400px;
		float: left;
		margin: 20px 10px 15px 10px;
      }

      #karta0, #karta1, #karta2, #karta3, #karta4, #karta5, #karta6, #karta7, #karta8, #karta9 {
        position:relative;
        width:100%;
        height:100%;
        text-align:center;
        transition:1s;
        -webkit-transition:1s;
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
      }

      #pudelko0:hover > #karta0, #pudelko1:hover > #karta1, #pudelko2:hover > #karta2, #pudelko3:hover > #karta3, #pudelko4:hover > #karta4, #pudelko5:hover > #karta5, #pudelko6:hover > #karta6, #pudelko7:hover > #karta7, #pudelko8:hover > #karta8, #pudelko9:hover > #karta9 {
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
      }

      #przod {
        position:absolute;
        width:100%;
        height:100%;
        background: #015;
        box-shadow:0 0 4px 6px #b8eafe inset;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
		text-align: center; 
		font-size: 0.7em; 
		font-family: Mogra, cursive;	
		color: #F88;
      }

      #tyl0, #tyl1, #tyl2, #tyl3, #tyl4, #tyl5, #tyl6, #tyl7, #tyl8, #tyl9 {
        position:absolute;
        width:100%;
        height:100%;
        line-height:80px;
        color:#FED;
        font-size:4em;
        background-color:#000;
        box-shadow:0 0 2px 4px #FFF inset;
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
      }
	  
	 #pamiec_tlo_cyfry {
		 width: 242px;
		 height: 95px;
		 padding: 7px 12px;
		 margin: 5px 5px;
		 background: #005;
		 border: 2px ridge #F00;
		 float: left;
		 display: inline-block;
	 }
	 
	 #pamiec_tlo_cyfry_pokaz {
		 width: 800px;
		 height: 460px;
		 padding: 0;
		 margin: 2px auto;
		 background: #00b;
		 border: 2px ridge #F00;
		 border-radius: 8px 8px 15px 15px;
	 }
	 
	 #pamiec_cyfry_odpowiedz {
		 width: 35px;
		 height: 50px;
		 padding: 0px 5px 5px 5px;
		 margin: 0px 16px 10px 15px;
		 background: #008;
		 color: #FED;
		 font-family: Verdana, sans-serif;	
		 font-size: 3.5em;
		 text-align: center;
		 border: 2px ridge #F00;
		 float: left;
		 border-radius: 6px;
		box-shadow: 5px 3px 8px rgba(0, 0, 0, 0.4);
		line-height: 52px;
	 }
	 
	 .pamiec_cyfry_button {
		 width: 45px;
		 height: 45px;
		 margin: 2px 0px;
		 background: #B8B8BC;
		 border: 2px outset #888;
		 color: #006;
		 font-size: 2em;
		 padding: 0;
	 }
	 
	 .pamiec_cyfry_button:hover {
		 border: 2px inset #999;
		 background: #CCC;
		 color: #008;
		 padding: 0 0 0 2px;
	 }
	 
	 #pamiec_menu_lewa {
		 width: 140px;
		 height: 122px;
		 float: left;
		 margin: 7px 5px 10px 15px;
		 background: #005;
		 border: 2px outset #028;
	 }
	 
	  #pamiec_menu_prawa {
		 width: 600px;
		 height: 123px;
		  float: left;
		 margin: 5px 5px 10px 10px;
		 background: #005;
		 border: 2px outset #028;
	 }
	 
	 #pamiec_menu_prawa_kom {
		 width: 295px;
		 height: 107px;
		 float: left;
		 margin: 5px 5px 0 5px;
		 padding: 5px 5px;
		 text-align: center; 
		 font-size: 1.2em; 
		 font-family: Mogra, cursive;	
		 color: #FED;
		 display: inline-block;
	 }
	 
	 #pamiec_start, #pamiec_sprawdz, #pamiec_nastepny, #pamiec_restart {
		 width: 120px;
		 padding: 3px 5px;
		 margin: 10px 10px;
		 background: #CCC;
		 border: 2px outset #888;
		 color: #006;
		 font-size: 1em;
		 border-radius: 4px;
		 box-shadow: 5px 3px 8px rgba(0, 0, 0, 0.4);
	 }
	 
	 #pamiec_restart {
		 background: #FAA;
		 margin: 35px 10px 5px 10px;
	 }
	 
	 #pamiec_start:hover, #pamiec_sprawdz:hover, #pamiec_nastepny:hover, #pamiec_restart:hover {
		 padding: 3px 5px;
		 background: #AAA;
		 border: 2px inset #088;
		 color: #0F0;
		 font-size: 1em;
	 }
	 
	 .pamiec_button_hover {
		padding: 3px 5px;
		 margin: 5px 10px;
		 background: #00f;
		 border: 2px inset #088;
		 color: #0F0;
		 font-size: 1em; 
	 }
	 
	 #pamiec_tlo_pomoc {
		 width: 760px; 
		 height: 110px;
		 margin: 5px 7px;
		 padding: 5px 10px;
		 float: left;
		 background: #006;
		 border: 2px ridge #800;
		 border-radius: 5px 5px 10px 10px;
		 text-align: left; 
		 font-size: 0.8em; 
		 font-family: Mogra, cursive;	
		 color: #FED;
	 }
	 
    </style>
  </head>

  <body>
  <div id="tlo_pudelka">
	<p style="text-align: center; font-size: 2em; font-family: Mogra, cursive;	color: #FED; padding: 0; margin: 5px 0;">
		Ćwicz pamięć
	</p>
	<div id="pamiec_tlo_cyfry_pokaz">
		<div id="pudelko0">
		  <div id="karta0">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl0"></div>
		  </div>
		</div>
		
		 <div id="pudelko1">
		  <div id="karta1">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl1"></div>
		  </div>
		</div>
		
		<div id="pudelko2">
		  <div id="karta2">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl2"></div>
		  </div>
		</div>
		
		 <div id="pudelko3">
		  <div id="karta3">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl3"></div>
		  </div>
		</div>
		
		<div id="pudelko4">
		  <div id="karta4">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl4"></div>
		  </div>
		</div>
		
		 <div id="pudelko5">
		  <div id="karta5">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl5"></div>
		  </div>
		</div>
		
		<div id="pudelko6">
		  <div id="karta6">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl6"></div>
		  </div>
		</div>
		
		<div id="pudelko7">
		  <div id="karta7">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl7"></div>
		  </div>
		</div>
		
		 <div id="pudelko8">
		  <div id="karta8">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl8"></div>
		  </div>
		</div>
		
		<div id="pudelko9">
		  <div id="karta9">
			<div id="przod"><br />Ćwicz pamięć<br />???</div>
			<div id="tyl9"></div>
		  </div>
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw0">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw1">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw2">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw3">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw4">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw5">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw6">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw7">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw8">
		-
		</div>
		<div id="pamiec_cyfry_odpowiedz" class="pcw9">
		-
		</div>
			<div id="pamiec_menu_lewa">
				<input type="button" id="pamiec_start" value="Start">
				<input type="button" id="pamiec_sprawdz" value="Sprawdź">
				<input type="button" id="pamiec_nastepny" value="Następny">
				<input type="button" id="pamiec_restart" value="Restart">
			</div>
			<div id="pamiec_menu_prawa">
				<div id="pamiec_tlo_cyfry">
					<input type="button" class="pamiec_cyfry_button" id="cyf0" value="0">
					<input type="button" class="pamiec_cyfry_button" id="cyf1" value="1">
					<input type="button" class="pamiec_cyfry_button" id="cyf2" value="2">
					<input type="button" class="pamiec_cyfry_button" id="cyf3" value="3">
					<input type="button" class="pamiec_cyfry_button" id="cyf4" value="4">
					<input type="button" class="pamiec_cyfry_button" id="cyf5" value="5">
					<input type="button" class="pamiec_cyfry_button" id="cyf6" value="6">
					<input type="button" class="pamiec_cyfry_button" id="cyf7" value="7">
					<input type="button" class="pamiec_cyfry_button" id="cyf8" value="8">
					<input type="button" class="pamiec_cyfry_button" id="cyf9" value="9">
				</div>

				<div id="pamiec_menu_prawa_kom">
				komunikaty:
				</div>
			</div>
		<div id="pamiec_tlo_pomoc">
			Pomoc - Gra polega na zapiętywaniu coraz to większej liczby cyfr. Gra składa się z 25 poziomów. 
			 Poziom 1 to tylko 3 cyfry, a ostatni to 10 cyfr i tylko 1 sekunda na zapamiętanie tej kombinacji. 
			Przejście kolejnego poziomu gry jest premiowane zdobyciem określonej liczby punktów. Pierwszy poziom to 
			5 punktów, a za przejście wszystkich poziomów 2000 punktów. <br /> 
			Cyfry można wprowadzać klikając na przyciski znajdujące się na ekranie lub z wykorzystaniem klawiatury. 
			Pole wprowadzania cyfry zmienia się automatycznie po wprowadzeniu nowego znaku, lub zmienić ręcznie przy 
			pomocy klawiatury, strzałka w prawo (->), lub strzałka w lewo (<-).
		</div>
	</div>	
</div>


  </body>
</html>

<script type="text/javascript">
	var liczby=[];
	var cyfry=[];
	var czas=[];
	var pamiec_punktacja=[];
	var pramka;  //time
	var oramka;  //obiekt pcw
	var nrramka=0;   // numer obiektu pcw
	var plramka=0;  //nr koloru ramki
	var pamiec_losowanie=false;
	pamiec_punktacja=[5, 15, 30, 50, 75, 105, 140, 180, 225, 275, 330, 390, 455, 525, 600, 680, 765, 855, 950, 1050, 1200, 1320, 1450, 1600, 2000];
	cyfry=[3, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
	czas=[3000, 4000, 5000, 4000, 6000, 5000, 7000, 6000, 8000, 7000, 9000, 8000, 10000, 9000, 8000, 7000, 6000, 5000, 4500, 4000, 3500, 3000, 2500, 2000, 1500, 1000];
	var plp=0;
	$(document).ready(function(){
		pamiec_init();
	
		
		function pamiec_init() {
			var i=0;
			clearTimeout(pramka);
			pamiec_ustaw_cyfry(10);
			plp = 0;
			nrramka=0;
			plramka=0; 
			$('#pamiec_start').show();
			$('#pamiec_nastepny').hide();
			$('#pamiec_sprawdz').hide();
			var k='Kliknij na przycisk Start i zapamiętaj 3 cyfry<br />Czas: 3 sek.';
			pamiec_wyswietl_komunikat(k);
			for (i=0; i<3; i++) {
				$('.pcw'+i).css('background', '#008');
				$('.pcw'+i).html('-');
			}
			for (i=3; i<10; i++) {
				$('.pcw'+i).css('background', '#B0B2B4');
				$('.pcw'+i).html('');
			}
		}
		
		function pamiec_ustaw_cyfry(k) {
			for (var i=0; i<k; i++) {
				$('.pcw'+i).css('background', '#008');
				$('.pcw'+i).css('border-color', '#F00');
				$('.pcw'+i).html('-');
			}
		}
		
		$('#pamiec_restart').on("click", function(){
			var lk = cyfry[plp];
			rotacja_prawo(lk);
			pamiec_init();
		});
		
		$('#pamiec_start').on("click", function(){
			pamiec_ustaw_cyfry();
			var lk = cyfry[plp];
			losuj(lk);
			rotacja_lewo(lk);
			 setTimeout(function(){
                rotacja_prawo(lk);
            }, czas[plp]); 
			
			oramka=$('.pcw0');
			setTimeout(function(){
				clearTimeout(pramka);
				pamiec_ramka();
				pamiec_losowanie=true;
				$('#pamiec_start').hide();
				$('#pamiec_sprawdz').show();
				pamiec_wyswietl_komunikat('Poziom - '+(plp+1)+'<br />Wpisz '+cyfry[plp]+' cyfry a następnie kliknij na przycisk: Sprawdź');
            }, czas[plp]); 
		});	
		
		$('.pamiec_cyfry_button').click(function() {
			if (pamiec_losowanie) {
				var kl = $(this).attr('id');
				var nr = kl.slice(3, kl.length);
				pamiec_wypisz_cyfre(nr);
				ustaw_poprzednia_ramke();
				nrramka++;
				if (nrramka>(cyfry[plp]-1)) nrramka = 0;
				oramka = $('.pcw'+nrramka);
			}
		});	
		
		$('#pamiec_sprawdz').on("click", function(){
			var i=0;
			var lk = cyfry[plp];
			pamiec_losowanie=false;
			rotacja_lewo(lk);
			clearTimeout(pramka);
			for (i=0; i<lk; i++) {
				$('.pcw'+i).css('border-color', '#700');
				$('.pcw'+i).css('background', '#900');
			}
			var poprawne=0;
			var cyf = 0;		
			for (i=0; i<lk; i++) {
				cyf = parseInt($('.pcw'+i).html());
				if (cyf==liczby[i]) {
					poprawne++;
					$('.pcw'+i).css('background', '#0a0');
					$('.pcw'+i).css('border-color', '#bb0');
				}
			}
			if (poprawne==lk) {
				pamiec_wyswietl_komunikat('Etap - '+(plp+1)+'<br />Punkty - '+pamiec_punktacja[plp]+'<br />BRAWO!!!');
				pamiec_nastepny_etap();
			} else {
				if (plp>0) { 
					pamiec_wyswietl_komunikat('Poziom - '+(plp+1)+'<br />Punkty - '+pamiec_punktacja[plp-1]+'<br />Niestety, tym razem się nie udało...');
				} else pamiec_wyswietl_komunikat('Poziom - 1<br />Punkty - 0<br />Niestety, tym razem się nie udało...');
				pamiec_koniec_gry();
			}
		});
		
		$('#pamiec_nastepny').on("click", function(){
			var lk = cyfry[plp];
			rotacja_prawo(lk);
			pamiec_ustaw_cyfry(cyfry[plp]);
			plp++;
			nrramka=0;
			pamiec_wyswietl_komunikat('Poziom - '+(plp+1)+'<br />Kliknij na przycisk Start i zapamiętaj '+cyfry[plp]+' cyfry<br />Czas: '+(czas[plp]/1000)+' sek.');
			$('#pamiec_nastepny').hide();
			$('#pamiec_start').show();
			lk = cyfry[plp];
			for (i=0; i<lk; i++) {
				$('.pcw'+i).css('background', '#008');
				$('.pcw'+i).html('-');
			}
		});
		
		function pamiec_nastepny_etap() {
			$('#pamiec_sprawdz').hide();
			$('#pamiec_nastepny').show();
		}
		
		function pamiec_koniec_gry() {
			
		}
		
		function pamiec_wyswietl_komunikat(k) {
			$('#pamiec_menu_prawa_kom').html(k);
		}
		
		$('#start2').on("click", function(){
			var ob = $('#karta');
			var ob1 = $('#karta1');
			var ob2 = $('#karta2');
			var ob3 = $('#karta3');
			var ob4 = $('#karta4');
			DoRotate(ob, 0);
			DoRotate(ob1, 0);
			DoRotate(ob2, 0);
			DoRotate(ob3, 0);
			DoRotate(ob4, 0);
		});	
		
		
		function rotacja_lewo(l) {	
			for (var i=0; i<l; i++) {
				$('#tyl'+i).html(liczby[i]);
			}
			for (var i=0; i<l; i++) {
				$('#karta'+i).css({
				  '-moz-transform':'rotateY(180deg)',
				  '-webkit-transform':'rotateY(180deg)',
				  '-o-transform':'rotateY(180deg)',
				  '-ms-transform':'rotateY(180deg)',
				  'transform': 'rotateY(180deg)'
				}); 
			}				
		}
		
		function rotacja_prawo(l) {	
			for (var i=0; i<l; i++) {
				$('#karta'+i).css({
				  '-moz-transform':'rotateY(0deg)',
				  '-webkit-transform':'rotateY(0deg)',
				  '-o-transform':'rotateY(0deg)',
				  '-ms-transform':'rotateY(0deg)',
				  'transform': 'rotateY(0deg)'
				}); 
			}				
		}		
		
		function rand( min, max ){
			min = parseInt( min, 10 );
			max = parseInt( max, 10 );

			if ( min > max ){
				var tmp = min;
				min = max;
				max = tmp;
			}

			return Math.floor( Math.random() * ( max - min + 1 ) + min );
		}
		
		function losuj(l) {
			for (var i=0; i<l; i++) {
				liczby[i] = rand(0,9);
			}
		}
		
		 $(window).bind("keydown", function(Event){
			 //alert(event.which);
			 var cyfra=-1;
			 var obiekt=-1;
			 var ob=$('.pcw0');
			  if ( (event.which == 48) || (event.which == 96) ) {
				cyfra=0;
			  }
			  if ( (event.which == 49) || (event.which == 97) ) {
				cyfra=1;
			  }
			  if ( (event.which == 50) || (event.which == 98) ) {
				cyfra=2;
			  }
			  if ( (event.which == 51) || (event.which == 99) ) {
				cyfra=3;
			  }
			  if ( (event.which == 52) || (event.which == 100) ) {
				cyfra=4;
			  }
			  if ( (event.which == 53) || (event.which == 101) ) {
				cyfra=5;
			  }
			  if ( (event.which == 54) || (event.which == 102) ) {
				cyfra=6;
			  }
			  if ( (event.which == 55) || (event.which == 103) ) {
				cyfra=7;
			  }
			  if ( (event.which == 56) || (event.which == 104) ) {
				cyfra=8;
			  }
			  if ( (event.which == 57) || (event.which == 105) ) {
				cyfra=9;
			  }
			  
			  if (event.which == 37) {
				obiekt=0;
			  }
			  if (event.which == 39) {
				obiekt=1;
			  }		  
			    if (cyfra>-1) {
				pamiec_wypisz_cyfre(cyfra);
				obiekt=1;
			  }			
				if (obiekt>-1) {
					ustaw_poprzednia_ramke();
					if (obiekt==0) nrramka--;
					if (obiekt==1) nrramka++;
					if (nrramka<0) nrramka = cyfry[plp]-1;
					if (nrramka>(cyfry[plp]-1)) nrramka = 0;
					oramka = $('.pcw'+nrramka);
				  }
			  event.preventDefault();
         });
		 
		 function pamiec_wypisz_cyfre(l) {
			 if (pamiec_losowanie) {
				oramka.html(l);
			 }
		 }
		
		function pamiec_ramka() {
			oramka.css('border-color', '#600');
			oramka.css('background', '#00F');
			if (plramka==0) oramka.css('border-color', '#600');
			if (plramka==1) oramka.css('border-color', '#F00');
			plramka++;
			if (plramka==2) plramka=0;
			pramka = setTimeout(pamiec_ramka, 600);
		}
		
		function ustaw_poprzednia_ramke() {
			oramka.css('background', '#008');
			oramka.css('border-color', '#F00');
		}
	});	
</script>