How to make customizable download URLs on GitHub pages?

Question

I have the following downloads for a project.

As you can see, there are 24 different downloads, each has enabled a bunch of features...

I was wondering if it was possible to use an HTML form on GitHub pages, so the user would pick the desired features and click a download button. Where the URL is generated based on the selected options amongst the HTML form.

I've tried a few samples I saw online, but none helps me to achieve what I want, all of them are intended for sending emails...

Is there any way of doing this on GH Pages?

Answer 1

A rudimentary form that does something like what you're looking for:

function update() {
  var bits = ["https://github.com/israpps/wLaunchELF_ISR/releases/download/latest/BOOT"];
  var form = document.getElementById("form");
  if (form.exfat.checked) bits.push("-EXFAT");
  if (form.ds34.checked) bits.push("-DS34");
  if (form.no_network.checked) bits.push("-NO_NETWORK");
  if (form.xfrom.checked) bits.push("-XFROM");
  if (form.mx4sio.checked) bits.push("-MX4SIO");
  bits.push(".ELF");
  var url = bits.join("");
  form.url.value = url;
}
update();

* {
  box-sizing: border-box;
}

body,
input {
  font-family: sans-serif;
}

#features {
  display: flex;
}

#features>label {
  flex: 1;
  padding: 0.5em;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

input[name=url] {
  width: 100%
}

<form id="form" method="get" onchange="update()">
  <div id="features">
    <label><input type="checkbox" name="exfat"> exFAT</label>
    <label><input type="checkbox" name="no_network"> No Network</label>
    <label><input type="checkbox" name="ds34"> DS34</label>
    <label><input type="checkbox" name="mx4sio"> MX4SIO</label>
    <label><input type="checkbox" name="xfrom"> XFROM</label>
  </div>
  <input readonly name="url">
</form>