added troubleshoot for brave users

Author: MrStuffmaker

data/data.json

@@ -1,4 +1,4 @@
 {
-    "version": "V2.2.1.3"
+    "version": "V2.2.1.4"
   }
 

images/troubleshoot.png

@@ -82,6 +82,48 @@ <h1>
        <a href="/feedback" class="social-icon" data-tooltip="Feedback">
             <img src="/images/feedback.png" style="width: 30px; height: 30px; margin-top: 10px;" alt="Feedback">
         </a>
+<script src="/js/detect.js"></script>
+<style>
+.troubleshoot-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgb(0, 0, 0);
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  border-radius: 10px;
+  width: 300px;
+  text-align: center;
+}
+
+@media (min-width: 768px) { 
+  .troubleshoot-popup {
+    top: 100px; 
+    transform: translateX(-50%); 
+  }
+}
+
+.troubleshoot-popup img {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.troubleshoot-close-button {
+  margin-top: 10px;
+  padding: 5px 10px;
+  background: #ff4d4d;
+  color: rgb(0, 0, 0);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.troubleshoot-close-button:hover {
+  background: #cc0000;
+}
+</style>
         <script src="/js/version.js">
 
         </script>

images/troubleshoot/brave.gif

@@ -0,0 +1,62 @@
+async function isBraveBrowser() {
+    if (navigator.brave && (await navigator.brave.isBrave())) {
+        return true;
+    }
+    return false;
+}
+
+document.addEventListener("DOMContentLoaded", async function () {
+    if (await isBraveBrowser()) {
+        const troubleshootElement = document.createElement("a");
+        troubleshootElement.href = "#";
+        troubleshootElement.className = "social-icon";
+        troubleshootElement.dataset.tooltip = "Troubleshoot";
+        
+        const img = document.createElement("img");
+        img.src = "/images/troubleshoot.png";
+        img.style.width = "30px";
+        img.style.height = "30px";
+        img.style.marginTop = "10px";
+        img.alt = "Troubleshoot";
+        
+        troubleshootElement.appendChild(img);
+        
+        troubleshootElement.addEventListener("click", function(event) {
+            event.preventDefault();
+            const popup = document.createElement("div");
+            popup.className = "troubleshoot-popup";
+            popup.style.position = "fixed";
+            popup.style.top = "20%";
+            popup.style.left = "50%";
+            popup.style.transform = "translate(-50%, 0)";
+            popup.style.background = "black";
+            popup.style.padding = "20px";
+            popup.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
+            popup.style.zIndex = "1000";
+            popup.style.borderRadius = "10px";
+
+            const text = document.createElement("p");
+            text.textContent = "Looks like you are using the brave browser. If you experience any issues please try turning off brave shields";
+
+            const gif = document.createElement("img");
+            gif.src = "/images/troubleshoot/brave.gif";
+            gif.style.width = "100%";
+            gif.style.marginTop = "10px";
+
+            const closeButton = document.createElement("button");
+            closeButton.className = "troubleshoot-close-button";
+            closeButton.textContent = "Close";
+            closeButton.style.marginTop = "10px";
+            closeButton.addEventListener("click", function() {
+                document.body.removeChild(popup);
+            });
+
+            popup.appendChild(text);
+            popup.appendChild(gif);
+            popup.appendChild(closeButton);
+            document.body.appendChild(popup);
+        });
+
+        document.querySelector("footer").appendChild(troubleshootElement);
+    }
+});