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 getAvatarSize() {
        var width = window.innerWidth;
        if (width <= 320) return '30px';
        if (width <= 480) return '35px';
        if (width <= 600) return '40px';
        if (width <= 768) return '45px';
        if (width >= 1200) return '60px';
        return '50px';
    }

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

    function createMoreAvatarHTML(title, clickHandler) {
        var size = getAvatarSize();
        return '<div class="developer-avatar-container">' +
               '<div class="developer-avatar" title="' + title + '" style="display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: rgba(255, 255, 255, 0.8);" onclick="return ' + clickHandler + '()">...</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();

    window.addEventListener('resize', function() {
        setAvatars();
    });

    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('http://bit.ly/oixcloud-register');
    }
    function more_rediret() {
        window.open('https://github.com/vernesong/OpenClash/graphs/contributors');
    }

    function imgerrorfun(imgobj, imgSrc) {
        setTimeout(function() {
            imgobj.src = imgSrc;
        }, 1000 * 10);
    }

//]]></script>