Update resources.html

resources.html

@@ -12,7 +12,7 @@
     <header class="main-header">
       <div class="header-left">
         <h1>
-          <a href="index.html" class="home-link"
+          <a href="/" class="home-link"
             >Infer <span class="star">❊</span></a
           >
         </h1>
@@ -21,7 +21,7 @@
       <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>
+        <a href="/resources" class="nav-link">Resources</a>
         <span class="nav-separator">⎈</span>
         <a href="mailto:[email protected]" class="nav-link">Contact</a>
       </nav>
@@ -89,6 +89,7 @@
     <script src="static/app.js"></script>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
+        // About overlay logic
         var aboutOverlay = document.getElementById('aboutOverlay');
         var aboutCloseBtn = document.getElementById('aboutCloseBtn');
         var aboutLink = Array.from(document.querySelectorAll('.nav-link')).find(function(link) {
@@ -112,7 +113,50 @@
             }
           });
         }
+
+        // Resource data handling
+        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 resource
+          showResource('do-not-train');
+        }
       });
     </script>
   </body>
-</html>
+</html>