Create script.js

script.js

@@ -0,0 +1,118 @@
+(() => {
+  "use strict";
+
+  const destination = "https://www.socialsleuth.xyz/face-search";
+  const uploadCard = document.getElementById("upload-card");
+  const photoInput = document.getElementById("photo-input");
+  const uploadEmpty = document.getElementById("upload-empty");
+  const uploadPreview = document.getElementById("upload-preview");
+  const previewImage = document.getElementById("preview-image");
+  const fileName = document.getElementById("file-name");
+  const changePhoto = document.getElementById("change-photo");
+  const uploadError = document.getElementById("upload-error");
+  const startSearch = document.getElementById("start-search");
+
+  let previewUrl = "";
+
+  const isSupportedImage = (file) => {
+    if (!file) return false;
+    const acceptedTypes = ["image/jpeg", "image/jpg", "image/png"];
+    if (acceptedTypes.includes(file.type.toLowerCase())) return true;
+    return /\.(jpe?g|png)$/i.test(file.name);
+  };
+
+  const openFilePicker = () => {
+    photoInput.click();
+  };
+
+  const showError = () => {
+    uploadError.hidden = false;
+  };
+
+  const clearError = () => {
+    uploadError.hidden = true;
+  };
+
+  const displayFile = (file) => {
+    if (!isSupportedImage(file)) {
+      showError();
+      return;
+    }
+
+    clearError();
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    previewUrl = URL.createObjectURL(file);
+
+    previewImage.src = previewUrl;
+    previewImage.alt = `Preview of selected photo: ${file.name}`;
+    fileName.textContent = file.name;
+    uploadEmpty.hidden = true;
+    uploadPreview.hidden = false;
+    startSearch.disabled = false;
+  };
+
+  photoInput.addEventListener("change", () => {
+    displayFile(photoInput.files && photoInput.files[0]);
+    photoInput.value = "";
+  });
+
+  uploadCard.addEventListener("click", openFilePicker);
+  uploadCard.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openFilePicker();
+    }
+  });
+
+  ["dragenter", "dragover"].forEach((eventName) => {
+    uploadCard.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      uploadCard.classList.add("is-dragging");
+    });
+  });
+
+  ["dragleave", "drop"].forEach((eventName) => {
+    uploadCard.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      uploadCard.classList.remove("is-dragging");
+    });
+  });
+
+  uploadCard.addEventListener("drop", (event) => {
+    displayFile(event.dataTransfer.files && event.dataTransfer.files[0]);
+  });
+
+  changePhoto.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openFilePicker();
+  });
+
+  startSearch.addEventListener("click", () => {
+    if (!startSearch.disabled) window.location.href = destination;
+  });
+
+  document.querySelectorAll(".faq-question").forEach((button) => {
+    const answer = document.getElementById(button.getAttribute("aria-controls"));
+    const item = button.closest(".faq-item");
+
+    button.addEventListener("click", () => {
+      const willOpen = button.getAttribute("aria-expanded") !== "true";
+      button.setAttribute("aria-expanded", String(willOpen));
+      item.classList.toggle("is-open", willOpen);
+
+      if (willOpen) {
+        answer.hidden = false;
+        requestAnimationFrame(() => answer.classList.add("is-open"));
+      } else {
+        answer.classList.remove("is-open");
+        window.setTimeout(() => {
+          if (button.getAttribute("aria-expanded") === "false") answer.hidden = true;
+        }, 230);
+      }
+    });
+  });
+
+  window.addEventListener("beforeunload", () => {
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+  });
+})();