Banner Requiest - 01

README.md

Preview

https://codepen.io/mgldvd/pen/zYXmmJj?editors=1000

banner-request.html

<style>
    .url-banner-070707 {
        display: block !important;
        position: fixed;
        width: 15px;
        height: 100vh;
        background-color: yellow;
        opacity: 0.4;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 9999999;
    }

    .url-banner-070707:hover {
        opacity: 1;
    }

    .url-banner-070707 p {
        margin: 35px 0 0 2px;
        padding: 0;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 7px;
        line-height: 10px;
        color: #4f4f4f;
        text-transform: uppercase;
    }

    .url-banner-070707 .url-banner-070707__close {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 2px;
        top: 5px;
        margin: 0 auto;
    }

    .url-banner-070707 .url-banner-070707__close svg {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: text-bottom;
    }

    .url-banner-070707 .url-banner-070707__close svg path {
        fill: #4f4f4f;
    }

    .url-banner-070707:hover .url-banner-070707__close svg path {
        transition: all 0.3s ease;
        fill: red;
    }
</style>
<div class="url-banner-070707" id="js-url-banner-070707">
    <div class="url-banner-070707__close">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--carbon" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
            <path d="M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14s14-6.2 14-14S23.8 2 16 2zm0 26C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12s-5.4 12-12 12z" fill="currentColor"></path>
            <path d="M21.4 23L16 17.6L10.6 23L9 21.4l5.4-5.4L9 10.6L10.6 9l5.4 5.4L21.4 9l1.6 1.6l-5.4 5.4l5.4 5.4z" fill="currentColor"></path>
        </svg>
    </div>
    <p>
        dev
    </p>
</div>
<script>
    var $banner070707 = document.getElementById("js-url-banner-070707");
    $banner070707.addEventListener("click", function(event) {
        $banner070707.style.cssText = "display: none !important";
    }, false);
</script>

tampermonkey.js

// ==UserScript==
// @name         Banner inject
// @namespace    http://tampermonkey.net/
// @version      2024-04-18
// @description  Inject banner on page
// @author       mgldvd
// @match        *://*/*
// @run-at       document-end
// @icon         https://cdn-icons-png.flaticon.com/512/5171/5171483.png
// @grant        none
// ==/UserScript==

(async () => {
    try {
        const content = await fetch("https://gist.githubusercontent.com/Mgldvd/dd1eaa5a16af025dc9a3906bc7aac89c/raw/banner-request.html?v=ed");
        const html = await content.text();
        document.body.insertAdjacentHTML("beforeend", html);
    } catch (error) {
        console.error("Error fetching content:", error);
    }
})();