<?php
######################################################################
# Clocks
# --------------------------------------------------------------------
#
# Copyright (c) 2024 by LAB3W : O.Romain Jaillet-ramey - (orj+clocks@lab3w.fr)
#
# Date Create : 2023/10/01
# Date Modify : 2024/03/27
#
######################################################################

/*
$timezone_identifiers = DateTimeZone::listIdentifiers( DateTimeZone::PER_COUNTRY, "CA" );
foreach( $timezone_identifiers as $identifier ) {
    echo $identifier."<br/>\n";
}
*/
$TZ_Kuala_Lumpur 'Asia/Kuala_Lumpur';
$TZ_Montreal 'America/Montreal';
$TZ_Melbourne 'Australia/Melbourne';
$TZ_Hong_Kong 'Asia/Hong_Kong';
$TZ_Mayotte 'Indian/Mayotte';
$TZ_Qatar 'Asia/Qatar';
$TZ_Tokyo 'Asia/Tokyo';
$TZ_Los_Angeles 'America/Los_Angeles';
$TZ_Vancouver 'America/Vancouver';
$TZ_New_York 'America/New_York';
$TZ_Buenos_Aires 'America/Argentina/Buenos_Aires';
$TZ_Ushuaia 'America/Argentina/Ushuaia';
$TZ_London 'Europe/London';
$TZ_Madrid 'Europe/Madrid';
$TZ_Berlin 'Europe/Berlin';
$TZ_Paris 'Europe/Paris';
$TZ_Casablanca 'Africa/Casablanca';
$TZ_Bujumbura 'Africa/Bujumbura';
$TZ_Seoul 'Asia/Seoul';
$TZ_Vladivostok 'Asia/Vladivostok';
//Pacific/Honolulu

date_default_timezone_set($TZ_Kuala_Lumpur);
$date date('Y-m-d');
$TZ_Kuala_Lumpur = new DateTimeZone($TZ_Kuala_Lumpur);
$SI_Kuala_Lumpur date_sun_info(strtotime($date), $TZ_Kuala_Lumpur->getLocation()['latitude'], $TZ_Kuala_Lumpur->getLocation()['longitude']);
foreach (
$SI_Kuala_Lumpur as $key => $val) {
  
$SI_Kuala_Lumpur[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Montreal);
$date date('Y-m-d');
$TZ_Montreal = new DateTimeZone($TZ_Montreal);
$SI_Montreal date_sun_info(strtotime($date), $TZ_Montreal->getLocation()['latitude'], $TZ_Montreal->getLocation()['longitude']);
foreach (
$SI_Montreal as $key => $val) {
  
$SI_Montreal[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Melbourne);
$date date('Y-m-d');
$TZ_Melbourne = new DateTimeZone($TZ_Melbourne);
$SI_Melbourne date_sun_info(strtotime($date), $TZ_Melbourne->getLocation()['latitude'], $TZ_Melbourne->getLocation()['longitude']);
foreach (
$SI_Melbourne as $key => $val) {
  
$SI_Melbourne[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Hong_Kong);
$date date('Y-m-d');
$TZ_Hong_Kong = new DateTimeZone($TZ_Hong_Kong);
$SI_Hong_Kong date_sun_info(strtotime($date), $TZ_Hong_Kong->getLocation()['latitude'], $TZ_Hong_Kong->getLocation()['longitude']);
foreach (
$SI_Hong_Kong as $key => $val) {
  
$SI_Hong_Kong[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Mayotte);
$date date('Y-m-d');
$TZ_Mayotte = new DateTimeZone($TZ_Mayotte);
$SI_Mayotte date_sun_info(strtotime($date), $TZ_Mayotte->getLocation()['latitude'], $TZ_Mayotte->getLocation()['longitude']);
foreach (
$SI_Mayotte as $key => $val) {
  
$SI_Mayotte[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Qatar);
$date date('Y-m-d');
$TZ_Qatar = new DateTimeZone($TZ_Qatar);
$SI_Qatar date_sun_info(strtotime($date), $TZ_Qatar->getLocation()['latitude'], $TZ_Qatar->getLocation()['longitude']);
foreach (
$SI_Qatar as $key => $val) {
  
$SI_Qatar[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Tokyo);
$date date('Y-m-d');
$TZ_Tokyo = new DateTimeZone($TZ_Tokyo);
$SI_Tokyo date_sun_info(strtotime($date), $TZ_Tokyo->getLocation()['latitude'], $TZ_Tokyo->getLocation()['longitude']);
foreach (
$SI_Tokyo as $key => $val) {
  
$SI_Tokyo[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Los_Angeles);
$date date('Y-m-d');
$TZ_Los_Angeles = new DateTimeZone($TZ_Los_Angeles);
$SI_Los_Angeles date_sun_info(strtotime($date), $TZ_Los_Angeles->getLocation()['latitude'], $TZ_Los_Angeles->getLocation()['longitude']);
foreach (
$SI_Los_Angeles as $key => $val) {
  
$SI_Los_Angeles[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Vancouver);
$date date('Y-m-d');
$TZ_Vancouver = new DateTimeZone($TZ_Vancouver);
$SI_Vancouver date_sun_info(strtotime($date), $TZ_Vancouver->getLocation()['latitude'], $TZ_Vancouver->getLocation()['longitude']);
foreach (
$SI_Vancouver as $key => $val) {
  
$SI_Vancouver[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_New_York);
$date date('Y-m-d');
$TZ_New_York = new DateTimeZone($TZ_New_York);
$SI_New_York date_sun_info(strtotime($date), $TZ_New_York->getLocation()['latitude'], $TZ_New_York->getLocation()['longitude']);
foreach (
$SI_New_York as $key => $val) {
  
$SI_New_York[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Buenos_Aires);
$date date('Y-m-d');
$TZ_Buenos_Aires = new DateTimeZone($TZ_Buenos_Aires);
$SI_Buenos_Aires date_sun_info(strtotime($date), $TZ_Buenos_Aires->getLocation()['latitude'], $TZ_Buenos_Aires->getLocation()['longitude']);
foreach (
$SI_Buenos_Aires as $key => $val) {
  
$SI_Buenos_Aires[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Ushuaia);
$date date('Y-m-d');
$TZ_Ushuaia = new DateTimeZone($TZ_Ushuaia);
$SI_Ushuaia date_sun_info(strtotime($date), $TZ_Ushuaia->getLocation()['latitude'], $TZ_Ushuaia->getLocation()['longitude']);
foreach (
$SI_Ushuaia as $key => $val) {
  
$SI_Ushuaia[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_London);
$date date('Y-m-d');
$TZ_London = new DateTimeZone($TZ_London);
$SI_London date_sun_info(strtotime($date), $TZ_London->getLocation()['latitude'], $TZ_London->getLocation()['longitude']);
foreach (
$SI_London as $key => $val) {
  
$SI_London[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Madrid);
$date date('Y-m-d');
$TZ_Madrid = new DateTimeZone($TZ_Madrid);
$SI_Madrid date_sun_info(strtotime($date), $TZ_Madrid->getLocation()['latitude'], $TZ_Madrid->getLocation()['longitude']);
foreach (
$SI_Madrid as $key => $val) {
  
$SI_Madrid[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Berlin);
$date date('Y-m-d');
$TZ_Berlin = new DateTimeZone($TZ_Berlin);
$SI_Berlin date_sun_info(strtotime($date), $TZ_Berlin->getLocation()['latitude'], $TZ_Berlin->getLocation()['longitude']);
foreach (
$SI_Berlin as $key => $val) {
  
$SI_Berlin[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Paris);
$date date('Y-m-d');
$TZ_Paris = new DateTimeZone($TZ_Paris);
$SI_Paris date_sun_info(strtotime($date), $TZ_Paris->getLocation()['latitude'], $TZ_Paris->getLocation()['longitude']);
foreach (
$SI_Paris as $key => $val) {
  
$SI_Paris[$key] = date("H:i:s"$val);
}

//echo '<pre>'.print_r($SI_Paris,1).'</pre>';

date_default_timezone_set($TZ_Casablanca);
$date date('Y-m-d');
$TZ_Casablanca = new DateTimeZone($TZ_Casablanca);
$SI_Casablanca date_sun_info(strtotime($date), $TZ_Casablanca->getLocation()['latitude'], $TZ_Casablanca->getLocation()['longitude']);
foreach (
$SI_Casablanca as $key => $val) {
  
$SI_Casablanca[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Bujumbura);
$date date('Y-m-d');
$TZ_Bujumbura = new DateTimeZone($TZ_Bujumbura);
$SI_Bujumbura date_sun_info(strtotime($date), $TZ_Bujumbura->getLocation()['latitude'], $TZ_Bujumbura->getLocation()['longitude']);
foreach (
$SI_Bujumbura as $key => $val) {
  
$SI_Bujumbura[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Seoul);
$date date('Y-m-d');
$TZ_Seoul = new DateTimeZone($TZ_Seoul);
$SI_Seoul date_sun_info(strtotime($date), $TZ_Seoul->getLocation()['latitude'], $TZ_Seoul->getLocation()['longitude']);
foreach (
$SI_Seoul as $key => $val) {
  
$SI_Seoul[$key] = date("H:i:s"$val);
}

date_default_timezone_set($TZ_Vladivostok);
$date date('Y-m-d');
$TZ_Vladivostok = new DateTimeZone($TZ_Vladivostok);
$SI_Vladivostok date_sun_info(strtotime($date), $TZ_Vladivostok->getLocation()['latitude'], $TZ_Vladivostok->getLocation()['longitude']);
foreach (
$SI_Vladivostok as $key => $val) {
  
$SI_Vladivostok[$key] = date("H:i:s"$val);
}


/*
echo 'Kuala_Lumpur<pre>'.print_r($TZ_Kuala_Lumpur->getLocation(),1).'</pre>';
echo 'Montreal<pre>'.print_r($TZ_Montreal->getLocation(),1).'</pre>';
echo 'Melbourne<pre>'.print_r($TZ_Melbourne->getLocation(),1).'</pre>';
echo 'Hong_Kong<pre>'.print_r($TZ_Hong_Kong->getLocation(),1).'</pre>';
echo 'Qatar<pre>'.print_r($TZ_Qatar->getLocation(),1).'</pre>';
echo 'Tokyo<pre>'.print_r($TZ_Tokyo->getLocation(),1).'</pre>';
echo 'Los_Angeles<pre>'.print_r($TZ_Los_Angeles->getLocation(),1).'</pre>';
echo 'Vancouver<pre>'.print_r($TZ_Vancouver->getLocation(),1).'</pre>';
echo 'New_York<pre>'.print_r($TZ_New_York->getLocation(),1).'</pre>';
echo 'Buenos_Aires<pre>'.print_r($TZ_Buenos_Aires->getLocation(),1).'</pre>';
echo 'Ushuaia<pre>'.print_r($TZ_Ushuaia->getLocation(),1).'</pre>';
echo 'London<pre>'.print_r($TZ_London->getLocation(),1).'</pre>';
echo 'Madrid<pre>'.print_r($TZ_Madrid->getLocation(),1).'</pre>';
echo 'Berlin<pre>'.print_r($TZ_Berlin->getLocation(),1).'</pre>';
echo 'Paris<pre>'.print_r($TZ_Paris->getLocation(),1).'</pre>';
echo 'Paris LAT<pre>'.print_r($TZ_Paris->getLocation()['latitude'],1).'</pre>';
echo 'Paris LONG<pre>'.print_r($TZ_Paris->getLocation()['longitude'],1).'</pre>';

echo 'New_York<pre>'.print_r($TZ_New_York->getLocation(),1).'</pre>';
echo 'New_York<pre>'.print_r($SI_New_York,1).'</pre>';
*/

//echo 'Paris<pre>'.print_r($SI_Paris,1).'</pre>';
//echo 'Berlin<pre>'.print_r($SI_Berlin,1).'</pre>';

// #001c6f bleu foncĂ©
// #21409b
// #4665bd

?>
<!DOCTYPE html>
<html>
<head>
<title>Clocks :-: ZW3B</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Cache-control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Refresh" content="43200 " />

<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="Robots" content="index, follow" />
<meta name="Title" content="ZW3B :-: Clocks" />
<meta name="Description" content="International clocks, hours, date" />
<meta name="Keywords" content="Melbourne, Vladivostok, Seoul, Tokyo, Hong_Kong, Kuala_Lumpur, Mayotte, Qatar, Bujumbura, Paris, Madrid, Berlin, Casablanca, London, Buenos_Aires, Ushuaia, Montreal, New_York, Los_Angeles, Vancouver" />
<meta name="Author" content="O.Romain.Jaillet-ramey" />

<meta name="DC.Date.created" scheme="W3CDTF" content="2023-10-23" />
<meta name="DC.Date.modified" scheme="W3CDTF" content="2023-10-24" />

<meta name="Viewport" content="width=device-width" />
<meta name="Theme-color" content="#565656" />

<link rel="canonical" href="https://zw3b.blog/clocks.html" />
<link rel="shortcut icon" href="https://zw3b.blog/zw3b-logo-night-20x20.10.png" />
<style type="text/css">
body, html {
    background-color: #EEE;
    color: #000;
}
#website {
    margin:0 auto;
    width: 100%;
}
.item {
    float:left;
    min-width: 210px;
    min-height: 280px;
    margin: 5px;
    margin-bottom: 30px;
}
.item  h4 {
    text-align: center;
    margin-top:10px;
    margin-bottom: 5px;

    text-align: center;
    margin-top: 0px;
    margin-bottom: 15px;
    border: 1px solid #5c5c5c;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0px 1px 4px -3px #000;
    padding-bottom: 5px;
}
.item  h4 a {
    text-decoration: none;
    color: #000;
}
.item  h4 a:hover {
    text-decoration: underline;
}
.item  span.date {
    display: block;
    clear: both;
    font-weight: normal;
    font-size: 0.9em;
}
.clock {
     border-radius: 50%;
     background: #FFF;
     border: 5px solid white;
     box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0px 1px 10px -3px #000;
     width: 350px;
     height: 350px;
     width: 200px;
     height: 200px;

     border: 10px solid #5c5c5c;
     border: 10px solid #5c5c5c;
}
.clock.night {
    background: #000;
}
.clock.twilight_end {
    background: #001c6f;
}
.clock.night .minute, .clock.night .heure {
    background: #FFF;
}
.clock.twilight_end .minute, .clock.twilight_end .heure {
    background: #FFF;
}
.wrap {
     position: relative;
     width: 350px;
     height: 350px;
     width: 200px;
     height: 200px;
}
.minute, .heure {
     position: absolute;
     height: 100px;
     height: 55px;
     width: 6px;
     margin: auto;
     top: -27%; left: 0;    bottom: 0; right: 0;
     transform-origin: bottom center;
     transform: rotate(0deg);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
          background: black;
}
.minute {
     position: absolute;
     height: 130px;
     height: 75px;
     width: 4px;
     top: -38%;
     left: 0;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
     transform: rotate(90deg);
}
.seconde {
     position: absolute;
     height: 90px;
     height: 50px;
     width: 2px;
     margin: auto;
     top: -26%;
     left: 0;
     bottom: 0;
     right: 0;
     border-radius: 4px;
     background: #ff4b3e;
     transform-origin: bottom center;
     transform: rotate(180deg);
}
.dot {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: red;
     border: 2px solid #1b1b1b;
     border-radius: 50%;
     margin: auto;

/*     background: radial-gradient(ellipse 20px 15px at 50% 0, #ececec 40%, #5c5c5c 80%);*/
}

div.cad {
   position: absolute;
}
.twelve,
.three,
.six,
.nine {
   position: relative;
   font-family: Lato, sans-serif;
   font-size: 1.5em;
   color: #777;
}

.twelve {
   top: 25px;
   left: 85px;
}
.three {
   top: 85px;
   right: -125px;
}
.six {
   left: 45px;
   bottom: -145px;
}
.nine {
   top: 85px;
   left: -35px;
}
.diallines {
   position: absolute;
   top: 0;
   left: 100px;
   margin-left: -1px;
   width: 2px;
   height: 10px;
   background: #b3b3b0;
   z-index: 1;
   transform-origin: 50% 100px;
}

.diallines:nth-of-type(5n) {
   position: absolute;
   top: 0;
   left: 100px;
   margin-left: -2px;
   width: 4px;
   height: 25px;
   background: #b3b3b0;
   z-index: 1;
   transform-origin: 50% 100px;
}

div.copyright {
    clear: both; 
    text-align: left;
}
div.copyright a {
    color: #000;
}

</style>

</head>

<body>
<div id="website" >


<div class="item" id="Melbourne">
<h4>Australia/<a href="https://www.google.com/maps/place/Melbourne">Melbourne</a> <span class="date" data-sunrise="<?php echo $SI_Melbourne['sunrise']; ?>"  data-sunset="<?php echo $SI_Melbourne['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Melbourne['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Melbourne['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Vladivostok">
<h4>Asia/<a href="https://www.google.com/maps/place/Vladivostok">Vladivostok</a> <span class="date" data-sunrise="<?php echo $SI_Vladivostok['sunrise']; ?>"  data-sunset="<?php echo $SI_Vladivostok['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Vladivostok['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Vladivostok['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Seoul">
<h4>Asia/<a href="https://www.google.com/maps/place/Seoul">Seoul</a> <span class="date" data-sunrise="<?php echo $SI_Seoul['sunrise']; ?>"  data-sunset="<?php echo $SI_Seoul['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Seoul['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Seoul['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>



<div class="item" id="Tokyo">
<h4>Asia/<a href="https://www.google.com/maps/place/Tokyo">Tokyo</a> <span class="date" data-sunrise="<?php echo $SI_Tokyo['sunrise']; ?>"  data-sunset="<?php echo $SI_Tokyo['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Tokyo['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Tokyo['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>



<div class="item" id="Hong_Kong">
<h4>Asia/<a href="https://www.google.com/maps/place/Hong_Kong">Hong_Kong</a> <span class="date" data-sunrise="<?php echo $SI_Hong_Kong['sunrise']; ?>"  data-sunset="<?php echo $SI_Hong_Kong['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Hong_Kong['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Hong_Kong['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>


<div class="item" id="Kuala_Lumpur">
<h4>Asia/<a href="https://www.google.com/maps/place/Kuala_Lumpur">Kuala_Lumpur</a> <span class="date" data-sunrise="<?php echo $SI_Kuala_Lumpur['sunrise']; ?>"  data-sunset="<?php echo $SI_Kuala_Lumpur['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Kuala_Lumpur['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Kuala_Lumpur['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>



<div class="item" id="Mayotte">
<h4>Indian/<a href="https://www.google.com/maps/place/Mayotte">Mayotte</a> <span class="date" data-sunrise="<?php echo $SI_Mayotte['sunrise']; ?>"  data-sunset="<?php echo $SI_Mayotte['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Mayotte['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Mayotte['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Qatar">
<h4>Asia/<a href="https://www.google.com/maps/place/Qatar">Qatar</a> <span class="date" data-sunrise="<?php echo $SI_Qatar['sunrise']; ?>"  data-sunset="<?php echo $SI_Qatar['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Qatar['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Qatar['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Bujumbura">
<h4>Africa/<a href="https://www.google.com/maps/place/Bujumbura">Bujumbura</a> <span class="date" data-sunrise="<?php echo $SI_Bujumbura['sunrise']; ?>"  data-sunset="<?php echo $SI_Bujumbura['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Bujumbura['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Bujumbura['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Paris">
<h4>Europe/<a href="https://www.google.com/maps/place/Paris">Paris</a> <span class="date" data-sunrise="<?php echo $SI_Paris['sunrise']; ?>"  data-sunset="<?php echo $SI_Paris['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Paris['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Paris['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Madrid">
<h4>Europe/<a href="https://www.google.com/maps/place/Madrid">Madrid</a> <span class="date" data-sunrise="<?php echo $SI_Madrid['sunrise']; ?>"  data-sunset="<?php echo $SI_Madrid['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Madrid['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Madrid['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Berlin">
<h4>Europe/<a href="https://www.google.com/maps/place/Berlin">Berlin</a> <span class="date" data-sunrise="<?php echo $SI_Berlin['sunrise']; ?>"  data-sunset="<?php echo $SI_Berlin['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Berlin['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Berlin['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Casablanca">
<h4>Africa/<a href="https://www.google.com/maps/place/Casablanca">Casablanca</a> <span class="date" data-sunrise="<?php echo $SI_Casablanca['sunrise']; ?>"  data-sunset="<?php echo $SI_Casablanca['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Casablanca['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Casablanca['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>



<div class="item" id="London">
<h4>Europe/<a href="https://www.google.com/maps/place/London">London</a> <span class="date" data-sunrise="<?php echo $SI_London['sunrise']; ?>"  data-sunset="<?php echo $SI_London['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_London['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_London['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>






<div class="item" id="Buenos_Aires">
<h4>Argentina/<a href="https://www.google.com/maps/place/Buenos_Aires">Buenos_Aires</a> <span class="date" data-sunrise="<?php echo $SI_Buenos_Aires['sunrise']; ?>"  data-sunset="<?php echo $SI_Buenos_Aires['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Buenos_Aires['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Buenos_Aires['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Ushuaia">
<h4>Argentina/<a href="https://www.google.com/maps/place/Ushuaia">Ushuaia</a> <span class="date" data-sunrise="<?php echo $SI_Ushuaia['sunrise']; ?>"  data-sunset="<?php echo $SI_Ushuaia['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Ushuaia['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Ushuaia['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>






<div class="item" id="Montreal">
<h4>America/<a href="https://www.google.com/maps/place/Montreal">Montreal</a> <span class="date" data-sunrise="<?php echo $SI_Montreal['sunrise']; ?>"  data-sunset="<?php echo $SI_Montreal['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Montreal['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Montreal['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>


<div class="item" id="New_York">
<h4>America/<a href="https://www.google.com/maps/place/New_York">New_York</a> <span class="date" data-sunrise="<?php echo $SI_New_York['sunrise']; ?>"  data-sunset="<?php echo $SI_New_York['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_New_York['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_New_York['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>



<div class="item" id="Los_Angeles">
<h4>America/<a href="https://www.google.com/maps/place/Los_Angeles">Los_Angeles</a> <span class="date" data-sunrise="<?php echo $SI_Los_Angeles['sunrise']; ?>"  data-sunset="<?php echo $SI_Los_Angeles['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Los_Angeles['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Los_Angeles['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>




<div class="item" id="Vancouver">
<h4>America/<a href="https://www.google.com/maps/place/Vancouver">Vancouver</a> <span class="date" data-sunrise="<?php echo $SI_Vancouver['sunrise']; ?>"  data-sunset="<?php echo $SI_Vancouver['sunset']; ?>" data-civil_twilight_begin="<?php echo $SI_Vancouver['civil_twilight_begin']; ?>" data-civil_twilight_end="<?php echo $SI_Vancouver['civil_twilight_end']; ?>"></span></h4>
<div class="clock">
  <div class="cad">
      <span class="twelve">12</span>
      <span class="three">3</span>
      <span class="six">6</span>
      <span class="nine">9</span>
      <span class="diallines"></span>
  </div>

  <div class="wrap">
    <span class="heure"></span>
    <span class="minute"></span>
    <span class="seconde"></span>
    <span class="dot"></span>
  </div>
</div>
</div>







</div>

<div class="copyright">
<br/><br/><a href="https://www.zw3b.fr">ZW3B</a> :-: <a href="https://zw3b.blog/clocks.php">Clocks</a> (<a href="https://zw3b.blog/clocks.phps" target="_blank">PHPSource</a>) - Hours in this world
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
// https://blog.avada.io/css/clocks#analog-clock-nail-davlyatchin
//var dialLines = document.getElementsByClassName('diallines');

function dialLines(divID) {

    //var dialLines = jQuery('#Paris .diallines');
    var dialLines = jQuery(divID);

    for (var i = 1; i < 60; i++) {
       dialLines[i] = jQuery(dialLines[i-1]).clone()
                                       .insertAfter($(dialLines[i-1]));
       jQuery(dialLines[i]).css('transform', 'rotate(' + 6 * i + 'deg)');
    }
}

  dialLines('#Melbourne .diallines');
  dialLines('#Hong_Kong .diallines');
  dialLines('#Kuala_Lumpur .diallines');
  dialLines('#Tokyo .diallines');
  dialLines('#Qatar .diallines');
  dialLines('#Mayotte .diallines');
  dialLines('#London .diallines');
  dialLines('#Madrid .diallines');
  dialLines('#Paris .diallines');
  dialLines('#Casablanca .diallines');
  dialLines('#New_York .diallines');
  dialLines('#Montreal .diallines');
  dialLines('#Vancouver .diallines');
  dialLines('#Buenos_Aires .diallines');
  dialLines('#Ushuaia .diallines');
  dialLines('#Berlin .diallines');
  dialLines('#Los_Angeles .diallines');

  dialLines('#Bujumbura .diallines');
  dialLines('#Seoul .diallines');
  dialLines('#Vladivostok .diallines');

</script>

<script type="text/javascript">
// https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
// https://www.php.net/manual/en/timezones.php

clock_default();

function changeTimeZone(date, tz) {
  // https://bobbyhadz.com/blog/javascript-initialize-date-with-timezone (Borislav Hadzhiev)
  //var options = { timeZone: timeZone, weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };

  if (typeof date === 'string') {
    return new Date(
      new Date(date).toLocaleString('en-US', {
        timeZone: tz, weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
      }),
    );
  }

  return new Date(
    date.toLocaleString('en-US', {
      timeZone: tz, weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
    }),
  );
}

function clock_default() {
  // https://believemy.com/r/creer-un-horloge-grace-a-javascript (Louis-Nicolas Leuillet)

  const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
  const options_hours = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };

  //-------
  // Vladivostok
  // console.log('Vladivostok');

  const VladivostokDate = changeTimeZone(new Date(), 'Asia/Vladivostok');

  const hoursVladivostok = ((VladivostokDate.getHours() + 11) % 12 + 1);
  const minutesVladivostok = VladivostokDate.getMinutes();
  const secondsVladivostok = VladivostokDate.getSeconds();

  //const hourVladivostok = hoursVladivostok * 30;
  const minuteVladivostok = minutesVladivostok * 6;
  const secondVladivostok = secondsVladivostok * 6;
  const hourVladivostok = hoursVladivostok * 30 + (minuteVladivostok / 12);

  document.querySelector('#Vladivostok .heure').style.transform = `rotate(${hourVladivostok}deg)`;
  document.querySelector('#Vladivostok .minute').style.transform = `rotate(${minuteVladivostok}deg)`;
  document.querySelector('#Vladivostok .seconde').style.transform = `rotate(${secondVladivostok}deg)`;

  document.querySelector('#Vladivostok .date').innerHTML = VladivostokDate.toLocaleDateString("en-EN", options);

  var theHourVladivostok = VladivostokDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseVladivostok = jQuery('#Vladivostok span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetVladivostok = jQuery('#Vladivostok span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginVladivostok = jQuery('#Vladivostok span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endVladivostok = jQuery('#Vladivostok span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourVladivostok > sunriseVladivostok && theHourVladivostok < civil_twilight_endVladivostok)
       ||
       (theHourVladivostok < civil_twilight_endVladivostok && theHourVladivostok > sunriseVladivostok)
      ) {
      //console.log('c le jour a Vladivostok');
    jQuery('#Vladivostok .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Vladivostok .clock').addClass('night');

  }

  //-------
  // Bujumbura
  // console.log('Bujumbura');

  const BujumburaDate = changeTimeZone(new Date(), 'Africa/Bujumbura');

  const hoursBujumbura = ((BujumburaDate.getHours() + 11) % 12 + 1);
  const minutesBujumbura = BujumburaDate.getMinutes();
  const secondsBujumbura = BujumburaDate.getSeconds();

  //const hourBujumbura = hoursBujumbura * 30;
  const minuteBujumbura = minutesBujumbura * 6;
  const secondBujumbura = secondsBujumbura * 6;
  const hourBujumbura = hoursBujumbura * 30 + (minuteBujumbura / 12);

  document.querySelector('#Bujumbura .heure').style.transform = `rotate(${hourBujumbura}deg)`;
  document.querySelector('#Bujumbura .minute').style.transform = `rotate(${minuteBujumbura}deg)`;
  document.querySelector('#Bujumbura .seconde').style.transform = `rotate(${secondBujumbura}deg)`;

  document.querySelector('#Bujumbura .date').innerHTML = BujumburaDate.toLocaleDateString("en-EN", options);

  var theHourBujumbura = BujumburaDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseBujumbura = jQuery('#Bujumbura span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetBujumbura = jQuery('#Bujumbura span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginBujumbura = jQuery('#Bujumbura span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endBujumbura = jQuery('#Bujumbura span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourBujumbura > sunriseBujumbura && theHourBujumbura < civil_twilight_endBujumbura)
       ||
       (theHourBujumbura < civil_twilight_endBujumbura && theHourBujumbura > sunriseBujumbura)
      ) {
      //console.log('c le jour a Bujumbura');
    jQuery('#Bujumbura .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Bujumbura .clock').addClass('night');

  }

  //-------
  // Seoul
  // console.log('Seoul');

  const SeoulDate = changeTimeZone(new Date(), 'Asia/Seoul');

  const hoursSeoul = ((SeoulDate.getHours() + 11) % 12 + 1);
  const minutesSeoul = SeoulDate.getMinutes();
  const secondsSeoul = SeoulDate.getSeconds();

  //const hourSeoul = hoursSeoul * 30;
  const minuteSeoul = minutesSeoul * 6;
  const secondSeoul = secondsSeoul * 6;
  const hourSeoul = hoursSeoul * 30 + (minuteSeoul / 12);
  
  document.querySelector('#Seoul .heure').style.transform = `rotate(${hourSeoul}deg)`;
  document.querySelector('#Seoul .minute').style.transform = `rotate(${minuteSeoul}deg)`;
  document.querySelector('#Seoul .seconde').style.transform = `rotate(${secondSeoul}deg)`;

  document.querySelector('#Seoul .date').innerHTML = SeoulDate.toLocaleDateString("en-EN", options);

  var theHourSeoul = SeoulDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseSeoul = jQuery('#Seoul span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetSeoul = jQuery('#Seoul span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginSeoul = jQuery('#Seoul span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endSeoul = jQuery('#Seoul span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourSeoul > sunriseSeoul && theHourSeoul < civil_twilight_endSeoul)
       ||
       (theHourSeoul < civil_twilight_endSeoul && theHourSeoul > sunriseSeoul)
      ) {
      //console.log('c le jour a Seoul');
    jQuery('#Seoul .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Seoul .clock').addClass('night');

  }

  //-------
  // Melbourne
  // console.log('Melbourne');

  const MelbourneDate = changeTimeZone(new Date(), 'Australia/Melbourne');

  const hoursMelbourne = ((MelbourneDate.getHours() + 11) % 12 + 1);
  const minutesMelbourne = MelbourneDate.getMinutes();
  const secondsMelbourne = MelbourneDate.getSeconds();

  //const hourMelbourne = hoursMelbourne * 30:
  const minuteMelbourne = minutesMelbourne * 6;
  const secondMelbourne = secondsMelbourne * 6;
  const hourMelbourne = hoursMelbourne * 30 + (minuteMelbourne / 12);
  
  document.querySelector('#Melbourne .heure').style.transform = `rotate(${hourMelbourne}deg)`;
  document.querySelector('#Melbourne .minute').style.transform = `rotate(${minuteMelbourne}deg)`;
  document.querySelector('#Melbourne .seconde').style.transform = `rotate(${secondMelbourne}deg)`;

  document.querySelector('#Melbourne .date').innerHTML = MelbourneDate.toLocaleDateString("en-EN", options);

  var theHourMelbourne = MelbourneDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseMelbourne = jQuery('#Melbourne span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetMelbourne = jQuery('#Melbourne span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginMelbourne = jQuery('#Melbourne span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endMelbourne = jQuery('#Melbourne span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourMelbourne > sunriseMelbourne && theHourMelbourne < civil_twilight_endMelbourne)
       ||
       (theHourMelbourne < civil_twilight_endMelbourne && theHourMelbourne > sunriseMelbourne)
      ) {
      //console.log('c le jour a Melbourne');
    jQuery('#Melbourne .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Melbourne .clock').addClass('night');

  }

  //-------
  // Kuala_Lumpur
  // console.log('Kuala_Lumpur');

  const Kuala_LumpurDate = changeTimeZone(new Date(), 'Asia/Kuala_Lumpur');

  const hoursKuala_Lumpur = ((Kuala_LumpurDate.getHours() + 11) % 12 + 1);
  const minutesKuala_Lumpur = Kuala_LumpurDate.getMinutes();
  const secondsKuala_Lumpur = Kuala_LumpurDate.getSeconds();

  //const hourKuala_Lumpur = hoursKuala_Lumpur * 30;
  const minuteKuala_Lumpur = minutesKuala_Lumpur * 6;
  const secondKuala_Lumpur = secondsKuala_Lumpur * 6;
  const hourKuala_Lumpur = hoursKuala_Lumpur * 30 + (minuteKuala_Lumpur / 12);
  
  document.querySelector('#Kuala_Lumpur .heure').style.transform = `rotate(${hourKuala_Lumpur}deg)`;
  document.querySelector('#Kuala_Lumpur .minute').style.transform = `rotate(${minuteKuala_Lumpur}deg)`;
  document.querySelector('#Kuala_Lumpur .seconde').style.transform = `rotate(${secondKuala_Lumpur}deg)`;

  document.querySelector('#Kuala_Lumpur .date').innerHTML = Kuala_LumpurDate.toLocaleDateString("en-EN", options);

  var theHourKuala_Lumpur = Kuala_LumpurDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseKuala_Lumpur = jQuery('#Kuala_Lumpur span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetKuala_Lumpur = jQuery('#Kuala_Lumpur span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginKuala_Lumpur = jQuery('#Kuala_Lumpur span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endKuala_Lumpur = jQuery('#Kuala_Lumpur span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourKuala_Lumpur > sunriseKuala_Lumpur && theHourKuala_Lumpur < civil_twilight_endKuala_Lumpur)
       ||
       (theHourKuala_Lumpur < civil_twilight_endKuala_Lumpur && theHourKuala_Lumpur > sunriseKuala_Lumpur)
  ) {
    //console.log('c le jour a Kuala_Lumpur');
    jQuery('#Kuala_Lumpur .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Kuala_Lumpur .clock').addClass('night');

  }

  //-------
  // Montreal
  // console.log('Montreal');

  const MontrealDate = changeTimeZone(new Date(), 'America/Montreal');

  const hoursMontreal = ((MontrealDate.getHours() + 11) % 12 + 1);
  const minutesMontreal = MontrealDate.getMinutes();
  const secondsMontreal = MontrealDate.getSeconds();

  //const hourMontreal = hoursMontreal * 30;
  const minuteMontreal = minutesMontreal * 6;
  const secondMontreal = secondsMontreal * 6;
  const hourMontreal = hoursMontreal * 30 + (minuteMontreal / 12);
  
  document.querySelector('#Montreal .heure').style.transform = `rotate(${hourMontreal}deg)`;
  document.querySelector('#Montreal .minute').style.transform = `rotate(${minuteMontreal}deg)`;
  document.querySelector('#Montreal .seconde').style.transform = `rotate(${secondMontreal}deg)`;

  document.querySelector('#Montreal .date').innerHTML = MontrealDate.toLocaleDateString("en-EN", options);

  var theHourMontreal = MontrealDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseMontreal = jQuery('#Montreal span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetMontreal = jQuery('#Montreal span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginMontreal = jQuery('#Montreal span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endMontreal = jQuery('#Montreal span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourMontreal > sunriseMontreal && theHourMontreal < civil_twilight_endMontreal)
       ||
       (theHourMontreal < civil_twilight_endMontreal && theHourMontreal > sunriseMontreal)
  ) {
    //console.log('c le jour a Montreal');
    jQuery('#Montreal .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Montreal .clock').addClass('night');

  }



  //-------
  // Hong_Kong
  // console.log('Hong_Kong');

  const Hong_KongDate = changeTimeZone(new Date(), 'Asia/Hong_Kong');

  const hoursHong_Kong = ((Hong_KongDate.getHours() + 11) % 12 + 1);
  const minutesHong_Kong = Hong_KongDate.getMinutes();
  const secondsHong_Kong = Hong_KongDate.getSeconds();

  //const hourHong_Kong = hoursHong_Kong * 30;
  const minuteHong_Kong = minutesHong_Kong * 6;
  const secondHong_Kong = secondsHong_Kong * 6;
  const hourHong_Kong = hoursHong_Kong * 30 + (minuteHong_Kong / 12);
  
  document.querySelector('#Hong_Kong .heure').style.transform = `rotate(${hourHong_Kong}deg)`;
  document.querySelector('#Hong_Kong .minute').style.transform = `rotate(${minuteHong_Kong}deg)`;
  document.querySelector('#Hong_Kong .seconde').style.transform = `rotate(${secondHong_Kong}deg)`;

  document.querySelector('#Hong_Kong .date').innerHTML = Hong_KongDate.toLocaleDateString("en-EN", options);

  var theHourHong_Kong = Hong_KongDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseHong_Kong = jQuery('#Hong_Kong span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetHong_Kong = jQuery('#Hong_Kong span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginHong_Kong = jQuery('#Hong_Kong span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endHong_Kong = jQuery('#Hong_Kong span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourHong_Kong > sunriseHong_Kong && theHourHong_Kong < civil_twilight_endHong_Kong)
       ||
       (theHourHong_Kong < civil_twilight_endHong_Kong && theHourHong_Kong > sunriseHong_Kong)
  ) {
    //console.log('c le jour a Hong_Kong');
    jQuery('#Hong_Kong .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Hong_Kong .clock').addClass('night');

  }

  //-------
  // Mayotte
  // console.log('Mayotte');

  const MayotteDate = changeTimeZone(new Date(), 'Indian/Mayotte');

  const hoursMayotte = ((MayotteDate.getHours() + 11) % 12 + 1);
  const minutesMayotte = MayotteDate.getMinutes();
  const secondsMayotte = MayotteDate.getSeconds();

  //const hourMayotte = hoursMayotte * 30;
  const minuteMayotte = minutesMayotte * 6;
  const secondMayotte = secondsMayotte * 6;
  const hourMayotte = hoursMayotte * 30 + (minuteMayotte / 12);
  
  document.querySelector('#Mayotte .heure').style.transform = `rotate(${hourMayotte}deg)`;
  document.querySelector('#Mayotte .minute').style.transform = `rotate(${minuteMayotte}deg)`;
  document.querySelector('#Mayotte .seconde').style.transform = `rotate(${secondMayotte}deg)`;

  document.querySelector('#Mayotte .date').innerHTML = MayotteDate.toLocaleDateString("en-EN", options);

  var theHourMayotte = MayotteDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseMayotte = jQuery('#Mayotte span.date').attr('data-sunrise').replace(/:/g, '');;
  var sunsetMayotte = jQuery('#Mayotte span.date').attr('data-sunset').replace(/:/g, '');;
  var civil_twilight_beginMayotte = jQuery('#Mayotte span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endMayotte = jQuery('#Mayotte span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourMayotte > sunriseMayotte && theHourMayotte < civil_twilight_endMayotte)
       ||
       (theHourMayotte < civil_twilight_endMayotte && theHourMayotte > sunriseMayotte)
  ) {
    //console.log('c le jour a Mayotte');
    jQuery('#Mayotte .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Mayotte .clock').addClass('night');

  }

  //-------
  // Qatar
  // console.log('Qatar');

  const QatarDate = changeTimeZone(new Date(), 'Asia/Qatar');

  const hoursQatar = ((QatarDate.getHours() + 11) % 12 + 1);
  const minutesQatar = QatarDate.getMinutes();
  const secondsQatar = QatarDate.getSeconds();

  //const hourQatar = hoursQatar * 30;
  const minuteQatar = minutesQatar * 6;
  const secondQatar = secondsQatar * 6;
  const hourQatar = hoursQatar * 30 + (minuteQatar / 12);
  
  document.querySelector('#Qatar .heure').style.transform = `rotate(${hourQatar}deg)`;
  document.querySelector('#Qatar .minute').style.transform = `rotate(${minuteQatar}deg)`;
  document.querySelector('#Qatar .seconde').style.transform = `rotate(${secondQatar}deg)`;

  document.querySelector('#Qatar .date').innerHTML = QatarDate.toLocaleDateString("en-EN", options);

  var theHourQatar = QatarDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseQatar = jQuery('#Qatar span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetQatar = jQuery('#Qatar span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginQatar = jQuery('#Qatar span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endQatar = jQuery('#Qatar span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourQatar > sunriseQatar && theHourQatar < civil_twilight_endQatar)
       ||
       (theHourQatar < civil_twilight_endQatar && theHourQatar > sunriseQatar)
  ) {
    //console.log('c le jour a Qatar');
    jQuery('#Qatar .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Qatar .clock').addClass('night');

  }

  //-------
  // Tokyo
  // console.log('Tokyo');

  const TokyoDate = changeTimeZone(new Date(), 'Asia/Tokyo');

  const hoursTokyo = ((TokyoDate.getHours() + 11) % 12 + 1);
  const minutesTokyo = TokyoDate.getMinutes();
  const secondsTokyo = TokyoDate.getSeconds();

  //const hourTokyo = hoursTokyo * 30;
  const minuteTokyo = minutesTokyo * 6;
  const secondTokyo = secondsTokyo * 6;
  const hourTokyo = hoursTokyo * 30 + (minuteTokyo / 12);
  
  document.querySelector('#Tokyo .heure').style.transform = `rotate(${hourTokyo}deg)`;
  document.querySelector('#Tokyo .minute').style.transform = `rotate(${minuteTokyo}deg)`;
  document.querySelector('#Tokyo .seconde').style.transform = `rotate(${secondTokyo}deg)`;

  document.querySelector('#Tokyo .date').innerHTML = TokyoDate.toLocaleDateString("en-EN", options);

  var theHourTokyo = TokyoDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseTokyo = jQuery('#Tokyo span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetTokyo = jQuery('#Tokyo span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginTokyo = jQuery('#Tokyo span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endTokyo = jQuery('#Tokyo span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourTokyo > sunriseTokyo && theHourTokyo < civil_twilight_endTokyo)
       ||
       (theHourTokyo < civil_twilight_endTokyo && theHourTokyo > sunriseTokyo)
  ) {
    //console.log('c le jour a Tokyo');
    jQuery('#Tokyo .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Tokyo .clock').addClass('night');

  }

  //-------
  // Los_Angeles
  // console.log('Los_Angeles');

  const Los_AngelesDate = changeTimeZone(new Date(), 'America/Los_Angeles');

  const hoursLos_Angeles = ((Los_AngelesDate.getHours() + 11) % 12 + 1);
  const minutesLos_Angeles = Los_AngelesDate.getMinutes();
  const secondsLos_Angeles = Los_AngelesDate.getSeconds();

  //const hourLos_Angeles = hoursLos_Angeles * 30;
  const minuteLos_Angeles = minutesLos_Angeles * 6;
  const secondLos_Angeles = secondsLos_Angeles * 6;
  const hourLos_Angeles = hoursLos_Angeles * 30 + (minuteLos_Angeles / 12);
  
  document.querySelector('#Los_Angeles .heure').style.transform = `rotate(${hourLos_Angeles}deg)`;
  document.querySelector('#Los_Angeles .minute').style.transform = `rotate(${minuteLos_Angeles}deg)`;
  document.querySelector('#Los_Angeles .seconde').style.transform = `rotate(${secondLos_Angeles}deg)`;

  document.querySelector('#Los_Angeles .date').innerHTML = Los_AngelesDate.toLocaleDateString("en-EN", options);

  var theHourLos_Angeles = Los_AngelesDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseLos_Angeles = jQuery('#Los_Angeles span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetLos_Angeles = jQuery('#Los_Angeles span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginLos_Angeles = jQuery('#Los_Angeles span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endLos_Angeles = jQuery('#Los_Angeles span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourLos_Angeles > sunriseLos_Angeles && theHourLos_Angeles < civil_twilight_endLos_Angeles)
       ||
       (theHourLos_Angeles < civil_twilight_endLos_Angeles && theHourLos_Angeles > sunriseLos_Angeles)
  ) {
    //console.log('c le jour a Los_Angeles');
    jQuery('#Los_Angeles .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Los_Angeles .clock').addClass('night');

  }

  //-------
  // Vancouver
  // console.log('Vancouver');

  const VancouverDate = changeTimeZone(new Date(), 'America/Vancouver');

  const hoursVancouver = ((VancouverDate.getHours() + 11) % 12 + 1);
  const minutesVancouver = VancouverDate.getMinutes();
  const secondsVancouver = VancouverDate.getSeconds();

  //const hourVancouver = hoursVancouver * 30;
  const minuteVancouver = minutesVancouver * 6;
  const secondVancouver = secondsVancouver * 6;
  const hourVancouver = hoursVancouver * 30 + (minuteVancouver / 12);
  
  document.querySelector('#Vancouver .heure').style.transform = `rotate(${hourVancouver}deg)`;
  document.querySelector('#Vancouver .minute').style.transform = `rotate(${minuteVancouver}deg)`;
  document.querySelector('#Vancouver .seconde').style.transform = `rotate(${secondVancouver}deg)`;

  document.querySelector('#Vancouver .date').innerHTML = VancouverDate.toLocaleDateString("en-EN", options);

  var theHourVancouver = VancouverDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseVancouver = jQuery('#Vancouver span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetVancouver = jQuery('#Vancouver span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginVancouver = jQuery('#Vancouver span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endVancouver = jQuery('#Vancouver span.date').attr('data-civil_twilight_end').replace(/:/g, '');

//  console.log('Vancouver UP', sunriseVancouver); // 07:47:22
//  console.log('Vancouver AC', theHourVancouver); // 05:48:48
//  console.log('Vancouver DW', sunsetVancouver); // 18:05:58

  if(
       (theHourVancouver > sunriseVancouver && theHourVancouver < civil_twilight_endVancouver)
       ||
       (theHourVancouver < civil_twilight_endVancouver && theHourVancouver > sunriseVancouver)
  ) {
    //console.log('c le jour a Vancouver');
    jQuery('#Vancouver .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a Vancouver');
      jQuery('#Vancouver .clock').addClass('night');

  }

  //-------
  // New_York
  // console.log('New_York');

  const New_YorkDate = changeTimeZone(new Date(), 'America/New_York');

  var hoursNew_York = ((New_YorkDate.getHours() + 11) % 12 + 1);
  var hoursNew_York = hoursNew_York < 10 ? '0'+hoursNew_York : hoursNew_York;

  const minutesNew_York = New_YorkDate.getMinutes();
  const secondsNew_York = New_YorkDate.getSeconds();

  //const hourNew_York = hoursNew_York * 30;
  const minuteNew_York = minutesNew_York * 6;
  const secondNew_York = secondsNew_York * 6;
  const hourNew_York = hoursNew_York * 30 + (minuteNew_York / 12);
  
  document.querySelector('#New_York .heure').style.transform = `rotate(${hourNew_York}deg)`;
  document.querySelector('#New_York .minute').style.transform = `rotate(${minuteNew_York}deg)`;
  document.querySelector('#New_York .seconde').style.transform = `rotate(${secondNew_York}deg)`;

  document.querySelector('#New_York .date').innerHTML = New_YorkDate.toLocaleDateString("en-EN", options);;

  var theHourNew_York = New_YorkDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseNew_York = jQuery('#New_York span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetNew_York = jQuery('#New_York span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginNew_York = jQuery('#New_York span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endNew_York = jQuery('#New_York span.date').attr('data-civil_twilight_end').replace(/:/g, '');

//console.log('New_York', sunriseNew_York);
//console.log('New_York', theHourNew_York);
//console.log('New_York', sunsetNew_York);

  if(
       (theHourNew_York > sunriseNew_York && theHourNew_York < civil_twilight_endNew_York)
       ||
       (theHourNew_York < civil_twilight_endNew_York && theHourNew_York > sunriseNew_York)
  ) {
    //console.log('c le jour a New_York');
    jQuery('#New_York .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#New_York .clock').addClass('night');

  }

  //-------
  // America/Argentina/Buenos_Aires
  // console.log('Buenos_Aires');

  const Buenos_AiresDate = changeTimeZone(new Date(), 'America/Argentina/Buenos_Aires');

  const hoursBuenos_Aires = ((Buenos_AiresDate.getHours() + 11) % 12 + 1);
  const minutesBuenos_Aires = Buenos_AiresDate.getMinutes();
  const secondsBuenos_Aires = Buenos_AiresDate.getSeconds();

  //const hourBuenos_Aires = hoursBuenos_Aires * 30;
  const minuteBuenos_Aires = minutesBuenos_Aires * 6;
  const secondBuenos_Aires = secondsBuenos_Aires * 6;
  const hourBuenos_Aires = hoursBuenos_Aires * 30 + (minuteBuenos_Aires / 12);
  
  document.querySelector('#Buenos_Aires .heure').style.transform = `rotate(${hourBuenos_Aires}deg)`;
  document.querySelector('#Buenos_Aires .minute').style.transform = `rotate(${minuteBuenos_Aires}deg)`;
  document.querySelector('#Buenos_Aires .seconde').style.transform = `rotate(${secondBuenos_Aires}deg)`;

  document.querySelector('#Buenos_Aires .date').innerHTML = Buenos_AiresDate.toLocaleDateString("en-EN", options);

  var theHourBuenos_Aires = Buenos_AiresDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseBuenos_Aires = jQuery('#Buenos_Aires span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetBuenos_Aires = jQuery('#Buenos_Aires span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginBuenos_Aires = jQuery('#Buenos_Aires span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endBuenos_Aires = jQuery('#Buenos_Aires span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourBuenos_Aires > sunriseBuenos_Aires && theHourBuenos_Aires < civil_twilight_endBuenos_Aires)
       ||
       (theHourBuenos_Aires < civil_twilight_endBuenos_Aires && theHourBuenos_Aires > sunriseBuenos_Aires)
  ) {
    //console.log('c le jour a Buenos_Aires');
    jQuery('#Buenos_Aires .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Buenos_Aires .clock').addClass('night');

  }

  //-------
  // America/Argentina/Ushuaia
  // console.log('Ushuaia');

  const UshuaiaDate = changeTimeZone(new Date(), 'America/Argentina/Ushuaia');

  const hoursUshuaia = ((UshuaiaDate.getHours() + 11) % 12 + 1);
  const minutesUshuaia = UshuaiaDate.getMinutes();
  const secondsUshuaia = UshuaiaDate.getSeconds();

  //const hourUshuaia = hoursUshuaia * 30;
  const minuteUshuaia = minutesUshuaia * 6;
  const secondUshuaia = secondsUshuaia * 6;
  const hourUshuaia = hoursUshuaia * 30 + (minuteUshuaia / 12);
  
  document.querySelector('#Ushuaia .heure').style.transform = `rotate(${hourUshuaia}deg)`;
  document.querySelector('#Ushuaia .minute').style.transform = `rotate(${minuteUshuaia}deg)`;
  document.querySelector('#Ushuaia .seconde').style.transform = `rotate(${secondUshuaia}deg)`;

  document.querySelector('#Ushuaia .date').innerHTML = UshuaiaDate.toLocaleDateString("en-EN", options);

  var theHourUshuaia = UshuaiaDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseUshuaia = jQuery('#Ushuaia span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetUshuaia = jQuery('#Ushuaia span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginUshuaia = jQuery('#Ushuaia span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endUshuaia = jQuery('#Ushuaia span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourUshuaia > sunriseUshuaia && theHourUshuaia < civil_twilight_endUshuaia)
       ||
       (theHourUshuaia < civil_twilight_endUshuaia && theHourUshuaia > sunriseUshuaia)
  ) {
    //console.log('c le jour a Ushuaia');
    jQuery('#Ushuaia .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Ushuaia .clock').addClass('night');

  }


  //-------
  // London
  // console.log('London');

  const LondonDate = changeTimeZone(new Date(), 'Europe/London');

  const hoursLondon = ((LondonDate.getHours() + 11) % 12 + 1);
  const minutesLondon = LondonDate.getMinutes();
  const secondsLondon = LondonDate.getSeconds();

  //const hourLondon = hoursLondon * 30;
  const minuteLondon = minutesLondon * 6;
  const secondLondon = secondsLondon * 6;
  const hourLondon = hoursLondon * 30 + (minuteLondon / 12);
  
  document.querySelector('#London .heure').style.transform = `rotate(${hourLondon}deg)`;
  document.querySelector('#London .minute').style.transform = `rotate(${minuteLondon}deg)`;
  document.querySelector('#London .seconde').style.transform = `rotate(${secondLondon}deg)`;

  document.querySelector('#London .date').innerHTML = LondonDate.toLocaleDateString("en-EN", options);

  var theHourLondon = LondonDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseLondon = jQuery('#London span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetLondon = jQuery('#London span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginLondon = jQuery('#London span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endLondon = jQuery('#London span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourLondon > sunriseLondon && theHourLondon < civil_twilight_endLondon)
       ||
       (theHourLondon < civil_twilight_endLondon && theHourLondon > sunriseLondon)
  ) {
    //console.log('c le jour a London');
    jQuery('#London .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#London .clock').addClass('night');

  }

  //-------
  // Madrid
  // console.log('Madrid');

  const MadridDate = changeTimeZone(new Date(), 'Europe/Madrid');

  const hoursMadrid = ((MadridDate.getHours() + 11) % 12 + 1);
  const minutesMadrid = MadridDate.getMinutes();
  const secondsMadrid = MadridDate.getSeconds();

  //const hourMadrid = hoursMadrid * 30;
  const minuteMadrid = minutesMadrid * 6;
  const secondMadrid = secondsMadrid * 6;
  const hourMadrid = hoursMadrid * 30 + (minuteMadrid / 12);
  
  document.querySelector('#Madrid .heure').style.transform = `rotate(${hourMadrid}deg)`;
  document.querySelector('#Madrid .minute').style.transform = `rotate(${minuteMadrid}deg)`;
  document.querySelector('#Madrid .seconde').style.transform = `rotate(${secondMadrid}deg)`;

  document.querySelector('#Madrid .date').innerHTML = MadridDate.toLocaleDateString("en-EN", options);

  var theHourMadrid = MadridDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseMadrid = jQuery('#Madrid span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetMadrid = jQuery('#Madrid span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginMadrid = jQuery('#Madrid span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endMadrid = jQuery('#Madrid span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourMadrid > sunriseMadrid && theHourMadrid < civil_twilight_endMadrid)
       ||
       (theHourMadrid < civil_twilight_endMadrid && theHourMadrid > sunriseMadrid)
  ) {
    //console.log('c le jour a Madrid');
    jQuery('#Madrid .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Madrid .clock').addClass('night');

  }

  //-------
  // Berlin
  // console.log('Berlin');

  const BerlinDate = changeTimeZone(new Date(), 'Europe/Berlin');

  const hoursBerlin = ((BerlinDate.getHours() + 11) % 12 + 1);
  const minutesBerlin = BerlinDate.getMinutes();
  const secondsBerlin = BerlinDate.getSeconds();

  //const hourBerlin = hoursBerlin * 30;
  const minuteBerlin = minutesBerlin * 6;
  const secondBerlin = secondsBerlin * 6;
  const hourBerlin = hoursBerlin * 30 + (minuteBerlin / 12);
  
  document.querySelector('#Berlin .heure').style.transform = `rotate(${hourBerlin}deg)`;
  document.querySelector('#Berlin .minute').style.transform = `rotate(${minuteBerlin}deg)`;
  document.querySelector('#Berlin .seconde').style.transform = `rotate(${secondBerlin}deg)`;

  document.querySelector('#Berlin .date').innerHTML = BerlinDate.toLocaleDateString("en-EN", options);;

  var theHourBerlin = BerlinDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseBerlin = jQuery('#Berlin span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetBerlin = jQuery('#Berlin span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginBerlin = jQuery('#Berlin span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endBerlin = jQuery('#Berlin span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourBerlin > sunriseBerlin && theHourBerlin < civil_twilight_endBerlin)
       ||
       (theHourBerlin < civil_twilight_endBerlin && theHourBerlin > sunriseBerlin)
  ) {
    //console.log('c le jour a Berlin');
    jQuery('#Berlin .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Berlin .clock').addClass('night');

  }

  //-------
  // Paris
  // console.log('Paris');

  const ParisDate = changeTimeZone(new Date(), 'Europe/Paris');

  const hoursParis = ((ParisDate.getHours() + 11) % 12 + 1);
  const minutesParis = ParisDate.getMinutes();
  const secondsParis = ParisDate.getSeconds();

  //const hourParis = hoursParis * 30;
  const minuteParis = minutesParis * 6;
  const secondParis = secondsParis * 6;
  const hourParis = hoursParis * 30 + (minuteParis / 12);
  
  document.querySelector('#Paris .heure').style.transform = `rotate(${hourParis}deg)`;
  document.querySelector('#Paris .minute').style.transform = `rotate(${minuteParis}deg)`;
  document.querySelector('#Paris .seconde').style.transform = `rotate(${secondParis}deg)`;

  document.querySelector('#Paris .date').innerHTML = ParisDate.toLocaleDateString("en-EN", options);

  var theHourParis = ParisDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseParis = jQuery('#Paris span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetParis = jQuery('#Paris span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginParis = jQuery('#Paris span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endParis = jQuery('#Paris span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourParis > sunriseParis && theHourParis < civil_twilight_endParis)
       ||
       (theHourParis < civil_twilight_endParis && theHourParis > sunriseParis)
  ) {
      //console.log('c le jour a Paris');
    jQuery('#Paris .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a Paris');
      jQuery('#Paris .clock').addClass('night');

  }

  //-------
  // Casablanca
  // console.log('Casablanca');

  const CasablancaDate = changeTimeZone(new Date(), 'Africa/Casablanca');

  const hoursCasablanca = ((CasablancaDate.getHours() + 11) % 12 + 1);
  const minutesCasablanca = CasablancaDate.getMinutes();
  const secondsCasablanca = CasablancaDate.getSeconds();

  //const hourCasablanca = hoursCasablanca * 30;
  const minuteCasablanca = minutesCasablanca * 6;
  const secondCasablanca = secondsCasablanca * 6;
  const hourCasablanca = hoursCasablanca * 30 + (minuteCasablanca / 12);
  
  document.querySelector('#Casablanca .heure').style.transform = `rotate(${hourCasablanca}deg)`;
  document.querySelector('#Casablanca .minute').style.transform = `rotate(${minuteCasablanca}deg)`;
  document.querySelector('#Casablanca .seconde').style.transform = `rotate(${secondCasablanca}deg)`;

  document.querySelector('#Casablanca .date').innerHTML = CasablancaDate.toLocaleDateString("en-EN", options);

  var theHourCasablanca = CasablancaDate.toLocaleString('us-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'}).replace(/:/g, '');
  var sunriseCasablanca = jQuery('#Casablanca span.date').attr('data-sunrise').replace(/:/g, '');
  var sunsetCasablanca = jQuery('#Casablanca span.date').attr('data-sunset').replace(/:/g, '');
  var civil_twilight_beginCasablanca = jQuery('#Casablanca span.date').attr('data-civil_twilight_begin').replace(/:/g, '');
  var civil_twilight_endCasablanca = jQuery('#Casablanca span.date').attr('data-civil_twilight_end').replace(/:/g, '');

  if(
       (theHourCasablanca > sunriseCasablanca && theHourCasablanca < civil_twilight_endCasablanca)
       ||
       (theHourCasablanca < civil_twilight_endCasablanca && theHourCasablanca > sunriseCasablanca)
  ) {
    //console.log('c le jour a Casablanca');
    jQuery('#Casablanca .clock').removeClass('night');
  }
  else {
      //console.log('c la nuit a New_York');
      jQuery('#Casablanca .clock').addClass('night');

  }

}

setInterval(clock_default, 1000);

</script>

</body>
</html>