spowerei

this add a slider selector for the time range to consider and give higher values of alpha channel to more recent posts.

  const div = document.createElement("div");
  div.innerHTML = `<div style="position:fixed;top:20px;right:20px;width:40px;background:#ff05;">
     <input type="range" orient="vertical" id="interval" min="0" max="95" value="30" style="width:100%">
     <label for="interval" style="display:block"></label>
  </div>`;
  const input = div.firstElementChild.firstElementChild;
  const label = input.nextElementSibling;
  document.body.appendChild(div);
  const formatTime = (mins) => {
    if (mins > 60) {
      return `${Math.floor(mins / 60)}h ${mins % 60}m`;
    }
    return `${mins}m`;
  };
  const extrapolate = (val) => {
    val = val * 2;
    for (let t = 30; t <= 150; t += 30) {
      val += Math.max(0, val - t);
    }
    return val;
  };
  input.oninput = () => colorStuff(extrapolate(input.value));
  const colorStuff = (interval_minutes) => {
    label.innerText = `${formatTime(interval_minutes)}`;
    const comments = Array.from(document.getElementsByClassName("athing comtr"));
    dates = Array.from(document.getElementsByClassName('age'));
    dates.sort((c1, c2) => Date.parse((c2).title) - Date.parse((c1).title));
    const now = new Date();
    const timestamp = now.getTime() + now.getTimezoneOffset() * 60E3;
    comments.forEach((c) => {
      const commentDateString = c.getElementsByClassName("age")[0].title;
      const diff=(timestamp-Date.parse(c.getElementsByClassName('age')[0].title))/60E3;
      const diff2=(Date.parse(dates[0].title)-Date.parse(c.getElementsByClassName('age')[0].title))/60E3;
      if (diff < interval_minutes) {
        const alpha = (1 - diff2 / interval_minutes)**6;
        c.style.backgroundColor = `rgba(100, 255, 100, ${alpha})`;
      } else {
         c.style.backgroundColor = "rgba(255, 255, 255,0)";
      }
    });
  };
  colorStuff(extrapolate(input.value));