Put CZ time on your site

Two ways to show today's date in CZ time — the count of days since Coordinate Zero, 30 November 2022 — on your own pages. Both link back to how CZ time works. Free to use; the code is MIT.

1. A badge: one line, no script

An image with today's date, made by this site: the date in the time zone of the network that asks for it (where a site shows images through a proxy of its own, as GitHub does, the proxy's), or in a time zone you fix with ?tz=. It works where scripts are not allowed: a README on GitHub, a wiki, Notion, a newsletter, a forum signature.

HTML:

<a href="https://civilizationzero.ai/calendar"><img src="https://civilizationzero.ai/badge/cz-today.svg" alt="Today in CZ time, from Civilization Zero" height="40"></a>

Markdown:

[![Today in CZ time, from Civilization Zero](https://civilizationzero.ai/badge/cz-today.svg)](https://civilizationzero.ai/calendar)

Light or dark: the badge follows the reader's setting where the browser applies it to images; to fix one, add ?theme=light or ?theme=dark to its address. To fix the time zone, add ?tz= and its name (?tz=Asia/Kuala_Lumpur, ?tz=Europe/Berlin; both together: ?theme=dark&tz=Asia/Tehran).

2. The counter, with a date converter

Today's date and a date converter, as below: this is the snippet itself, running on this page. It takes the colours of your page; the date is in the green this record uses for what a machine computes.

Show the code (2,804 characters)

<!-- CZ time: today's day of the new count, from Civilization Zero (https://civilizationzero.ai/embed). It runs only in the reader's browser: no request, no cookie, nothing stored. MIT licence. -->
<div data-cz-today></div>
<script>
(function () {
  var EPOCH = 19326, SITE = "https://civilizationzero.ai";
  function day(ms) { return Math.floor(ms / 864e5) - EPOCH; }
  // today as it is where the reader is: the date on the reader's own clock, counted as a calendar date
  function today() { var n = new Date(), t = new Date(0); t.setUTCFullYear(n.getFullYear(), n.getMonth(), n.getDate()); return day(t.getTime()); }
  function cz(d) { return "CZ " + (d < 0 ? "−" + (-d) : d); }
  var css = '.czt{display:block;color:inherit;border:1px solid rgba(128,128,128,.45);border-radius:6px;padding:.6em .8em;max-width:26em;line-height:1.45}'
    + '.czt a{color:inherit}.czt .n{font:700 1.6em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#116329;text-decoration:none}'
    + '@media (prefers-color-scheme:dark){.czt .n{color:#3fb950} }.czt .s{font-size:.85em}.czt input{font:inherit;margin:.35em .4em 0 0}.czt output{font-family:ui-monospace,monospace;font-weight:700}';
  var hosts = document.querySelectorAll("[data-cz-today]:not([data-cz])");
  for (var i = 0; i < hosts.length; i++) try { (function (h) {
    h.setAttribute("data-cz", "");
    var r = h, d = today();
    try { r = h.attachShadow({ mode: "open" }); } catch (e) { r = h; }
    r.innerHTML = '<style>' + css + '</style><div class="czt"><a class="n" href="' + SITE + '/calendar">' + cz(d) + '</a>'
      + '<div class="s">Day <span class="d">' + d + '</span> since Coordinate Zero, 30 November 2022</div>'
      + '<div class="s"><label>A date: <input type="date"></label> <output></output> <a class="o" href="' + SITE + '/calendar" hidden>other calendars</a></div>'
      + '<div class="s"><a href="' + SITE + '/calendar">CZ time</a> · <a href="' + SITE + '/">Civilization Zero</a></div></div>';
    var inp = r.querySelector("input"), out = r.querySelector("output"), o = r.querySelector(".o"), n = r.querySelector(".n"), dd = r.querySelector(".d");
    // at midnight where the reader is, the date turns, also on a page left open: looked at once a minute
    setInterval(function () { var x = today(); if (x !== d) { d = x; n.textContent = cz(d); dd.textContent = String(d); } }, 6e4);
    inp.addEventListener("change", function () {
      var m = /^(\d{4,6})-(\d\d)-(\d\d)$/.exec(inp.value);
      if (!m) { out.textContent = ""; o.hidden = true; return; }
      var t = new Date(0); t.setUTCFullYear(+m[1], m[2] - 1, +m[3]);
      out.textContent = "= " + cz(day(t.getTime()));
      o.href = SITE + "/calendar?d=" + inp.value + "&c=gregorian"; o.hidden = false;
    });
  })(hosts[i]); } catch (e) {}
})();
</script>

What they do, and do not do

The counter runs only in your reader's browser. It sends no request, sets no cookie and stores nothing; it reads the date on the reader's own clock and counts: the CZ day is that date's number of days since 1 January 1970, less 19,326. The date turns at midnight on the reader's own clock, also while the page stays open.
The badge is an image this site serves, so a reader's browser asks this site for it when it shows the badge, unless it holds a copy less than five minutes old. To draw the reader's date, the site reads the time zone its host gives for the network the request comes from; it keeps that nowhere, keeps no address and no identifier of who asks, and does not count badge requests as visits.
Neither changes anything else on your page. The counter draws inside its own box (a shadow root), so your page's styles do not reach it and its styles do not reach your page.
The code is MIT. The name and the mark identify this record: please do not change them to say something the record does not.

More dates, more calendars (Solar Hijri, Lunar Hijri, Julian) and times of day: /calendar. As data: /api/calendar.