MediaWiki:Test.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

(function() {
    var today = new Date();
    var month = today.getMonth() + 1;
    if (month !== 10 && month !== 11) return;

    mw.loader.load('/w/index.php?title=MediaWiki:Test.css&action=raw&ctype=text/css');

    var config = {
        leavesCount: 50,
        batsCount: 8,
        websCount: 5,
        pumpkinCount: 3,
        leafIcons: ['🍂','🍁','🦇','🕸️'],
        leafSizes: {min: 14, max: 42},
        pumpkinSizes: {min: 24, max: 36},
        batAnimationDuration: {min: 8, max: 14},
        leafAnimationDuration: [8, 10, 12],
        mobileMaxLeaves: 25
    };

    function isMobile() {
        return window.innerWidth <= 768;
    }

    function random(min, max) {
        return min + Math.random() * (max - min);
    }

    function createElement(tag, className, innerHTML) {
        var el = document.createElement(tag);
        if (className) el.className = className;
        if (innerHTML) el.innerHTML = innerHTML;
        return el;
    }

    function initLeaves() {
        var leavesFragment = document.createDocumentFragment();
        var count = isMobile() ? config.mobileMaxLeaves : config.leavesCount;

        for (var i = 0; i < count; i++) {
            var leaf = createElement('span', 'halloween-leaf', config.leafIcons[Math.floor(Math.random() * config.leafIcons.length)]);
            leaf.style.left = random(0, 100) + '%';
            leaf.style.fontSize = random(config.leafSizes.min, config.leafSizes.max) + 'px';
            leaf.style.opacity = random(0.3, 1);
            leaf.style.animationDuration = config.leafAnimationDuration[i % config.leafAnimationDuration.length] + 's';
            leaf.style.animationDelay = random(0, 10) + 's';
            leavesFragment.appendChild(leaf);
        }
        var leavesContainer = createElement('div', 'halloween-leaves');
        leavesContainer.appendChild(leavesFragment);
        document.body.appendChild(leavesContainer);
    }

    function initPumpkins() {
        var heading = document.getElementById('firstHeading');
        if (!heading) return;

        for (var i = 0; i < config.pumpkinCount; i++) {
            var pumpkin = createElement('span', 'halloween-pumpkin', '🎃');
            pumpkin.style.margin = '0 2px';
            pumpkin.style.fontSize = random(config.pumpkinSizes.min, config.pumpkinSizes.max) + 'px';
            heading.appendChild(pumpkin);
            floatPumpkin(pumpkin);
        }
    }

    function floatPumpkin(el) {
        var pos = 0, dir = 1;
        setInterval(function() {
            pos += dir * 0.3;
            if(pos > 5 || pos < 0) dir *= -1;
            el.style.transform = 'translateY(' + pos + 'px)';
        }, 30);
    }

    function initLinks() {
        document.body.addEventListener('mouseover', function(e) {
            if (e.target.tagName.toLowerCase() === 'a') {
                e.target.style.color = '#ffa500';
                e.target.style.textShadow = '0 0 8px #ffa500, 0 0 15px #ff7518';
            }
        });
        document.body.addEventListener('mouseout', function(e) {
            if (e.target.tagName.toLowerCase() === 'a') {
                e.target.style.color = '';
                e.target.style.textShadow = '';
            }
        });
    }

    function initBats() {
        var batsFragment = document.createDocumentFragment();
        for (var i = 0; i < config.batsCount; i++) {
            var bat = createElement('div', 'halloween-bat');
            bat.style.top = random(0, 50) + 'vh';
            bat.style.left = (-50 + random(0, 100)) + 'px';
            bat.style.animationDuration = random(config.batAnimationDuration.min, config.batAnimationDuration.max) + 's';
            batsFragment.appendChild(bat);
        }
        document.body.appendChild(batsFragment);
    }

    function initWebs() {
        var websFragment = document.createDocumentFragment();
        for (var i = 0; i < config.websCount; i++) {
            var web = createElement('div', 'spider-web');
            web.style.top = random(0, 80) + 'vh';
            web.style.left = random(0, 90) + 'vw';
            web.style.transform = 'rotate(' + random(0, 360) + 'deg)';
            websFragment.appendChild(web);
        }
        document.body.appendChild(websFragment);
    }

    mw.hook('wikipage.content').add(function() {
        initLeaves();
        initPumpkins();
        initLinks();
        initBats();
        initWebs();
    });

})();