Close Menu
    JavaScript

    How to create Next Level Modern Clock & Calendar using HTML CSS and JS

    Coding StellaBy Updated:No Comments24 Mins Read

    Let’s create a Next Level Modern Clock & Calendar using HTML, CSS, and JavaScript, where a simple layout is transformed into an animated circular UI with rotating rings, smooth transitions, and a real-time clock.

    We’ll use:

    • HTML to build the structure of the clock, including the center dial (for clock hands), circular rings (for day, date, and month), and side sections like weather and activity bars.
    • CSS to design the modern UI using circular layouts, position elements in the center, create ring shapes, and use transforms (rotate) and transitions to achieve smooth animations and the circular text effect.
    • JavaScript to make everything dynamic by getting the current time and date, rotating the clock hands every second, animating the rings to highlight the current day/month/date, and controlling fade-in effects for a clean, step-by-step loading animation.

    This project is perfect for learning how to combine DOM manipulation, CSS transforms, and real-time updates to build visually impressive and interactive UI components that stand out 🔥

    HTML :

    This HTML creates a modern animated clock and calendar UI where the center dial shows analog clock hands (hour, minute, second), and surrounding circular rings display day name, month, and date; additional side sections show weather (icon + temperature) and weekly activity bars, while external CSS handles styling/animations and JavaScript (with jQuery and lettering.js) controls dynamic updates like rotating rings and moving clock hands.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Next Level Modern Clock & Calendar</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class='center-dial'>
    <h1 class='center-preview'>HELLO</h1>
    <div class='head'></div>
    <div class='torso'></div>
    <div class='hand-container' id='minutes'>
      <div class='minute-hand'></div>
    </div>
    <div class='hand-container' id='hours'>
      <div class='hour-hand'></div>
    </div>
    <div class='hand-container' id='seconds'>
      <div class='second-hand'></div>
    </div>
  </div>
  <div class='day-name-dial'>
    <div class='ring-back'></div>
    <div class='ring' id='r1'>
      <h1 class='day-name-preview'>DAY NAME</h1>
      <h2 class='day-name-text'>MON TUE WED THU FRI SAT SUN</h2>
    </div>
  </div>
  <div class='month-dial'>
    <div class='ring-back'></div>
    <div class='ring' id='r2'>
      <h1 class='month-preview'>MONTH</h1>
      <h2 class='month-text'>JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC</h2>
    </div>
  </div>
  <div class='day-dial'>
    <div class='ring-back'></div>
    <div class='ring' id='r3'>
      <h1 class='day-preview'>DAY</h1>
      <h2 class='day-text'>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
      </h2>
    </div>
  </div>
  <div class='side-ring' id='weather'>
    <div class='fa fa-cloud'></div>
    <p class='temperature'>14&#176C</p>
  </div>
  <div class='side-ring' id='steps'>
    <div class='bars'>
      <div class='bar'>
        <div class='day-letter'>M</div>
        <div class='x' id='x1'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>T</div>
        <div class='x' id='x2'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>W</div>
        <div class='x' id='x3'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>T</div>
        <div class='x' id='x4'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>F</div>
        <div class='x' id='x5'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>S</div>
        <div class='x' id='x6'></div>
      </div>
      <div class='bar'>
        <div class='day-letter'>S</div>
        <div class='x' id='x7'></div>
      </div>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
  <script src="./script.js"></script>

</body>
</html>

    CSS :

    This CSS styles the whole clock UI by positioning everything in the center, creating circular dials (clock, day, month) using border-radius, and placing text in a circular shape using rotate transforms on each character; it also designs clock hands, weather and step sections, adds colors to bars for each day, and uses transitions and opacity to smoothly animate elements like rotating rings and moving hands.

    #x1 {
  background: #FF3B30;
}

#x2 {
  background: #FF9500;
}

#x3 {
  background: #FFCC00;
}

#x4 {
  background: #4CD964;
}

#x5 {
  background: #5AC8FA;
}

#x6 {
  background: #007AFF;
}

#x7 {
  background: #5856D6;
}

.bar:nth-child(1) {
  position: absolute;
  top: 0px;
  left: 0px;
}

.bar:nth-child(2) {
  position: absolute;
  top: 0px;
  left: 20px;
}

.bar:nth-child(3) {
  position: absolute;
  top: 0px;
  left: 40px;
}

.bar:nth-child(4) {
  position: absolute;
  top: 0px;
  left: 60px;
}

.bar:nth-child(5) {
  position: absolute;
  top: 0px;
  left: 80px;
}

.bar:nth-child(6) {
  position: absolute;
  top: 0px;
  left: 100px;
}

.bar:nth-child(7) {
  position: absolute;
  top: 0px;
  left: 120px;
}

.day-dial,
.month-dial,
.day-name-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.head {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.day-text span,
.day-preview span,
.month-text span,
.month-preview span,
.day-name-text span,
.day-name-preview span,
.hand-container,
.center-preview span {
  text-align: center;
  moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

* {
  box-sizing: border-box;
}

html,
body {
  background: #292929;
  border: 0;
  font-family: "Roboto Mono", monospace;
  height: 100%;
  margin: 0px;
  width: 100%;
}

h1 {
  color: #555;
  font-size: 25px;
}

h2 {
  color: #555;
  font-size: 15px;
}

.center-dial {
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  width: 150px;
  height: 150px;
  background-color: #202020;
  border-radius: 50%;
  color: #000;
  box-shadow: 0px 2px 2px #000;
  cursor: pointer;
  overflow: hidden;
}

.center-preview span {
  position: absolute;
  top: 0%;
  left: calc(50% - 12.5px);
  height: 150px;
  width: 25px;
}

.center-preview {
  opacity: 0;
  filter: alpha(opacity=0);
}

.center-preview .char1 {
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}

.center-preview .char2 {
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.center-preview .char3 {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.center-preview .char4 {
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.center-preview .char5 {
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}

.center-preview .char6 {
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.head {
  width: 50px;
  height: 50px;
  background: #FFF;
  border-radius: 50%;
}

.torso {
  position: relative;
  top: calc(50% - 20px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: #FFF;
  border-radius: 50%;
}

.hand-container {
  position: absolute;
  top: 0%;
  left: calc(50% - 12.5px);
  opacity: 0;
  filter: alpha(opacity=0);
  width: 25px;
  height: 150px;
  moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.hour-hand {
  width: 10px;
  height: 50px;
  position: relative;
  top: calc(50% - 45px);
  left: calc(50% - 5px);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background: #FFF;
  border-radius: 5px;
}

.minute-hand {
  width: 10px;
  height: 70px;
  position: relative;
  top: calc(50% - 65px);
  left: calc(50% - 5px);
  background: #CCC;
  border-radius: 5px;
}

.second-hand {
  width: 2px;
  height: 70px;
  position: relative;
  top: calc(50% - 69px);
  left: calc(50% - 1px);
  background: #AAA;
  border-radius: 1px;
}

.day-name-dial {
  width: 250px;
  height: 250px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.day-name-preview span {
  position: absolute;
  top: calc(-25% - 5px);
  left: calc(50% - 12.5px);
  height: 250px;
  width: 25px;
}

.day-name-preview {
  opacity: 0;
  filter: alpha(opacity=0);
}

.day-name-preview .char1 {
  -moz-transform: rotate(-35deg);
  -o-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

.day-name-preview .char2 {
  -moz-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.day-name-preview .char3 {
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.day-name-preview .char4 {
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

.day-name-preview .char5 {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.day-name-preview .char6 {
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.day-name-preview .char7 {
  -moz-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.day-name-preview .char8 {
  -moz-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.day-name-preview .char9 {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.day-name-text span {
  position: absolute;
  top: calc(-25% + 5px);
  left: calc(50% - 6px);
  height: 232px;
  width: 12px;
}

.day-name-text {
  opacity: 0;
  filter: alpha(opacity=0);
}

.day-name-text .char1 {
  -moz-transform: rotate(-125.3571428571deg);
  -o-transform: rotate(-125.3571428571deg);
  -ms-transform: rotate(-125.3571428571deg);
  -webkit-transform: rotate(-125.3571428571deg);
  transform: rotate(-125.3571428571deg);
}

.day-name-text .char2 {
  -moz-transform: rotate(-115.7142857143deg);
  -o-transform: rotate(-115.7142857143deg);
  -ms-transform: rotate(-115.7142857143deg);
  -webkit-transform: rotate(-115.7142857143deg);
  transform: rotate(-115.7142857143deg);
}

.day-name-text .char3 {
  -moz-transform: rotate(-106.0714285714deg);
  -o-transform: rotate(-106.0714285714deg);
  -ms-transform: rotate(-106.0714285714deg);
  -webkit-transform: rotate(-106.0714285714deg);
  transform: rotate(-106.0714285714deg);
}

.day-name-text .char4 {
  -moz-transform: rotate(-96.4285714286deg);
  -o-transform: rotate(-96.4285714286deg);
  -ms-transform: rotate(-96.4285714286deg);
  -webkit-transform: rotate(-96.4285714286deg);
  transform: rotate(-96.4285714286deg);
}

.day-name-text .char5 {
  -moz-transform: rotate(-86.7857142857deg);
  -o-transform: rotate(-86.7857142857deg);
  -ms-transform: rotate(-86.7857142857deg);
  -webkit-transform: rotate(-86.7857142857deg);
  transform: rotate(-86.7857142857deg);
}

.day-name-text .char6 {
  -moz-transform: rotate(-77.1428571429deg);
  -o-transform: rotate(-77.1428571429deg);
  -ms-transform: rotate(-77.1428571429deg);
  -webkit-transform: rotate(-77.1428571429deg);
  transform: rotate(-77.1428571429deg);
}

.day-name-text .char7 {
  -moz-transform: rotate(-67.5deg);
  -o-transform: rotate(-67.5deg);
  -ms-transform: rotate(-67.5deg);
  -webkit-transform: rotate(-67.5deg);
  transform: rotate(-67.5deg);
}

.day-name-text .char8 {
  -moz-transform: rotate(-57.8571428571deg);
  -o-transform: rotate(-57.8571428571deg);
  -ms-transform: rotate(-57.8571428571deg);
  -webkit-transform: rotate(-57.8571428571deg);
  transform: rotate(-57.8571428571deg);
}

.day-name-text .char9 {
  -moz-transform: rotate(-48.2142857143deg);
  -o-transform: rotate(-48.2142857143deg);
  -ms-transform: rotate(-48.2142857143deg);
  -webkit-transform: rotate(-48.2142857143deg);
  transform: rotate(-48.2142857143deg);
}

.day-name-text .char10 {
  -moz-transform: rotate(-38.5714285714deg);
  -o-transform: rotate(-38.5714285714deg);
  -ms-transform: rotate(-38.5714285714deg);
  -webkit-transform: rotate(-38.5714285714deg);
  transform: rotate(-38.5714285714deg);
}

.day-name-text .char11 {
  -moz-transform: rotate(-28.9285714286deg);
  -o-transform: rotate(-28.9285714286deg);
  -ms-transform: rotate(-28.9285714286deg);
  -webkit-transform: rotate(-28.9285714286deg);
  transform: rotate(-28.9285714286deg);
}

.day-name-text .char12 {
  -moz-transform: rotate(-19.2857142857deg);
  -o-transform: rotate(-19.2857142857deg);
  -ms-transform: rotate(-19.2857142857deg);
  -webkit-transform: rotate(-19.2857142857deg);
  transform: rotate(-19.2857142857deg);
}

.day-name-text .char13 {
  -moz-transform: rotate(-9.6428571429deg);
  -o-transform: rotate(-9.6428571429deg);
  -ms-transform: rotate(-9.6428571429deg);
  -webkit-transform: rotate(-9.6428571429deg);
  transform: rotate(-9.6428571429deg);
}

.day-name-text .char14 {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.day-name-text .char15 {
  -moz-transform: rotate(9.6428571429deg);
  -o-transform: rotate(9.6428571429deg);
  -ms-transform: rotate(9.6428571429deg);
  -webkit-transform: rotate(9.6428571429deg);
  transform: rotate(9.6428571429deg);
}

.day-name-text .char16 {
  -moz-transform: rotate(19.2857142857deg);
  -o-transform: rotate(19.2857142857deg);
  -ms-transform: rotate(19.2857142857deg);
  -webkit-transform: rotate(19.2857142857deg);
  transform: rotate(19.2857142857deg);
}

.day-name-text .char17 {
  -moz-transform: rotate(28.9285714286deg);
  -o-transform: rotate(28.9285714286deg);
  -ms-transform: rotate(28.9285714286deg);
  -webkit-transform: rotate(28.9285714286deg);
  transform: rotate(28.9285714286deg);
}

.day-name-text .char18 {
  -moz-transform: rotate(38.5714285714deg);
  -o-transform: rotate(38.5714285714deg);
  -ms-transform: rotate(38.5714285714deg);
  -webkit-transform: rotate(38.5714285714deg);
  transform: rotate(38.5714285714deg);
}

.day-name-text .char19 {
  -moz-transform: rotate(48.2142857143deg);
  -o-transform: rotate(48.2142857143deg);
  -ms-transform: rotate(48.2142857143deg);
  -webkit-transform: rotate(48.2142857143deg);
  transform: rotate(48.2142857143deg);
}

.day-name-text .char20 {
  -moz-transform: rotate(57.8571428571deg);
  -o-transform: rotate(57.8571428571deg);
  -ms-transform: rotate(57.8571428571deg);
  -webkit-transform: rotate(57.8571428571deg);
  transform: rotate(57.8571428571deg);
}

.day-name-text .char21 {
  -moz-transform: rotate(67.5deg);
  -o-transform: rotate(67.5deg);
  -ms-transform: rotate(67.5deg);
  -webkit-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
}

.day-name-text .char22 {
  -moz-transform: rotate(77.1428571429deg);
  -o-transform: rotate(77.1428571429deg);
  -ms-transform: rotate(77.1428571429deg);
  -webkit-transform: rotate(77.1428571429deg);
  transform: rotate(77.1428571429deg);
}

.day-name-text .char23 {
  -moz-transform: rotate(86.7857142857deg);
  -o-transform: rotate(86.7857142857deg);
  -ms-transform: rotate(86.7857142857deg);
  -webkit-transform: rotate(86.7857142857deg);
  transform: rotate(86.7857142857deg);
}

.day-name-text .char24 {
  -moz-transform: rotate(96.4285714286deg);
  -o-transform: rotate(96.4285714286deg);
  -ms-transform: rotate(96.4285714286deg);
  -webkit-transform: rotate(96.4285714286deg);
  transform: rotate(96.4285714286deg);
}

.day-name-text .char25 {
  -moz-transform: rotate(106.0714285714deg);
  -o-transform: rotate(106.0714285714deg);
  -ms-transform: rotate(106.0714285714deg);
  -webkit-transform: rotate(106.0714285714deg);
  transform: rotate(106.0714285714deg);
}

.day-name-text .char26 {
  -moz-transform: rotate(115.7142857143deg);
  -o-transform: rotate(115.7142857143deg);
  -ms-transform: rotate(115.7142857143deg);
  -webkit-transform: rotate(115.7142857143deg);
  transform: rotate(115.7142857143deg);
}

.day-name-text .char27 {
  -moz-transform: rotate(125.3571428571deg);
  -o-transform: rotate(125.3571428571deg);
  -ms-transform: rotate(125.3571428571deg);
  -webkit-transform: rotate(125.3571428571deg);
  transform: rotate(125.3571428571deg);
}

.day-name-text .char28 {
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.month-dial {
  width: 350px;
  height: 350px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.month-preview span {
  position: absolute;
  top: calc(-25% + 20px);
  left: calc(50% - 12.5px);
  height: 350px;
  width: 25px;
}

.month-preview {
  opacity: 0;
  filter: alpha(opacity=0);
}

.month-preview .char1 {
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.month-preview .char2 {
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.month-preview .char3 {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.month-preview .char4 {
  -moz-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.month-preview .char5 {
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.month-preview .char6 {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.month-text span {
  position: absolute;
  top: calc(-25% + 30px);
  left: calc(50% - 6px);
  height: 332px;
  width: 12px;
}

.month-text {
  opacity: 0;
  filter: alpha(opacity=0);
}

.month-text .char1 {
  -moz-transform: rotate(-129.375deg);
  -o-transform: rotate(-129.375deg);
  -ms-transform: rotate(-129.375deg);
  -webkit-transform: rotate(-129.375deg);
  transform: rotate(-129.375deg);
}

.month-text .char2 {
  -moz-transform: rotate(-123.75deg);
  -o-transform: rotate(-123.75deg);
  -ms-transform: rotate(-123.75deg);
  -webkit-transform: rotate(-123.75deg);
  transform: rotate(-123.75deg);
}

.month-text .char3 {
  -moz-transform: rotate(-118.125deg);
  -o-transform: rotate(-118.125deg);
  -ms-transform: rotate(-118.125deg);
  -webkit-transform: rotate(-118.125deg);
  transform: rotate(-118.125deg);
}

.month-text .char4 {
  -moz-transform: rotate(-112.5deg);
  -o-transform: rotate(-112.5deg);
  -ms-transform: rotate(-112.5deg);
  -webkit-transform: rotate(-112.5deg);
  transform: rotate(-112.5deg);
}

.month-text .char5 {
  -moz-transform: rotate(-106.875deg);
  -o-transform: rotate(-106.875deg);
  -ms-transform: rotate(-106.875deg);
  -webkit-transform: rotate(-106.875deg);
  transform: rotate(-106.875deg);
}

.month-text .char6 {
  -moz-transform: rotate(-101.25deg);
  -o-transform: rotate(-101.25deg);
  -ms-transform: rotate(-101.25deg);
  -webkit-transform: rotate(-101.25deg);
  transform: rotate(-101.25deg);
}

.month-text .char7 {
  -moz-transform: rotate(-95.625deg);
  -o-transform: rotate(-95.625deg);
  -ms-transform: rotate(-95.625deg);
  -webkit-transform: rotate(-95.625deg);
  transform: rotate(-95.625deg);
}

.month-text .char8 {
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.month-text .char9 {
  -moz-transform: rotate(-84.375deg);
  -o-transform: rotate(-84.375deg);
  -ms-transform: rotate(-84.375deg);
  -webkit-transform: rotate(-84.375deg);
  transform: rotate(-84.375deg);
}

.month-text .char10 {
  -moz-transform: rotate(-78.75deg);
  -o-transform: rotate(-78.75deg);
  -ms-transform: rotate(-78.75deg);
  -webkit-transform: rotate(-78.75deg);
  transform: rotate(-78.75deg);
}

.month-text .char11 {
  -moz-transform: rotate(-73.125deg);
  -o-transform: rotate(-73.125deg);
  -ms-transform: rotate(-73.125deg);
  -webkit-transform: rotate(-73.125deg);
  transform: rotate(-73.125deg);
}

.month-text .char12 {
  -moz-transform: rotate(-67.5deg);
  -o-transform: rotate(-67.5deg);
  -ms-transform: rotate(-67.5deg);
  -webkit-transform: rotate(-67.5deg);
  transform: rotate(-67.5deg);
}

.month-text .char13 {
  -moz-transform: rotate(-61.875deg);
  -o-transform: rotate(-61.875deg);
  -ms-transform: rotate(-61.875deg);
  -webkit-transform: rotate(-61.875deg);
  transform: rotate(-61.875deg);
}

.month-text .char14 {
  -moz-transform: rotate(-56.25deg);
  -o-transform: rotate(-56.25deg);
  -ms-transform: rotate(-56.25deg);
  -webkit-transform: rotate(-56.25deg);
  transform: rotate(-56.25deg);
}

.month-text .char15 {
  -moz-transform: rotate(-50.625deg);
  -o-transform: rotate(-50.625deg);
  -ms-transform: rotate(-50.625deg);
  -webkit-transform: rotate(-50.625deg);
  transform: rotate(-50.625deg);
}

.month-text .char16 {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.month-text .char17 {
  -moz-transform: rotate(-39.375deg);
  -o-transform: rotate(-39.375deg);
  -ms-transform: rotate(-39.375deg);
  -webkit-transform: rotate(-39.375deg);
  transform: rotate(-39.375deg);
}

.month-text .char18 {
  -moz-transform: rotate(-33.75deg);
  -o-transform: rotate(-33.75deg);
  -ms-transform: rotate(-33.75deg);
  -webkit-transform: rotate(-33.75deg);
  transform: rotate(-33.75deg);
}

.month-text .char19 {
  -moz-transform: rotate(-28.125deg);
  -o-transform: rotate(-28.125deg);
  -ms-transform: rotate(-28.125deg);
  -webkit-transform: rotate(-28.125deg);
  transform: rotate(-28.125deg);
}

.month-text .char20 {
  -moz-transform: rotate(-22.5deg);
  -o-transform: rotate(-22.5deg);
  -ms-transform: rotate(-22.5deg);
  -webkit-transform: rotate(-22.5deg);
  transform: rotate(-22.5deg);
}

.month-text .char21 {
  -moz-transform: rotate(-16.875deg);
  -o-transform: rotate(-16.875deg);
  -ms-transform: rotate(-16.875deg);
  -webkit-transform: rotate(-16.875deg);
  transform: rotate(-16.875deg);
}

.month-text .char22 {
  -moz-transform: rotate(-11.25deg);
  -o-transform: rotate(-11.25deg);
  -ms-transform: rotate(-11.25deg);
  -webkit-transform: rotate(-11.25deg);
  transform: rotate(-11.25deg);
}

.month-text .char23 {
  -moz-transform: rotate(-5.625deg);
  -o-transform: rotate(-5.625deg);
  -ms-transform: rotate(-5.625deg);
  -webkit-transform: rotate(-5.625deg);
  transform: rotate(-5.625deg);
}

.month-text .char24 {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.month-text .char25 {
  -moz-transform: rotate(5.625deg);
  -o-transform: rotate(5.625deg);
  -ms-transform: rotate(5.625deg);
  -webkit-transform: rotate(5.625deg);
  transform: rotate(5.625deg);
}

.month-text .char26 {
  -moz-transform: rotate(11.25deg);
  -o-transform: rotate(11.25deg);
  -ms-transform: rotate(11.25deg);
  -webkit-transform: rotate(11.25deg);
  transform: rotate(11.25deg);
}

.month-text .char27 {
  -moz-transform: rotate(16.875deg);
  -o-transform: rotate(16.875deg);
  -ms-transform: rotate(16.875deg);
  -webkit-transform: rotate(16.875deg);
  transform: rotate(16.875deg);
}

.month-text .char28 {
  -moz-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -webkit-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}

.month-text .char29 {
  -moz-transform: rotate(28.125deg);
  -o-transform: rotate(28.125deg);
  -ms-transform: rotate(28.125deg);
  -webkit-transform: rotate(28.125deg);
  transform: rotate(28.125deg);
}

.month-text .char30 {
  -moz-transform: rotate(33.75deg);
  -o-transform: rotate(33.75deg);
  -ms-transform: rotate(33.75deg);
  -webkit-transform: rotate(33.75deg);
  transform: rotate(33.75deg);
}

.month-text .char31 {
  -moz-transform: rotate(39.375deg);
  -o-transform: rotate(39.375deg);
  -ms-transform: rotate(39.375deg);
  -webkit-transform: rotate(39.375deg);
  transform: rotate(39.375deg);
}

.month-text .char32 {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.month-text .char33 {
  -moz-transform: rotate(50.625deg);
  -o-transform: rotate(50.625deg);
  -ms-transform: rotate(50.625deg);
  -webkit-transform: rotate(50.625deg);
  transform: rotate(50.625deg);
}

.month-text .char34 {
  -moz-transform: rotate(56.25deg);
  -o-transform: rotate(56.25deg);
  -ms-transform: rotate(56.25deg);
  -webkit-transform: rotate(56.25deg);
  transform: rotate(56.25deg);
}

.month-text .char35 {
  -moz-transform: rotate(61.875deg);
  -o-transform: rotate(61.875deg);
  -ms-transform: rotate(61.875deg);
  -webkit-transform: rotate(61.875deg);
  transform: rotate(61.875deg);
}

.month-text .char36 {
  -moz-transform: rotate(67.5deg);
  -o-transform: rotate(67.5deg);
  -ms-transform: rotate(67.5deg);
  -webkit-transform: rotate(67.5deg);
  transform: rotate(67.5deg);
}

.month-text .char37 {
  -moz-transform: rotate(73.125deg);
  -o-transform: rotate(73.125deg);
  -ms-transform: rotate(73.125deg);
  -webkit-transform: rotate(73.125deg);
  transform: rotate(73.125deg);
}

.month-text .char38 {
  -moz-transform: rotate(78.75deg);
  -o-transform: rotate(78.75deg);
  -ms-transform: rotate(78.75deg);
  -webkit-transform: rotate(78.75deg);
  transform: rotate(78.75deg);
}

.month-text .char39 {
  -moz-transform: rotate(84.375deg);
  -o-transform: rotate(84.375deg);
  -ms-transform: rotate(84.375deg);
  -webkit-transform: rotate(84.375deg);
  transform: rotate(84.375deg);
}

.month-text .char40 {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.month-text .char41 {
  -moz-transform: rotate(95.625deg);
  -o-transform: rotate(95.625deg);
  -ms-transform: rotate(95.625deg);
  -webkit-transform: rotate(95.625deg);
  transform: rotate(95.625deg);
}

.month-text .char42 {
  -moz-transform: rotate(101.25deg);
  -o-transform: rotate(101.25deg);
  -ms-transform: rotate(101.25deg);
  -webkit-transform: rotate(101.25deg);
  transform: rotate(101.25deg);
}

.month-text .char43 {
  -moz-transform: rotate(106.875deg);
  -o-transform: rotate(106.875deg);
  -ms-transform: rotate(106.875deg);
  -webkit-transform: rotate(106.875deg);
  transform: rotate(106.875deg);
}

.month-text .char44 {
  -moz-transform: rotate(112.5deg);
  -o-transform: rotate(112.5deg);
  -ms-transform: rotate(112.5deg);
  -webkit-transform: rotate(112.5deg);
  transform: rotate(112.5deg);
}

.month-text .char45 {
  -moz-transform: rotate(118.125deg);
  -o-transform: rotate(118.125deg);
  -ms-transform: rotate(118.125deg);
  -webkit-transform: rotate(118.125deg);
  transform: rotate(118.125deg);
}

.month-text .char46 {
  -moz-transform: rotate(123.75deg);
  -o-transform: rotate(123.75deg);
  -ms-transform: rotate(123.75deg);
  -webkit-transform: rotate(123.75deg);
  transform: rotate(123.75deg);
}

.month-text .char47 {
  -moz-transform: rotate(129.375deg);
  -o-transform: rotate(129.375deg);
  -ms-transform: rotate(129.375deg);
  -webkit-transform: rotate(129.375deg);
  transform: rotate(129.375deg);
}

.month-text .char48 {
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.day-dial {
  width: 450px;
  height: 450px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.day-preview span {
  position: absolute;
  top: calc(-25% + 45px);
  left: calc(50% - 12.5px);
  height: 450px;
  width: 25px;
}

.day-preview {
  opacity: 0;
  filter: alpha(opacity=0);
}

.day-preview .char1 {
  -moz-transform: rotate(-22.5deg);
  -o-transform: rotate(-22.5deg);
  -ms-transform: rotate(-22.5deg);
  -webkit-transform: rotate(-22.5deg);
  transform: rotate(-22.5deg);
}

.day-preview .char2 {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.day-preview .char3 {
  -moz-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -webkit-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}

.day-preview .char4 {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.day-text span {
  position: absolute;
  top: calc(-25% + 55px);
  left: calc(50% - 6px);
  height: 432px;
  width: 12px;
}

.day-text {
  opacity: 0;
  filter: alpha(opacity=0);
}

.day-text .char1 {
  -moz-transform: rotate(-132.0967741935deg);
  -o-transform: rotate(-132.0967741935deg);
  -ms-transform: rotate(-132.0967741935deg);
  -webkit-transform: rotate(-132.0967741935deg);
  transform: rotate(-132.0967741935deg);
}

.day-text .char2 {
  -moz-transform: rotate(-129.1935483871deg);
  -o-transform: rotate(-129.1935483871deg);
  -ms-transform: rotate(-129.1935483871deg);
  -webkit-transform: rotate(-129.1935483871deg);
  transform: rotate(-129.1935483871deg);
}

.day-text .char3 {
  -moz-transform: rotate(-126.2903225806deg);
  -o-transform: rotate(-126.2903225806deg);
  -ms-transform: rotate(-126.2903225806deg);
  -webkit-transform: rotate(-126.2903225806deg);
  transform: rotate(-126.2903225806deg);
}

.day-text .char4 {
  -moz-transform: rotate(-123.3870967742deg);
  -o-transform: rotate(-123.3870967742deg);
  -ms-transform: rotate(-123.3870967742deg);
  -webkit-transform: rotate(-123.3870967742deg);
  transform: rotate(-123.3870967742deg);
}

.day-text .char5 {
  -moz-transform: rotate(-120.4838709677deg);
  -o-transform: rotate(-120.4838709677deg);
  -ms-transform: rotate(-120.4838709677deg);
  -webkit-transform: rotate(-120.4838709677deg);
  transform: rotate(-120.4838709677deg);
}

.day-text .char6 {
  -moz-transform: rotate(-117.5806451613deg);
  -o-transform: rotate(-117.5806451613deg);
  -ms-transform: rotate(-117.5806451613deg);
  -webkit-transform: rotate(-117.5806451613deg);
  transform: rotate(-117.5806451613deg);
}

.day-text .char7 {
  -moz-transform: rotate(-114.6774193548deg);
  -o-transform: rotate(-114.6774193548deg);
  -ms-transform: rotate(-114.6774193548deg);
  -webkit-transform: rotate(-114.6774193548deg);
  transform: rotate(-114.6774193548deg);
}

.day-text .char8 {
  -moz-transform: rotate(-111.7741935484deg);
  -o-transform: rotate(-111.7741935484deg);
  -ms-transform: rotate(-111.7741935484deg);
  -webkit-transform: rotate(-111.7741935484deg);
  transform: rotate(-111.7741935484deg);
}

.day-text .char9 {
  -moz-transform: rotate(-108.8709677419deg);
  -o-transform: rotate(-108.8709677419deg);
  -ms-transform: rotate(-108.8709677419deg);
  -webkit-transform: rotate(-108.8709677419deg);
  transform: rotate(-108.8709677419deg);
}

.day-text .char10 {
  -moz-transform: rotate(-105.9677419355deg);
  -o-transform: rotate(-105.9677419355deg);
  -ms-transform: rotate(-105.9677419355deg);
  -webkit-transform: rotate(-105.9677419355deg);
  transform: rotate(-105.9677419355deg);
}

.day-text .char11 {
  -moz-transform: rotate(-103.064516129deg);
  -o-transform: rotate(-103.064516129deg);
  -ms-transform: rotate(-103.064516129deg);
  -webkit-transform: rotate(-103.064516129deg);
  transform: rotate(-103.064516129deg);
}

.day-text .char12 {
  -moz-transform: rotate(-100.1612903226deg);
  -o-transform: rotate(-100.1612903226deg);
  -ms-transform: rotate(-100.1612903226deg);
  -webkit-transform: rotate(-100.1612903226deg);
  transform: rotate(-100.1612903226deg);
}

.day-text .char13 {
  -moz-transform: rotate(-97.2580645161deg);
  -o-transform: rotate(-97.2580645161deg);
  -ms-transform: rotate(-97.2580645161deg);
  -webkit-transform: rotate(-97.2580645161deg);
  transform: rotate(-97.2580645161deg);
}

.day-text .char14 {
  -moz-transform: rotate(-94.3548387097deg);
  -o-transform: rotate(-94.3548387097deg);
  -ms-transform: rotate(-94.3548387097deg);
  -webkit-transform: rotate(-94.3548387097deg);
  transform: rotate(-94.3548387097deg);
}

.day-text .char15 {
  -moz-transform: rotate(-91.4516129032deg);
  -o-transform: rotate(-91.4516129032deg);
  -ms-transform: rotate(-91.4516129032deg);
  -webkit-transform: rotate(-91.4516129032deg);
  transform: rotate(-91.4516129032deg);
}

.day-text .char16 {
  -moz-transform: rotate(-88.5483870968deg);
  -o-transform: rotate(-88.5483870968deg);
  -ms-transform: rotate(-88.5483870968deg);
  -webkit-transform: rotate(-88.5483870968deg);
  transform: rotate(-88.5483870968deg);
}

.day-text .char17 {
  -moz-transform: rotate(-85.6451612903deg);
  -o-transform: rotate(-85.6451612903deg);
  -ms-transform: rotate(-85.6451612903deg);
  -webkit-transform: rotate(-85.6451612903deg);
  transform: rotate(-85.6451612903deg);
}

.day-text .char18 {
  -moz-transform: rotate(-82.7419354839deg);
  -o-transform: rotate(-82.7419354839deg);
  -ms-transform: rotate(-82.7419354839deg);
  -webkit-transform: rotate(-82.7419354839deg);
  transform: rotate(-82.7419354839deg);
}

.day-text .char19 {
  -moz-transform: rotate(-79.8387096774deg);
  -o-transform: rotate(-79.8387096774deg);
  -ms-transform: rotate(-79.8387096774deg);
  -webkit-transform: rotate(-79.8387096774deg);
  transform: rotate(-79.8387096774deg);
}

.day-text .char20 {
  -moz-transform: rotate(-76.935483871deg);
  -o-transform: rotate(-76.935483871deg);
  -ms-transform: rotate(-76.935483871deg);
  -webkit-transform: rotate(-76.935483871deg);
  transform: rotate(-76.935483871deg);
}

.day-text .char21 {
  -moz-transform: rotate(-74.0322580645deg);
  -o-transform: rotate(-74.0322580645deg);
  -ms-transform: rotate(-74.0322580645deg);
  -webkit-transform: rotate(-74.0322580645deg);
  transform: rotate(-74.0322580645deg);
}

.day-text .char22 {
  -moz-transform: rotate(-71.1290322581deg);
  -o-transform: rotate(-71.1290322581deg);
  -ms-transform: rotate(-71.1290322581deg);
  -webkit-transform: rotate(-71.1290322581deg);
  transform: rotate(-71.1290322581deg);
}

.day-text .char23 {
  -moz-transform: rotate(-68.2258064516deg);
  -o-transform: rotate(-68.2258064516deg);
  -ms-transform: rotate(-68.2258064516deg);
  -webkit-transform: rotate(-68.2258064516deg);
  transform: rotate(-68.2258064516deg);
}

.day-text .char24 {
  -moz-transform: rotate(-65.3225806452deg);
  -o-transform: rotate(-65.3225806452deg);
  -ms-transform: rotate(-65.3225806452deg);
  -webkit-transform: rotate(-65.3225806452deg);
  transform: rotate(-65.3225806452deg);
}

.day-text .char25 {
  -moz-transform: rotate(-62.4193548387deg);
  -o-transform: rotate(-62.4193548387deg);
  -ms-transform: rotate(-62.4193548387deg);
  -webkit-transform: rotate(-62.4193548387deg);
  transform: rotate(-62.4193548387deg);
}

.day-text .char26 {
  -moz-transform: rotate(-59.5161290323deg);
  -o-transform: rotate(-59.5161290323deg);
  -ms-transform: rotate(-59.5161290323deg);
  -webkit-transform: rotate(-59.5161290323deg);
  transform: rotate(-59.5161290323deg);
}

.day-text .char27 {
  -moz-transform: rotate(-56.6129032258deg);
  -o-transform: rotate(-56.6129032258deg);
  -ms-transform: rotate(-56.6129032258deg);
  -webkit-transform: rotate(-56.6129032258deg);
  transform: rotate(-56.6129032258deg);
}

.day-text .char28 {
  -moz-transform: rotate(-53.7096774194deg);
  -o-transform: rotate(-53.7096774194deg);
  -ms-transform: rotate(-53.7096774194deg);
  -webkit-transform: rotate(-53.7096774194deg);
  transform: rotate(-53.7096774194deg);
}

.day-text .char29 {
  -moz-transform: rotate(-50.8064516129deg);
  -o-transform: rotate(-50.8064516129deg);
  -ms-transform: rotate(-50.8064516129deg);
  -webkit-transform: rotate(-50.8064516129deg);
  transform: rotate(-50.8064516129deg);
}

.day-text .char30 {
  -moz-transform: rotate(-47.9032258065deg);
  -o-transform: rotate(-47.9032258065deg);
  -ms-transform: rotate(-47.9032258065deg);
  -webkit-transform: rotate(-47.9032258065deg);
  transform: rotate(-47.9032258065deg);
}

.day-text .char31 {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.day-text .char32 {
  -moz-transform: rotate(-42.0967741935deg);
  -o-transform: rotate(-42.0967741935deg);
  -ms-transform: rotate(-42.0967741935deg);
  -webkit-transform: rotate(-42.0967741935deg);
  transform: rotate(-42.0967741935deg);
}

.day-text .char33 {
  -moz-transform: rotate(-39.1935483871deg);
  -o-transform: rotate(-39.1935483871deg);
  -ms-transform: rotate(-39.1935483871deg);
  -webkit-transform: rotate(-39.1935483871deg);
  transform: rotate(-39.1935483871deg);
}

.day-text .char34 {
  -moz-transform: rotate(-36.2903225806deg);
  -o-transform: rotate(-36.2903225806deg);
  -ms-transform: rotate(-36.2903225806deg);
  -webkit-transform: rotate(-36.2903225806deg);
  transform: rotate(-36.2903225806deg);
}

.day-text .char35 {
  -moz-transform: rotate(-33.3870967742deg);
  -o-transform: rotate(-33.3870967742deg);
  -ms-transform: rotate(-33.3870967742deg);
  -webkit-transform: rotate(-33.3870967742deg);
  transform: rotate(-33.3870967742deg);
}

.day-text .char36 {
  -moz-transform: rotate(-30.4838709677deg);
  -o-transform: rotate(-30.4838709677deg);
  -ms-transform: rotate(-30.4838709677deg);
  -webkit-transform: rotate(-30.4838709677deg);
  transform: rotate(-30.4838709677deg);
}

.day-text .char37 {
  -moz-transform: rotate(-27.5806451613deg);
  -o-transform: rotate(-27.5806451613deg);
  -ms-transform: rotate(-27.5806451613deg);
  -webkit-transform: rotate(-27.5806451613deg);
  transform: rotate(-27.5806451613deg);
}

.day-text .char38 {
  -moz-transform: rotate(-24.6774193548deg);
  -o-transform: rotate(-24.6774193548deg);
  -ms-transform: rotate(-24.6774193548deg);
  -webkit-transform: rotate(-24.6774193548deg);
  transform: rotate(-24.6774193548deg);
}

.day-text .char39 {
  -moz-transform: rotate(-21.7741935484deg);
  -o-transform: rotate(-21.7741935484deg);
  -ms-transform: rotate(-21.7741935484deg);
  -webkit-transform: rotate(-21.7741935484deg);
  transform: rotate(-21.7741935484deg);
}

.day-text .char40 {
  -moz-transform: rotate(-18.8709677419deg);
  -o-transform: rotate(-18.8709677419deg);
  -ms-transform: rotate(-18.8709677419deg);
  -webkit-transform: rotate(-18.8709677419deg);
  transform: rotate(-18.8709677419deg);
}

.day-text .char41 {
  -moz-transform: rotate(-15.9677419355deg);
  -o-transform: rotate(-15.9677419355deg);
  -ms-transform: rotate(-15.9677419355deg);
  -webkit-transform: rotate(-15.9677419355deg);
  transform: rotate(-15.9677419355deg);
}

.day-text .char42 {
  -moz-transform: rotate(-13.064516129deg);
  -o-transform: rotate(-13.064516129deg);
  -ms-transform: rotate(-13.064516129deg);
  -webkit-transform: rotate(-13.064516129deg);
  transform: rotate(-13.064516129deg);
}

.day-text .char43 {
  -moz-transform: rotate(-10.1612903226deg);
  -o-transform: rotate(-10.1612903226deg);
  -ms-transform: rotate(-10.1612903226deg);
  -webkit-transform: rotate(-10.1612903226deg);
  transform: rotate(-10.1612903226deg);
}

.day-text .char44 {
  -moz-transform: rotate(-7.2580645161deg);
  -o-transform: rotate(-7.2580645161deg);
  -ms-transform: rotate(-7.2580645161deg);
  -webkit-transform: rotate(-7.2580645161deg);
  transform: rotate(-7.2580645161deg);
}

.day-text .char45 {
  -moz-transform: rotate(-4.3548387097deg);
  -o-transform: rotate(-4.3548387097deg);
  -ms-transform: rotate(-4.3548387097deg);
  -webkit-transform: rotate(-4.3548387097deg);
  transform: rotate(-4.3548387097deg);
}

.day-text .char46 {
  -moz-transform: rotate(-1.4516129032deg);
  -o-transform: rotate(-1.4516129032deg);
  -ms-transform: rotate(-1.4516129032deg);
  -webkit-transform: rotate(-1.4516129032deg);
  transform: rotate(-1.4516129032deg);
}

.day-text .char47 {
  -moz-transform: rotate(1.4516129032deg);
  -o-transform: rotate(1.4516129032deg);
  -ms-transform: rotate(1.4516129032deg);
  -webkit-transform: rotate(1.4516129032deg);
  transform: rotate(1.4516129032deg);
}

.day-text .char48 {
  -moz-transform: rotate(4.3548387097deg);
  -o-transform: rotate(4.3548387097deg);
  -ms-transform: rotate(4.3548387097deg);
  -webkit-transform: rotate(4.3548387097deg);
  transform: rotate(4.3548387097deg);
}

.day-text .char49 {
  -moz-transform: rotate(7.2580645161deg);
  -o-transform: rotate(7.2580645161deg);
  -ms-transform: rotate(7.2580645161deg);
  -webkit-transform: rotate(7.2580645161deg);
  transform: rotate(7.2580645161deg);
}

.day-text .char50 {
  -moz-transform: rotate(10.1612903226deg);
  -o-transform: rotate(10.1612903226deg);
  -ms-transform: rotate(10.1612903226deg);
  -webkit-transform: rotate(10.1612903226deg);
  transform: rotate(10.1612903226deg);
}

.day-text .char51 {
  -moz-transform: rotate(13.064516129deg);
  -o-transform: rotate(13.064516129deg);
  -ms-transform: rotate(13.064516129deg);
  -webkit-transform: rotate(13.064516129deg);
  transform: rotate(13.064516129deg);
}

.day-text .char52 {
  -moz-transform: rotate(15.9677419355deg);
  -o-transform: rotate(15.9677419355deg);
  -ms-transform: rotate(15.9677419355deg);
  -webkit-transform: rotate(15.9677419355deg);
  transform: rotate(15.9677419355deg);
}

.day-text .char53 {
  -moz-transform: rotate(18.8709677419deg);
  -o-transform: rotate(18.8709677419deg);
  -ms-transform: rotate(18.8709677419deg);
  -webkit-transform: rotate(18.8709677419deg);
  transform: rotate(18.8709677419deg);
}

.day-text .char54 {
  -moz-transform: rotate(21.7741935484deg);
  -o-transform: rotate(21.7741935484deg);
  -ms-transform: rotate(21.7741935484deg);
  -webkit-transform: rotate(21.7741935484deg);
  transform: rotate(21.7741935484deg);
}

.day-text .char55 {
  -moz-transform: rotate(24.6774193548deg);
  -o-transform: rotate(24.6774193548deg);
  -ms-transform: rotate(24.6774193548deg);
  -webkit-transform: rotate(24.6774193548deg);
  transform: rotate(24.6774193548deg);
}

.day-text .char56 {
  -moz-transform: rotate(27.5806451613deg);
  -o-transform: rotate(27.5806451613deg);
  -ms-transform: rotate(27.5806451613deg);
  -webkit-transform: rotate(27.5806451613deg);
  transform: rotate(27.5806451613deg);
}

.day-text .char57 {
  -moz-transform: rotate(30.4838709677deg);
  -o-transform: rotate(30.4838709677deg);
  -ms-transform: rotate(30.4838709677deg);
  -webkit-transform: rotate(30.4838709677deg);
  transform: rotate(30.4838709677deg);
}

.day-text .char58 {
  -moz-transform: rotate(33.3870967742deg);
  -o-transform: rotate(33.3870967742deg);
  -ms-transform: rotate(33.3870967742deg);
  -webkit-transform: rotate(33.3870967742deg);
  transform: rotate(33.3870967742deg);
}

.day-text .char59 {
  -moz-transform: rotate(36.2903225806deg);
  -o-transform: rotate(36.2903225806deg);
  -ms-transform: rotate(36.2903225806deg);
  -webkit-transform: rotate(36.2903225806deg);
  transform: rotate(36.2903225806deg);
}

.day-text .char60 {
  -moz-transform: rotate(39.1935483871deg);
  -o-transform: rotate(39.1935483871deg);
  -ms-transform: rotate(39.1935483871deg);
  -webkit-transform: rotate(39.1935483871deg);
  transform: rotate(39.1935483871deg);
}

.day-text .char61 {
  -moz-transform: rotate(42.0967741935deg);
  -o-transform: rotate(42.0967741935deg);
  -ms-transform: rotate(42.0967741935deg);
  -webkit-transform: rotate(42.0967741935deg);
  transform: rotate(42.0967741935deg);
}

.day-text .char62 {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.day-text .char63 {
  -moz-transform: rotate(47.9032258065deg);
  -o-transform: rotate(47.9032258065deg);
  -ms-transform: rotate(47.9032258065deg);
  -webkit-transform: rotate(47.9032258065deg);
  transform: rotate(47.9032258065deg);
}

.day-text .char64 {
  -moz-transform: rotate(50.8064516129deg);
  -o-transform: rotate(50.8064516129deg);
  -ms-transform: rotate(50.8064516129deg);
  -webkit-transform: rotate(50.8064516129deg);
  transform: rotate(50.8064516129deg);
}

.day-text .char65 {
  -moz-transform: rotate(53.7096774194deg);
  -o-transform: rotate(53.7096774194deg);
  -ms-transform: rotate(53.7096774194deg);
  -webkit-transform: rotate(53.7096774194deg);
  transform: rotate(53.7096774194deg);
}

.day-text .char66 {
  -moz-transform: rotate(56.6129032258deg);
  -o-transform: rotate(56.6129032258deg);
  -ms-transform: rotate(56.6129032258deg);
  -webkit-transform: rotate(56.6129032258deg);
  transform: rotate(56.6129032258deg);
}

.day-text .char67 {
  -moz-transform: rotate(59.5161290323deg);
  -o-transform: rotate(59.5161290323deg);
  -ms-transform: rotate(59.5161290323deg);
  -webkit-transform: rotate(59.5161290323deg);
  transform: rotate(59.5161290323deg);
}

.day-text .char68 {
  -moz-transform: rotate(62.4193548387deg);
  -o-transform: rotate(62.4193548387deg);
  -ms-transform: rotate(62.4193548387deg);
  -webkit-transform: rotate(62.4193548387deg);
  transform: rotate(62.4193548387deg);
}

.day-text .char69 {
  -moz-transform: rotate(65.3225806452deg);
  -o-transform: rotate(65.3225806452deg);
  -ms-transform: rotate(65.3225806452deg);
  -webkit-transform: rotate(65.3225806452deg);
  transform: rotate(65.3225806452deg);
}

.day-text .char70 {
  -moz-transform: rotate(68.2258064516deg);
  -o-transform: rotate(68.2258064516deg);
  -ms-transform: rotate(68.2258064516deg);
  -webkit-transform: rotate(68.2258064516deg);
  transform: rotate(68.2258064516deg);
}

.day-text .char71 {
  -moz-transform: rotate(71.1290322581deg);
  -o-transform: rotate(71.1290322581deg);
  -ms-transform: rotate(71.1290322581deg);
  -webkit-transform: rotate(71.1290322581deg);
  transform: rotate(71.1290322581deg);
}

.day-text .char72 {
  -moz-transform: rotate(74.0322580645deg);
  -o-transform: rotate(74.0322580645deg);
  -ms-transform: rotate(74.0322580645deg);
  -webkit-transform: rotate(74.0322580645deg);
  transform: rotate(74.0322580645deg);
}

.day-text .char73 {
  -moz-transform: rotate(76.935483871deg);
  -o-transform: rotate(76.935483871deg);
  -ms-transform: rotate(76.935483871deg);
  -webkit-transform: rotate(76.935483871deg);
  transform: rotate(76.935483871deg);
}

.day-text .char74 {
  -moz-transform: rotate(79.8387096774deg);
  -o-transform: rotate(79.8387096774deg);
  -ms-transform: rotate(79.8387096774deg);
  -webkit-transform: rotate(79.8387096774deg);
  transform: rotate(79.8387096774deg);
}

.day-text .char75 {
  -moz-transform: rotate(82.7419354839deg);
  -o-transform: rotate(82.7419354839deg);
  -ms-transform: rotate(82.7419354839deg);
  -webkit-transform: rotate(82.7419354839deg);
  transform: rotate(82.7419354839deg);
}

.day-text .char76 {
  -moz-transform: rotate(85.6451612903deg);
  -o-transform: rotate(85.6451612903deg);
  -ms-transform: rotate(85.6451612903deg);
  -webkit-transform: rotate(85.6451612903deg);
  transform: rotate(85.6451612903deg);
}

.day-text .char77 {
  -moz-transform: rotate(88.5483870968deg);
  -o-transform: rotate(88.5483870968deg);
  -ms-transform: rotate(88.5483870968deg);
  -webkit-transform: rotate(88.5483870968deg);
  transform: rotate(88.5483870968deg);
}

.day-text .char78 {
  -moz-transform: rotate(91.4516129032deg);
  -o-transform: rotate(91.4516129032deg);
  -ms-transform: rotate(91.4516129032deg);
  -webkit-transform: rotate(91.4516129032deg);
  transform: rotate(91.4516129032deg);
}

.day-text .char79 {
  -moz-transform: rotate(94.3548387097deg);
  -o-transform: rotate(94.3548387097deg);
  -ms-transform: rotate(94.3548387097deg);
  -webkit-transform: rotate(94.3548387097deg);
  transform: rotate(94.3548387097deg);
}

.day-text .char80 {
  -moz-transform: rotate(97.2580645161deg);
  -o-transform: rotate(97.2580645161deg);
  -ms-transform: rotate(97.2580645161deg);
  -webkit-transform: rotate(97.2580645161deg);
  transform: rotate(97.2580645161deg);
}

.day-text .char81 {
  -moz-transform: rotate(100.1612903226deg);
  -o-transform: rotate(100.1612903226deg);
  -ms-transform: rotate(100.1612903226deg);
  -webkit-transform: rotate(100.1612903226deg);
  transform: rotate(100.1612903226deg);
}

.day-text .char82 {
  -moz-transform: rotate(103.064516129deg);
  -o-transform: rotate(103.064516129deg);
  -ms-transform: rotate(103.064516129deg);
  -webkit-transform: rotate(103.064516129deg);
  transform: rotate(103.064516129deg);
}

.day-text .char83 {
  -moz-transform: rotate(105.9677419355deg);
  -o-transform: rotate(105.9677419355deg);
  -ms-transform: rotate(105.9677419355deg);
  -webkit-transform: rotate(105.9677419355deg);
  transform: rotate(105.9677419355deg);
}

.day-text .char84 {
  -moz-transform: rotate(108.8709677419deg);
  -o-transform: rotate(108.8709677419deg);
  -ms-transform: rotate(108.8709677419deg);
  -webkit-transform: rotate(108.8709677419deg);
  transform: rotate(108.8709677419deg);
}

.day-text .char85 {
  -moz-transform: rotate(111.7741935484deg);
  -o-transform: rotate(111.7741935484deg);
  -ms-transform: rotate(111.7741935484deg);
  -webkit-transform: rotate(111.7741935484deg);
  transform: rotate(111.7741935484deg);
}

.day-text .char86 {
  -moz-transform: rotate(114.6774193548deg);
  -o-transform: rotate(114.6774193548deg);
  -ms-transform: rotate(114.6774193548deg);
  -webkit-transform: rotate(114.6774193548deg);
  transform: rotate(114.6774193548deg);
}

.day-text .char87 {
  -moz-transform: rotate(117.5806451613deg);
  -o-transform: rotate(117.5806451613deg);
  -ms-transform: rotate(117.5806451613deg);
  -webkit-transform: rotate(117.5806451613deg);
  transform: rotate(117.5806451613deg);
}

.day-text .char88 {
  -moz-transform: rotate(120.4838709677deg);
  -o-transform: rotate(120.4838709677deg);
  -ms-transform: rotate(120.4838709677deg);
  -webkit-transform: rotate(120.4838709677deg);
  transform: rotate(120.4838709677deg);
}

.day-text .char89 {
  -moz-transform: rotate(123.3870967742deg);
  -o-transform: rotate(123.3870967742deg);
  -ms-transform: rotate(123.3870967742deg);
  -webkit-transform: rotate(123.3870967742deg);
  transform: rotate(123.3870967742deg);
}

.day-text .char90 {
  -moz-transform: rotate(126.2903225806deg);
  -o-transform: rotate(126.2903225806deg);
  -ms-transform: rotate(126.2903225806deg);
  -webkit-transform: rotate(126.2903225806deg);
  transform: rotate(126.2903225806deg);
}

.day-text .char91 {
  -moz-transform: rotate(129.1935483871deg);
  -o-transform: rotate(129.1935483871deg);
  -ms-transform: rotate(129.1935483871deg);
  -webkit-transform: rotate(129.1935483871deg);
  transform: rotate(129.1935483871deg);
}

.day-text .char92 {
  -moz-transform: rotate(132.0967741935deg);
  -o-transform: rotate(132.0967741935deg);
  -ms-transform: rotate(132.0967741935deg);
  -webkit-transform: rotate(132.0967741935deg);
  transform: rotate(132.0967741935deg);
}

.day-text .char93 {
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.ring-back {
  opacity: 0.1;
  filter: alpha(opacity=10);
  width: 100%;
  height: 100%;
  border: solid 10px transparent;
  border-radius: 50%;
}

.ring-back:before {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50%;
  border: solid 35px #FFFFFF;
  content: " ";
}

.ring {
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  border: solid 45px #202020;
  border-radius: 50%;
  border-bottom-color: transparent;
  box-shadow: 0px -2px 2px #000;
}

.side-ring {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  width: 200px;
  height: 200px;
  background-color: #202020;
  border-radius: 50%;
  box-shadow: 0px 2px 2px #000;
  color: #000;
  overflow: hidden;
}

#weather {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(20% - 100px);
}

#steps {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(80% - 100px);
}

.fa-cloud {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  color: #555;
  font-size: 80px;
}

.temperature {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 10%;
  left: 55%;
  color: #FFCC00;
  font-size: 20px;
}

.bars {
  opacity: 0;
  filter: alpha(opacity=0);
  position: relative;
  top: calc(50% - 70px);
  left: calc(50% - 65px);
  width: 140px;
  height: 140px;
}

.bar {
  width: 18px;
  height: 140px;
  margin: 0px -4px;
}

.day-letter {
  position: relative;
  top: 110px;
  color: #555;
  font-size: 18px;
  text-align: center;
}

.x {
  position: absolute;
  bottom: 30px;
  left: 1px;
  width: 16px;
  height: 2px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

    JavaScript:

    This jQuery code initializes the clock UI by getting the current date and time, then animating everything step by step: it rotates circular rings to highlight the current day, date, and month, fades elements in/out for a smooth transition, generates random height bars for weekly activity, and continuously updates the clock hands every second using rotation based on real time.

    $(function () {

	var date, dayName, day, month, year;
	var range = 270,
		sectionsDayName = 7,
		sectionsDay = 31,
		sectionsMonth = 12,
		charactersDayName = 3,
		charactersDay = 2,
		charactersMonth = 3,
		dayColor = '#FF2D55',
		monthColor = '#007AFF',
		dayNameColor = '#4CD964';


	// Rotate the selected ring the correct amount and illuminate the correct characters of the ring text
	function rotateRing(input, sections, characters, ring, text, color) {
		var sectionWidth = range / sections;
		var initialRotation = 135 - (sectionWidth / 2);
		var rotateAmount = initialRotation - sectionWidth * (input - 1);
		var start = (characters * (input - 1)) + (input - 1) + 1;

		$(ring).css({
			'-webkit-transform': 'rotate(' + rotateAmount + 'deg)',
			'-moz-transform': 'rotate(' + rotateAmount + 'deg)',
			'-ms-transform': 'rotate(' + rotateAmount + 'deg)',
			'transform': 'rotate(' + rotateAmount + 'deg)'
		});

		for (var i = start; i < start + characters; i++) {
			$(text).children('.char' + i).css({
				'color': color
			});
		}
	}

	// Get a new date object every second and update the rotation of the clock handles
	function clockRotation() {
		setInterval(function () {
			var date = new Date();
			var seconds = date.getSeconds();
			var minutes = date.getMinutes();
			var hours = date.getHours();
			var secondsRotation = seconds * 6;
			var minutesRotation = minutes * 6;
			var hoursRotation = hours * 30 + (minutes / 2);
			$("#seconds").css({
				'-webkit-transform': 'rotate(' + secondsRotation + 'deg)',
				'-moz-transform': 'rotate(' + secondsRotation + 'deg)',
				'-ms-transform': 'rotate(' + secondsRotation + 'deg)',
				'transform': 'rotate(' + secondsRotation + 'deg)'
			});
			$("#minutes").css({
				'-webkit-transform': 'rotate(' + minutesRotation + 'deg)',
				'-moz-transform': 'rotate(' + minutesRotation + 'deg)',
				'-ms-transform': 'rotate(' + minutesRotation + 'deg)',
				'transform': 'rotate(' + minutesRotation + 'deg)'
			});
			$("#hours").css({
				'-webkit-transform': 'rotate(' + hoursRotation + 'deg)',
				'-moz-transform': 'rotate(' + hoursRotation + 'deg)',
				'-ms-transform': 'rotate(' + hoursRotation + 'deg)',
				'transform': 'rotate(' + hoursRotation + 'deg)'
			});
		}, 1000);
	}

	// Give column representing passed days and the current day this week a height
	function loadBars() {
		for (var i = 1; i <= dayName; i++) {
			var newHeight = (Math.floor(Math.random() * 85) + 5);
			var newTop = 110 - newHeight;
			$("#x" + i).css({
				'height': newHeight + 'px',
			});
		}
	}

	function init() {
		$(".center-preview").lettering();
		$(".day-name-preview").lettering();
		$(".day-name-text").lettering();
		$(".day-preview").lettering();
		$(".day-text").lettering();
		$(".month-preview").lettering();
		$(".month-text").lettering();
		$('.day-preview').fadeTo(10, 1);
		$('.month-preview').fadeTo(10, 1);
		$('.day-name-preview').fadeTo(10, 1);
		$('.center-preview').fadeTo(10, 1);

		// Get date variables
		date = new Date();
		dayName = date.getDay(); // Day of week (1-7)
		day = date.getDate(); // Get current date (1-31)
		month = date.getMonth() + 1; // Current month (1-12)
		if (dayName == 0) {
			dayName = 7;
		}
		// Fade in/out second dial and rotate. Also fade in and animate side elements.
		setTimeout(function () {
			$('.day-preview').fadeTo(500, 0);
			$('.day-text').fadeTo(500, 1, function () {
				rotateRing(day, sectionsDay, charactersDay, '#r3', '.day-text', dayColor);
			});
		}, 500);

		// Fade in/out second dial and rotate. Also fade in and animate side elements.
		setTimeout(function () {
			$('.month-preview').fadeTo(500, 0);
			$('.fa-cloud').fadeTo(500, 1);
			$('.temperature').fadeTo(500, 1);
			$('.bars').fadeTo(500, 1);
			$('.month-text').fadeTo(500, 1, function () {
				rotateRing(month, sectionsMonth, charactersMonth, '#r2', '.month-text', monthColor);
				loadBars();
			});
		}, 1000);

		// Fade in/out first dial and rotate
		setTimeout(function () {
			$('.day-name-preview').fadeTo(500, 0);
			$('.day-name-text').fadeTo(500, 1, function () {
				rotateRing(dayName, sectionsDayName, charactersDayName, '#r1', '.day-name-text', dayNameColor);
			});
		}, 1500);

		// Fade in/out center dial
		setTimeout(function () {
			$('.center-preview').fadeTo(500, 0);
			$('.head').fadeTo(500, 0);
			$('.torso').fadeTo(500, 0);
			$(".hand-container").fadeTo(500, 1, function () {
				//console.log("Clock faded in");
			});
		}, 2000);

		// Begin clock rotation now it is visible
		clockRotation();
	}

	init();
});

    In conclusion, this project shows how powerful simple web technologies can be when combined creatively, turning a basic clock into a visually rich and interactive experience; by using HTML for structure, CSS for advanced styling and smooth animations, and JavaScript for real-time updates and dynamic behavior, you learn how to build modern UI components that not only function well but also look impressive and engaging.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply