<!DOCTYPE html><html>
	 	    <head>
             <title>Scrumpoker</title>
              <meta charset="utf-8" />
              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			  <meta name="apple-mobile-web-app-capable" content="yes" />
			  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
			  <link rel="stylesheet" type="text/css" href="css/scrumpoker.css" />
			 </head>
			 <body>

			   <div id="qrcode" style="display:block">
			    <h1>Scrumpoker</h1>
			    <h2>Press the "WEB"-button in the game and scan the QR-code below to show your game</h2>
			    <img src="genereerQR.php" class="qrcode" />
			   </div>

			   <div id="pokertafel"  style="display:none">

<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe1">
 <div class="card effect__click" id="card1" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler1" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back1"></div></div>
 </div>
 <div id=member1 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>


<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe2">
 <div class="card effect__click" id="card2" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler2" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back2"></div></div>
 </div>
 <div id=member2 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>

<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe3">
 <div class="card effect__click" id="card3" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler3" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back3"></div></div>
 </div>
 <div id=member3 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>

<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe4">
 <div class="card effect__click" id="card4" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler4" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back4"></div></div>
 </div>
 <div id=member4 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>


<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe5">
 <div class="card effect__click" id="card5" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler5" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back5"></div></div>
 </div>
 <div id=member5 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>


<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe6">
 <div class="card effect__click" id="card6" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler6" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back6"></div></div>
 </div>
 <div id=member6 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>

<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe7">
 <div class="card effect__click" id="card7" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler7" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back7"></div></div>
 </div>
 <div id=member7 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>
 
 
<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe8">
 <div class="card effect__click" id="card8" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler8" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back8"></div></div>
 </div>
 <div id=member8 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>

<div style="height:220px;width:161px;position:relative;float:left;margin-bottom:20px;" id="cardframe9">
 <div class="card effect__click" id="card9" style="left:50%;margin-left:-64px">
  <div class=cardfrontborder><div class=cardfront><img id="speler9" src="img/reeksen/0_0.jpg" class="showcardpict" /></div></div>
  <div class=cardborder><div class="cardback back9"></div></div>
 </div>
 <div id=member9 class="membername" style="position:absolute;bottom:0px;width:100%;">naam1</div>
</div>

<div style="position:absolute;bottom:40px;left:5px;z-index:500"><input type=button class=button value="leave game" style="width:100px;height:20px;line-height:15px;font-size:9px !important;" onclick="leavegame()"></div>


			   </div>
			   
			   
               <div class=footer><img src="img/valori.jpg" style="height:35px"><br>ScrumPoker provided by Valori</div>
               <script type="text/javascript">
                 setInterval('document.getElementById("controller").src="/index.php?action=controller"',2000);
                 function leavegame() { document.getElementById("controller").src="/index.php?action=leavegame"; }
               </script>

<script type="text/javascript">
	function flipme(obj)
	 {
		 if (obj.className=="card effect__click") { obj.className="card effect__click flipped"; } else { obj.className="card effect__click"; }
	 }
	function showme(obj)
	 {
		 obj.className="card effect__click flipped";
	 }
	function hideme(obj)
	 {
		 obj.className="card effect__click";
	 }

    function flipcard(i)
     {
        flipme(document.getElementById("card"+i));	     
     }
    function showcard(i)
     {
        showme(document.getElementById("card"+i));	     
     }
    function hidecard(i)
     {
        hideme(document.getElementById("card"+i));	     
     }
     	 
	function flipall()
	 {
	   for (var i=1; i<=9; i++)
	    {
	      //setTimeout("flipcard("+i+")", 1000*Math.random());
	      //setTimeout("showcard("+i+")", 1000*Math.random());
	      showcard(i);
	    }
	 }
	function hideall()
	 {
	   for (var i=1; i<=9; i++)
	    {
	      hidecard(i);
	    }
	 }
	 
	//setTimeout("flipall();",15000);
</script>



               <iframe src="/index.php?action=controller" id=controller name=controller style="display:none;z-index=1000;background-color:lightblue;position:absolute;bottom:0px;right:0px;width:600px;"></iframe>
			 </body>
			</html>
          