收集浏览器信息并在html上实时打印？

Question

我最近开始学习Web开发（学习了html，css，JS和php），并且我正在构建自己的第一个静态单一登陆页面类型的网站（用于实践，学习和娱乐，不面向客户）

此网站（https://aphextwin.warp.net/）上有一个有趣的元素，我希望在页面上复制。该网站实时显示我的系统/浏览器信息（浏览器详细信息，分辨率，指针位置，我在页面上的停留时间等）。同样，内容滚动时仍作为静态文本簇保留在后台。

我可以理解，这是一个用于收集信息的JavaScript，然后将其打印在html中并可能在css中设置样式。我尝试搜索，但是找不到如何在网页上做类似的事情（也许，作为Web开发的新手，我不知道要搜索什么？）

我用来获取指针位置的代码

var info = document.getElementById('info');

function tellPos(p){
  info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);

如果我无法弄清楚，我想我应该在完成JS类后再尝试一下。