Add an option to control the overlay's opacity

xray.css

@@ -27,6 +27,8 @@ img {
 }
 
 #overlay {
+    --opacity: 1;
+    opacity: var(--opacity);
     z-index: 2;
 }
 

xray.html

@@ -45,6 +45,11 @@
             Fit to screen:
             <input type="checkbox" id="fit-screen" checked>
         </label>
+        <label class="nostart large">
+            Opacity:
+            <input type="number" id="opacity-input" placeholder="100" value="100">
+            <input type="range" id="opacity-slider" min="0" max="100" value="100">
+        </label>
         <label class="nostart large">
             Darkness:
             <input type="number" id="darkness-input" placeholder="0" value="0">

xray.js

@@ -8,6 +8,7 @@ let running = false;
 let radius = 200;
 let softness = 0;
 let darkness = 0;
+let opacity = 100;
 
 let width;
 let height;
@@ -242,6 +243,48 @@ document.addEventListener("DOMContentLoaded", e => {
         }
         setURL();
     });
+    
+    document.querySelector("#opacity-slider").addEventListener("input", e => {
+        try {
+            opacity = parseInt(e.target.value);
+            document.querySelector("#opacity-input").value = opacity;
+            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+        } catch {
+            console.warn("That wasn't a valid opacity: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#opacity-slider").addEventListener("change", e => {
+        try {
+            opacity = parseInt(e.target.value);
+            document.querySelector("#opacity-input").value = opacity;
+            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+        } catch {
+            console.warn("That wasn't a valid opacity: " + e.target.value);
+        }
+        setURL();
+    });
+    
+    document.querySelector("#opacity-input").addEventListener("input", e => {
+        try {
+            opacity = parseInt(e.target.value);
+            document.querySelector("#opacity-slider").value = opacity;
+            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+        } catch {
+            console.warn("That wasn't a valid opacity: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#opacity-input").addEventListener("change", e => {
+        try {
+            opacity = parseInt(e.target.value);
+            document.querySelector("#opacity-slider").value = opacity;
+            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+        } catch {
+            console.warn("That wasn't a valid opacity: " + e.target.value);
+        }
+        setURL();
+    });
 
     // see if we have params already; if so, use them!
 
@@ -319,6 +362,16 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That was a bogus darkness...");
         }
     }
+    if (url.searchParams.has("opacity")) {
+        try {
+            opacity = parseInt(url.searchParams.get("opacity"));
+            document.querySelector("#opacity-slider").value = opacity;
+            document.querySelector("#opacity-input").value = opacity;
+            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+        } catch {
+            console.warn("That was a bogus opacity...");
+        }
+    }
 
     if (url.searchParams.has("border")) {
         try {
@@ -583,6 +636,7 @@ function setURL() {
         shareURL.searchParams.append("radius", radius);
         shareURL.searchParams.append("softness", softness);
         shareURL.searchParams.append("darkness", darkness);
+        shareURL.searchParams.append("opacity", opacity);
 
         if (border) {
             shareURL.searchParams.append("border", 1);