Update static/app.js

static/app.js

@@ -82,7 +82,7 @@ function hideLoading() {
   if (loadingInterval) clearInterval(loadingInterval);
 }
 function updateLoadingFrame() {
-  loadingImg.src = `static/assets/Infer_LoadingAnimation/Property 1=Variant${loadingFrame}.svg`;
+  loadingImg.src = `assets/Infer_LoadingAnimation/Property 1=Variant${loadingFrame}.svg`;
 }
 
 function hideResultSection() {
@@ -393,3 +393,44 @@ window.addEventListener("DOMContentLoaded", function () {
     });
   }
 });
+
+// Resource card logic for resources page
+(function () {
+  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");
+  if (categories.length && 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");
+  }
+})();