<style>

body {

font-family: system-ui;

font-size: 20;

        overflow: hidden;

background: #5500AA;

color: white;

text-align: left;

}

.p1 {

font-family: system-ui;

font-size: 20;

}

.p2 {

font-family: system-ui;

font-size: 14;

}

</style>

<div id = "clock" onload="currentTime()"></div>

<script id="rendered-js" >

var repSegundoMilisegundos=864;

function getRepHours() {

let calc =(getMillisToday()/repSegundoMilisegundos);

return calc;

}

function repSec(calirep) {

let calc = parseInt(calirep % 100);

return calc;

}

function repMin(calirep) {

let calc = parseInt(calirep/100 % 100);

return calc;

}

function repHour(calirep) {

let calc = parseInt(calirep/10000 % 10000);

return calc;

}

function getMillisToday() {

  let now = new Date();

  let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

  let diff = now - today;

return diff;

}

function currentTime() {

let date = new Date();

let hh = date.getHours();

let mm = date.getMinutes();

let ss = date.getSeconds();

let session = "AM";

let sesionr = "AM";

let calirep = getRepHours();

let sr=repSec(calirep);

let hr=repHour(calirep);

let mr=repMin(calirep);

hr = (hr < 10) ? "0" + hr : hr;

mr = (mr < 10) ? "0" + mr : mr;

sr = (sr < 10) ? "0" + sr : sr;

hh = (hh < 10) ? "0" + hh : hh;

mm = (mm < 10) ? "0" + mm : mm;

ss = (ss < 10) ? "0" + ss : ss;

if (hh>=12){session="PM";}

if (hr>=5) {sesionr="PM";}

let time1 = "imperial clock  " + hh + ":" + mm + ":" + ss + " " + session ;

let time2 = "revolution time " + hr + ":" + mr + ":" + sr + " " + sesionr ;   

let retn = time1 + "</p><p class='p1'>" + time2 + "</p>";

document.getElementById("clock").innerHTML = retn; 

}

setInterval (currentTime, 216);

</script>