［komari］因为太喜欢守岸人了，所以和ai唠嗑弄了一个ip信息卡

<!-- 信息卡/按钮 -->

<div id="visitor-card" style="  

    position:fixed;   

    bottom:24px;   

    right:24px;   

    width:50px;   

    height:50px;  

    border-radius:50%;   

    overflow:hidden;  

    font-family: 'Segoe UI', sans-serif;   

    z-index:99999;   

    cursor:pointer;  

    background: url('https://s2.loli.net/2025/12/08/1JsIGZcOtCVMuLw.gif') center/cover no-repeat;  

    box-shadow:0 0 12px rgba(0,198,255,0.7), 0 4px 12px rgba(0,0,0,0.25);  

    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);  

    display:flex;  

    flex-direction:column;  

    justify-content:space-between;  

">  

    <!-- 背景光线层 -->  

    <div id="lines" style="  

        position:absolute;  

        top:0; left:0; width:100%; height:100%;  

        background: repeating-linear-gradient(  

            45deg,  

            rgba(0,255,255,0.08),  

            rgba(0,255,255,0.08) 2px,  

            transparent 2px,  

            transparent 6px  

        );  

        transform: scale(2);  

        animation: lineFlow 6s linear infinite;  

    "></div>  

    <!-- 内容层 -->  

    <div id="visitor-info" style="  

        position:relative;  

        padding:16px;  

        box-sizing:border-box;  

        color:#00f0ff;   

        font-size:14px;   

        line-height:1.5;  

        text-shadow:0 0 6px #000,0 0 8px #00f0ff;  

        opacity:0;  

        display:flex;  

        flex-direction:column;  

        justify-content:space-between;  

        height:100%;  

    ">  

        <div id="visitor-data"></div>  

        <div style="text-align:center; font-size:12px; opacity:0.7;">点击信息卡取消信息卡显示</div>  

    </div>

</div>  

<style>  

@keyframes lineFlow {  

    0% { transform: translate(-50%,-50%) rotate(0deg) scale(2); }  

    100% { transform: translate(-50%,-50%) rotate(360deg) scale(2); }  

}  

</style>  

<script>  

const card = document.getElementById('visitor-card');  

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

const dataDiv = document.getElementById('visitor-data');  

let expanded = false;  

// 双 API 查询函数  

async function fetchVisitorInfo() {  

    try {  

        // 默认 API  

        let res = await fetch('http://demo.ip-api.com/json/?fields=66842623&lang=zh-CN');  

        let data = await res.json();  

        if(!data || data.status !== "success") throw new Error('Default API failed');  

        return {  

            ip: data.query,  

            country: data.country,  

            region: data.regionName,  

            city: data.city,  

            isp: data.isp  

        };  

    } catch(e) {  

        // 如果默认 API 失败，使用 ipapi.co  

        try {  

            let res2 = await fetch('https://ipapi.co/json/');  

            let data2 = await res2.json();  

            return {  

                ip: data2.ip,  

                country: data2.country_name,  

                region: data2.region,  

                city: data2.city,  

                isp: data2.org  

            };  

        } catch(err){  

            console.error('Both APIs failed:', err);  

            return null;  

        }  

    }  

}  

// 展开卡片  

async function expandCard() {  

    const infoData = await fetchVisitorInfo();  

    if(infoData){  

        let locationText = '';  

        const {ip, country, region, city, isp} = infoData;  

        if(country && region && city){  

            if(country === region && region === city){  

                locationText = country;  

            } else if(country === region){  

                locationText = `${country} / ${city}`;  

            } else {  

                locationText = `${country}${region ? ' / ' + region : ''}${city ? ' / ' + city : ''}`;  

            }  

        } else if(country){  

            locationText = country;  

        } else {  

            locationText = '未知';  

        }  

        const now = new Date();  

        const timeStr = now.toLocaleString();  

        let infoHtml = `<strong>IP:</strong> ${ip}<br>  

                        <strong>位置:</strong> ${locationText}<br>  

                        <strong>时间:</strong> ${timeStr}`;  

        if(isp){  

            infoHtml += `<br><strong>运营商:</strong> ${isp}`;  

        }  

        dataDiv.innerHTML = infoHtml;  

    } else {  

        dataDiv.innerText = '信息获取失败';  

    }  

    card.style.width = '300px';  

    card.style.height = '160px';  

    card.style.borderRadius = '16px';  

    card.style.bottom = '80px';  

    info.style.opacity = '1';  

    expanded = true;  

}  

// 收缩回按钮  

function shrinkCard() {  

    card.style.width = '50px';  

    card.style.height = '50px';  

    card.style.borderRadius = '50%';  

    card.style.bottom = '24px';  

    info.style.opacity = '0';  

    expanded = false;  

}  

// 点击切换展开/收缩  

card.addEventListener('click', async () => {  

    if(!expanded){  

        expandCard();  

    } else {  

        shrinkCard();  

    }  

});  

// 页面加载取消自动弹出（预加载可加）  

// window.addEventListener('load', () => {  

//     expandCard();  

//     setTimeout(() => { shrinkCard(); }, 3000);  

// });  

</script>