添加访客ip 卡片到 Komari探针

之前偶然发现@IPPurity 提供的访客ip小卡片，觉得很有意思，感觉可以跟探针的功能结合在一起。
于是就找Gemini搓了以下代码，放在设置-站点-自定义Body，保存即可

主要效果：

网站打开自动加载小卡片
10秒钟以后自动缩小并降低透明度
鼠标放在缩小的卡片上会恢复到原来的大小，并恢复透明度**

<style>
  #ip-float-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    
    /* 关键设置：让变换的基点位于右下角 */
    transform-origin: bottom right; 
    
    /* 设置动画过渡时间和曲线 */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 默认状态（刚加载时）：正常大小，完全不透明 */
    opacity: 1;
    transform: scale(1);
  }

  /* 迷你模式的样式类（由 JS 添加） */
  #ip-float-card.mini-mode {
    opacity: 0.3;           /* 透明度降低 */
    transform: scale(0.25); /* 缩放为原来的 1/4 */
    pointer-events: auto;   /* 确保缩小后仍然可以感应鼠标 */
  }

  /* 鼠标悬停时：强制恢复正常状态 */
  /* 使用 !important 确保鼠标放上去的优先级最高 */
  #ip-float-card:hover {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
</style>

<div id="ip-float-card">
    <a href="https://ippure.com" target="_blank">
        <img src="https://my.ippure.com/v1/card" alt="访客IP信息卡片" title="点击查看IP信息" />
    </a>
</div>

<script>
(function() {
    var card = document.getElementById('ip-float-card');
    
    // 设置一个 10 秒的定时器
    setTimeout(function() {
        // 10秒后给元素添加 'mini-mode' 类，触发 CSS 变形
        // 只有当鼠标当前不在元素上时才缩小，避免用户正在看的时候突然变小
        if (!card.matches(':hover')) {
            card.classList.add('mini-mode');
        } else {
            // 如果10秒时鼠标正好在上面，添加一个监听，等鼠标移开后再缩小
            card.addEventListener('mouseleave', function() {
                card.classList.add('mini-mode');
            }, {once: true});
        }
    }, 10000); // 10000 毫秒 = 10 秒
})();
</script>