{% extends "layout.html" %}
{% block content %}
<style>
.clsver1_2
{
float:left;
}
::-webkit-scrollbar { 
    display: none; 
}
.BkGrndImage
{
background-size:contain;
height:89vh;
width:98%;
text-align:center;
float:none;
background-image:url('/static/0.jpg');
background-repeat:no-repeat;
padding:1px;
margin:1px;
border-radius:12px;
}
.btnBar
{
float:none;
height:18vh;
width:80%;
background-repeat:no-repeat;
background-size:contain;
padding:8px;
margin:8px;
background-color:#272b33;
position:fixed;
bottom:0px;
border-radius:12px;
}
.rnd
{
padding:12px;
background-color:#272b33;
border-radius:6px;
cursor:pointer;
}
.rnd:hover
{
background-color:black;
}
.bl
{
background-color:purple;
}
.bR
{
margin-right:0px;
background-size:auto;
text-align:center;
border-color:black;
border-radius:12px;
background-image:url('/static/orgBtn.png');
background-color:gray;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding-top:18px;
cursor:pointer;
}
.bR:hover
{
color:red;
}
.mnuBtn
{
background-size:auto;
text-align:center;
text-decoration:none;
border-color:black;
border-radius:12px;
background-image:url('/static/orgBtn.png');
background-color:gray;
background-position:center;
background-repeat:no-repeat;
font-size:large;
cursor:pointer;
color:black;
float:left;
padding:4px;
margin:4px;
box-shadow:2px 2px #888888;
}
.mnuBtn:hover
{
color:red;
}

.btnOff
{
background-size:cover;
width:100%;
box-shadown:3px #333 #333;
border-radius:12px;
background-color:purple;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding:8px;
background-image:url('/static/rdBtn.png');
display:block;
margin-left:auto;
margin-right:auto;
}
.btnOn
{
background-size:cover;
background-image:url('/static/lbBtn.png');
width:100%;
box-shadown:3px #333 #333;
border-radius:12px;
background-color:green;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding:8px;
display:block;
margin-left:auto;
margin-right:auto;
}
.bdv
{
float:none;
background-color:#585a58;
text-align:center;
align-content:middle;
border-radius:0px;
width:100%;

}
.clk
{
background-image:url("static/heart.png");
background-repeat:no-repeat;
background-size:100px 100px;
background-position:center bottom;
font-size:22px;
width:40%;
position:absolute;
opacity:.7;
top:5%;
right:12px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:12px;
border-bottom-right-radius:12px;
color:yellow;
background-color:black;
padding:8px;
text-align:center;
margin:4px;
}

.td
{

}
</style>
<!-- end Styles -->

<!--                     START  SCRIPTS            ------ -->
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var mth = today.getMonth();
var yr = today.getFullYear();
var dy = today.getDate();
var bdv = document.getElementById("lightsdiv");
var cnt = document.getElementById("pcnt");
if (bdv.style.display === "none")
{
	if (s==59 && cnt.innerHTML !="30")
	{
		togglebg();
	        cnt.innerHTML="30";
	}
        else
        {
		cnt.innerHTML="0";
        }
}
    m = checkTime(m);
    s = checkTime(s);
    var countDownDate = new Date("July 4, 2021 17:30:00").getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    document.getElementById('clck').innerHTML =days + " days<br>"+hours+" hours<br>"+minutes+" min<br>TO THE BIG DAY!"+
    "<br><br><span style=\"color:white\">PicUp Party Pi</span>";
    var t = setTimeout(startTime, 500);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function reloadpage() {
    location.reload();
}
function closepage()
{
window.close();
}
function togglediv(pnl)
{
    var x = document.getElementById(pnl);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
function toggleweb(pnl)
{
    var p = document.getElementById(pnl);
    if (p.style.display === "none") 
    {
        p.style.display = "block";
        p.style.position = "absolute";
        p.style.top = "1%";
        p.style.left = "2%";

    } else {
        p.style.display = "none";
    }

}
function hidediv(pnl)
{
    var x = document.getElementById(pnl);
        x.style.display = "none";
}

function togglemenu()
{
   var mnu = document.getElementById("menudiv");
   var lmps = document.getElementById("lightsdiv");
   if (mnu.style.display === "none") {
        mnu.style.display = "block";
	lmps.style.display = "none";
    } else {
        mnu.style.display = "none";
//	lmps.style.display = "block";
    }
}
function tstamp()
{
  var ts = document.getElementById("lblmsg");
  msg(Date());
}
function msg(m)
{
  var ts = document.getElementById("lblmsg");
  ts.innerHTML = m;

}
function togglebg()
{
//rotate background images
	var piclimit=10;
	var sp = document.getElementById("stp");
	var curstp = parseInt(sp.innerHTML);
	if (curstp => 0) {
	  curstp=parseInt(curstp)+1;
	  }else{
	   curstp=0;
	  }

	if (curstp > piclimit){
	sp.innerHTML = 0;
	}else{
	sp.innerHTML = curstp;
	}

	var bdiv = document.getElementById("bardiv");
	bdiv.style.backgroundImage="url('/static/"+curstp+".jpg')";
}

</script>
<!-- start html and link to cmd page (top left) -->
<a href="/cmd" style="color:transparent" tabstop="0">Command Page</a>
<img id="hdnClockStarter" src="/static/oelogo.png" onload="startTime()" style="height:20px;width:20px;display:none">
<!-- Communication & Clock -->
	<!-- Clock -->
	<p id="clck" class="clk" OnLoad="startTime()"></p>
	<!-- Background counter -->
	<p id="stp" style="display:none">0</p>
	<p id="lblmsg" style="width:100%;float:left;"></p>
<!-- End Comms -->

<div id="bardiv" class="BkGrndImage">
  <form method="post" action="change">
   <div id="lightsdiv" style="display:none"></div>
  </form>
</div>

<!-- counter -->
<div id="pcnt" style="display:none"></div>
</div>

{% endblock %}
