Difference between revisions of "MediaWiki:Common.js"

Revision as of 17:16, 5 July 2024

$(function() {
    var $popup = $('<div>')
        .css({
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'rgba(255, 255, 255, 0.95)', // White opaque background
            padding: '30px',
            borderRadius: '20px', // Rounded corners
            border: '8px solid #ffbe18', // Thick border with the specified yellow color
            boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
            width: '400px',
            maxWidth: '90%',
            zIndex: 1000,
            fontFamily: 'Arial, sans-serif',
            textAlign: 'center'
        })
        .html('<h2 style="color: #333; font-size: 24px; margin-bottom: 20px;">Patent Application Monitoring</h2>' +
              '<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 25px;">Want to monitor Patent Applications? Submit your custom request and get a free weekly report!</p>' +
              '<button id="patentAlertButton">Get Alerts</button>')
        .appendTo('body');

    $('#patentAlertButton').css({
        display: 'inline-block',
        padding: '12px 24px',
        backgroundColor: '#ffbe18', // Changed button color to match the border
        color: '#333', // Darkened text color for better contrast
        border: 'none',
        borderRadius: '25px',
        fontSize: '18px',
        fontWeight: 'bold',
        cursor: 'pointer',
        transition: 'background-color 0.3s, transform 0.1s',
        outline: 'none'
    }).on('click', function() {
        window.open('https://docs.google.com/forms/d/e/1FAIpQLSfvGeHyDW-ND9TqqVhbPOrYsKWsvUgFp9Rl-gfsyZCaLp7fXA/viewform?usp=sf_link', '_blank');
        $popup.fadeOut(300);
    }).on('mouseover', function() {
        $(this).css('backgroundColor', '#e5ab16'); // Slightly darker on hover
    }).on('mouseout', function() {
        $(this).css('backgroundColor', '#ffbe18');
    }).on('mousedown', function() {
        $(this).css('transform', 'scale(0.95)');
    }).on('mouseup', function() {
        $(this).css('transform', 'scale(1)');
    });

    // Add close button
    $('<button>')
        .text('×')
        .css({
            position: 'absolute',
            top: '10px',
            right: '10px',
            background: 'none',
            border: 'none',
            fontSize: '24px',
            color: '#666',
            cursor: 'pointer'
        })
        .on('click', function() {
            $popup.fadeOut(300);
        })
        .appendTo($popup);

    // Show popup with fade-in effect
    setTimeout(function() {
        $popup.hide().fadeIn(500);
    }, 1000);
});