customisable NC trade reminder, DTI update/owls report

NC trade notifier (DTI update, OWLS report) +link

// ==UserScript==
// @name NC trade notifier (DTI update, OWLS report) +link
// @version 1.0
// @description i keep forgetting to update my list and report. trades, apparently im not the only one! this one is more complex than the pop up reminder, the DTI link is the OG one (i like it personally, but it links to 2020!) and the OWLs report link is the FAQ page for how to report a trade because not everyone has reddit/cord/bot etc. The link open in new tabs, and will like you open both, the ok button is the only popup closer. This will come up every time the transfer page is open so dont bother if youre just an item trader.
// @author cadz
// @match https://www.neopets.com/items/transfer_list.phtml*
// ==/UserScript==

(function() {
    // Function to show the confirmation popup with custom buttons, i just picked colours i liked and basic colours and sizes you can literally customise and of this with html colour pickers
    function showConfirmation() {
        var popup = document.createElement('div');
                popup.className = 'confirmation-popup'; // Add a class name for easier removal later
        popup.style.position = 'fixed';
        popup.style.top = '35%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.padding = '20px';
        popup.style.background = '#2D6075'; // Set the box color to #2D6075
        popup.style.border = '1px solid #ccc';
        popup.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)';
        popup.style.textAlign = 'center';

        var message = document.createElement('p');
        message.innerHTML = "Don't forget to update your Dress to Impress list and report your trade to OWLS if that was NC!";
        message.style.marginBottom = '20px';
        message.style.color = '#fff'; // Set the text color to white
        popup.appendChild(message);

        var buttonContainer = document.createElement('div');
        buttonContainer.style.display = 'flex';
        buttonContainer.style.justifyContent = 'center';
        buttonContainer.style.marginBottom = '10px';
        popup.appendChild(buttonContainer);

        var dtiButton = document.createElement('button');
        dtiButton.innerHTML = "Take me to DTI OG";
        dtiButton.style.background = '#020578'; //
        dtiButton.style.color = '#fff';
        dtiButton.style.padding = '10px 20px';
        dtiButton.style.border = 'none';
        dtiButton.style.marginRight = '10px';
        dtiButton.addEventListener('click', redirectToDTIOG);
        buttonContainer.appendChild(dtiButton);

        var owlsButton = document.createElement('button');
        owlsButton.innerHTML = "Make OWLS Report";
        owlsButton.style.background = '#020578'; //
        owlsButton.style.color = '#fff';
        owlsButton.style.padding = '10px 20px';
        owlsButton.style.border = 'none';
        owlsButton.addEventListener('click', redirectToOWLSReport);
        buttonContainer.appendChild(owlsButton);

        var okButton = document.createElement('button');
        okButton.innerHTML = "OK";
        okButton.style.background = '#ccc';
        okButton.style.color = '#000';
        okButton.style.padding = '10px 20px';
        okButton.style.border = 'none';
        okButton.addEventListener('click', closePopup);
        popup.appendChild(okButton);

        document.body.appendChild(popup);
    }

    // Function to handle the "Take me to DTI OG" button click event and redirect to DTI OG in a new tab
    function redirectToDTIOG() {
        window.open("https://impress.openneo.net/", "_blank");
    }

    // Function to handle the "Make OWLS Report" button click event and redirect to the OWLS FAQ page in a new tab
    function redirectToOWLSReport() {
        window.open("https://neopets.com/~OwlsFAQ#how-to-report", "_blank");
    }

    // Function to handle the "OK" button click event and close the popup
    function closePopup() {
        var popup = document.querySelector('.confirmation-popup');
        popup.style.display = 'none'; // Hide the popup by setting display to 'none'
    }

    // Trigger the popup when the page loads
    window.addEventListener('load', showConfirmation);
})();