ꯇꯦꯝꯄ꯭ꯂꯦꯠ:ꯋꯥꯡꯂꯦꯟ ꯄꯨꯡ

<!DOCTYPE html> <html>

 <head>
   <title>Clock</title>
   <meta charset="utf-8" />
   <meta name="theme-color" content="#222" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
 </head>

 <body>

    - #Power'f GOD⚡⚡ 
 </body>

</html>

     html, body
     {
       margin: 0;
       height: 100%;
       width: 100%;
       background: #222;
       overflow: auto;
       text-align: center;
       font-family: Sans;
     }
     
     * 
     { box-sizing: border-box; }
     
     #clock-wrapper
     {
       width: 320px;
       height: 320px;
       background: #3058d0;
       border-radius: 50%;
       position: relative;
       margin: 70px auto 70px auto;
       border: 10px outset royalblue;
     }
     
     span,
     #clock-second,
     #clock-minute,
     #clock-hour
     {
       display: inline-block;
       position: absolute;
     }
     
     #clock-center
     {
       height: 15px;
       width: 15px;
       margin: auto;
       background: #ff7af9;
       top: 142.5px;
       left: 143px;
       border-radius: 50%;
       z-index: 5;
     }
     
     #clock-second
     {
       width: 1px;
       height: 130px;
       background: white;
       top: 19px;
       left: 150px;
       z-index: 4;
       border-radius: 0.5px;
     }
     
     #clock-minute
     {
       width: 3.5px;
       height: 127.5px;
       background: #ff7af9;
       top: 23px;
       left: 149px;
       z-index: 3;
       border-radius: 1.75px;
     }
     
     #clock-hour
     {
       width: 5.5px;
       height: 85px;
       background: yellow;
       top: 64px;
       left: 148px;
       border-radius: 2.75px;
       z-index: 2;
     }
     
     #clock-second,
     #clock-minute,
     #clock-hour
     {
       -webkit-transform: rotate(0deg);
       -webkit-transform-origin: 50% 100%;
       -webkit-transition: -webkit-transform 0.75s;
       transform: rotate(0deg);
       transform-origin: 50% 100%;
       transition: transform 0.75s;
     }
     
     .digits
     {
       width: 3px;
       height: 18px;
       background: yellow;
       border-radius: 1.5px;
       z-index: 2;
     }
     
     .displayed-digits
     {
       color: gainsboro;
       font-weight: bolder;
       font-size: 22px;
       font-family: Sans;
       z-index: 0;
     }
     
     span:nth-of-type(3)
     {
       top: 16px;
       left: 138px;
     }
     
     span:nth-of-type(4)
     {
       top: 136px;
       right: 20px;
     }
     
     span:nth-of-type(5)
     {
       bottom: 18px;
       left: 144px;
     }
     
     span:nth-of-type(6)
     {
       top: 136px;
       left: 22px;
     }
     
     #inner-circle
     {
       top: 39px;
       left: 40px;
       width: 220px;
       height: 220px;
       border: 2px solid royalblue;
       border-radius: 50%;
     }
     
     .mini-digits
     {
       width: 1.5px;
       height: 6px;
       border-radius: 0.75px;
       background: gainsboro;
     }
     
     #am-pm
     {
       left: 130px;
       top: 170px;
       color: royalblue;
       background: darkblue;
       padding: 3px 10px;
       border-radius: 3px;
       z-index: 0;
       font-weight: bolder;
       font-size: 85%;
       letter-spacing: 2px;
     }
     
     #my-name         
     { 
       display: inline-block; 
       background: #333; 
       padding: 7px 13px;
       position: relative;
       border-radius: 20px;
       font-size: 80%;
       color: #777;
     }

var ID = document.getElementById.bind(document);

this.onload = function() {

 var sec, min, hr, clock, secondHand, minuteHand, hourHand, secDeg, minDeg, hrDeg;
 
 
 //loading clock
 function loadClock()
 {
   sec = new Date().getSeconds();
   min = new Date().getMinutes();
   hr = new Date().getHours();
   clock = ID("clock-wrapper");;
   secondHand = ID("clock-second");
   minuteHand = ID("clock-minute");
   hourHand = ID("clock-hour");
   
   secDeg = sec * 6;    
   minDeg = (min + (sec / 60)) * 6; 
   hrDeg = ((hr - 12) * 30) + ((min / 60) * 30);
 }
 document.addEventListener("visibilitychange", loadClock);
 loadClock();
 
 
 
 //starting clock
 setInterval(function()
 {
   secondHand.style.WebkitTransform = "rotate(" + secDeg + "deg)";
   minuteHand.style.WebkitTransform = "rotate(" + minDeg + "deg)";
   hourHand.style.WebkitTransform = "rotate(" + hrDeg + "deg)";
   secondHand.style.transform = "rotate(" + secDeg + "deg)";
   minuteHand.style.transform = "rotate(" + minDeg + "deg)";
   hourHand.style.transform = "rotate(" + hrDeg + "deg)";
  
   secDeg += 6;    minDeg += 0.1;    hrDeg += 0.1/60;
   hr = new Date().getHours();
   if (hr > 11)
     ID("am-pm").innerHTML = "PM";
   else
     ID("am-pm").innerHTML = "AM";
 }, 1000);

 //creating hours strokes
 for (var i = 0, spanDeg = 0, top, right; i < 12; i++, spanDeg += 30)
 {
   top = (Math.cos(spanDeg * Math.PI/180) * 140).toFixed(4);
   right = (Math.sin(spanDeg * Math.PI/180) * 140).toFixed(4);
   
   clock.insertAdjacentHTML("beforeend", "");
   clock.getElementsByClassName("d"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)";
   clock.getElementsByClassName("d"+i)[0].style.transform = "rotate(" + spanDeg + "deg)";
   clock.getElementsByClassName("d"+i)[0].style.top = (140 - top) + "px";
   clock.getElementsByClassName("d"+i)[0].style.right = (148 - right) + "px";
 }
 
 
 
 //creating minutes strokes
 for (var i = 0, spanDeg = 0, top, right; i < 60; i++, spanDeg += 6)
 {
   if (spanDeg % 30 != 0)
   {
     top = (Math.cos(spanDeg * Math.PI/180) * 140).toFixed(4);
     right = (Math.sin(spanDeg * Math.PI/180) * 140).toFixed(4);
     
     clock.insertAdjacentHTML("beforeend", "");
     clock.getElementsByClassName("md"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)";
     clock.getElementsByClassName("md"+i)[0].style.transform = "rotate(" + spanDeg + "deg)";
     clock.getElementsByClassName("md"+i)[0].style.top = (147 - top) + "px";
     clock.getElementsByClassName("md"+i)[0].style.right = (149 - right) + "px";
   }
   else continue;
 }

}

//END