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

Reviewed-on: Trivernis/no-chromium#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>