［komari］ai唠嗑美化访客ip v2

<style>

    /* --- 底部小按钮（常驻） --- */

    #capsule-toggle-btn {

        position: fixed;

        bottom: 24px;

        right: 24px;

        z-index: 99999;

        

        width: 44px;

        height: 44px;

        border-radius: 50%;

        

        background: rgba(255, 255, 255, 0.85);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        

        border: 1px solid rgba(255, 255, 255, 0.5);

        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

        

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        

        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    }

    #capsule-toggle-btn:hover {

        transform: scale(1.08);

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    }

    /* --- 信息胶囊面板（点击按钮后弹出） --- */

    #capsule-sidebar {

        position: fixed;

        bottom: 80px;

        right: 16px;

        z-index: 99998;

        

        display: flex;

        flex-direction: column;

        padding: 14px 18px;

        gap: 10px;

        

        background: rgba(255, 255, 255, 0.9);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        

        border-radius: 20px;

        border: 1px solid rgba(255, 255, 255, 0.5);

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

        

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        font-weight: 500;

        color: #1d1d1f;

        font-size: 13px;

        line-height: 1.4;

        white-space: nowrap;

        

        opacity: 0;

        visibility: hidden;

        transform: translateX(100%) translateY(20px);

        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    }

    #capsule-sidebar.visible {

        opacity: 1;

        visibility: visible;

        transform: translateX(0) translateY(0);

    }

    /* 新增：标题行（地球图标 + “你的IP”） */

    .sidebar-header {

        display: flex;

        align-items: center;

        gap: 8px;

        font-size: 15px;

        font-weight: 600;

        margin-bottom: 4px;

    }

    .sidebar-icon {

        width: 1.6em;

        height: 1.6em;

        color: #007AFF;

        flex-shrink: 0;

    }

    .ip-prefix {

        font-weight: 600;

        color: #007AFF;

    }

    .info-line {

        display: flex;

        align-items: center;

        gap: 6px;

        opacity: 0.95;

    }

    /* 深色模式适配 */

    @media (prefers-color-scheme: dark) {

        #capsule-toggle-btn, #capsule-sidebar {

            background: rgba(30, 30, 30, 0.9);

            border-color: rgba(255, 255, 255, 0.1);

            color: #f5f5f7;

        }

        .sidebar-icon, .ip-prefix { color: #0A84FF; }

        .sidebar-header { color: #f5f5f7; }

    }

    /* 小屏幕适配 */

    @media (max-width: 600px) {

        #capsule-toggle-btn {

            bottom: 18px;

            right: 18px;

            width: 40px;

            height: 40px;

        }

        #capsule-sidebar {

            bottom: 72px;

            right: 12px;

            padding: 12px 16px;

            font-size: 12.5px;

        }

        .sidebar-header {

            font-size: 14px;

        }

    }

</style>

<!-- 底部小按钮 -->

<div id="capsule-toggle-btn">

    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">

        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>

    </svg>

</div>

<!-- 信息胶囊面板 -->

<div id="capsule-sidebar">

    <!-- 新增标题：地球图标 + “你的IP” -->

    <div class="sidebar-header">

        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">

            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>

        </svg>

        你的IP

    </div>

    <div id="info-content">加载中...</div>

</div>

<script>

    const btn = document.getElementById('capsule-toggle-btn');

    const sidebar = document.getElementById('capsule-sidebar');

    const content = document.getElementById('info-content');

    let hasAutoShown = false; // 标记是否已经自动显示过

    // 点击按钮切换显示/隐藏

    btn.addEventListener('click', () => {

        sidebar.classList.toggle('visible');

    });

    // 获取 IP 信息（中文位置）

    fetch('https://ipwho.is/?lang=zh-CN')

        .then(res => res.json())

        .then(data => {

            if (data.success !== false) {

                const isp = data.connection?.isp || data.connection?.org || '未知运营商';

                // 智能拼接中文位置

                let location = '';

                if (data.city) {

                    location += data.city;

                }

                if (data.region) {

                    if (location) location += ', ';

                    location += data.region;

                }

                if (!location) location = '未知位置';

                content.innerHTML = `

                    <div class="info-line">

                        <span class="ip-prefix">IP:</span> ${data.ip}

                    </div>

                    <div class="info-line">

                        <span>位置:</span> ${location}

                    </div>

                    <div class="info-line">

                        <span>运营商:</span> ${isp}

                    </div>

                `;

                // 数据加载完成后，自动显示 5 秒（仅第一次）

                if (!hasAutoShown) {

                    hasAutoShown = true;

                    sidebar.classList.add('visible');

                    

                    setTimeout(() => {

                        sidebar.classList.remove('visible');

                    }, 5000); // 5秒后自动隐藏

                }

            } else {

                content.innerHTML = '网络信息获取失败';

            }

        })

        .catch(err => {

            console.error("Fetch error:", err);

            content.innerHTML = '网络信息获取失败';

        });

</script>