🌴 Sync 2026-10-12 12:02:15

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

@@ -35,28 +35,46 @@
     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 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) {
-        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 + '()" />' +
+               '<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) {
-        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-avatar developer-more" title="' + title + '" onclick="return devTapRedirect(this, \'' + clickHandler + '\')">' +
+               '<span class="developer-more-dots">...</span>' +
+               '</div>' +
                '<div class="developer-label">' + title + '</div>' +
                '</div>';
     }
@@ -79,9 +97,30 @@
 
     setAvatars();
 
-    window.addEventListener('resize', function() {
-        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');
@@ -117,16 +156,29 @@
         window.open('https://github.com/MetaCubeX');
     }
     function oixcloud_rediret() {
-        window.open('http://bit.ly/oixcloud-register');
+        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;
+            imgobj.src = imgSrc + (imgSrc.indexOf('?') === -1 ? '?' : '&') + 'r=' + Date.now();
         }, 1000 * 10);
     }
 
+    document.addEventListener('click', function(e) {
+        if (devFindContainer(e.target)) return;
+        devClearReveal();
+    });
+
 //]]></script>