thrifus/LockBackground.html

## clock.js
var poll = setInterval(timer,1);

function timer() {
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();
  var sec = date.getSeconds();

  var hourObj = document.getElementById("hour");
  var minObj = document.getElementById("min");
  var secObj = document.getElementById("sec");

  var hourText = document.getElementById("h-text");
  var minText = document.getElementById("m-text");
  var secText = document.getElementById("s-text");

  hourObj.style.width = hour + 10 + "%";
  minObj.style.width = min + 10 + "%";
  secObj.style.width = sec + 10 + "%";

  if (hour >= 13) {
    hour -= 12
  }
  if (hour === 0) {
    hour = 12
  }
  if (min < 10) {
    min = "0" + min
  }
  if (sec < 10) {
    sec = "0" + sec
  }

  hourText.innerHTML = hour;
  minText.innerHTML = min;
  secText.innerHTML = sec;

  var batteryBar = document.getElementById("batteryBar");
  var percentage = Math.ceil(groovyAPI.getBatteryLevel() * 99);
  var allocation = document.getElementById("batteryAllocation");

  batteryBar.style.width = percentage + "%";
  allocation.innerHTML = percentage + "%";
  if (percentage <= 20) {
    allocation.css({ "background" : "red" });
  }
}

## LockBackground.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Materio</title>
    <meta name="viewport" content="initial-scale=0.7, maximum-scale=0.7, user-scalable=no, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/style-light.css" />

<style type="text/css">
.batteryBar {
  font-size: 0.5em;
  background: white;
  height: 50px;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.48);
  line-height: 3;
  color: gray;
  opacity: 0.8;
}
</style>
  </head>

  <body>

    <div class="hour" id="hour">
      <span class="h-text" id="h-text"></span>
    </div>

    <div class="min" id="min">
      <span class="m-text" id="m-text"></span>
    </div>

    <div class="sec" id="sec">
      <span class="s-text" id="s-text"></span>
    </div>

    <br />
    <br />

    <div id="batteryBar" class="batteryBar">
      <span id="batteryAllocation"></span>
    </div>

    <script type="text/javascript" src="js/clock.js"></script>

  </body>
</html>
	var poll = setInterval(timer,1);

	function timer() {
	var date = new Date();
	var hour = date.getHours();
	var min = date.getMinutes();
	var sec = date.getSeconds();

	var hourObj = document.getElementById("hour");
	var minObj = document.getElementById("min");
	var secObj = document.getElementById("sec");

	var hourText = document.getElementById("h-text");
	var minText = document.getElementById("m-text");
	var secText = document.getElementById("s-text");

	hourObj.style.width = hour + 10 + "%";
	minObj.style.width = min + 10 + "%";
	secObj.style.width = sec + 10 + "%";

	if (hour >= 13) {
	hour -= 12
	}
	if (hour === 0) {
	hour = 12
	}
	if (min < 10) {
	min = "0" + min
	}
	if (sec < 10) {
	sec = "0" + sec
	}

	hourText.innerHTML = hour;
	minText.innerHTML = min;
	secText.innerHTML = sec;

	var batteryBar = document.getElementById("batteryBar");
	var percentage = Math.ceil(groovyAPI.getBatteryLevel() * 99);
	var allocation = document.getElementById("batteryAllocation");

	batteryBar.style.width = percentage + "%";
	allocation.innerHTML = percentage + "%";
	if (percentage <= 20) {
	allocation.css({ "background" : "red" });
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Materio</title>
	<meta name="viewport" content="initial-scale=0.7, maximum-scale=0.7, user-scalable=no, width=device-width">
	<link rel="stylesheet" type="text/css" href="css/style-light.css" />

	<style type="text/css">
	.batteryBar {
	font-size: 0.5em;
	background: white;
	height: 50px;
	box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.48);
	line-height: 3;
	color: gray;
	opacity: 0.8;
	}
	</style>
	</head>

	<body>

	<div class="hour" id="hour">
	<span class="h-text" id="h-text"></span>
	</div>

	<div class="min" id="min">
	<span class="m-text" id="m-text"></span>
	</div>

	<div class="sec" id="sec">
	<span class="s-text" id="s-text"></span>
	</div>

	<br />
	<br />

	<div id="batteryBar" class="batteryBar">
	<span id="batteryAllocation"></span>
	</div>

	<script type="text/javascript" src="js/clock.js"></script>

	</body>
	</html>