Add about section

popup/popup.css

@@ -1,5 +1,6 @@
 body {
-    width: 400px;
+    width: 420px;
+    overflow-x: hidden;
     margin: 0;
 
     background-color: #ff9295;
@@ -87,6 +88,81 @@ label a:hover {
     text-decoration: underline;
 }
 
+#about {
+    font-size: 1rem;
+}
+
+#about a {
+    text-decoration: none;
+    color: white;
+}
+
+#version {
+    margin-bottom: 8px;
+}
+
+#version span {
+    font-weight: bold;
+    padding: 6px 16px;
+    background: rgba(122, 122, 122, 0.2);
+    color: white;
+    border-radius: 16px;
+}
+
+#what-new {
+    font-size: small;
+    margin-top: 0;
+}
+
+#rate-me div {
+    cursor: pointer;
+    transition: all 0.2s linear;
+    font-size: large;
+}
+
+#rate-me div:last-child {
+    transform: scale(1.15);
+}
+
+#rate-me:hover div:last-child {
+    transform: scale(1.5);
+}
+
+#issues {
+    display: inline-flex;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+}
+
+#issues a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.1s linear;
+    transform: translateY(0);
+}
+
+#issues a:hover {
+    transform: translateY(-4px);
+}
+
+#issues img {
+    margin-right: 4px;
+}
+
+#author span {
+    margin-top: 20px;
+    border-radius: 16px;
+    font-style: italic;
+    font-size: 0.9rem;
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
 .button-container {
     display: flex;
     justify-content: center;
@@ -131,11 +207,11 @@ footer > * {
     cursor: pointer;
     color: white;
     transition: all 200ms ease;
-    transform: translateY(0px);
+    transform: scale(1);
 }
 
 footer > *:hover {
-    transform: translateY(-4px);
+    transform: scale(1.25);
 }
 
 footer a {

popup/popup.html

@@ -75,9 +75,40 @@
             <button id="basic-btn"><span>&#171;</span> Basic</button>
         </div>
     </section>
+    <section id="about" class="hidden">
+        <div id="version">
+            <span>Version 1.1.0</span>
+        </div>
+        <div id="what-new">
+            <a href="https://github.com/dthung1602/the-spamminator/releases" target="_blank">
+                What's new?
+            </a>
+        </div>
+        <div id="rate-me">
+            <div>Rate me on extension store!</div>
+            <div>&#11088;&#11088;&#11088;&#11088;&#11088;</div>
+        </div>
+        <div id="issues">
+            <a href="https://github.com/dthung1602/the-spamminator/issues" target="_blank">
+                <img src="./bug.svg" width="16px" height="16px"/> Report bug
+            </a>
+            <a href="https://github.com/dthung1602/the-spamminator/issues" target="_blank">
+                <img src="light-bulb.svg" width="20px" height="20px"/> New idea
+            </a>
+            <a href="https://github.com/dthung1602/the-spamminator" target="_blank">
+                <img src="code.svg" width="16px" height="16px"/> Source code
+            </a>
+        </div>
+        <div id="author">
+            <span>
+                <img src="developer.svg" width="18px" height="18px"/>
+                &nbsp;&nbsp;dthung1602
+            </span>
+        </div>
+    </section>
 </main>
 <footer>
-    <a target="_blank" href="https://github.com/dthung1602/the-spamminator">Homepage</a>
+    <div id="about-btn">&#9432; About</div>
     <div class="self-destruct">
         <div class="self-destruct-text">
             <span>&#128308;</span> Self destruct

popup/popup.js

@@ -38,6 +38,23 @@ function debounce(func, time) {
   }
 }
 
+function detectBrowser() {
+  const userAgent = navigator.userAgent;
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    return "chrome";
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    return "firefox";
+  } else if (userAgent.match(/safari/i)) {
+    return "safari";
+  } else if (userAgent.match(/opr\//i)) {
+    return "opera";
+  } else if (userAgent.match(/edg/i)) {
+    return "edge";
+  } else {
+    return "none";
+  }
+}
+
 // Load value from storage to UI
 async function loadSettings() {
   // TODO add ban domain settings
@@ -71,6 +88,7 @@ async function loadSettings() {
   document.getElementById("check-interval").value = clearSpamInterval;
   document.getElementById("ban-domain").value = deserializeDomains(banDomains);
 }
+
 loadSettings().catch(console.error);
 
 // Enable / disable
@@ -108,22 +126,33 @@ document.getElementById("text").addEventListener("input", saveOptions);
 document.getElementById("check-interval").addEventListener("input", saveOptions);
 document.getElementById("ban-domain").addEventListener("input", saveOptions);
 
-// Advance
-const showAdvance = () => {
-  document.getElementById("basic").classList.add("hidden");
-  document.getElementById("advance").classList.remove("hidden");
+// Switch between sections
+const changeSection = (sectionId) => {
+  document.querySelectorAll("section").forEach(node => node.classList.add("hidden"));
+  document.getElementById(sectionId).classList.remove("hidden");
 }
-document.getElementById("advance-btn").addEventListener("click", showAdvance);
-
-// Basic
-const showBasic = () => {
-  document.getElementById("advance").classList.add("hidden");
-  document.getElementById("basic").classList.remove("hidden");
+document.getElementById("advance-btn").addEventListener("click", () => changeSection("advance"));
+document.getElementById("basic-btn").addEventListener("click", () => changeSection("basic"));
+let isAboutPageShown = false;
+document.getElementById("about-btn").addEventListener("click", () => {
+  changeSection(isAboutPageShown ? "basic" : "about")
+  document.getElementById("about-btn").innerHTML = isAboutPageShown ? "ⓘ About" : "〈 Back";
+  isAboutPageShown = !isAboutPageShown;
+});
+
+// Rating
+const openRatingPage = () => {
+  const browser = detectBrowser();
+  const url = browser === "firefox"
+    ? "https://addons.mozilla.org/en-US/firefox/addon/thespamminator/"
+    : "https://chrome.google.com/webstore/detail/thespamminator/dnpihknfmkmoldifndaajhcceejniabd";
+  window.open(url, '_blank').focus();
 }
-document.getElementById("basic-btn").addEventListener("click", showBasic);
+document.getElementById("rate-me").addEventListener("click", openRatingPage);
 
 // Self-destruct
 function selfDestruct() {
   browser.management.uninstallSelf().catch(console.error);
 }
+
 document.querySelector(".self-destruct").addEventListener("click", selfDestruct);