Merge pull request #8 from HackYeahKabanosy/plug-in-details

update the plug-in
HackYeahKabanosy · Sep 29, 2024 · 4fa9c97 · 4fa9c97
2 parents 7029f15 + 495419d
commit 4fa9c97
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/browser_plugin/mozilla/fraud_free_mozilla_extension.zip b/browser_plugin/mozilla/fraud_free_mozilla_extension.zip
diff --git a/browser_plugin/mozilla/manifest.json b/browser_plugin/mozilla/manifest.json
@@ -1,6 +1,6 @@
 {
     "manifest_version": 3,
-    "name": "Domain Safety Analyzer",
+    "name": "FraudFree - Domain Safety Analyzer",
     "version": "1.0",
     "description": "Analyzes domain safety and scam probability.",
     "permissions": [

diff --git a/browser_plugin/mozilla/popup.html b/browser_plugin/mozilla/popup.html
@@ -1,33 +1,74 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
       body {
         font-family: Arial, sans-serif;
-        width: 300px;
-        padding: 10px;
+        width: 320px; /* Increased width for more content space */
+        padding: 20px;
+        background-color: #f8f9fa; /* Light background color */
+        border-radius: 8px; /* Rounded corners */
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+        margin: auto; /* Centering the container */
+        margin-top: 30px; /* Top margin for spacing */
       }
+
+      h3 {
+        font-size: 18px;
+        text-align: center; /* Center the heading */
+        margin-bottom: 20px; /* Spacing below the heading */
+        color: #333;
+      }
+
+      #analyzeBtn {
+        display: block; /* Makes the button block-level */
+        width: 100%; /* Button fills the full width */
+        padding: 12px; /* Added padding for larger button size */
+        background-color: #007bff; /* Bootstrap-style primary blue */
+        color: white; /* White text color */
+        border: none; /* Removes default button borders */
+        border-radius: 5px; /* Rounded corners */
+        font-size: 16px; /* Increased font size */
+        cursor: pointer; /* Pointer cursor on hover */
+        transition: background-color 0.3s ease; /* Smooth color change */
+      }
+
+      #analyzeBtn:hover {
+        background-color: #0056b3; /* Darker blue on hover */
+      }
+
       #status {
         font-size: 18px;
         font-weight: bold;
-        margin: 10px 0;
-        padding: 10px;
+        margin: 15px 0;
+        padding: 12px;
         text-align: center;
+        background-color: #e9ecef;
+        border-radius: 4px;
       }
-      #conclusion {
+
+      #conclusion, #details {
         font-size: 14px;
         color: #333;
         margin-top: 10px;
+        text-align: center;
+      }
+
+      #details {
+        color: rgb(41, 41, 226);
       }
     </style>
   </head>
   <body>
-    <h3>Domain Safety Analyzer</h3>
+    <h3>FraudFree - Domain Safety Analyzer</h3>
     <button id="analyzeBtn">Analyze</button>
     <div id="results">
       <div id="status"></div>
       <div id="conclusion"></div>
+      <div id="details"></div>
     </div>
     <script src="popup.js"></script>
   </body>
-</html>
+</html>
diff --git a/browser_plugin/mozilla/popup.js b/browser_plugin/mozilla/popup.js
@@ -35,17 +35,32 @@ function extractRootDomain(hostname) {
 function displayResults(data) {
   let statusDiv = document.getElementById('status');
   let conclusionDiv = document.getElementById('conclusion');
+  let detailsDiv = document.getElementById('details');
 
   if (data.status === "Safe") {
     statusDiv.style.backgroundColor = "green";
     statusDiv.style.color = "white";
     statusDiv.textContent = `Status: ${data.status}`;
     conclusionDiv.textContent = data.conclusion;
+    detailsDiv.innerHTML = `<a class="big-txt" href="https://fraud-free-webapp.vercel.app/detail/${data.url}" target="_blank">Details</a>`;
+  } else if (data.status === "Ok") {
+    statusDiv.style.backgroundColor = "blue";
+    statusDiv.style.color = "white";
+    statusDiv.textContent = `Status: ${data.status}`;
+    conclusionDiv.textContent = "This website is safe, but some issues were reported. Please proceed with caution.";
+    detailsDiv.innerHTML = `<a class="big-txt" href="https://fraud-free-webapp.vercel.app/detail/${data.url}" target="_blank">Details</a>`;
+  } else if (data.status === "Warning") {
+    statusDiv.style.backgroundColor = "blue";
+    statusDiv.style.color = "white";
+    statusDiv.textContent = `Status: ${data.status}`;
+    conclusionDiv.textContent = "This website is not safe, issues were reported. Please proceed with caution.";
+    detailsDiv.innerHTML = `<a class="big-txt" href="https://fraud-free-webapp.vercel.app/detail/${data.url}" target="_blank">Details</a>`;
   } else {
     statusDiv.style.backgroundColor = "red";
     statusDiv.style.color = "white";
     statusDiv.textContent = `Status: ${data.status}`;
-    conclusionDiv.textContent = "This website may not be safe. Please proceed with caution.";
+    conclusionDiv.textContent = "This website may not be safe. Avoid.";
+    detailsDiv.innerHTML = `<a class="big-txt" href="https://fraud-free-webapp.vercel.app/detail/${data.url}" target="_blank">details</a>`;
   }
 }