viewing: main.js.html     use J/K or arrows to scroll, SEMICOLON to change theme

/**/
var theme = 0;
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  //toFixed reduces it to non-float value
  document.getElementById("progressbar").innerHTML = "---MORE (" + scrolled.toFixed(0) + "%)---";
}

function changeTheme() {
  const bar = document.getElementById("titlebar")
  const progress = document.getElementById("progressbar")
  const body = document.getElementById("main");
  const link = document.getElementsByTagName("a");
  if (theme < 4) {
    theme++;
  } else {
    theme = 0;
  }
  switch (theme) {
  case 0:
    //default unix
    var bg = "#020202";
    var fg = "#a6da95";
    var bg2 = bg;
    var fg2 = fg;
    break;
  case 1:
    //ms dos
    var bg = "#0100AB";
    var fg = "#ffffff";
    var fg2 = "#000000";
    var bg2 = "#aaaaaa";
    break;
  case 2:
    //zx spectrum
    var bg = "#CECBCE";
    var fg = "#000000";
    var bg2 = "url('images/spectrum.png')";
    var fg2 = bg;
    break;
  case 3:
    //light mode. welding helmet heavily reccomended
    var bg = "#ffffff";
    var fg = "#000000";
    var bg2 = fg;
    var fg2 = bg;
    break;
  case 4:
    var fg = "#ffffff";
    var bg = "#000000";
    var fg2 = bg;
    var bg2 = fg;
  }
  bar.style.background = bg2;
  bar.style.color = fg2;
  body.style.background = bg;
  body.style.color = fg;
  progress.style.color = fg2;
  progress.style.background = bg2;
}

window.onkeydown = function(e) {
  switch (e.keyCode) {
  case 74:
    window.scrollBy(0, 50);
    break;
  case 75:
    window.scrollBy(0, -50);
    break;
  case 59:
    changeTheme();
    break;
  }
}




note: this website is best viewed with unix v4 on a pdp-11/45 system