ip-location.html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="referrer" content="no-referrer" />
    <title>IP • Country • Flag</title>

    <style>
        :root { color-scheme: light; }

        body{
            margin:0; padding:0;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
            line-height:1.35;
            background:#ffffff;
            color:#111;
        }

        .card{
            padding:12px 14px;
            border:1px solid rgba(0,0,0,.12);
            border-radius:14px;
            background:#ffffff;
            box-shadow:0 1px 2px rgba(0,0,0,.06);
        }

        .row{ display:flex; align-items:center; gap:12px; }
        .flag{ font-size:28px; width:34px; text-align:center; }
        .title{ font-size:12px; opacity:.72; margin-bottom:2px; }

        .ip{
            font-size:16px;
            font-weight:700;
            word-break:break-all;
        }

        .ip.ipv4{
            font-size:13px;
            font-weight:500;
            opacity:.85;
            margin-top:2px;
        }

        .country{ font-size:13px; margin-top:4px; }

        .muted{
            font-size:12px;
            opacity:.75;
            margin-top:8px;
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            align-items:center;
        }

        button{
            cursor:pointer;
            padding:6px 10px;
            border-radius:10px;
            border:1px solid rgba(0,0,0,.18);
            background:#ffffff;
            font:inherit;
            color:inherit;
        }

        .err{ color:#b00020; opacity:1; }
    </style>
</head>

<body>
<div class="card" role="group" aria-label="IP widget">
    <div class="row">
        <div class="flag" id="flag">⏳</div>
        <div style="min-width:0;">
            <div class="title">Current public IP</div>
            <div class="ip" id="ip6">Loading…</div>
            <div class="ip ipv4" id="ip4" style="display:none;"></div>
            <div class="country" id="country"></div>
        </div>
    </div>

    <div class="muted">
        <button id="refresh" type="button">Refresh</button>
        <span id="meta"></span>
    </div>
</div>

<script>
    (() => {
        const elFlag = document.getElementById('flag');
        const elIP6 = document.getElementById('ip6');
        const elIP4 = document.getElementById('ip4');
        const elCountry = document.getElementById('country');
        const elMeta = document.getElementById('meta');
        const btn = document.getElementById('refresh');

        const displayNames = (() => {
            try {
                return new Intl.DisplayNames([navigator.language || 'en'], { type: 'region' });
            } catch {
                return null;
            }
        })();

        function isoToFlagEmoji(iso2) {
            if (!iso2 || iso2.length !== 2) return '🏳️';
            const cc = iso2.toUpperCase();
            const A = 0x1F1E6;
            const base = 'A'.charCodeAt(0);
            return String.fromCodePoint(
                A + (cc.charCodeAt(0) - base),
                A + (cc.charCodeAt(1) - base)
            );
        }

        function fmtTime(d) {
            return d.toLocaleString(undefined, { hour:'2-digit', minute:'2-digit', second:'2-digit' });
        }

        function isIPv4(s) {
            if (!s || typeof s !== 'string') return false;
            // quick reject IPv6
            if (s.includes(':')) return false;
            // basic IPv4 validation
            const parts = s.trim().split('.');
            if (parts.length !== 4) return false;
            for (const p of parts) {
                if (!/^\d+$/.test(p)) return false;
                const n = Number(p);
                if (n < 0 || n > 255) return false;
            }
            return true;
        }

        function setLoading() {
            elFlag.textContent = '⏳';
            elIP6.textContent = 'Loading…';
            elIP4.style.display = 'none';
            elCountry.textContent = '';
            elMeta.textContent = '';
            elMeta.classList.remove('err');
        }

        function setError(msg) {
            elFlag.textContent = '⚠️';
            elIP6.textContent = '—';
            elIP4.style.display = 'none';
            elCountry.textContent = '';
            elMeta.textContent = msg || 'Failed to load IP info';
            elMeta.classList.add('err');
        }

        function setOK({ ip6, ip4, countryCode, source }) {
            elIP6.textContent = ip6 || '—';

            if (ip4 && isIPv4(ip4)) {
                elIP4.textContent = ip4;
                elIP4.style.display = 'block';
            } else {
                elIP4.style.display = 'none';
            }

            const cc = (countryCode || '').toUpperCase();
            elFlag.textContent = isoToFlagEmoji(cc);

            let countryName = '';
            if (cc && displayNames) {
                try { countryName = displayNames.of(cc) || ''; } catch {}
            }

            elCountry.textContent = countryName ? `${countryName} (${cc})` : (cc || '');

            elMeta.classList.remove('err');
            elMeta.textContent = `Updated: ${fmtTime(new Date())} • Source: ${source}`;
        }

        async function fetchWithTimeout(url, timeoutMs = 7000) {
            const controller = new AbortController();
            const id = setTimeout(() => controller.abort(), timeoutMs);
            try {
                return await fetch(url, { signal: controller.signal, cache:'no-store' });
            } finally {
                clearTimeout(id);
            }
        }

        async function getIPv6AndCountry() {
            const urls = [
                'https://cloudflare.com/cdn-cgi/trace',
                'https://1.1.1.1/cdn-cgi/trace'
            ];

            for (const url of urls) {
                try {
                    const res = await fetchWithTimeout(url);
                    if (!res.ok) continue;
                    const text = await res.text();
                    const map = Object.fromEntries(
                        text.split('\n')
                            .map(l => l.trim())
                            .filter(Boolean)
                            .map(l => {
                                const i = l.indexOf('=');
                                return i > 0 ? [l.slice(0,i), l.slice(i+1)] : [l,''];
                            })
                    );
                    if (map.ip) {
                        return {
                            ip6: map.ip,
                            countryCode: map.loc || '',
                            source: 'cloudflare-trace'
                        };
                    }
                } catch {}
            }
            throw new Error('IPv6 unavailable');
        }

        // FIX: force IPv4 via api4.ipify.org (and validate output)
        async function getIPv4() {
            const endpoints = [
                // Prefer JSON (fast) on dedicated IPv4 host
                { url: 'https://api4.ipify.org?format=json', type: 'json' },
                // Plain text on dedicated IPv4 host
                { url: 'https://api4.ipify.org', type: 'text' },
                // Fallback: regular host (may still return IPv6 on v6 networks)
                { url: 'https://api.ipify.org?format=json', type: 'json' },
                { url: 'https://api.ipify.org', type: 'text' }
            ];

            for (const ep of endpoints) {
                try {
                    const res = await fetchWithTimeout(ep.url);
                    if (!res.ok) continue;

                    let ip = '';
                    if (ep.type === 'json') {
                        const json = await res.json();
                        ip = (json && json.ip) ? String(json.ip).trim() : '';
                    } else {
                        ip = (await res.text()).trim();
                    }

                    if (isIPv4(ip)) return ip;
                } catch {
                    // try next endpoint
                }
            }
            return '';
        }

        async function load() {
            setLoading();
            try {
                const [v6, v4] = await Promise.all([
                    getIPv6AndCountry(),
                    getIPv4()
                ]);

                setOK({
                    ip6: v6.ip6,
                    ip4: v4,
                    countryCode: v6.countryCode,
                    source: v6.source
                });
            } catch {
                setError('Failed to load IP info');
            }
        }

        btn.addEventListener('click', load);
        load();
        setInterval(load, 60 * 1000);
    })();
</script>
</body>
</html>