shonir-analog-clock/shonir-analog-clock/0.1/example.html

Multiple Timezone Simple Analog Clock Using HTML , CSS And Javascript

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.min.js" integrity="sha512-5BqtYqlWfJemW5+v+TZUs22uigI8tXeVah5S/1Z6qBLVO7gakAOtkOzUtgq6dsIo5c0NJdmGPs0H9I+2OHUHVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="css/shonir_analog_clock.css">
<script src="js/shonir_analog_clock.js" type="text/javascript"></script>
<div class="card shadow-sm bg-body rounded mt-4">

<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title">World Clock</h5>
<div class="d-flex"><i class="fas fa-clock fa-lg"></i></div>
</div>

<div class="card-body">
<div class="row">


<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Karachi, Pakistan</div>

<div id="Karachi" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> New York, USA</div>

<div id="New_York" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Dubai, UAE</div>

<div id="Dubai" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Berlin, Germany</div>

<div id="Berlin" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Istanbul, Turkey</div>

<div id="Istanbul" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Melbourne, Australia</div>

<div id="Melbourne" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Riyadh, Saudi Arabia</div>

<div id="Riyadh" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Moscow, Russia</div>

<div id="Moscow" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Kolkata, India</div>

<div id="Kolkata" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Shanghai, China</div>

<div id="Shanghai" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> London, England</div>

<div id="London" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>

<div class="col-sm-3 p-2">

<div class="clock_label text-center border border-light shadow-sm p-2 mb-2 bg-body rounded"> Kuala Lumpur, Malaysia</div>

<div id="Kuala_Lumpur" class="analog_clock d-flex justify-content-center">
<div>
<div class="info date"></div>
<div class="info time"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h_3">3</span>
<span class="h_6">6</span>
<span class="h_9">9</span>
<span class="h_12">12</span>
</div>
<div class="diallines"></div>
</div>

</div>



</div>
</div>
<script> 
window.addEventListener('load', (event) => {
int_shonir_analog_clock("Karachi", "Asia/Karachi");
int_shonir_analog_clock("New_York", "America/New_York");
int_shonir_analog_clock("Dubai", "Asia/Dubai");
int_shonir_analog_clock("Berlin", "Europe/Berlin");
int_shonir_analog_clock("Istanbul", "Asia/Istanbul");
int_shonir_analog_clock("Melbourne", "Australia/Melbourne");
int_shonir_analog_clock("Riyadh", "Asia/Riyadh");
int_shonir_analog_clock("Moscow", "Europe/Moscow");
int_shonir_analog_clock("Kolkata", "Asia/Kolkata");
int_shonir_analog_clock("Shanghai", "Asia/Shanghai");
int_shonir_analog_clock("London", "Europe/London");
int_shonir_analog_clock("Kuala_Lumpur", "Asia/Kuala_Lumpur");
  });
  </script>