<!doctype html>
<html>
<title>sudoku-mali</title>
<head>
<style>
body{
font-family:Verdana;
background-image: radial-gradient(circle, darkgreen, green, black);
}
#okvir{
width:60%;
height:100%;
margin:5px auto;
padding:10px;
background:white;
}
#urica{
  background-color: #68a; 
  border: double;
  border-radius: 15px;
  color: white;
  width: 180px;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
#okvir1{
margin:10px auto;
padding:2px;
width:308px;
height:308px;
border:6px solid darkblue;
}
input{
margin:1px auto;
width:70px;
height:70px;
border:1px solid black;
text-align:center;
font-size:40px;
}
#botun{
width:120px;
padding:5px;
text-align:center;
font-size:25px;
background:#248;
border:1px solid #248;
border-radius:10px;
color:#fff;
}
#botun:hover{
background:#36b;
cursor:pointer;
}
table{
width:360px;
border:6px solid #248;
}
td{
width:70px;
height:70px;
text-align:center;
font-size:25px;
border:1px solid;
}
#obavijest{
font-size:25px;
text-align:center;
border:1px solid;
}
</style>
</head>

<body>>
<div id="okvir">
<h1>MALI SUDOKU</h1>
<b>Pravila igre:</b>
<br>- Svaki redak, stupac i okvirić moraju sadržavati SVE brojeve od 1 do 4.
<br>- Brojevi se ne smiju ponavljati unutar retka, stupca ili okvira.
<br>- Zbroj u svakom retku, stupcu i okviriću mora biti jednak 10.
<br>- Nemojte pogađati, koristite logiku!
<hr>
<center>
<P><div id='urica'>00 : 00</div>
<p>

<table style="border:6px solid darkblue">
<tr>
<td style="border:4px solid blue">
<input type="text" value="" id="upis0">
<input type="text" value="" id="upis1"><br>
<input type="text" value="" id="upis4">
<input type="text" value="" id="upis5">
</td>
<td style="border:4px solid blue">
<input type="text" value="" id="upis2">
<input type="text" value="" id="upis3"><br>
<input type="text" value="" id="upis6">
<input type="text" value="" id="upis7">
</td>
</tr>

<tr>
<td style="border:4px solid blue">
<input type="text" value="" id="upis8">
<input type="text" value="" id="upis9"><br>
<input type="text" value="" id="upis12">
<input type="text" value="" id="upis13">
</td>
<td style="border:4px solid blue">
<input type="text" value="" id="upis10">
<input type="text" value="" id="upis11"><br>
<input type="text" value="" id="upis14">
<input type="text" value="" id="upis15">
</td>
</tr>
</table>
<p>
<div id="obavijest"></div>
<p>
<button id="botun" onclick="kreni()">Kreni</button>&nbsp;<button id="botun" onclick="provjeri()">Provjera</button>&nbsp;
<button id="botun" onclick="location.reload()">Novo</button>
</center>
</div>

<script>
var d=new Date();
var vrijeme=0;
var minute=0;
var pocetak=0,kraj=0;
var komb=[]; //kombinacije:
komb[0]=[3,2,4,1, 1,4,2,3, 2,1,3,4, 4,3,1,2];
komb[1]=[3,1,2,4, 2,4,1,3, 4,2,3,1, 1,3,4,2];
komb[2]=[1,4,2,3, 3,2,4,1, 4,3,1,2, 2,1,3,4];
komb[3]=[4,2,1,3, 3,1,4,2, 1,3,2,4, 2,4,3,1];
komb[4]=[1,3,2,4, 4,2,3,1, 2,1,4,3, 3,4,1,2];
komb[5]=[4,2,3,1, 1,3,2,4, 3,4,1,2, 2,1,4,3];
komb[6]=[2,4,1,3, 3,1,4,2, 1,3,2,4, 4,2,3,1];
komb[7]=[1,2,3,4, 4,3,1,2, 3,4,2,1, 2,1,4,3];
komb[8]=[4,3,2,1, 2,1,3,4, 1,2,4,3, 3,4,1,2];


var upisi=["upis0","upis1","upis2","upis3","upis4","upis5","upis6","upis7","upis8","upis9","upis10","upis11","upis12","upis13","upis14","upis15"];
var izb1,izb2,izb3,izb4; //redni broj okvira za upis
var k; //redni broj izabrane kombinacije
var u=[]; //brojevi koje će korisnik upisati u okvire

function kreni(){
  if(pocetak==1||kraj==1) return;
  if(kraj==0){
    stoperica = setInterval(function () {
     vrijeme++;
     if(vrijeme%60==0) {minute++;vrijeme=vrijeme-60;}
     if(vrijeme<10) vrijeme="0"+vrijeme;
     if(minute<1) urica.innerHTML = "<b>"+"00 : "+vrijeme+"</b>"; 
     else if (minute>1&&minute<10) urica.innerHTML = "<b>"+"0"+minute+":"+vrijeme+"<b>";
     else urica.innerHTML = "<b>"+minute+":"+vrijeme+"<b>";
    }, 1000);
  }
  k=Math.round(8*Math.random()); //redni broj izabrane kombinacije
  //polja u koja će biti upisani brojevi
  izb1=Math.round(3*Math.random()); izb2=4+Math.round(3*Math.random()); izb3=8+Math.round(3*Math.random()); izb4=12+Math.round(3*Math.random());
  document.getElementById(upisi[izb1]).value=komb[k][izb1];
  document.getElementById(upisi[izb2]).value=komb[k][izb2];
  document.getElementById(upisi[izb3]).value=komb[k][izb3];
  document.getElementById(upisi[izb4]).value=komb[k][izb4];
  document.getElementById(upisi[izb1]).style="background:azure"; document.getElementById(upisi[izb1]).disabled='disabled';
  document.getElementById(upisi[izb2]).style="background:azure"; document.getElementById(upisi[izb2]).disabled='disabled';
  document.getElementById(upisi[izb3]).style="background:azure"; document.getElementById(upisi[izb3]).disabled='disabled';
  document.getElementById(upisi[izb4]).style="background:azure"; document.getElementById(upisi[izb4]).disabled='disabled';
  pocetak=1;
}

function provjeri(){
  for(i=0;i<16;i++) u[i]=parseInt(document.getElementById(upisi[i]).value);
  if(eval(u[0]+u[1]+u[2]+u[3])==10&&eval(u[4]+u[5]+u[6]+u[7])==10&&eval(u[8]+u[9]+u[10]+u[11])==10&&eval(u[12]+u[13]+u[14]+u[15])==10) {
    obavijest.style="background:#afb;color:'green'";
    obavijest.innerHTML="TOČNO!";
    for(i=0;i<16;i++) document.getElementById(upisi[i]).style="background:#afb;color:'green'";
  }
  else{
    obavijest.style="background:#fba;color:'red'";
    obavijest.innerHTML="POGREŠNO!";
    for(i=0;i<16;i++) document.getElementById(upisi[i]).style="background:#fba;color:'red'";
  }
  kraj=1;
  clearInterval(stoperica);

}
//32 41
//14 23
//21 34
//43 12

</script>
</body>
</html>