Untitled

 <html>
 <head>


<script type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="Files/js/clock.js"></script>
<script type="text/javascript" src="Files/js/Convert.js"></script>
<script type="text/javascript" src="Files/js/WeatherMain.js"></script>
<script type="text/javascript" src="Files/js/FIO.js"></script>
<script type="text/javascript" src="Config.js"></script>

 <style>


body{
position: fixed;
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	color: #ffffff;
      font-family:lite;
       text-shadow: 0px 1px 1px #000;
}

@font-face{
      font-family: geo-light;
      src:url(Files/fonts/geo-light.otf);
}
@font-face{
      font-family:geo;
      src:url(Files/fonts/geo.otf);
}
@font-face {
    font-family: 'lite';
    src: url('Files/fonts/lite.ttf');
}


#BG{

position:absolute; top:0%; left:0%; width:100%; -webkit-backdrop-filter:blur(2px); height:30%; background-color:rgba(0,0,0,0.40);
box-shadow: 0 12px 18px -8px black;
z-index:0;}


#L{
       position:absolute; top:29.99%; left:0%; width:100%; height:0.1%; z-index:1;
       background-color:black;
       opacity:0.6;}

#R{
       position:absolute; top:30%; left:0%; width:100%; height:98%; z-index:-1; opacity:0;
       background-color:#2d2d2d;
       border-top:solid 1 rgba(238,238,238,0.6);
       box-shadow:0px 0px 20px rgba(0,0,0, 0.6);
}


.iWidget{

 position: absolute; width: 100%; height: 100%;}


.iWidget div{

 position: relative; color:white; width: 100%; //text-align: center; //font-variant: small-caps; z-index: 2;}

#Today{
       position: absolute;
       top: 4%;
       left: 1.5%;
       width: 100%;
       text-align: left;
       z-index: 50;
}
#time{font-family:geo; font-size:28px;}
#cal{font-size: 14px;}

#Info{
       position:absolute;
       top: 21.55%;
       left: 1.5%;
       width: 93.55%;
       text-align: left;
       font-size: 13px;
       z-index:50;
       text-shadow: 0px 1px 1px #000;
}

#tod,#device{color: #ff9900; text-shadow: 0px 1px 1px #000;}


#icon{
position: absolute;top: 0%; left: 0%; height:30%; width:100%; opacity:0.9; z-index: -2;}


  </style>
	</head>


<body>

<div id="L"></div>
<div id="R"></div>
<div id="BG"></div>

    <div class="iWidget">
<div id="Today">
<a id="time"></a><br>
<div id="cal"></div>
</div>

<div id="Info">
    <a id="tod">Afternoon </a> <a id="device"> </a> <a id="Forecast">Weather </a> <a id="LevelDisplay">
</a> <a id="StateDisplay"> </a>
</div>

 <img id="icon" src="Files/Weather/Custom/dunno.jpg"/>

</div>


	<script type="text/javascript">

		clock({

	  twentyfour : twentyfourh,

	  padzero : pad,

	  refresh : 5000,

	  success: function(clock){

	    document.getElementById('time').innerHTML = clock.hourtext() + "  " + clock.minuteonetext() + " " + clock.minutetwotext();

	    document.getElementById('cal').innerHTML = clock.sdaytext() + " " + clock.dateplus() + " "  + clock.smonthtext();

         document.getElementById('tod').innerHTML = "Good " + clock.tod();

	  }

	});


  function mainUpdate(type){
   if (type == "battery"){

       document.getElementById('LevelDisplay').innerHTML = " | Battery Level is " + batteryPercent + "%";

//document.getElementById("LevelDisplay").innerHTML = "The battery is currently " + tWords[Number(batteryPercent)] + " " + 'Percent';
       document.getElementById('StateDisplay').innerHTML = (batteryCharging) ? " Charging" : " ";
    }

    if(type == "system"){

       document.getElementById('device').innerHTML = deviceName + "! ";
}
  }

</script>


	</body>

	</html>