Upload 5 files

app.js

@@ -0,0 +1,395 @@
+// DOM Elements
+const uploadArea = document.getElementById("uploadArea");
+const imageInput = document.getElementById("imageInput");
+const imagePreview = document.getElementById("imagePreview");
+const submitButton = document.getElementById("submitButton");
+const errorMessage = document.getElementById("errorMessage");
+const resultSection = document.getElementById("result");
+const resultStatus = document.getElementById("resultStatus");
+const resultDescription = document.getElementById("resultDescription");
+const probabilityValue = document.getElementById("probabilityValue");
+const probabilityFill = document.getElementById("probabilityFill");
+const likelyInfo = document.getElementById("likelyInfo");
+const resultImage = document.getElementById("resultImage");
+const actionButtons = document.getElementById("actionButtons");
+const navButtons = document.querySelectorAll(".nav-button");
+const pages = document.querySelectorAll(".page");
+const resourceCategories = document.querySelectorAll(".resource-category");
+const optInCheckbox = document.getElementById("optInCheckbox");
+const contactInfoInput = document.getElementById("contactInfo");
+const contactOptin = document.querySelector(".contact-optin");
+
+// State
+let selectedImage = null;
+
+// Custom dropdown logic
+const dropdownToggle = document.getElementById("dropdownToggle");
+const dropdownMenu = document.getElementById("dropdownMenu");
+const dropdownOptions = dropdownMenu
+  ? dropdownMenu.querySelectorAll(".dropdown-option")
+  : [];
+const selectedModelSpan = document.getElementById("selectedModel");
+let selectedModelValue = "rupeshs/LCM-runwayml-stable-diffusion-v1-5";
+const customDropdown = document.getElementById("modelDropdown");
+
+// Loading animation
+const loadingContainer = document.createElement("div");
+loadingContainer.id = "loadingAnimation";
+loadingContainer.style.display = "none";
+loadingContainer.style.justifyContent = "center";
+loadingContainer.style.alignItems = "center";
+loadingContainer.style.flexDirection = "column";
+loadingContainer.style.textAlign = "center";
+loadingContainer.style.position = "absolute";
+loadingContainer.style.top = "0";
+loadingContainer.style.left = "0";
+loadingContainer.style.width = "100%";
+loadingContainer.style.height = "100%";
+loadingContainer.style.zIndex = "2";
+const loadingImg = document.createElement("img");
+loadingImg.alt = "Loading...";
+loadingImg.style.width = "64px";
+loadingImg.style.height = "64px";
+const loadingMsg = document.createElement("div");
+loadingMsg.className = "loading-message";
+loadingMsg.textContent = "Processing";
+loadingContainer.appendChild(loadingImg);
+loadingContainer.appendChild(loadingMsg);
+resultSection.appendChild(loadingContainer);
+let loadingFrame = 1;
+let loadingInterval = null;
+const resultContent = resultSection.querySelector(".result-content");
+
+// About overlay logic
+const aboutOverlay = document.getElementById("aboutOverlay");
+const aboutCloseBtn = document.getElementById("aboutCloseBtn");
+
+function showLoading() {
+  resultSection.hidden = false;
+  resultSection.style.display = "";
+  if (resultContent) resultContent.style.display = "none";
+  loadingContainer.style.display = "flex";
+  loadingFrame = 1;
+  updateLoadingFrame();
+  loadingInterval = setInterval(() => {
+    loadingFrame = (loadingFrame % 16) + 1;
+    updateLoadingFrame();
+  }, 60);
+}
+function hideLoading() {
+  loadingContainer.style.display = "none";
+  if (resultContent) resultContent.style.display = "";
+  if (loadingInterval) clearInterval(loadingInterval);
+}
+function updateLoadingFrame() {
+  loadingImg.src = `assets/Infer_LoadingAnimation/Property 1=Variant${loadingFrame}.svg`;
+}
+
+function hideResultSection() {
+  resultSection.hidden = true;
+  resultSection.style.display = "none";
+  if (likelyInfo) likelyInfo.hidden = true;
+  if (resultImage) resultImage.hidden = true;
+  if (resultContent) resultContent.style.display = "";
+  loadingContainer.style.display = "none";
+}
+
+function showResultSection() {
+  resultSection.hidden = false;
+  resultSection.style.display = "";
+}
+
+// Event Listeners
+uploadArea.addEventListener("click", () => imageInput.click());
+imageInput.addEventListener("change", handleImageUpload);
+submitButton.addEventListener("click", handleSubmit);
+navButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    const targetPage = button.dataset.page;
+    navigateToPage(targetPage);
+  });
+});
+
+// Hide result section initially
+hideResultSection();
+
+// Add drag and drop support
+uploadArea.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  uploadArea.classList.add("dragover");
+});
+
+uploadArea.addEventListener("dragleave", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  uploadArea.classList.remove("dragover");
+});
+
+uploadArea.addEventListener("drop", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  uploadArea.classList.remove("dragover");
+  const file = e.dataTransfer.files[0];
+  if (file && file.type.startsWith("image/")) {
+    handleImageUpload({ target: { files: [file] } });
+  }
+});
+
+// Resource category selection
+resourceCategories.forEach((category) => {
+  category.addEventListener("click", () => {
+    resourceCategories.forEach((c) => c.classList.remove("active"));
+    category.classList.add("active");
+  });
+});
+
+// Functions
+function handleImageUpload(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+
+  if (!file.type.startsWith("image/")) {
+    showError("Please select an image file");
+    return;
+  }
+
+  selectedImage = file;
+  errorMessage.textContent = "";
+  submitButton.disabled = false;
+
+  // Hide result section when a new image is selected
+  hideResultSection();
+
+  // Hide contact opt-in on new upload
+  if (contactOptin) contactOptin.style.display = "none";
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    imagePreview.src = e.target.result;
+    imagePreview.hidden = false;
+    document.querySelector(".upload-placeholder").style.display = "none";
+  };
+  reader.readAsDataURL(file);
+}
+
+async function handleSubmit() {
+  if (!selectedImage) {
+    showError("Please select an image first");
+    return;
+  }
+
+  submitButton.disabled = true;
+  errorMessage.textContent = "";
+  hideResultSection();
+  showLoading();
+
+  if (contactOptin) contactOptin.style.display = "none";
+
+  try {
+    const formData = new FormData();
+    formData.append("image", selectedImage);
+    formData.append("model", selectedModelValue);
+    // Only send opt-in if visible and checked
+    if (
+      contactOptin &&
+      contactOptin.style.display !== "none" &&
+      optInCheckbox &&
+      optInCheckbox.checked &&
+      contactInfoInput &&
+      contactInfoInput.value
+    ) {
+      formData.append("opt_in", "true");
+      formData.append("contact_info", contactInfoInput.value);
+    } else {
+      formData.append("opt_in", "false");
+    }
+
+    const response = await fetch(
+      "https://s-ahal-infer.hf.space/api/check-membership",
+      {
+        method: "POST",
+        body: formData,
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`Server responded with ${response.status}`);
+    }
+
+    const data = await response.json();
+    displayResult(data);
+  } catch (error) {
+    showError(`Error: ${error.message}`);
+    console.error("Error:", error);
+    hideLoading();
+  } finally {
+    submitButton.disabled = false;
+  }
+}
+
+function displayResult(data) {
+  const probability = data.probability * 100;
+  const isLikely = data.probability > 0.5;
+
+  resultStatus.textContent = isLikely ? "Likely" : "Unlikely";
+  const modelName = selectedModelSpan.textContent;
+  const desc = `This image <strong class='result-description-strong'>${
+    isLikely ? "probably is" : "is probably not"
+  }</strong> in the training data for the ${modelName} model.`;
+  resultDescription.innerHTML = desc;
+  probabilityValue.innerHTML = `<span class='result-percentage'>${probability.toFixed(
+    1
+  )}%</span>`;
+  probabilityFill.style.width = "0%";
+  setTimeout(() => {
+    probabilityFill.style.width = `${probability}%`;
+  }, 30);
+
+  if (imagePreview && resultImage) {
+    resultImage.src = imagePreview.src;
+    resultImage.hidden = false;
+  }
+
+  if (isLikely) {
+    likelyInfo.hidden = false;
+    let usersText = "";
+    if (typeof data.likely_count === "number" && data.likely_count > 1) {
+      usersText = `There are <strong>${
+        data.likely_count - 1
+      } other user-tested artworks</strong> that were found to likely be included in this model's training data.`;
+    }
+    likelyInfo.querySelector(".likely-users").innerHTML = usersText;
+    // Show contact opt-in below results
+    if (contactOptin) contactOptin.style.display = "";
+  } else {
+    likelyInfo.hidden = true;
+    if (contactOptin) contactOptin.style.display = "none";
+  }
+
+  hideLoading();
+  showResultSection();
+}
+
+function showError(message) {
+  errorMessage.textContent = message;
+}
+
+function navigateToPage(pageId) {
+  // Update active page
+  pages.forEach((page) => {
+    page.classList.remove("active");
+    if (page.id === pageId) {
+      page.classList.add("active");
+    }
+  });
+
+  // Update active nav button
+  navButtons.forEach((button) => {
+    button.classList.toggle("active", button.dataset.page === pageId);
+  });
+
+  // Scroll to top when changing pages
+  window.scrollTo(0, 0);
+}
+
+// Initialize
+navigateToPage("model-select");
+
+function closeDropdown() {
+  dropdownMenu.hidden = true;
+  dropdownToggle.setAttribute("aria-expanded", "false");
+  if (customDropdown) customDropdown.classList.remove("open");
+}
+
+function openDropdown() {
+  dropdownMenu.hidden = false;
+  dropdownToggle.setAttribute("aria-expanded", "true");
+  if (customDropdown) customDropdown.classList.add("open");
+  // Focus the selected option
+  const selected = dropdownMenu.querySelector(".dropdown-option.selected");
+  if (selected) selected.focus();
+}
+
+dropdownToggle.addEventListener("click", (e) => {
+  e.stopPropagation();
+  if (dropdownMenu.hidden) {
+    openDropdown();
+  } else {
+    closeDropdown();
+  }
+});
+
+dropdownOptions.forEach((option) => {
+  option.setAttribute("tabindex", "0");
+  option.addEventListener("click", (e) => {
+    dropdownOptions.forEach((opt) => opt.classList.remove("selected"));
+    option.classList.add("selected");
+    selectedModelSpan.textContent = option.textContent;
+    selectedModelValue = option.getAttribute("data-value");
+    closeDropdown();
+  });
+  option.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      option.click();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      let next = option.nextElementSibling;
+      if (!next) next = dropdownMenu.firstElementChild;
+      next.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      let prev = option.previousElementSibling;
+      if (!prev) prev = dropdownMenu.lastElementChild;
+      prev.focus();
+    } else if (e.key === "Escape") {
+      closeDropdown();
+      dropdownToggle.focus();
+    }
+  });
+});
+
+document.addEventListener("click", (e) => {
+  if (!dropdownMenu.hidden) {
+    closeDropdown();
+  }
+});
+dropdownToggle.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+    openDropdown();
+    e.preventDefault();
+  }
+});
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    closeDropdown();
+  }
+});
+
+// Ensure About overlay logic runs after DOM is loaded
+window.addEventListener("DOMContentLoaded", function () {
+  const aboutOverlay = document.getElementById("aboutOverlay");
+  const aboutCloseBtn = document.getElementById("aboutCloseBtn");
+  const aboutLink = Array.from(document.querySelectorAll(".nav-link")).find(
+    (link) => link.textContent.trim().toLowerCase() === "about"
+  );
+  if (aboutLink) {
+    aboutLink.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (aboutOverlay) aboutOverlay.style.display = "flex";
+    });
+  }
+  if (aboutCloseBtn) {
+    aboutCloseBtn.addEventListener("click", function () {
+      if (aboutOverlay) aboutOverlay.style.display = "none";
+    });
+  }
+  if (aboutOverlay) {
+    aboutOverlay.addEventListener("click", function (e) {
+      if (e.target === aboutOverlay) {
+        aboutOverlay.style.display = "none";
+      }
+    });
+  }
+});

get-organized.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Infer</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
+    <link rel="icon" type="image/png" href="assets/favicon.png" />
+  </head>
+  <body>
+    <header class="main-header">
+      <div class="header-left">
+        <h1>
+          <a href="index.html" class="home-link"
+            >Infer <span class="star">❊</span></a
+          >
+        </h1>
+        <p class="subtitle">Making AI accountability tools for artists.</p>
+      </div>
+      <nav class="header-nav">
+        <a href="#" class="nav-link">About</a>
+        <span class="nav-separator">⎈</span>
+        <a href="resources.html" class="nav-link">Resources</a>
+        <span class="nav-separator">⎈</span>
+        <a href="mailto:[email protected]" class="nav-link">Contact</a>
+      </nav>
+    </header>
+    <main class="main-content">
+      <section class="get-organized-hero">
+        <h2>Get Organized</h2>
+        <p>Connect with others whose work has also been scraped.</p>
+      </section>
+      <div class="get-organized-columns">
+        <div class="get-organized-left">
+          <p class="big-number">
+            <strong>531 other users</strong> also have work that is likely in
+            the OpenAI CLIP model's training data.
+          </p>
+          <p class="not-alone">
+            <strong>You are not alone.</strong> Hundreds of artists are
+            impacted—many unknowingly.
+          </p>
+          <p class="explanation">
+            Your art may have helped train one of the most powerful AI models in
+            use today—without your consent. You're part of a growing group of
+            creators facing the same situation. This is a moment for collective
+            response.
+          </p>
+          <div class="together-list">
+            <p>Together, we can:</p>
+            <ul>
+              <li><strong>Explore legal options</strong></li>
+              <li><strong>Share tools and tactics</strong></li>
+              <li>
+                <strong>Coordinate public statements and campaigns</strong>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="get-organized-right">
+          <h3>Join the conversation.</h3>
+          <a class="org-btn" href="#"
+            ><span>Join the mailing list</span
+            ><img src="assets/email_icon.svg" alt="Email"
+          /></a>
+          <a class="org-btn" href="#"
+            ><span>Connect on Discord</span
+            ><img src="assets/discord_logo.svg" alt="Discord"
+          /></a>
+          <a class="org-btn" href="#"
+            ><span>Connect on Signal</span
+            ><img src="assets/signal_logo.svg" alt="Signal"
+          /></a>
+        </div>
+      </div>
+    </main>
+    <div id="aboutOverlay" class="about-overlay" style="display:none;">
+      <div class="about-modal">
+        <button class="about-close" id="aboutCloseBtn" aria-label="Close About">&times;</button>
+        <h2>About Infer</h2>
+        <p>
+          Infer helps artists and image creators check whether their work was likely used to train popular AI models. By comparing your image against model behaviors, we can estimate its presence in the training data—something that's often invisible by design.
+        </p>
+        <p>
+          If your image comes up as a likely match, you'll get two paths:
+          <ul>
+            <li>Protect Your Art with tools to cloak, license, or fight back</li>
+            <li>Get Organized with others facing the same issue—through legal coordination, shared resources, and community defense</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        var aboutOverlay = document.getElementById('aboutOverlay');
+        var aboutCloseBtn = document.getElementById('aboutCloseBtn');
+        var aboutLink = Array.from(document.querySelectorAll('.nav-link')).find(function(link) {
+          return link.textContent.trim().toLowerCase() === 'about';
+        });
+        if (aboutLink) {
+          aboutLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (aboutOverlay) aboutOverlay.style.display = 'flex';
+          });
+        }
+        if (aboutCloseBtn) {
+          aboutCloseBtn.addEventListener('click', function() {
+            if (aboutOverlay) aboutOverlay.style.display = 'none';
+          });
+        }
+        if (aboutOverlay) {
+          aboutOverlay.addEventListener('click', function(e) {
+            if (e.target === aboutOverlay) {
+              aboutOverlay.style.display = 'none';
+            }
+          });
+        }
+      });
+    </script>
+  </body>
+</html>

index.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Infer</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
+    <link rel="icon" type="image/png" href="assets/favicon.png" />
+  </head>
+  <body>
+    <header class="main-header">
+      <div class="header-left">
+        <h1>
+          <a href="index.html" class="home-link"
+            >Infer <span class="star">❊</span></a
+          >
+        </h1>
+        <p class="subtitle">Making AI accountability tools for artists.</p>
+      </div>
+      <nav class="header-nav">
+        <a href="#" class="nav-link">About</a>
+        <span class="nav-separator">⎈</span>
+        <a href="resources.html" class="nav-link">Resources</a>
+        <span class="nav-separator">⎈</span>
+        <a href="mailto:[email protected]" class="nav-link">Contact</a>
+      </nav>
+    </header>
+    <main class="main-content">
+      <div class="home-columns">
+        <section class="upload-section" style="min-height: 540px">
+          <div class="card-header">
+            <h2>Model select</h2>
+            <p>Select an AI model to test against</p>
+          </div>
+          <div class="card-content">
+            <div class="model-selector">
+              <div class="custom-dropdown" id="modelDropdown">
+                <button
+                  type="button"
+                  class="dropdown-toggle"
+                  id="dropdownToggle"
+                >
+                  <span id="selectedModel">Runway Stable Diffusion v1.5</span>
+                  <img
+                    src="assets/arrow-down.svg"
+                    alt="Dropdown arrow"
+                    id="dropdown-arrow"
+                  />
+                </button>
+                <ul class="dropdown-menu" id="dropdownMenu" hidden>
+                  <li
+                    class="dropdown-option selected"
+                    data-value="rupeshs/LCM-runwayml-stable-diffusion-v1-5"
+                  >
+                    Runway Stable Diffusion v1.5
+                  </li>
+                  <li
+                    class="dropdown-option"
+                    data-value="CompVis/stable-diffusion-v1-4"
+                  >
+                    CompVis Stable Diffusion v1.4
+                  </li>
+                  <li
+                    class="dropdown-option"
+                    data-value="prompthero/openjourney-v4"
+                  >
+                    OpenJourney v4
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="upload-area" id="uploadArea">
+              <input type="file" id="imageInput" accept="image/*" hidden />
+
+              <div class="upload-placeholder">
+                <img
+                  src="assets/upload-icon.svg"
+                  alt="Upload"
+                  id="uploadIcon"
+                />
+                <p>Click or drag-and-drop to upload a file</p>
+              </div>
+              <img id="imagePreview" class="preview-image" hidden />
+            </div>
+            <div id="errorMessage" class="error-message"></div>
+            <button id="submitButton" class="submit-button" disabled>
+              <span>Let's go</span>
+              <span>⟶</span>
+            </button>
+          </div>
+        </section>
+        <section class="result-section" id="result" hidden>
+          <div class="result-content">
+            <div class="result-image-container">
+              <img id="resultImage" class="result-image" hidden />
+            </div>
+            <h2>Result: <span id="resultStatus"></span></h2>
+            <p id="resultDescription"></p>
+            <div class="probability-section">
+              <p>
+                Predicted membership probability:
+                <span id="probabilityValue"></span>
+              </p>
+              <div class="probability-bar">
+                <div id="probabilityFill" class="probability-fill"></div>
+              </div>
+            </div>
+            <div id="likelyInfo" class="likely-info" hidden>
+              <p class="likely-users">
+                There are <strong>531 other users</strong> that have work that
+                is likely in this model's training data.
+              </p>
+              <h3>What now?</h3>
+              <div class="result-actions">
+                <a href="resources.html" class="action-button"
+                  >Protect your work <span class="arrow">⟶</span></a
+                >
+                <a href="get-organized.html" class="action-button"
+                  >Get organized <span class="arrow">⟶</span></a
+                >
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+    <!-- <div
+      class="contact-optin"
+      style="display: none; margin: 2em auto 0 auto; max-width: 400px"
+    >
+      <input type="checkbox" id="optInCheckbox" />
+      <label for="optInCheckbox"
+        >Notify me if there are updates about this project (optional):</label
+      >
+      <input
+        type="email"
+        id="contactInfo"
+        class="styled-input"
+        placeholder="Your email (optional)"
+        style="margin-left: 0.5em"
+      />
+    </div> -->
+    <script src="app.js"></script>
+    <div id="aboutOverlay" class="about-overlay" style="display:none;">
+      <div class="about-modal">
+        <button class="about-close" id="aboutCloseBtn" aria-label="Close About">&times;</button>
+        <h2>About Infer</h2>
+        <p>
+          Infer helps artists and image creators check whether their work was likely used to train popular AI models. By comparing your image against model behaviors, we can estimate its presence in the training data—something that's often invisible by design.
+        </p>
+        <p>
+          If your image comes up as a likely match, you'll get two paths:
+          <ul>
+            <li>Protect Your Art with tools to cloak, license, or fight back</li>
+            <li>Get Organized with others facing the same issue—through legal coordination, shared resources, and community defense</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>

resources.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Infer</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
+    <link rel="icon" type="image/png" href="assets/favicon.png" />
+  </head>
+  <body>
+    <header class="main-header">
+      <div class="header-left">
+        <h1>
+          <a href="index.html" class="home-link"
+            >Infer <span class="star">❊</span></a
+          >
+        </h1>
+        <p class="subtitle">Making AI accountability tools for artists.</p>
+      </div>
+      <nav class="header-nav">
+        <a href="#" class="nav-link">About</a>
+        <span class="nav-separator">⎈</span>
+        <a href="resources.html" class="nav-link">Resources</a>
+        <span class="nav-separator">⎈</span>
+        <a href="mailto:[email protected]" class="nav-link">Contact</a>
+      </nav>
+    </header>
+    <main class="main-content">
+      <section class="resources-section">
+        <div class="card-header">
+          <h2>Resources</h2>
+          <p>
+            A compiled list of applications and legal resources to help you
+            protect your work.
+          </p>
+        </div>
+        <div class="resources-content">
+          <div class="resource-categories">
+            <button
+              class="resource-category active"
+              data-resource="do-not-train"
+            >
+              Do Not Train
+            </button>
+            <button class="resource-category" data-resource="nightshade">
+              Nightshade
+            </button>
+            <button class="resource-category" data-resource="glaze">
+              Glaze
+            </button>
+            <button class="resource-category" data-resource="copyright">
+              Copyright Resources
+            </button>
+            <button class="resource-category" data-resource="licensing">
+              Licensing Options
+            </button>
+          </div>
+          <div class="resource-details">
+            <img
+              src="assets/nightshade-preview.png"
+              alt="Nightshade Preview"
+              class="resource-preview"
+              style="display: none"
+            />
+            <div class="resource-info" id="resource-info">
+              <!-- JS will inject content here -->
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <div id="aboutOverlay" class="about-overlay" style="display:none;">
+      <div class="about-modal">
+        <button class="about-close" id="aboutCloseBtn" aria-label="Close About">&times;</button>
+        <h2>About Infer</h2>
+        <p>
+          Infer helps artists and image creators check whether their work was likely used to train popular AI models. By comparing your image against model behaviors, we can estimate its presence in the training data—something that's often invisible by design.
+        </p>
+        <p>
+          If your image comes up as a likely match, you'll get two paths:
+          <ul>
+            <li>Protect Your Art with tools to cloak, license, or fight back</li>
+            <li>Get Organized with others facing the same issue—through legal coordination, shared resources, and community defense</li>
+          </ul>
+        </p>
+      </div>
+    </div>
+    <script>
+      const resourceData = {
+        "do-not-train": {
+          title: "Do Not Train",
+          html: `<strong>What It Is:</strong> A simple metadata tag artists can add to their images to declare they don't consent to their work being used for training AI.<br><strong>How To Use:</strong> Add a do-not-train tag to your website's HTML or use platforms that support the tag.<br><strong>Note:</strong> It's not enforceable yet, but signals intent for future protections.<br><a href='https://spawning.ai/rightsholders-faq' class='action-button' target='_blank'><span>Learn more</span><span class='arrow'>⟶</span></a>`,
+        },
+        nightshade: {
+          title: "Nightshade",
+          html: `<strong>What It Is:</strong> A tool that poisons your artwork's pixels—imperceptibly to humans, but disruptive to training algorithms.<br><strong>Why It Works:</strong> It corrupts how AI models interpret your work, deterring them from using it.<br><a href='https://nightshade.cs.uchicago.edu/' class='action-button' target='_blank'><span>Try it out</span><span class='arrow'>⟶</span></a>`,
+        },
+        glaze: {
+          title: "Glaze",
+          html: `<strong>What It Is:</strong> A style cloak that protects your artistic fingerprint.<br><strong>What It Does:</strong> Applies a subtle, AI-visible filter that makes your work harder to mimic.<br><strong>Best For:</strong> Artists with a strong visual signature.<br><a href='https://glaze.cs.uchicago.edu/' class='action-button' target='_blank'><span>Try it out</span><span class='arrow'>⟶</span></a>`,
+        },
+        copyright: {
+          title: "Copyright Resources",
+          html: `<strong>Understand Your Rights:</strong><br>In many countries, your work is protected the moment it's created—but enforcing that is another story.<br><br><u>Includes:</u><ul><li>How to formally register your copyright</li><li>Templates for takedown notices</li><li>Intro to fair use & derivative work laws</li></ul>`,
+        },
+        licensing: {
+          title: "Licensing Tools",
+          html: `<strong>Put Terms in Writing:</strong><br>Use free or paid licenses to explicitly control how your work can be used.<br><br><u>Options to Explore:</u><ul><li>Creative Commons with "no AI use" clauses</li><li>Personal licensing agreements</li><li>Open-source licenses adapted for artists</li></ul>`,
+        },
+      };
+      const categories = document.querySelectorAll(".resource-category");
+      const info = document.getElementById("resource-info");
+      function showResource(key) {
+        categories.forEach((btn) =>
+          btn.classList.toggle("active", btn.dataset.resource === key)
+        );
+        info.innerHTML = `<h3>${resourceData[key].title}</h3><p>${resourceData[key].html}</p>`;
+      }
+      categories.forEach((btn) => {
+        btn.addEventListener("click", () => showResource(btn.dataset.resource));
+      });
+      // Show default
+      showResource("do-not-train");
+    </script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        var aboutOverlay = document.getElementById('aboutOverlay');
+        var aboutCloseBtn = document.getElementById('aboutCloseBtn');
+        var aboutLink = Array.from(document.querySelectorAll('.nav-link')).find(function(link) {
+          return link.textContent.trim().toLowerCase() === 'about';
+        });
+        if (aboutLink) {
+          aboutLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (aboutOverlay) aboutOverlay.style.display = 'flex';
+          });
+        }
+        if (aboutCloseBtn) {
+          aboutCloseBtn.addEventListener('click', function() {
+            if (aboutOverlay) aboutOverlay.style.display = 'none';
+          });
+        }
+        if (aboutOverlay) {
+          aboutOverlay.addEventListener('click', function(e) {
+            if (e.target === aboutOverlay) {
+              aboutOverlay.style.display = 'none';
+            }
+          });
+        }
+      });
+    </script>
+  </body>
+</html>

styles.css

@@ -0,0 +1,796 @@
+@import url("https://fonts.googleapis.com/css?family=Hepta+Slab:400,200|Karla:400,700");
+
+:root {
+  --primary-color: #e7503e;
+  --background-color: #fefefa;
+  --card-background: #fffde5;
+  --text-color: #e7503e;
+  --border-radius: 4px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Karla", Helvetica, sans-serif;
+  line-height: 1.6;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+.main-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.2rem 40px 0 40px;
+  max-width: 950px;
+  margin: 0 auto;
+}
+
+.header-left h1 {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-weight: 200;
+  font-size: 42px;
+  color: var(--primary-color);
+  margin-bottom: 0.3rem;
+  line-height: 1;
+}
+
+.header-left .star {
+  font-size: 1.1em;
+  vertical-align: middle;
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: var(--primary-color);
+  font-family: "Karla", Helvetica, sans-serif;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 0.3rem;
+}
+
+.nav-link {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1.1rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: text-decoration 0.2s;
+}
+
+.nav-link:hover {
+  text-decoration: underline;
+}
+
+.nav-separator {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1.1rem;
+  color: var(--primary-color);
+}
+
+.main-content {
+  max-width: 950px;
+  margin: 0 auto;
+  padding: 1.2rem 40px 1.2rem 40px;
+}
+
+.home-columns {
+  display: flex;
+  gap: 8rem;
+  align-items: flex-start;
+}
+
+.upload-section {
+  flex: 1 1 0;
+  min-width: 260px;
+  max-width: 400px;
+  background: var(--card-background);
+  border: 2px dashed var(--primary-color);
+  border-radius: var(--border-radius);
+  padding: 0;
+  margin: 0;
+  min-height: 540px;
+}
+
+.card-header {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 10px 14px;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.card-header h2 {
+  color: white;
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1.3rem;
+  margin-bottom: 0.2rem;
+}
+
+.card-header p {
+  color: white;
+  font-size: 0.9rem;
+}
+
+.card-content {
+  padding: 1rem 1rem 1.2rem 1rem;
+  background-color: var(--card-background);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  min-height: 400px;
+}
+
+.model-selector {
+  margin-bottom: 0.7rem;
+}
+
+.model-select {
+  width: 100%;
+  padding: 0.3rem 2rem 0.3rem 0.7rem;
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 1rem;
+  color: var(--primary-color);
+  border: 2px dashed var(--primary-color);
+  background-color: white;
+  border-radius: var(--border-radius);
+  appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="%23e7503e" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 1.1em;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.model-select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+
+/* Style the dropdown options (limited by browser support) */
+.model-select option {
+  color: var(--primary-color);
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 1rem;
+  background: white;
+}
+
+/* Chrome/Edge: highlight selected/hovered option */
+.model-select option:checked,
+.model-select option:focus,
+.model-select option:hover {
+  background: var(--primary-color);
+  color: white;
+}
+
+/* Firefox: highlight selected option */
+@-moz-document url-prefix() {
+  .model-select option:checked {
+    background: var(--primary-color) !important;
+    color: white !important;
+  }
+}
+
+.upload-area {
+  border: 2px dashed var(--primary-color);
+  border-radius: var(--border-radius);
+  padding: 1.1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.3s ease;
+  margin-bottom: 0.7rem;
+  background: rgba(255, 255, 255, 0.32);
+}
+
+.upload-area:hover {
+  border-color: var(--primary-color);
+}
+
+.upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.7rem;
+  color: var(--primary-color);
+  font-size: 0.95rem;
+}
+
+.upload-placeholder img {
+  width: 32px;
+  height: auto;
+  opacity: 0.5;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: var(--border-radius);
+  margin: 0.7rem 0;
+}
+
+.submit-button {
+  background-color: white;
+  color: var(--primary-color);
+  border: 2px solid var(--primary-color);
+  padding: 0.7rem 1.2rem;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  width: 100%;
+  font-size: 1rem;
+  font-family: "Karla", Helvetica, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0 0 0;
+  gap: 0.7rem;
+  transition: background 0.2s, color 0.2s;
+}
+
+.submit-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.submit-button:hover:not(:disabled) {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.error-message {
+  color: var(--primary-color);
+  margin: 0.7rem 0;
+  text-align: center;
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 0.95rem;
+}
+
+.result-section {
+  flex: 1 1 0;
+  min-width: 260px;
+  max-width: 400px;
+  background: none;
+  padding: 0 0 0 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  min-height: 350px;
+}
+
+.result-image-container {
+  width: 100%;
+  margin-bottom: 0.3rem;
+  text-align: center;
+}
+
+.result-image {
+  max-height: 400px;
+  max-width: 400px;
+  width: auto;
+  border: 2px dashed var(--primary-color);
+  border-radius: var(--border-radius);
+  object-fit: contain;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.result-image-label {
+  font-size: 0.8rem;
+  color: #e7503ebf;
+  margin-top: 0.1rem;
+  font-family: "Karla", Helvetica, sans-serif;
+}
+
+.result-section h2 {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1.1rem;
+  color: var(--primary-color);
+  margin: 0.7rem 0 0.3rem 0;
+}
+
+#resultDescription {
+  color: var(--primary-color);
+  font-size: 0.95rem;
+  margin-bottom: 0.3rem;
+}
+
+.probability-section {
+  margin: 0.7rem 0 0.3rem 0;
+  width: 100%;
+}
+
+.probability-bar {
+  width: 100%;
+  height: 16px;
+  background-color: #f8f5c8;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  margin-top: 0.3rem;
+  box-sizing: border-box;
+}
+
+.probability-fill {
+  height: 100%;
+  background-color: var(--primary-color);
+  border-radius: 4px 0 0 4px;
+  transition: width 0.8s cubic-bezier(0.4, 1.4, 0.6, 1);
+}
+
+.likely-info {
+  margin-top: 1rem;
+}
+
+.likely-users {
+  color: var(--primary-color);
+  font-size: 0.95rem;
+  margin-bottom: 0.7rem;
+}
+
+.result-section h3 {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1rem;
+  color: var(--primary-color);
+  margin: 0.7rem 0 0.3rem 0;
+}
+
+.result-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  margin-top: 0.7rem;
+}
+
+.action-button {
+  background: white;
+  color: var(--primary-color);
+  border: 2px solid var(--primary-color);
+  border-radius: var(--border-radius);
+  padding: 0.7rem 1.2rem;
+  font-size: 1rem;
+  font-family: "Karla", Helvetica, sans-serif;
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.7rem;
+  transition: background 0.2s, color 0.2s;
+}
+
+.action-button:hover {
+  background: var(--primary-color);
+  color: white;
+  text-decoration: none;
+}
+
+.arrow {
+  font-size: 1.1em;
+  margin-left: 0.3em;
+}
+
+@media (max-width: 900px) {
+  .main-header,
+  .main-content {
+    padding: 0.7rem 2vw 0 2vw;
+  }
+  .home-columns {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .upload-section,
+  .result-section {
+    max-width: 100%;
+    min-width: 0;
+  }
+}
+
+.custom-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.dropdown-toggle {
+  width: 100%;
+  background: white;
+  color: var(--primary-color);
+  border: 2px dashed var(--primary-color);
+  border-radius: var(--border-radius);
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 1rem;
+  padding: 0 0 0 0.7rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+#dropdown-arrow {
+  background-color: #e7503e;
+  border-radius: 0 4px 4px 0;
+}
+
+.dropdown-menu {
+  position: static;
+  width: 100%;
+  background: white;
+  border: 2px dashed var(--primary-color);
+  border-top: none;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  box-shadow: none;
+  z-index: 1;
+  margin: 0;
+  list-style: none;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s cubic-bezier(0.4, 1.4, 0.6, 1);
+}
+
+.custom-dropdown.open .dropdown-menu {
+  max-height: 400px;
+  transition: max-height 0.35s cubic-bezier(0.4, 1.4, 0.6, 1);
+}
+
+.dropdown-option {
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 1rem;
+  color: var(--primary-color);
+  background: white;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  border: none;
+  outline: none;
+}
+
+.dropdown-option.selected,
+.dropdown-option:hover,
+.dropdown-option:focus {
+  background: var(--primary-color);
+  color: white;
+}
+
+.custom-dropdown.open .dropdown-toggle {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: 0 4px 16px rgba(231, 80, 62, 0.1);
+  transition: box-shadow 0.2s;
+}
+
+.custom-dropdown.open .dropdown-menu {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.result-percentage {
+  font-weight: bold;
+}
+
+.result-description-strong {
+  font-weight: bold;
+}
+
+#loadingAnimation {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  /* background: none; */
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+#loadingAnimation img {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 1rem;
+}
+
+#loadingAnimation .loading-message {
+  font-family: "Karla", Helvetica, sans-serif;
+  color: var(--primary-color);
+  font-size: 1.1rem;
+}
+
+/* --- Footer Styles --- */
+.main-footer {
+  text-align: center;
+  font-size: 0.95em;
+  color: #e7503e;
+  margin-top: 3rem;
+  padding: 1.5rem 0 0.5rem 0;
+  background: none;
+}
+.footer-nav .nav-link {
+  color: #e7503e;
+  text-decoration: none;
+  margin: 0 0.5em;
+}
+.footer-nav .nav-separator {
+  color: #e7503e;
+  margin: 0 0.2em;
+}
+
+/* --- Get Organized Page Styles --- */
+.get-organized-hero {
+  background: #e4573d;
+  color: #fff;
+  padding: 2rem 1.5rem 1rem 1.5rem;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+}
+.get-organized-hero h2 {
+  font-size: 2.2rem;
+  margin-bottom: 0.2em;
+}
+.get-organized-hero p {
+  font-size: 1.1rem;
+  margin: 0;
+}
+.get-organized-columns {
+  display: flex;
+  gap: 3rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+.get-organized-left {
+  flex: 2;
+  min-width: 320px;
+}
+.get-organized-right {
+  flex: 1.2;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.big-number {
+  font-size: 1.5rem;
+  color: #e4573d;
+  font-weight: 700;
+  margin-bottom: 1.2rem;
+}
+.not-alone {
+  color: #e4573d;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+.explanation {
+  color: #b85c4c;
+  margin-bottom: 1.5rem;
+}
+.together-list ul {
+  margin: 0.5em 0 0 1.2em;
+  padding: 0;
+  color: #e4573d;
+}
+.together-list li {
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+.get-organized-right h3 {
+  color: #e4573d;
+  font-size: 1.3rem;
+  margin-bottom: 1.2rem;
+}
+.org-btn {
+  display: flex;
+  align-items: center;
+  border: 2px solid #e4573d;
+  color: #e4573d;
+  background: none;
+  border-radius: 6px;
+  padding: 0.8em 1.2em;
+  font-size: 1.15rem;
+  font-weight: 500;
+  margin-bottom: 1.1em;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
+}
+.org-btn img {
+  width: 1.5em;
+  height: 1.5em;
+  margin-left: 0.7em;
+}
+.org-btn:hover {
+  background: #e4573d;
+  color: #fff;
+}
+
+.home-link {
+  color: inherit;
+  text-decoration: none;
+}
+.home-link:hover {
+  text-decoration: none;
+}
+
+.resource-categories {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  width: 320px;
+}
+.resource-category {
+  background: none;
+  border: 2px dashed #e7503e;
+  color: #e7503e;
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 1.15rem;
+  padding: 0.8em 1.2em;
+  border-radius: 6px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.resource-category.active {
+  background: #e7503e;
+  color: #fff;
+  border-style: solid;
+}
+.resources-content {
+  display: flex;
+  gap: 2.5rem;
+  margin-top: 2.5rem;
+}
+.resource-details {
+  flex: 1 1 0;
+  min-width: 340px;
+  max-width: 500px;
+  background: none;
+  border: 2px dashed #e7503e;
+  border-radius: 6px;
+  padding: 2.2rem 2.2rem 2.2rem 2.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.resource-preview {
+  width: 100%;
+  max-width: 340px;
+  margin-bottom: 1.2rem;
+  border-radius: 6px;
+  border: 2px dashed #e7503e;
+  display: none;
+}
+.resource-info h3 {
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 2rem;
+  color: #e7503e;
+  margin-bottom: 1.1rem;
+  margin-top: 0;
+}
+.resource-info p {
+  color: #e7503e;
+  font-size: 1.1rem;
+  margin-bottom: 1.5rem;
+}
+.resource-info ul {
+  margin: 0.7em 0 0 1.2em;
+  padding: 0;
+  color: #e7503e;
+}
+.resource-info li {
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+.resource-info .action-button {
+  background: white;
+  color: #e7503e;
+  border: 2px solid #e7503e;
+  border-radius: 6px;
+  padding: 0.7rem 1.2rem;
+  font-size: 1.1rem;
+  font-family: "Karla", Helvetica, sans-serif;
+  text-align: center;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  transition: background 0.2s, color 0.2s;
+  margin-top: 1.2rem;
+}
+.resource-info .action-button:hover {
+  background: #e7503e;
+  color: white;
+  text-decoration: none;
+}
+
+.styled-input {
+  width: 260px;
+  padding: 0.3rem 2rem 0.3rem 0.7rem;
+  font-family: "Karla", Helvetica, sans-serif;
+  font-size: 1rem;
+  color: var(--primary-color);
+  border: 2px dashed var(--primary-color);
+  background-color: white;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  outline: none;
+  margin-top: 0.5em;
+}
+.styled-input:focus {
+  border-color: var(--primary-color);
+}
+
+.about-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(231, 80, 62, 0.12);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-modal {
+  background: #fff;
+  border-radius: 8px;
+  max-width: 420px;
+  width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  border: 6px solid #e4573d;
+  padding: 0 0 1.5em 0;
+  position: relative;
+  font-size: 1.1rem;
+  color: #e4573d;
+  margin: 2em 0;
+}
+
+.about-modal h2 {
+  background: #e4573d;
+  color: #fff;
+  font-family: "Hepta Slab", Helvetica, sans-serif;
+  font-size: 2rem;
+  margin: 0 0 1em 0;
+  padding: 0.7em 1.2em 0.5em 1.2em;
+  border-radius: 6px 6px 0 0;
+}
+
+.about-modal p {
+  margin: 1.2em 1.5em 0.5em 1.5em;
+  color: #e4573d;
+  font-size: 1.08rem;
+}
+
+.about-modal ul {
+  margin: 0.7em 2.2em 1em 2.2em;
+  color: #e4573d;
+  font-size: 1.08rem;
+}
+
+.about-close {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #fff;
+  cursor: pointer;
+  z-index: 10;
+}