date-time widget with nice blinking minutes

date-time.twee

::StoryInit
<<set
  $gameDate = Date("2019-07-14T07:00Z"); 
>>
<<set
  window.GameDays = [
    "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
  ];
>>

::StoryCaption 
<<dateTime>>

::widget-dateTime [widget]
<<widget "dateTime">>\
  <div class="dateTime">\
    <<= GameDays[$gameDate.getUTCDay()]>>
    <<= padZero($gameDate.getUTCHours())>><span class="blinky">:</span><<= padZero($gameDate.getUTCMinutes())>>\
  </div>
<</widget>>

::Script [script]
window.padZero = function padZero(number) {
  return number.toString().padStart(2, "0");
} 

::Style [stylesheet]
@keyframes blinky {
  0%  { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 0; }
  75% { opacity: 1; }
}

.blinky {
  animation: blinky 2s infinite;
}

.dateTime {
  font-weight: bold;
}
.dateTime:first-line {
  font-size: 120%;
}