Add an artist link

xray.html

@@ -18,6 +18,8 @@
         <input class="onlystart" type="text" id="base-url" placeholder="URL for base image">
         <label class="onlystart">Overlay</label>
         <input class="onlystart"type="text" id="overlay-url" placeholder="URL for overlay image">
+        <label class="onlystart">Artist (optional)</label>
+        <input class="onlystart"type="text" id="artist-url" placeholder="URL for the artist">
         <button id="load-button" class="onlystart">Load</button>
         <button id="reset-button" class="nostart large">Reset</button>
         <label class="nostart large">
@@ -39,6 +41,7 @@
             Fit to screen:
             <input type="checkbox" id="fit-screen" checked>
         </label>
+        <a id="artist" target="_blank" class="nostart large"><button>Visit artist</button></a>
     </div>
     
     <div id="fill-div">

xray.js

@@ -46,6 +46,18 @@ document.addEventListener("DOMContentLoaded", e => {
         if (!success) {
             return;
         }
+    
+        const artistLink = document.querySelector("#artist");
+        
+        let artistURL = document.querySelector("#artist-url").value;
+
+        if (artistURL) {
+            artistLink.href = artistURL;
+            artistLink.style.removeProperty("display");
+        } else {
+            artistLink.style.display = "none";
+        }
+
         const overlayImg = document.querySelector("#overlay-img");
         const baseImg = document.querySelector("#base-img");
 
@@ -190,10 +202,18 @@ document.addEventListener("DOMContentLoaded", e => {
     const baseImg = document.querySelector("#base-img");
     const baseInput = document.querySelector("#base-url");
     const overlayInput = document.querySelector("#overlay-url");
+    
+    const artistInput = document.querySelector("#artist-url");
+    const artistLink = document.querySelector("#artist");
 
     if (url.searchParams.has("base") && url.searchParams.has("overlay")) {
         let baseURL = url.searchParams.get("base");
         let overlayURL = url.searchParams.get("overlay");
+        let artistURL = null;
+        
+        if (url.searchParams.has("artist")) {
+            artistURL = url.searchParams.get("artist");
+        }
 
         baseImg.src = baseURL;
         overlayImg.src = overlayURL;
@@ -201,6 +221,16 @@ document.addEventListener("DOMContentLoaded", e => {
         baseInput.value = baseURL;
         overlayInput.value = overlayURL;
 
+        if (artistURL) {
+            artistLink.href = artistURL;
+            artistInput.value = artistURL;
+            artistLink.style.removeProperty("display");
+        } else {
+            artistLink.style.display = "none";
+        }
+
+
+
 
         load();
     } else {
@@ -411,11 +441,17 @@ function setURL() {
                 shareURL.searchParams.delete(key);
             });
         } while (keys.length > 0)
+        const artistLink = document.querySelector("#artist");
         const overlayImg = document.querySelector("#overlay-img");
         const baseImg = document.querySelector("#base-img");
  
         shareURL.searchParams.append("base", baseImg.src);
         shareURL.searchParams.append("overlay", overlayImg.src);
+
+        if (artistLink.href) {
+            shareURL.searchParams.append("artist", artistLink.href);
+        }
+        
         shareURL.searchParams.append("radius", radius);
         shareURL.searchParams.append("softness", softness);