{% 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>


<!--                     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");

//image cycle if not showing lamp bar
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>";
//    (mth + 1) + "/" + ;
    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)
{
/*
	for (j=1;j<12;j++)
	{
	    var dv = document.getElementById('pnlw'+j);
	    dv.style.display = "none";
	}
*/
    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')";
}

function loadwebifrm()
{
var f = document.getElementsByName("ifrm");
if (f.length > 0)
{
	f[0].src=document.getElementById("srchbox").value;
}
}

</script>
<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">

<!-- Side Buttons -->
<!--
<div class="bR" style="height:50px;width:75px;position:absolute;top:5%;right:76px" onclick="closepage()">
Reset</div>
-->
<div class="bR" style="visibility:hidden;height:50px;width:75px;position:absolute;top:5%;right:0px" onclick="reloadpage()">
Reset</div>

<div class="bR" style="visibility:hidden;height:50px;width:75px;position:absolute;top:20%;right:0px" onclick="togglemenu()">
Menu</div>

<div class="bR" style="visibility:hidden;height:50px;width:75px;position:absolute;top:20%;right:0px" onclick="toggleweb('webdiv')">
WWW</div>

<div class="bR" style="visibility:hidden;height:50px;width:75px;position:absolute;bottom:25%;right:0px" onclick="togglediv('lightsdiv')">
Lamps</div>

<div class="bR" style="visibility:hidden;height:50px;width:75px;position:absolute;bottom:10%;right:0px" onclick="togglebg()">
Next</div>
<!-- End Side Buttons -->

<!-- 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">

<!-- Lamp Buttons -->
<form method="post" action="change">
<div id="lightsdiv" style="display:none">
<table id="btntbl" class="btnBar" cellspacing="2px" cellpadding="2px" border="1px">
<tr>
<td class="td">
<div class=bdv>
      <button class="btnOn" type="submit" value="On_1" id="button1" name="button1">Outer Lamps<br>On</button>
      <button class="btnOff" type="submit" value="Off_1" id="button1" name="button1">Outer Lamps<br>Off</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class="btnOn" type="submit" value="On_2" id="button1" name="button1">Inner Lamps<br>On</button>
      <button class="btnOff" type="submit" value="Off_2" id="button1" name="button1">Inner Lamps<br>Off</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class="btnOn" type="submit" value="On_3" id="button1" name="button1">Plow Lamp<br>On</button>
      <button class="btnOff" type="submit" value="Off_3" id="button1" name="button1">Plow Lamp<br>Off</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class="btnOn" type="submit" value="On_4" id="button1" name="button1">All Lamps<br>On</button>
      <button class="btnOff" type="submit" value="Off_4" id="button1" name="button1">All Lamps<br>Off</button>
</div>
</td>

<tr>
</table>
</div>
</form>
<!-- End Lamp Buttons -->
</div>

<!-- web block -->
<!-- iframe display block -->
	<div id="webdiv"  style="display:none;width:90%;height:90%">
<div style="float:left;width:100%;background-color:silver;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;">

<button class="rnd" onclick="loadwebifrm()" style="float:right;color:white">Go</button>
<input type=text class="rnd" id="srchbox" style="width:20%;float:right;color:white"></input>

	<a href="https://overtimeentertainment.com/OTEInvc" class="mnuBtn" target="ifrm" >Invoice</a>
	<a href="https://WebMeToo.com" class="mnuBtn" target="ifrm" >WebMeToo</a>
	<a href="https://247coding.com/dloads/QCPMgauge.html" class="mnuBtn" target="ifrm">QCPM</a>
	<a href="https://biotrending.com/" class="mnuBtn" target="ifrm" >Bio</a>
	<a href="https://247coding.com/" class="mnuBtn" target="ifrm" >247</a>
	<a href="http://xn--ggle-bqaa.com/?gws_rd=ssl/" class="mnuBtn" target="ifrm" >Gugle</a>
	<a href="http://xn--ggle-bqaa.com/shoemaker.aspx/" class="mnuBtn" target="ifrm" >ShoeMkr</a>
	<a href="http://fallya.com/" class="mnuBtn" target="ifrm" >FallYa</a>
	<a href="http://overtimelandscape.com/" class="mnuBtn" target="ifrm" >Landscp</a>
</div>
	<iframe name="ifrm" id="ifrm" class="rnd" style="width:100%;height:100%;float:left"></iframe>


<!-- iframe display block -->
</div>
<!--end web block -->

<!-- menu block -->
<div id="menudiv"  style="display:none">
<table id="menutable" class="btnBar" cellspacing="0" cellpadding="0" border="0" style="background-color:#eaeaea;float:left">
<tr><td colspan=3>
</td></tr>
<tr><td style="width:45%"><!--menu left cell -->
	<!-- key table -->
	<table id="locktable" style="float:left;width:50%">
	<tr><td class="rnd">0</td><td class="rnd">1</td><td class="rnd">2</td><td class="rnd">3</td></tr>
	<tr><td class="rnd">4</td><td class="rnd">5</td><td class="rnd">6</td><td class="rnd">7</td></tr>
	<tr><td class="rnd">8</td><td class="rnd">9</td><td class="rnd">*</td><td class="rnd">!</td></tr>
	</table>
	<!-- end key table -->
<div style="color:black;float:left;padding:4px;width:45%"><strong>Console Lock</strong><br>
<input id="pcode" type="password" style="width:50%">
</div>
</td>
<td valign="top" style="width:45%;background-image:url('/static/oelogo.png');background-size:auto;background-repeat:no-repeat;color:white;background-color:black;border-radius:12px;text-align:center"><!--menu right cell -->
	<div style="float:none;padding:4px"><strong>Options</strong><br>
		<div class="mnuBtn">Theme</div>
		<div class="mnuBtn">Config</div>
	</div>
</td>
</tr>
</table>

</table>
</div>
<div id="pcnt" style="display:none"></div>
<!-- end menu block -->
</div>
<!--</form>-->
{% endblock %}
