antijingoist/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>ArchiveWarrior Stats Widget</title>
  <script>
    var intervalID;

    window.addEventListener("load", (event) => {
      function updateMetrics(project, name) {
        fetch(`https://legacy-api.arpa.li/${project}/stats.json`, {
          "method": "GET",
          "headers": {}
        })
          .then((res) => res.text())
          .then((stats) => {

            downloaderArray = new Array();
            currentDate = new Date().toLocaleString();
            fullStatData = JSON.parse(stats);
            if (fullStatData.downloaders.indexOf(name) > 0) {
              document.getElementById('msg').innerHTML = "";
              statPlace = document.getElementById("metric");

              for (const [key, value] of Object.entries(fullStatData.downloader_bytes)) {
                downloaderArray.push({ "name": key, "dl": value });
              }
              downloaderArray.sort(function (a, b) {
                return b.dl - a.dl;
              });
              statPos = downloaderArray.findIndex(e => { return (e.name === name) });
              gigsDL = humanBytes( fullStatData.downloader_bytes[name] );
              statTotP = fullStatData.downloaders.length;
              statPlace.innerHTML = `<h1>${name}'s Download Stats</h1>
                                    <p>Project Name: <span class=data>${project}</span></p>
                                    <p>Data Saved: <span class=data>${gigsDL.toLocaleString()}</span></p>
                                    <p>Items Saved: <span class=data>${fullStatData.downloader_count[name].toLocaleString()}</span></p>
                                    <p>Position: <span class=data>${statPos} / ${statTotP}</span></p>
                                    <p>As of: <span class=data>${currentDate}</span></p>`;
            } else {
              document.getElementById('msg').innerHTML = `${name} is not listed as a downloader.`;
            }


          })
          .then(console.log.bind(console))
          .catch(console.error.bind(console));
      }

      document.getElementById('lookup').addEventListener('click', function () {
        if (intervalID){
          clearInterval(intervalID);
        }
        updateMetrics(document.getElementById('projectName').value, document.getElementById('nickName').value);
        intervalID = setInterval(() => {
          updateMetrics(document.getElementById('projectName').value, document.getElementById('nickName').value);
        }, 300000);

      });

      function humanBytes(bytes) {
        if (bytes > 1024 * 1024 * 1024) {
          return (Math.round(10 * bytes / (1024 * 1024 * 1024)) / 10) + ' GB';
        } else if (bytes > 1024 * 1024) {
          return (Math.round(10 * bytes / (1024 * 1024)) / 10) + ' MB';
        } else {
          return (Math.round(10 * bytes / (1024)) / 10) + ' kB';
        }
      }
    });
  </script>
  <style>
    body {
      font-family: sans-serif;
    }

    #metric {
      visibility: hidden;
      background: #5337AB;
      background: repeating-linear-gradient(-45deg, rgba(240, 248, 255, 0.25), rgba(240, 248, 255, 0.25) 1px, rgba(229, 229, 247, 0) 1px, rgba(229, 229, 247, 0) 10px), linear-gradient(135deg, #5337AB, #CE9995);
      border-radius: 30px;
      padding: 1rem 3rem 2rem 3rem;
      margin: auto;
      width: fit-content;
      border: 5px double aliceblue;
      box-shadow: 5px 5px 5px #7b7b7b30;
    }

    #metric h1 {
      font-style: italic;
    }

    #metric:has(h1) {
      visibility: visible;
    }

    #metric span.data {
      position: relative;
      float: right;
    }

    #metric p {
      border-bottom: 1px dotted white;
    }

    #msg,
    #userForm {
      margin: 2rem auto;
      width: fit-content;
    }

    input, button#lookup {
      padding: 0.5rem 1rem;
      border-radius: 5px;
      font-size: 120%;
    }
    input {
      border: 1px solid black;
    }

    button#lookup {
      background: linear-gradient(135deg, #5337AB, #CE9995);
      box-shadow: 5px 5px 5px #7b7b7b30;
    }

    button#lookup:active {
      box-shadow: none;
      transform: translate(2px,2px);
    }

    #metric, button#lookup {
      text-shadow: 1px 1px 5px black;
      color: aliceblue;
    }

    #msg {
      text-align: center;
      color: rgb(141, 0, 0);
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id=metric>

  </div>
  <div id="userForm">
    <input id="projectName" type="text" name="projectName" placeholder="Project Name" />
    <input id="nickName" type="text" name="nickName" placeholder="Nickname" />
    <button id="lookup">LookUp Nick</button>
  </div>
  <div id="msg"></div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>ArchiveWarrior Stats Widget</title>
	<script>
	var intervalID;

	window.addEventListener("load", (event) => {
	function updateMetrics(project, name) {
	fetch(`https://legacy-api.arpa.li/${project}/stats.json`, {
	"method": "GET",
	"headers": {}
	})
	.then((res) => res.text())
	.then((stats) => {

	downloaderArray = new Array();
	currentDate = new Date().toLocaleString();
	fullStatData = JSON.parse(stats);
	if (fullStatData.downloaders.indexOf(name) > 0) {
	document.getElementById('msg').innerHTML = "";
	statPlace = document.getElementById("metric");

	for (const [key, value] of Object.entries(fullStatData.downloader_bytes)) {
	downloaderArray.push({ "name": key, "dl": value });
	}
	downloaderArray.sort(function (a, b) {
	return b.dl - a.dl;
	});
	statPos = downloaderArray.findIndex(e => { return (e.name === name) });
	gigsDL = humanBytes( fullStatData.downloader_bytes[name] );
	statTotP = fullStatData.downloaders.length;
	statPlace.innerHTML = `<h1>${name}'s Download Stats</h1>
	<p>Project Name: <span class=data>${project}</span></p>
	<p>Data Saved: <span class=data>${gigsDL.toLocaleString()}</span></p>
	<p>Items Saved: <span class=data>${fullStatData.downloader_count[name].toLocaleString()}</span></p>
	<p>Position: <span class=data>${statPos} / ${statTotP}</span></p>
	<p>As of: <span class=data>${currentDate}</span></p>`;
	} else {
	document.getElementById('msg').innerHTML = `${name} is not listed as a downloader.`;
	}


	})
	.then(console.log.bind(console))
	.catch(console.error.bind(console));
	}

	document.getElementById('lookup').addEventListener('click', function () {
	if (intervalID){
	clearInterval(intervalID);
	}
	updateMetrics(document.getElementById('projectName').value, document.getElementById('nickName').value);
	intervalID = setInterval(() => {
	updateMetrics(document.getElementById('projectName').value, document.getElementById('nickName').value);
	}, 300000);

	});

	function humanBytes(bytes) {
	if (bytes > 1024 * 1024 * 1024) {
	return (Math.round(10 * bytes / (1024 * 1024 * 1024)) / 10) + ' GB';
	} else if (bytes > 1024 * 1024) {
	return (Math.round(10 * bytes / (1024 * 1024)) / 10) + ' MB';
	} else {
	return (Math.round(10 * bytes / (1024)) / 10) + ' kB';
	}
	}
	});
	</script>
	<style>
	body {
	font-family: sans-serif;
	}

	#metric {
	visibility: hidden;
	background: #5337AB;
	background: repeating-linear-gradient(-45deg, rgba(240, 248, 255, 0.25), rgba(240, 248, 255, 0.25) 1px, rgba(229, 229, 247, 0) 1px, rgba(229, 229, 247, 0) 10px), linear-gradient(135deg, #5337AB, #CE9995);
	border-radius: 30px;
	padding: 1rem 3rem 2rem 3rem;
	margin: auto;
	width: fit-content;
	border: 5px double aliceblue;
	box-shadow: 5px 5px 5px #7b7b7b30;
	}

	#metric h1 {
	font-style: italic;
	}

	#metric:has(h1) {
	visibility: visible;
	}

	#metric span.data {
	position: relative;
	float: right;
	}

	#metric p {
	border-bottom: 1px dotted white;
	}

	#msg,
	#userForm {
	margin: 2rem auto;
	width: fit-content;
	}

	input, button#lookup {
	padding: 0.5rem 1rem;
	border-radius: 5px;
	font-size: 120%;
	}
	input {
	border: 1px solid black;
	}

	button#lookup {
	background: linear-gradient(135deg, #5337AB, #CE9995);
	box-shadow: 5px 5px 5px #7b7b7b30;
	}

	button#lookup:active {
	box-shadow: none;
	transform: translate(2px,2px);
	}

	#metric, button#lookup {
	text-shadow: 1px 1px 5px black;
	color: aliceblue;
	}

	#msg {
	text-align: center;
	color: rgb(141, 0, 0);
	font-weight: bold;
	}
	</style>
	</head>

	<body>
	<div id=metric>

	</div>
	<div id="userForm">
	<input id="projectName" type="text" name="projectName" placeholder="Project Name" />
	<input id="nickName" type="text" name="nickName" placeholder="Nickname" />
	<button id="lookup">LookUp Nick</button>
	</div>
	<div id="msg"></div>
	</body>

	</html>