SLOBS Clock (Browser Source)

<!-- FOR USE AS A BROWSER SOURCE IN (STREAMLABS) OBS -->
<!-- @author: slaurent -->

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

<head>
    <title>Clock</title>
    <meta charset="utf-8">
    <style>
        /* css from AlexxaEmber */
        #clock {
            font: bold 30px monospace;
            color: white;
            display: inline-block;
            border-radius: 5px;
            padding: 2px 5px;
            background-color: rgba(0, 0, 0, 0.5)
        }
    </style>
</head>

<body>
    <div id="clock"></div>
</body>
<script type="text/javascript">
    // Intl.DateTimeFormat options are documented at
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
    // 15 Sep 2020
    const dateFormat = new Intl.DateTimeFormat("en-GB", {
        day: "2-digit",
        month: "short",
        year: "numeric"
    });
    // 22:13:12 EDT
    const timeFormat = new Intl.DateTimeFormat("en-US", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        timeZoneName: "short",
        hour12: false
    });
    const clockElement = document.getElementById("clock");
    setInterval(() => {
        const now = new Date();
        // 15 Sep 2020 22:13:12 EDT
        clockElement.innerText = `${dateFormat.format(now)} ${timeFormat.format(now)}`;
    }, 500);
</script>

</html>