op-packages/luci-app-openclash/luasrc/view/openclash/developer.htm

<fieldset class="cbi-section">
    <div class="oc">
        <div class="developer-container">
            <div class="developer-grid">
                <span id="Dreamacro"><%:Collecting data...%></span>
                <span id="vernesong"><%:Collecting data...%></span>
                <span id="frainzy1477"><%:Collecting data...%></span>
                <span id="SukkaW"><%:Collecting data...%></span>
                <span id="haishanh"><%:Collecting data...%></span>
                <span id="Zephyruso"><%:Collecting data...%></span>
                <span id="Alecthw"><%:Collecting data...%></span>
                <span id="Tindy_X"><%:Collecting data...%></span>
                <span id="lmc999"><%:Collecting data...%></span>
                <span id="immortalwrt"><%:Collecting data...%></span>
                <span id="MetaCubeX"><%:Collecting data...%></span>
                <span id="oixcloud"><%:Collecting data...%></span>
                <span id="more"><%:Collecting data...%></span>
            </div>
        </div>
    </div>
</fieldset>

<script type="text/javascript">//<![CDATA[
    var Dreamacro = document.getElementById('Dreamacro');
    var vernesong = document.getElementById('vernesong');
    var frainzy1477 = document.getElementById('frainzy1477');
    var SukkaW = document.getElementById('SukkaW');
    var Zephyruso = document.getElementById('Zephyruso');
    var haishanh = document.getElementById('haishanh');
    var Alecthw = document.getElementById('Alecthw');
    var Tindy_X = document.getElementById('Tindy_X');
    var immortalwrt = document.getElementById('immortalwrt');
    var lmc999 = document.getElementById('lmc999');
    var MetaCubeX = document.getElementById('MetaCubeX');
    var oixcloud = document.getElementById('oixcloud');
    var more = document.getElementById('more');

    function devFindContainer(el) {
        while (el && !(el.classList && el.classList.contains('developer-avatar-container'))) {
            el = el.parentNode;
        }
        return el;
    }

    function devClearReveal() {
        var shown = document.querySelector('.developer-avatar-container.dev-reveal');
        if (shown) shown.classList.remove('dev-reveal');
    }

    function devTapRedirect(el, fn) {
        if (!window.matchMedia('(hover: none)').matches) {
            window[fn]();
            return false;
        }
        var box = devFindContainer(el);
        if (box && !box.classList.contains('dev-reveal')) {
            devClearReveal();
            box.classList.add('dev-reveal');
            return false;
        }
        devClearReveal();
        window[fn]();
        return false;
    }

    function createAvatarHTML(src, title, alt, clickHandler) {
        return '<div class="developer-avatar-container">' +
               '<img src="' + src + '" loading="lazy" class="developer-avatar" title="' + title + '" alt="' + alt + '" onerror="return imgerrorfun(this,this.src)" onclick="return devTapRedirect(this, \'' + clickHandler + '\')" />' +
               '<div class="developer-label">' + title + '</div>' +
               '</div>';
    }

    function createMoreAvatarHTML(title, clickHandler) {
        return '<div class="developer-avatar-container">' +
               '<div class="developer-avatar developer-more" title="' + title + '" onclick="return devTapRedirect(this, \'' + clickHandler + '\')">' +
               '<span class="developer-more-dots">...</span>' +
               '</div>' +
               '<div class="developer-label">' + title + '</div>' +
               '</div>';
    }

    function setAvatars() {
        Dreamacro.innerHTML = createAvatarHTML('https://avatars3.githubusercontent.com/u/8615343?s=460&v=4', 'Dreamacro', 'Dreamacro', 'Dreamacro_rediret');
        vernesong.innerHTML = createAvatarHTML('https://avatars2.githubusercontent.com/u/42875168?s=460&v=4', 'vernesong', 'vernesong', 'vernesong_rediret');
        frainzy1477.innerHTML = createAvatarHTML('https://avatars2.githubusercontent.com/u/49537471?s=460&v=4', 'frainzy1477', 'frainzy1477', 'frainzy1477_rediret');
        SukkaW.innerHTML = createAvatarHTML('https://avatars1.githubusercontent.com/u/40715044?s=460&v=4', 'SukkaW', 'SukkaW', 'SukkaW_rediret');
        Zephyruso.innerHTML = createAvatarHTML('https://avatars.githubusercontent.com/u/176294927?v=4', 'Zephyruso', 'Zephyruso', 'Zephyruso_rediret');
        haishanh.innerHTML = createAvatarHTML('https://avatars1.githubusercontent.com/u/1166872?s=460&v=4', 'haishanh', 'haishanh', 'haishanh_rediret');
        Alecthw.innerHTML = createAvatarHTML('https://avatars.githubusercontent.com/u/22856212?v=4', 'Alecthw', 'Alecthw', 'Alecthw_rediret');
        Tindy_X.innerHTML = createAvatarHTML('https://avatars0.githubusercontent.com/u/49061470?s=460&u=22a89312bf2de411e87340e04b5f9d149f7366cc&v=4', 'Tindy X', 'Tindy X', 'Tindy_X_rediret');
        immortalwrt.innerHTML = createAvatarHTML('https://avatars.githubusercontent.com/u/82308430?v=4', 'immortalwrt', 'immortalwrt', 'immortalwrt_rediret');
        lmc999.innerHTML = createAvatarHTML('https://avatars.githubusercontent.com/u/39726914?v=4', 'lmc999', 'lmc999', 'lmc999_rediret');
        MetaCubeX.innerHTML = createAvatarHTML('https://avatars.githubusercontent.com/u/84378451?v=4', 'MetaCubeX', 'MetaCubeX', 'MetaCubeX_rediret');
        oixcloud.innerHTML = createAvatarHTML('/luci-static/resources/openclash/img/oixcloud.png', 'oixCloud', 'oixcloud', 'oixcloud_rediret');
        more.innerHTML = createMoreAvatarHTML('<%:More%>', 'more_rediret');
    }

    setAvatars();

    // entrance animation runs when the card first scrolls into view; the timer keeps
    // the grid visible in documents where intersection callbacks never fire
    (function() {
        var grid = document.querySelector('.developer-grid');
        if (!grid) return;
        grid.classList.add('dev-prepare');
        var revealed = false;
        function reveal() {
            if (revealed) return;
            revealed = true;
            grid.classList.add('dev-inview');
        }
        if (window.IntersectionObserver) {
            var io = new IntersectionObserver(function(entries) {
                for (var i = 0; i < entries.length; i++) {
                    if (entries[i].isIntersecting) { io.disconnect(); reveal(); return; }
                }
            }, { rootMargin: '0px 0px -40px 0px' });
            io.observe(grid);
        } else {
            reveal();
        }
        setTimeout(reveal, 6000);
    })();

    function Dreamacro_rediret() {
        window.open('https://github.com/Dreamacro');
    }
    function vernesong_rediret() {
        window.open('https://github.com/vernesong');
    }
    function frainzy1477_rediret() {
        window.open('https://github.com/frainzy1477');
    }
    function SukkaW_rediret() {
        window.open('https://github.com/SukkaW');
    }
    function Zephyruso_rediret() {
        window.open('https://github.com/Zephyruso');
    }
    function haishanh_rediret() {
        window.open('https://github.com/haishanh');
    }
    function Alecthw_rediret() {
        window.open('https://github.com/alecthw');
    }
    function Tindy_X_rediret() {
        window.open('https://github.com/tindy2013');
    }
    function immortalwrt_rediret() {
        window.open('https://github.com/immortalwrt');
    }
    function lmc999_rediret() {
        window.open('https://github.com/lmc999');
    }
    function MetaCubeX_rediret() {
        window.open('https://github.com/MetaCubeX');
    }
    function oixcloud_rediret() {
        window.open('https://oixcloud.com/');
    }
    function more_rediret() {
        window.open('https://github.com/vernesong/OpenClash/graphs/contributors');
    }

    function imgerrorfun(imgobj, imgSrc) {
        var tries = parseInt(imgobj.dataset.retry || '0', 10) + 1;
        imgobj.dataset.retry = tries;
        if (tries > 3) {
            imgobj.onerror = null;
            imgobj.src = '/luci-static/resources/openclash/img/logo.png';
            imgobj.classList.add('developer-avatar-offline');
            return;
        }
        setTimeout(function() {
            imgobj.src = imgSrc + (imgSrc.indexOf('?') === -1 ? '?' : '&') + 'r=' + Date.now();
        }, 1000 * 10);
    }

    document.addEventListener('click', function(e) {
        if (devFindContainer(e.target)) return;
        devClearReveal();
    });

//]]></script>