<div id="mayan-long-count"></div>

<script>
  // 1) Convert a Gregorian date to the Julian Day Number (JDN)
  function gregorianToJDN(year, month, day) {
    const a = Math.floor((14 - month) / 12);
    const y = year + 4800 - a;
    const m = month + 12 * a - 3;
    return day 
           + Math.floor((153 * m + 2) / 5)
           + 365 * y
           + Math.floor(y / 4)
           - Math.floor(y / 100)
           + Math.floor(y / 400)
           - 32045;
  }

  // 2) Convert a Gregorian date to the Mayan Long Count
  function gregorianToMayanLongCount(year, month, day) {
    const GMT_CORRELATION = 584283;
    const jdn = gregorianToJDN(year, month, day);
    const daysSinceStart = jdn - GMT_CORRELATION;
    
    const baktun = Math.floor(daysSinceStart / 144000);
    const katun  = Math.floor((daysSinceStart % 144000) / 7200);
    const tun    = Math.floor((daysSinceStart % 7200) / 360);
    const uinal  = Math.floor((daysSinceStart % 360) / 20);
    const kin    = daysSinceStart % 20;
    
    return `${baktun}.${katun}.${tun}.${uinal}.${kin}`;
  }

  // 3) On page load, get today's date and display it in the div
  document.addEventListener("DOMContentLoaded", function() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth() + 1; // JS months are 0-based
    const day = today.getDate();

    const mayanLongCount = gregorianToMayanLongCount(year, month, day);
    
    // Display result. 
    // No extra styling = default font
    document.getElementById("mayan-long-count").textContent = mayanLongCount;
  });
</script>