Merge pull request 'Add stop using chromium popup' (#5) from main into prod

Reviewed-on: #5
1 year ago · 7cb7042bc6
parent 13c42a8c55 5d2ddea3c3
commit 7cb7042bc6
3 changed files with 109 additions and 0 deletions
--- a/src/routes/popup/+page.svelte
+++ b/src/routes/popup/+page.svelte
@ -0,0 +1,77 @@
+<div id="no-chromium-head">
+
+  <style lang="scss">
+    #no-chromium-popup {
+      position: fixed;
+      display: flex;
+      height: 100vh;
+      width: 100vw;
+      top: 0;
+      left: 0;      
+      background-color: rgba(0, 0, 0, 0.125);
+      font-family: Noto Sans, sans serif;
+      color: white;
+
+      .nc-popup-inner {
+        display: block;
+        position: relative;
+        margin: auto;
+        background-color: #FF6F00;
+        padding: 1em;
+        border-radius: 5px;
+
+        button {
+          border-style: none;
+          font-weight: bold;
+          background-colour: white;
+          font-size: 2em;
+          width: 100%;
+          cursor: pointer;
+          margin: 3px;
+          color: white;
+
+          a {
+           text-decoration: none;
+           color: white;
+          }
+
+          transition-duration: 0.1s;
+
+          &.nc-no {
+            background-color: #800;
+
+            &:hover {
+              background-color: #B00;
+            }
+          }
+
+          &.nc-ok {
+            background-color: #080;
+
+            &:hover {
+              background-color: #0B0;
+            }
+          }
+
+          &:hover {
+          }
+        }
+      }
+    }
+  </style>
+
+</div>
+
+<div id="no-chromium-body">
+
+  <div id="no-chromium-popup" style="display: none">
+
+    <div class="nc-popup-inner">
+      <center><h1>Stop using Chromium based Web Browsers</h1></center>
+      <a href="https://no-chromium.org/redirect"><button class="nc-no">No</button></a>
+      <button class="nc-ok" id="no-chromium-hide-button">Ok</button>
+    </div>
+
+  </div>
+
+</div>
--- a/static/popup.js
+++ b/static/popup.js
@ -0,0 +1,26 @@
+async function showNoChromiumPopup() {
+  if (localStorage.getItem("no-chromium-popup-shown") != "1") {
+
+    const divPage = document.createElement("div");
+    const response = await fetch("/popup/");
+    divPage.innerHTML = await response.text();
+
+    for (const child of divPage.querySelectorAll("#no-chromium-head > *")) {
+      document.head.appendChild(child);
+    }
+
+    for (const child of divPage.querySelectorAll("#no-chromium-body > *")) {
+      document.body.appendChild(child);
+    }
+
+    document.querySelector("#no-chromium-popup").style = "";
+    document.querySelector("#no-chromium-hide-button").addEventListener("click", hideNoChromiumPopup);
+  }
+}
+
+function hideNoChromiumPopup() {
+  document.querySelector("#no-chromium-popup").remove();
+  localStorage.setItem("no-chromium-popup-shown", "1");
+}
+
+showNoChromiumPopup();
--- a/static/test.html
+++ b/static/test.html
@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <script type="text/javascript" src="/popup.js"></script>
+</body>
+</html>