Dark Theme Clock

FONT

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

DATE TIME FOMART LIBRARY

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.5/dayjs.min.js">   </script> 

HTML

  <div class="card">
        <div class="mobile_header">
            <h4 class="dateDisplay"></h4>
            <div class="battery_status">
                <span>48%</span>
                <img src="battery-status.png" />
            </div>
        </div>
        <div class="clock">

            <div class="wrap">
                <span class="twelve">12</span>
                <span class="six">6</span>
                <span class="nine">9</span>
                <span class="three">3</span>
                <span class="hour"></span>
                <span class="minute"></span>
                <span class="second"></span>
                <span class="dot"></span>
            </div>
        </div>
        <div class="timing">
            <span>
                <span class="hours"></span>:<span class="mins"></span>
            </span>
            <p class="dateDisplay"></p>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width:100%;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#212B36;
    font-family: 'Poppins', sans-serif;
}
.card{
 width:300px;
 height:500px;
 border-radius:20px;
 position: relative;
 display:flex;
 flex-direction: column;
 background: #212B36;
box-shadow:  20px 20px 60px #1c252e,
             -20px -20px 60px #26313e;

}
.mobile_header{
 display:flex;
 align-items: center;
 justify-content:space-between;
 padding:10px 30px;
}
.mobile_header h4{
    font-size:12px;
    font-weight:400;
    /* margin-bottom:15px; */
    color:#C4CDD5;
    text-transform: uppercase;
   }
.battery_status{
    display:flex;
    align-items: center;
    justify-content:center;
}
.battery_status span{
   font-size:12px;
   font-weight: 600;
   margin-right: 3px;
   color:#C4CDD5;
}
.battery_status img{
    width:20px;
}
.clock{
    width:300px;
    height: 350px;
    display:flex;
    align-items: center;
    justify-content:center;
}
.wrap{
    width:200px;
    height:200px;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    background: #212B36;
    box-shadow:  20px 20px 60px #1c252e,
                 -20px -20px 60px #26313e;

}
.twelve,.six,.nine,.three{
    font-size:18px;
    font-weight: 400;
    color:#C4CDD5;;
}
.twelve{
    position:absolute;
    top:20px;  
    left: 50%;
    transform:translate(-50%,-50%)
}
.six{
    position:absolute;
    bottom: -5px;  
    left: 50%;
    transform:translate(-50%,-50%)
}
.three{
    position:absolute;
    right: 10px;  
    top: 50%;
    transform:translate(-50%,-50%)
}
.nine{
    position:absolute;
    left: 20px;  
    top: 50%;
    transform:translate(-50%,-50%)
}
.hour,.minute{
    position:absolute;
    height:50px;
    width:6px;
    margin: auto;
    top:-25%;
    left: 0;
    bottom:0;
    right: 0;
    background:rgb(79, 255, 132);
    transform-origin: bottom center;
    transform: rotate(0deg);
    box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7);
    z-index: 1;
    border-radius: 100%;
}
.minute{
    position:absolute;
    height:60px;
    width:4px;
    top:-30%;
    left:0;

    transform: rotate(90deg);
}
.second{
    position:absolute;
    height:70px;
    width:2px;
    margin: auto;
    top:-36%;
    left: 0;
    bottom:0;
    right: 0;
    background:#ff4B3E;
    border-radius: 100%;
    transform-origin: bottom center;
    transform: rotate(180deg);
    z-index: 1;
    left:0;
    box-shadow: 0 0 10px rgb(255, 75,62 ,0.6), 0 0 20px rgb(255, 75, 62 , 0.7);
}
.dot{
    position:absolute;
    height:12px;
    width:12px;
    margin: auto;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
    background:#ffffff;
    border-radius:100px;
   border: 2px solid #1b1b1b;
   z-index: 1;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.timing{
   text-align:center;
}
.timing span{
   font-size:24px;
   font-weight: 500;
   color:rgb(79, 255 ,132);
   filter:  drop-shadow(0 0 5px rgb(79, 255 ,132 , 0.6));
   /* box-shadow: 0 0 10px rgb(79, 255 ,132 , 0.6), 0 0 20px rgb(79, 255 ,132 , 0.7), 0 0 30px rgb(79, 255 ,132 , 0.8), 0 0 40px rgb(79, 255 ,132 , 0.9); */
 }
 .timing p{
    font-size:14px;
   text-transform: uppercase;
   color:#C4CDD5;
  }

JAVAACRIPT

var inc=1000;
clock()
function clock(){
    const date=new Date();

    const hours = ((date.getHours()+11)%12+1);
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const hour=hours*30;
    const minute=minutes*6;
    const second=seconds*6;
    const h=(hours < 10) ? "0"+hours : hours;
    const m=(minutes < 10) ? "0"+minutes : minutes;

    document.querySelector('.hours').innerHTML=h;
    document.querySelector('.mins').innerHTML=m;
    document.querySelector('.hour').style.transform=`rotate(${hour}deg)`;
    document.querySelector('.minute').style.transform=`rotate(${minute}deg)`;
    document.querySelector('.second').style.transform=`rotate(${second}deg)`;
}

document.querySelector('.timing >p').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")
document.querySelector('.mobile_header >h4').innerHTML= dayjs(new Date()).format("ddd, MMM YYYY")

setInterval(clock,inc);

View Demo

https://darkthemeclock.netlify.app/

Download Source Code

https://github.com/vikramsu/dark_clock