gbf-wiki-2024-april-fools-paywall.user.js

// ==UserScript==
// @name         gbf.wiki – Paywall
// @namespace    fabulous.cupcake.jp.net
// @version      2024.04.01.3
// @description  Paywall gbf.wiki a la WSJ/CNN
// @author       FabulousCupcake
// @match        https://gbf.wiki/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gbf.wiki
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
const ACTIVATION_PROBABILITY = 0.05;

const bannerURL = "https://gbf.wiki/images/7/7a/Wiki_passport_1.png";

const stylesheet = `
.paywalled {
  max-height: 700px;
  overflow: hidden;
  position: relative;
}

.paywalled:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 9999;
  outline: 1px solid red;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAPoCAYAAAAftpReAAAAZUlEQVR4Ae2UMQ7AMAgDnf7/z67UPcOJWixeToCvMDXHtouiKIqiKP7EI+mDcAWDQQsUMKPBXQYKXcDlwBf7C/aPa1NWIN34U5RX5u8QD7iSr7jCg1QLFDbjgROH7grHsZ1EURQvkDG4Qaz3D7IAAAAASUVORK5CYII=) repeat-x center top;
  background-size: contain;
  transform: scaleY(-1);
}

.paywall {
  width: 600px;
  margin: -350px auto 0 auto;
  padding-top: 150px;
  position: relative;
  z-index: 99999999;
  text-align: center;
}

.paywall div {
  width: 500px;
  margin: 0 auto;
  line-height: 1.2;
}

.paywall p {
  margin: 0;
}

.paywall .zero {
  font-size: 150%;
  font-weight: bold;
  margin-top: 25px;
}
.paywall .one {
  margin-top: 25px;
  font-size: 150%;
}
.paywall .two {
  font-size: 200%;
}
.paywall .three {
  margin-top: 25px;
  font-family: serif;
  font-size: 300%;
  font-weight: bold;
  background: linear-gradient(to bottom, #76B6CF, #2C86C2);
  background-clip: text;
  color: transparent;
}
.paywall .four {
  font-size: 180%;
}
.paywall .five {
  margin-top: 35px;
  margin-bottom: 5em;
}
`;


const insertStylesheet = () => {
    const stylesheetEl = document.createElement('style');
    stylesheetEl.innerHTML = stylesheet;
    document.body.appendChild(stylesheetEl);
};

const insertPaywall = () => {
    // Block
    const contentEl = document.querySelector(".mw-parser-output");
    contentEl.classList.add("paywalled");

    // Pay
    const element = `
<div class="paywall">
<!--<img src="https://gbf.wiki/images/4/4f/Gbfwikilogo.png" width="526" height="139"/>-->
<img src="${bannerURL}" width="580" height="216"/>
<div>
  <p class="zero">You've reached your daily article limit</p>
  <p class="one">Continue reading with the</p>
  <p class="two">gbf.wiki Premium Pass</p>
  <p class="three">Flash Sale</p>
  <p class="four">Just 300 Rupies per month</p>
  <p class="five"><span class="mw-ui-button mw-ui-progressive">Get Premium Pass</span></p>
</div>
</div>
`;

    contentEl.insertAdjacentHTML("afterend", element);
}

const insertPaywallButtonEventListener = () => {
    const el = document.querySelector(".paywall span");
    el.addEventListener("click", () => {
        // Unblock
        const contentEl = document.querySelector(".mw-parser-output");
        contentEl.classList.remove("paywalled");

        // Unpay
        const paywallEl = document.querySelector(".paywall");
        paywallEl.remove();
    });
}

const main = () => {
    if (Math.random() > ACTIVATION_PROBABILITY) return;

    insertStylesheet();
    insertPaywall();
    insertPaywallButtonEventListener();
}

main();

})();