---
layout: base.njk
title: Add a Blinkie!
---

<h2>Add your very own blinkie!</h2>
<p>
  Please allow us 1 to 10 business days to process your request. Your engagement
  is very important to our shareholders.
</p>
<p>
  <small>
    Want to create your own blinkie? Check out <a href="https://blinkies.pixelwavestudio.net/" target="_blank" rel="noopener noreferrer">Pixel Wave Studio</a>!
    Need inspiration? Browse <a href="https://adriansblinkiecollection.neocities.org/" target="_blank" rel="noopener noreferrer">Adrian's Blinkie Collection</a>.
  </small>
</p>

<form
  id="form"
  method="POST"
  action="https://posthook.liz.coffee/hook/add-a-blinkie"
  enctype="multipart/form-data"
>
  <div class="form-group">
    <label for="name">Name *</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Elizabeth..."
      required
    />
  </div>
  <br />

  <div class="form-group">
    <label for="email">Email</label>
    <p>
      <small>
        In case something goes wrong or you want to update the blinkie in the future and need to email <a href="mailto:me@liz.coffee">me</a>.
      </small>
    </p>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="me@liz.coffee..."
    />
  </div>
  <br />

  <div class="form-group">
    <label for="justification">Justification *</label>
    <p>
      <small>
         Please explain why you think this blinkie is a good addition to this site.
        "I am cool as fuck yo" is a valid reason.
      </small>
    </p>
    <input
      type="text"
      id="justification"
      name="justification"
      placeholder="I am cool as fuck yo..."
      required
    />
  </div>
  <br />

  <div class="form-group">
    <label for="link">Link</label>
    <p>
      <small>
        Optional link to direct visitors to when they click the blinkie.
      </small>
    </p>
    <input
      type="url"
      id="link"
      name="link"
      placeholder="https://..."
    />
  </div>
  <br />

  <div class="form-group">
    <label for="gif">Blinkie *</label>
    <p><small>Blinkie gif in 150px:20px or equivalent aspect ratio.</small></p>
    <input
      type="file"
      id="gif"
      name="gif"
      accept="image/gif"
      required
    />
    <label for="gif" class="file-input-button">
      Browse Files
    </label>

  </div>
  <br />

  <div
    class="h-captcha"
    data-sitekey="70fc31c2-32a4-4304-8b5a-b492eba656ec"
  ></div>

  <br />

  <input type="hidden" name="_redirect" value="https://liz.coffee/blinkies/submitted/" />
  <input id="_token" type="hidden" name="_token" />

  <button type="submit">Submit</button>
</form>

<script src="https://hcaptcha.com/1/api.js" async defer></script>

<script>
  const form = document.getElementById("form");
  const tokenInput = document.getElementById("_token");
  const fileInput = document.getElementById("gif");
  const fileName = document.getElementById("file-name");
  const fileGroup = document.getElementById("file-group");

  fileInput.addEventListener("change", () => {
    if (fileInput.files.length > 0) {
      fileName.textContent = fileInput.files[0].name;
      fileGroup.classList.add("has-file");
    } else {
      fileName.textContent = "No file selected";
      fileGroup.classList.remove("has-file");
    }
  });

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const hcaptchaResponse = hcaptcha.getResponse();
    if (!hcaptchaResponse) {
      alert("Please complete the hCaptcha before submitting.");
      return;
    }
    try {
      const tokenRes = await fetch(
        "https://posthook.liz.coffee/hook/add-a-blinkie/token",
        { credentials: "omit" }
      );
      const tokenData = await tokenRes.json();
      const csrfToken = tokenData?.ok?.token;
      if (!csrfToken) throw new Error("Missing token");
      tokenInput.value = csrfToken;

      const formData = new FormData(form);
      const submitRes = await fetch(form.action, {
        method: "POST",
        body: formData,
        headers: {
          "H-Captcha-Response": hcaptchaResponse,
          "X-CSRF-Token": csrfToken,
        },
        redirect: "manual",
        credentials: "omit",
      });

      const redirectUrl = formData.get("_redirect");
      if (typeof redirectUrl === "string" && redirectUrl.length > 0) {
        window.location.assign(redirectUrl);
        return;
      }
      const text = await submitRes.text();
      if (!submitRes.ok) throw new Error(text || "Submit failed");
    } catch (err) {
      alert("Something went wrong. Please try again.");
      hcaptcha.reset();
    }
  });
</script>