<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function updateTime() {
        var date = new Date();
        var hours = (date.getHours() < 10 ? '0' : '') + date.getHours();
        var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
        var seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
        var dayInMonth = date.getDate();
        var month = date.getMonth();
        var year = date.getFullYear();
        var day = date.getDay();
        var dayLabels = ["{{l.basic_day_7}}", "{{l.basic_day_1}}", "{{l.basic_day_2}}", "{{l.basic_day_3}}", "{{l.basic_day_4}}", "{{l.basic_day_5}}", "{{l.basic_day_6}}"];
        var monthLabels = ["{{l.basic_month_1}}", "{{l.basic_month_2}}", "{{l.basic_month_3}}", "{{l.basic_month_4}}", "{{l.basic_month_5}}", "{{l.basic_month_6}}", "{{l.basic_month_7}}", "{{l.basic_month_8}}", "{{l.basic_month_9}}", "{{l.basic_month_10}}", "{{l.basic_month_11}}", "{{l.basic_month_12}}"];

        var timeLabel = hours + ":" + minutes;
        var dateLabel = dayLabels[day] + " " + dayInMonth + " " + monthLabels[month] + " " + year;

        document.getElementById('time').innerHTML = timeLabel;
        document.getElementById('date').innerHTML = dateLabel;
        setTimeout(updateTime, 1000);
      }

      window.addEventListener("load", updateTime);
      const urlParams = new URLSearchParams(window.location.search);
    </script>
    <style>
      body {
        text-align: center;
        font-family: 'Arial', 'sans-serif';
        color: white;
        background-color: black
      }
      #bottom {
        background: #111;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 0;
      }
      #time {
        font-size: 10em;
      }
      #date {
        font-size: 3em;
      }
      #ipaddr {
        font-size: 1em;
      }
    </style>
  </head>
  <body>
    <div id="time"></div>
    <div id="date"></div>
    <div id="bottom">
      <div id="ipaddr"></div>
    </div>
    <script>
      document.getElementById('ipaddr').innerText = '{{ ipaddr|safe }}';
    </script>
  </body>
</html>