.. العنوان: ما هو عنوان IP الخاص بي
.. سبيكة: Whats-my-ip
.. التاريخ: 2026-01-24 10:00:00 بالتوقيت العالمي
.. العلامات: الشبكات، عنوان IP، تحديد الموقع الجغرافي، الخصوصية، الأمان، الأداة
.. الفئة: أدوات الإيثرنت والملكية الفكرية
.. الرابط :
.. الوصف: اكتشف عناوين IPv4 وIPv6 العامة، والموقع الجغرافي، وتفاصيل مزود خدمة الإنترنت، واكتشاف VPN/الوكيل، ومعلومات سمعة IP
.. النوع: نص
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet"/>
<style>
    .ip-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .tool-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .tool-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .tool-header p {
        margin: 10px 0 0 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .ip-display-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .ip-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .ip-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .ip-card.ipv4::before {
        background: linear-gradient(90deg, #4CAF50, #8BC34A);
    }

    .ip-card.ipv6::before {
        background: linear-gradient(90deg, #2196F3, #03A9F4);
    }

    .ip-card .ip-label {
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .ip-card .ip-value {
        font-family: 'Courier New', monospace;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        word-break: break-all;
        margin-bottom: 15px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ip-card .ip-value.loading {
        color: #999;
        font-size: 16px;
    }

    .ip-card .ip-value.error {
        color: #f44336;
        font-size: 14px;
    }

    .ip-card .ip-value.unavailable {
        color: #999;
        font-size: 14px;
        font-style: italic;
    }

    .copy-btn {
        padding: 8px 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .copy-btn:hover {
        background: #5a6fd6;
        transform: translateY(-1px);
    }

    .copy-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .copy-btn.copied {
        background: #4CAF50;
    }

    .section-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .icon {
        font-size: 20px;
    }

    .section-content {
        padding: 20px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        padding: 12px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }

    .info-item .label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    .info-item .value {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        word-break: break-word;
    }

    .info-item .value.mono {
        font-family: 'Courier New', monospace;
    }

    #locationMap {
        width: 100%;
        height: 350px;
        border-radius: 8px;
        margin-bottom: 20px;
        z-index: 1;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .status-badge.safe {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-badge.warning {
        background: #fff3e0;
        color: #ef6c00;
    }

    .status-badge.danger {
        background: #ffebee;
        color: #c62828;
    }

    .status-badge.info {
        background: #e3f2fd;
        color: #1565c0;
    }

    .status-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .privacy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .privacy-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .privacy-item .label {
        font-weight: 500;
        color: #333;
    }

    .reputation-alert {
        padding: 15px 20px;
        border-radius: 8px;
        margin-top: 15px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .reputation-alert.clean {
        background: #e8f5e9;
        border: 1px solid #81c784;
    }

    .reputation-alert.warning {
        background: #fff3e0;
        border: 1px solid #ffb74d;
    }

    .reputation-alert.danger {
        background: #ffebee;
        border: 1px solid #ef9a9a;
    }

    .reputation-alert .alert-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .reputation-alert .alert-content h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .reputation-alert .alert-content p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .device-table {
        width: 100%;
        border-collapse: collapse;
    }

    .device-table th,
    .device-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .device-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
        width: 40%;
    }

    .device-table td {
        font-family: 'Courier New', monospace;
        color: #333;
    }

    .device-table tr:last-child td,
    .device-table tr:last-child th {
        border-bottom: none;
    }

    .referrer-section {
        background: #e3f2fd;
        border: 1px solid #90caf9;
        border-radius: 8px;
        padding: 15px 20px;
        display: none;
    }

    .referrer-section.show {
        display: block;
    }

    .referrer-section .label {
        font-size: 13px;
        color: #1565c0;
        margin-bottom: 5px;
    }

    .referrer-section .value {
        font-family: 'Courier New', monospace;
        color: #0d47a1;
        word-break: break-all;
    }

    .refresh-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .refresh-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
    }

    .refresh-btn.spinning {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        height: 20px;
    }

    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .accuracy-note {
        background: #fff8e1;
        border: 1px solid #ffca28;
        border-radius: 6px;
        padding: 10px 15px;
        font-size: 13px;
        color: #f57f17;
        margin-top: 15px;
    }

    @media (max-width: 768px) {
        .ip-display-section {
            grid-template-columns: 1fr;
        }

        .ip-card .ip-value {
            font-size: 18px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .privacy-grid {
            grid-template-columns: 1fr;
        }

        #locationMap {
            height: 250px;
        }

        .refresh-btn {
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
    }
</style>
<div class="ip-container">
<div class="tool-header">
<h2>ما هو عنوان IP الخاص بي؟</h2>
<p>عرض عناوين IP العامة والموقع الجغرافي ومعلومات مزود خدمة الإنترنت وحالة الخصوصية وتفاصيل الجهاز. يتم تنفيذ كافة عمليات البحث من جانب العميل لخصوصيتك.</p>
</div>
عرض عنوان IP
<div class="ip-display-section">
<div class="ip-card ipv4">
<div class="ip-label">عنوان IPv4</div>
<div class="ip-value loading" id="ipv4Value">جارٍ الكشف...</div>
<button class="copy-btn" disabled="" id="copyIpv4Btn" onclick="copyToClipboard('ipv4')">ينسخ</button>
</div>
<div class="ip-card ipv6">
<div class="ip-label">عنوان IPv6</div>
<div class="ip-value loading" id="ipv6Value">جارٍ الكشف...</div>
<button class="copy-btn" disabled="" id="copyIpv6Btn" onclick="copyToClipboard('ipv6')">ينسخ</button>
</div>
</div>
قسم المرجع
<div class="referrer-section" id="referrerSection">
<div class="label">لقد وصلت من:</div>
<div class="value" id="referrerValue"></div>
</div>
خريطة الموقع
<div class="section-card">
<div class="section-header">
<span class="icon">🌎</span>الموقع الجغرافي</div>
<div class="section-content">
<div id="locationMap"></div>
<div class="info-grid" id="locationInfo">
<div class="info-item">
<span class="label">مدينة</span>
<span class="value" id="geoCity"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">منطقة</span>
<span class="value" id="geoRegion"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">دولة</span>
<span class="value" id="geoCountry"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">الإحداثيات</span>
<span class="value mono" id="geoCoords"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">المنطقة الزمنية</span>
<span class="value" id="geoTimezone"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">رمز بريدي</span>
<span class="value" id="geoZip"><div class="skeleton"></div></span>
</div>
</div>
<div class="accuracy-note">
<strong>ملحوظة:</strong>تحديد الموقع الجغرافي تقريبي ويعتمد على سجلات قاعدة بيانات IP. تختلف الدقة حسب مزود خدمة الإنترنت وقد تظهر المحور الإقليمي لمزود خدمة الإنترنت الخاص بك بدلاً من موقعك الدقيق، خاصة بالنسبة لاتصالات الهاتف المحمول أو اتصالات CGNAT.</div>
</div>
</div>
مزود خدمة الإنترنت وبيانات الشبكة
<div class="section-card">
<div class="section-header">
<span class="icon">📡</span>معلومات مزود خدمة الإنترنت والشبكة</div>
<div class="section-content">
<div class="info-grid" id="ispInfo">
<div class="info-item">
<span class="label">مزود خدمة الإنترنت / الناقل</span>
<span class="value" id="ispName"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">منظمة</span>
<span class="value" id="ispOrg"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">رقم AS</span>
<span class="value mono" id="ispAsn"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">نوع الاتصال</span>
<span class="value" id="connectionType"><div class="skeleton"></div></span>
</div>
</div>
</div>
</div>
رؤى السلامة والخصوصية
<div class="section-card">
<div class="section-header">
<span class="icon">🔒</span>رؤى السلامة والخصوصية</div>
<div class="section-content">
<div class="privacy-grid" id="privacyGrid">
<div class="privacy-item">
<span class="label">VPN / الوكيل</span>
<span id="vpnStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">الاستضافة / مركز البيانات</span>
<span id="hostingStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">اتصال المحمول</span>
<span id="mobileStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
</div>
<div id="reputationAlert">
سيتم إدراج تنبيه السمعة هنا
</div>
</div>
</div>
سياق المتصفح والجهاز
<div class="section-card">
<div class="section-header">
<span class="icon">💻</span>معلومات المتصفح والجهاز</div>
<div class="section-content">
<table class="device-table">
<tr>
<th>نظام التشغيل</th>
<td id="deviceOS">-</td>
</tr>
<tr>
<th>المتصفح</th>
<td id="deviceBrowser">-</td>
</tr>
<tr>
<th>دقة الشاشة</th>
<td id="deviceScreen">-</td>
</tr>
<tr>
<th>نسبة بكسل الجهاز</th>
<td id="deviceDPR">-</td>
</tr>
<tr>
<th>خيوط وحدة المعالجة المركزية</th>
<td id="deviceCPU">-</td>
</tr>
<tr>
<th>ذاكرة الوصول العشوائي المقدرة</th>
<td id="deviceRAM">-</td>
</tr>
<tr>
<th>تفضيلات اللغة</th>
<td id="deviceLang">-</td>
</tr>
<tr>
<th>نوع الاتصال</th>
<td id="deviceConnection">-</td>
</tr>
<tr>
<th>المس الدعم</th>
<td id="deviceTouch">-</td>
</tr>
<tr>
<th>تم تمكين ملفات تعريف الارتباط</th>
<td id="deviceCookies">-</td>
</tr>
</table>
</div>
</div>
</div>
<button class="refresh-btn" id="refreshBtn" onclick="refreshAll()" title="Refresh all data">↻</button>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
'use strict';

/**
 * What's My IP - Complete IP information tool
 * Uses local hierarchical data files for geo/ASN lookups (same as BGP lookup tool)
 */

let map = null;
let marker = null;
let currentIPv4 = null;
let currentIPv6 = null;
let lookupData = null;

// Configuration for data paths (same as BGP lookup tool)
const CONFIG = {
    ipv4Path: '/data/ipv4',
    ipv6Path: '/data/ipv6'
};

// Data cache for hierarchical files
const dataCache = new Map();

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    detectDeviceInfo();
    checkReferrer();
    detectIPAddresses();
});

/**
 * Refresh all data
 */
async function refreshAll() {
    const btn = document.getElementById('refreshBtn');
    btn.classList.add('spinning');

    // Reset displays
    resetDisplays();

    // Re-detect everything
    await detectIPAddresses();

    btn.classList.remove('spinning');
}

/**
 * Reset all display fields to loading state
 */
function resetDisplays() {
    document.getElementById('ipv4Value').className = 'ip-value loading';
    document.getElementById('ipv4Value').textContent = 'Detecting...';
    document.getElementById('ipv6Value').className = 'ip-value loading';
    document.getElementById('ipv6Value').textContent = 'Detecting...';
    document.getElementById('copyIpv4Btn').disabled = true;
    document.getElementById('copyIpv6Btn').disabled = true;

    // Reset geo info
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset ISP info
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset privacy info
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton" style="width: 80px;"></div>';
    });

    document.getElementById('reputationAlert').innerHTML = '';
}

// ============================================================================
// IP Conversion Utilities (from BGP lookup tool)
// ============================================================================

/**
 * Convert IPv4 address to 32-bit unsigned integer
 */
function ipv4ToInt(ip) {
    const parts = ip.split('.');
    return (parseInt(parts[0]) << 24 |
            parseInt(parts[1]) << 16 |
            parseInt(parts[2]) << 8 |
            parseInt(parts[3])) >>> 0;
}

/**
 * Normalize IPv6 address to full canonical form
 */
function normalizeIPv6(ip) {
    ip = ip.trim();

    // Handle IPv4-mapped IPv6 addresses
    const ipv4MappedMatch = ip.match(/^::ffff:(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/i);
    if (ipv4MappedMatch) {
        const ipv4 = ipv4MappedMatch[1];
        const ipv4Parts = ipv4.split('.');
        if (ipv4Parts.every(p => {
            const num = parseInt(p, 10);
            return num >= 0 && num <= 255;
        })) {
            const hex1 = (parseInt(ipv4Parts[0]) * 256 + parseInt(ipv4Parts[1])).toString(16).padStart(4, '0');
            const hex2 = (parseInt(ipv4Parts[2]) * 256 + parseInt(ipv4Parts[3])).toString(16).padStart(4, '0');
            return `0000:0000:0000:0000:0000:ffff:${hex1}:${hex2}`;
        }
        return null;
    }

    // Handle :: compression
    if (ip.indexOf('::') !== -1) {
        if ((ip.match(/::/g) || []).length > 1) {
            return null;
        }

        let beforeDouble = '';
        let afterDouble = '';

        if (ip.startsWith('::')) {
            afterDouble = ip.substring(2);
        } else if (ip.endsWith('::')) {
            beforeDouble = ip.substring(0, ip.length - 2);
        } else {
            const doubleSplit = ip.split('::');
            beforeDouble = doubleSplit[0];
            afterDouble = doubleSplit[1];
        }

        const beforeGroups = beforeDouble ? beforeDouble.split(':').filter(g => g !== '') : [];
        const afterGroups = afterDouble ? afterDouble.split(':').filter(g => g !== '') : [];

        const existingGroups = beforeGroups.length + afterGroups.length;
        if (existingGroups > 7) {
            return null;
        }

        const zeroGroups = 8 - existingGroups;
        const allGroups = [
            ...beforeGroups,
            ...Array(zeroGroups).fill('0'),
            ...afterGroups
        ];

        if (allGroups.length !== 8) {
            return null;
        }

        const normalized = allGroups.map(group => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(group)) {
                return null;
            }
            return group.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    } else {
        const parts = ip.split(':');
        if (parts.length !== 8) {
            return null;
        }

        const normalized = parts.map(part => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(part)) {
                return null;
            }
            return part.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    }
}

/**
 * Convert IPv6 address to 128-bit BigInt
 */
function ipv6ToBigInt(ip) {
    const normalized = normalizeIPv6(ip);
    if (!normalized) {
        throw new Error('Invalid IPv6 address');
    }
    const hexString = normalized.replace(/:/g, '');
    return BigInt('0x' + hexString);
}

/**
 * Extract prefix length from CIDR notation
 */
function getPrefixLength(prefix) {
    if (!prefix || typeof prefix !== 'string') return 0;
    const match = prefix.match(/\/(\d+)$/);
    return match ? parseInt(match[1], 10) : 0;
}

/**
 * Find matching IP ranges and select most specific
 */
function findMatchingRange(ipInt, ranges) {
    if (!ranges || ranges.length === 0) {
        return null;
    }

    const isBigInt = typeof ipInt === 'bigint';
    const matchingRanges = [];

    for (let i = 0; i < ranges.length; i++) {
        const range = ranges[i];
        const rangeStart = isBigInt ? BigInt(range.start) : range.start;
        const rangeEnd = isBigInt ? BigInt(range.end) : range.end;

        if (ipInt >= rangeStart && ipInt <= rangeEnd) {
            matchingRanges.push(range);
        }
    }

    if (matchingRanges.length === 0) {
        return null;
    }

    if (matchingRanges.length === 1) {
        return matchingRanges[0];
    }

    // Multiple matches: select most specific prefix and merge data
    matchingRanges.sort((a, b) => {
        const lenA = getPrefixLength(a.prefix);
        const lenB = getPrefixLength(b.prefix);
        return lenB - lenA;
    });

    const mostSpecific = matchingRanges[0];
    const mergedResult = { ...mostSpecific };

    for (let i = 1; i < matchingRanges.length; i++) {
        const range = matchingRanges[i];

        if (!mergedResult.asn && range.asn) {
            mergedResult.asn = range.asn;
            mergedResult.asn_name = range.asn_name;
            mergedResult.asn_org = range.asn_org;
            mergedResult.asn_country = range.asn_country;
        }

        if (!mergedResult.geoip && range.geoip) {
            mergedResult.geoip = range.geoip;
        }

        if (!mergedResult.whois && range.whois) {
            mergedResult.whois = range.whois;
        }

        if (!mergedResult.reputation && range.reputation) {
            mergedResult.reputation = range.reputation;
        }
    }

    return mergedResult;
}

/**
 * Fetch hierarchical data file with caching
 */
async function fetchHierarchicalData(path) {
    if (dataCache.has(path)) {
        return dataCache.get(path);
    }

    try {
        const response = await fetch(path);
        if (!response.ok) {
            if (response.status === 404) {
                return null;
            }
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        dataCache.set(path, data);
        return data;
    } catch (error) {
        console.error(`Error fetching ${path}:`, error);
        return null;
    }
}

// ============================================================================
// IP Detection and Lookup
// ============================================================================

/**
 * Detect both IPv4 and IPv6 addresses
 */
async function detectIPAddresses() {
    try {
        // Fetch IPv4 and IPv6 in parallel
        const [ipv4Result, ipv6Result] = await Promise.allSettled([
            fetch('https://api.ipify.org?format=json').then(r => r.json()),
            fetch('https://api64.ipify.org?format=json').then(r => r.json())
        ]);

        // Process IPv4
        if (ipv4Result.status === 'fulfilled') {
            currentIPv4 = ipv4Result.value.ip;
            displayIPv4(currentIPv4);
        } else {
            displayIPv4Error();
        }

        // Process IPv6
        if (ipv6Result.status === 'fulfilled') {
            const ipv6 = ipv6Result.value.ip;
            // Check if it's actually different from IPv4 (ipv6 endpoint returns IPv4 if no IPv6)
            if (ipv6 && ipv6 !== currentIPv4 && ipv6.includes(':')) {
                currentIPv6 = ipv6;
                displayIPv6(currentIPv6);
            } else {
                displayIPv6Unavailable();
            }
        } else {
            displayIPv6Unavailable();
        }

        // Fetch detailed info for the primary IP using local data
        const primaryIP = currentIPv4 || currentIPv6;
        if (primaryIP) {
            await fetchIPDetailsFromLocalData(primaryIP);
        }

    } catch (error) {
        console.error('IP detection failed:', error);
        displayIPv4Error();
        displayIPv6Error();
    }
}

/**
 * Display IPv4 address
 */
function displayIPv4(ip) {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv4Btn').disabled = false;
}

/**
 * Display IPv4 error
 */
function displayIPv4Error() {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Display IPv6 address
 */
function displayIPv6(ip) {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv6Btn').disabled = false;
}

/**
 * Display IPv6 unavailable
 */
function displayIPv6Unavailable() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value unavailable';
    el.textContent = 'Not available on your network';
}

/**
 * Display IPv6 error
 */
function displayIPv6Error() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Copy IP to clipboard
 */
function copyToClipboard(type) {
    const ip = type === 'ipv4' ? currentIPv4 : currentIPv6;
    if (!ip) return;

    navigator.clipboard.writeText(ip).then(() => {
        const btn = document.getElementById(type === 'ipv4' ? 'copyIpv4Btn' : 'copyIpv6Btn');
        btn.textContent = 'Copied!';
        btn.classList.add('copied');
        setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('copied');
        }, 2000);
    }).catch(err => {
        console.error('Copy failed:', err);
    });
}

/**
 * Fetch detailed IP information from local hierarchical data files
 * Uses the same data source as the BGP/WHOIS lookup tool
 */
async function fetchIPDetailsFromLocalData(ip) {
    try {
        let matchedData = null;
        const isIPv6 = ip.includes(':');

        if (isIPv6) {
            // IPv6 lookup
            const normalized = normalizeIPv6(ip);
            if (!normalized) {
                throw new Error('Invalid IPv6 address');
            }

            const firstHextet = normalized.substring(0, 4).toLowerCase();
            const path = `${CONFIG.ipv6Path}/${firstHextet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv6ToBigInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        } else {
            // IPv4 lookup
            const firstOctet = ip.split('.')[0];
            const path = `${CONFIG.ipv4Path}/${firstOctet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv4ToInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        }

        if (matchedData) {
            lookupData = matchedData;

            // Display geographic info from local data
            displayGeoInfoFromLocal(matchedData);

            // Display ISP/ASN info from local data
            displayISPInfoFromLocal(matchedData);

            // Display privacy info (basic - from reputation data if available)
            displayPrivacyInfoFromLocal(matchedData);

            // Initialize map if we have coordinates
            if (matchedData.geoip && matchedData.geoip.lat && matchedData.geoip.lon) {
                const lat = parseFloat(matchedData.geoip.lat);
                const lon = parseFloat(matchedData.geoip.lon);
                if (!isNaN(lat) && !isNaN(lon)) {
                    initializeMap(lat, lon, matchedData);
                } else {
                    displayMapUnavailable();
                }
            } else {
                displayMapUnavailable();
            }
        } else {
            // No local data found
            displayGeoError();
            displayISPError();
            displayPrivacyError();
            displayMapUnavailable();
        }

    } catch (error) {
        console.error('IP details fetch failed:', error);
        displayGeoError();
        displayISPError();
        displayPrivacyError();
    }
}

/**
 * Display "map unavailable" message
 */
function displayMapUnavailable() {
    const mapContainer = document.getElementById('locationMap');
    if (map) {
        map.remove();
        map = null;
    }
    mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-style: italic;">Map coordinates not available for this IP range</div>';
}

/**
 * Display geographic information from local hierarchical data
 */
function displayGeoInfoFromLocal(data) {
    const geo = data.geoip || {};

    document.getElementById('geoCity').textContent = geo.city || 'Unknown';
    document.getElementById('geoRegion').textContent = geo.region_name || 'Unknown';

    // Format country display
    const countryName = geo.country_name || geo.country || 'Unknown';
    const countryCode = geo.country || '';
    document.getElementById('geoCountry').textContent = countryCode && countryName !== countryCode
        ? `${countryName} (${countryCode})`
        : countryName;

    // Coordinates
    const lat = parseFloat(geo.lat);
    const lon = parseFloat(geo.lon);
    document.getElementById('geoCoords').textContent = (!isNaN(lat) && !isNaN(lon) && lat !== 0 && lon !== 0)
        ? `${lat.toFixed(4)}, ${lon.toFixed(4)}`
        : 'Not available';

    document.getElementById('geoTimezone').textContent = geo.time_zone || 'Unknown';
    document.getElementById('geoZip').textContent = geo.postal_code || geo.zip || 'Unknown';
}

/**
 * Display geographic error state
 */
function displayGeoError() {
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display ISP/ASN information from local hierarchical data
 */
function displayISPInfoFromLocal(data) {
    // ISP/Carrier name - use ASN name or org
    document.getElementById('ispName').textContent = data.asn_name || data.asn_org || 'Unknown';

    // Organization
    document.getElementById('ispOrg').textContent = data.asn_org || data.asn_name || 'Unknown';

    // AS Number with full format
    const asnDisplay = data.asn ? `AS${data.asn}` : 'Unknown';
    document.getElementById('ispAsn').textContent = asnDisplay;

    // Connection type - infer from ASN name if possible
    let connectionType = 'Unknown';
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    if (combined.includes('mobile') || combined.includes('wireless') || combined.includes('cellular')) {
        connectionType = 'Mobile Carrier';
    } else if (combined.includes('hosting') || combined.includes('cloud') || combined.includes('datacenter') ||
               combined.includes('amazon') || combined.includes('google') || combined.includes('microsoft') ||
               combined.includes('digitalocean') || combined.includes('linode') || combined.includes('vultr')) {
        connectionType = 'Data Center / Hosting';
    } else if (data.asn) {
        connectionType = 'ISP / Residential';
    }

    document.getElementById('connectionType').textContent = connectionType;
}

/**
 * Display ISP error state
 */
function displayISPError() {
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display privacy/security information from local data
 */
function displayPrivacyInfoFromLocal(data) {
    const reputation = data.reputation || {};

    // VPN/Proxy status - check reputation data
    const vpnEl = document.getElementById('vpnStatus');
    if (reputation.listed && reputation.firehol_level) {
        vpnEl.innerHTML = '<span class="status-badge warning"><span class="dot"></span>Flagged</span>';
    } else {
        vpnEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>Not Detected</span>';
    }

    // Hosting/Data Center status - infer from ASN name
    const hostingEl = document.getElementById('hostingStatus');
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    const isHosting = combined.includes('hosting') || combined.includes('cloud') ||
                      combined.includes('datacenter') || combined.includes('amazon') ||
                      combined.includes('google') || combined.includes('microsoft') ||
                      combined.includes('digitalocean') || combined.includes('linode') ||
                      combined.includes('vultr') || combined.includes('ovh') ||
                      combined.includes('hetzner') || combined.includes('akamai');

    if (isHosting) {
        hostingEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        hostingEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Mobile status - infer from ASN name
    const mobileEl = document.getElementById('mobileStatus');
    const isMobile = combined.includes('mobile') || combined.includes('wireless') ||
                     combined.includes('cellular') || combined.includes('lte') ||
                     combined.includes('4g') || combined.includes('5g');

    if (isMobile) {
        mobileEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        mobileEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Show reputation alert if flagged
    displayReputationAlert(data);
}

/**
 * Display reputation alert based on local data
 */
function displayReputationAlert(data) {
    const alertContainer = document.getElementById('reputationAlert');
    const reputation = data.reputation || {};

    if (reputation.listed && reputation.firehol_level) {
        const level = reputation.firehol_level;
        const severityClass = level === 1 ? 'danger' : 'warning';
        const severityText = level === 1 ? 'Critical Risk' : (level === 2 ? 'High Risk' : 'Moderate Risk');
        const icon = level === 1 ? '&#9888;' : '&#9888;';

        alertContainer.innerHTML = `
            <div class="reputation-alert ${severityClass}">
                <span class="alert-icon">${icon}</span>
                <div class="alert-content">
                    <h4>${severityText}: IP Listed on Threat Intelligence</h4>
                    <p>
                        This IP address is listed on FireHOL Level ${level} blocklist.
                        ${level === 1 ? 'This indicates confirmed malicious activity.' :
                          level === 2 ? 'This indicates suspicious or potentially malicious activity.' :
                          'This IP appears on extended threat lists.'}
                    </p>
                </div>
            </div>
        `;
    } else {
        alertContainer.innerHTML = `
            <div class="reputation-alert clean">
                <span class="alert-icon">&#9989;</span>
                <div class="alert-content">
                    <h4>No Known Threats Detected</h4>
                    <p>Based on public threat intelligence data (FireHOL, IPsum), no malicious activity has been reported for this IP address.</p>
                </div>
            </div>
        `;
    }
}

/**
 * Display privacy error state
 */
function displayPrivacyError() {
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<span class="status-badge">Unknown</span>';
    });
    document.getElementById('reputationAlert').innerHTML = '';
}

/**
 * Initialize Leaflet map
 */
function initializeMap(lat, lon, data) {
    const mapContainer = document.getElementById('locationMap');

    // Clear existing map if present
    if (map) {
        map.remove();
        map = null;
    }

    if (!lat || !lon || isNaN(lat) || isNaN(lon)) {
        mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Location data unavailable</div>';
        return;
    }

    // Initialize map
    map = L.map('locationMap', {
        zoomControl: true,
        scrollWheelZoom: true
    }).setView([lat, lon], 10);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18
    }).addTo(map);

    // Add marker - use geoip data from local structure
    const geo = data.geoip || {};
    const location = [geo.city, geo.region_name, geo.country_name || geo.country].filter(Boolean).join(', ');
    marker = L.marker([lat, lon]).addTo(map);
    marker.bindPopup(`
        <strong>Your Approximate Location</strong><br>
        ${location || 'Location data limited'}<br>
        <small>${lat.toFixed(4)}, ${lon.toFixed(4)}</small>
    `).openPopup();

    // Ensure map renders correctly
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            if (map) map.invalidateSize();
        });
    });
}


/**
 * Detect device/browser information
 */
function detectDeviceInfo() {
    // Operating System
    const os = detectOS();
    document.getElementById('deviceOS').textContent = os;

    // Browser
    const browser = detectBrowser();
    document.getElementById('deviceBrowser').textContent = browser;

    // Screen resolution
    const screen = `${window.screen.width} x ${window.screen.height}`;
    document.getElementById('deviceScreen').textContent = screen;

    // Device pixel ratio
    const dpr = window.devicePixelRatio || 1;
    document.getElementById('deviceDPR').textContent = `${dpr}x`;

    // CPU threads
    const cpu = navigator.hardwareConcurrency || 'Unknown';
    document.getElementById('deviceCPU').textContent = cpu;

    // RAM (Chrome only)
    const ram = navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Not available';
    document.getElementById('deviceRAM').textContent = ram;

    // Languages
    const languages = navigator.languages ? navigator.languages.join(', ') : navigator.language || 'Unknown';
    document.getElementById('deviceLang').textContent = languages;

    // Connection type
    let connectionInfo = 'Not available';
    if (navigator.connection) {
        const conn = navigator.connection;
        const parts = [];
        if (conn.effectiveType) parts.push(conn.effectiveType.toUpperCase());
        if (conn.downlink) parts.push(`${conn.downlink} Mbps`);
        if (parts.length > 0) connectionInfo = parts.join(' - ');
    }
    document.getElementById('deviceConnection').textContent = connectionInfo;

    // Touch support
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    document.getElementById('deviceTouch').textContent = hasTouch ? 'Yes' : 'No';

    // Cookies
    document.getElementById('deviceCookies').textContent = navigator.cookieEnabled ? 'Yes' : 'No';
}

/**
 * Detect operating system from user agent
 */
function detectOS() {
    const ua = navigator.userAgent;
    const platform = navigator.platform || '';

    if (ua.includes('Windows NT 10')) return 'Windows 10/11';
    if (ua.includes('Windows NT 6.3')) return 'Windows 8.1';
    if (ua.includes('Windows NT 6.2')) return 'Windows 8';
    if (ua.includes('Windows NT 6.1')) return 'Windows 7';
    if (ua.includes('Windows')) return 'Windows';

    if (ua.includes('Mac OS X')) {
        const match = ua.match(/Mac OS X (\d+[._]\d+)/);
        if (match) {
            const version = match[1].replace('_', '.');
            return `macOS ${version}`;
        }
        return 'macOS';
    }

    if (ua.includes('iPhone')) return 'iOS (iPhone)';
    if (ua.includes('iPad')) return 'iPadOS';
    if (ua.includes('Android')) {
        const match = ua.match(/Android (\d+(\.\d+)?)/);
        return match ? `Android ${match[1]}` : 'Android';
    }

    if (ua.includes('Linux')) return 'Linux';
    if (ua.includes('CrOS')) return 'Chrome OS';

    return platform || 'Unknown';
}

/**
 * Detect browser from user agent
 */
function detectBrowser() {
    const ua = navigator.userAgent;

    // Check for specific browsers (order matters - check specific before generic)
    if (ua.includes('Edg/')) {
        const match = ua.match(/Edg\/(\d+(\.\d+)?)/);
        return match ? `Microsoft Edge ${match[1]}` : 'Microsoft Edge';
    }

    if (ua.includes('OPR/') || ua.includes('Opera')) {
        const match = ua.match(/(?:OPR|Opera)\/(\d+(\.\d+)?)/);
        return match ? `Opera ${match[1]}` : 'Opera';
    }

    if (ua.includes('Firefox/')) {
        const match = ua.match(/Firefox\/(\d+(\.\d+)?)/);
        return match ? `Firefox ${match[1]}` : 'Firefox';
    }

    if (ua.includes('Safari/') && !ua.includes('Chrome')) {
        const match = ua.match(/Version\/(\d+(\.\d+)?)/);
        return match ? `Safari ${match[1]}` : 'Safari';
    }

    if (ua.includes('Chrome/')) {
        const match = ua.match(/Chrome\/(\d+(\.\d+)?)/);
        return match ? `Chrome ${match[1]}` : 'Chrome';
    }

    return 'Unknown Browser';
}

/**
 * Check and display referrer
 */
function checkReferrer() {
    const referrer = document.referrer;
    const section = document.getElementById('referrerSection');
    const valueEl = document.getElementById('referrerValue');

    if (!referrer) {
        section.classList.remove('show');
        return;
    }

    try {
        const url = new URL(referrer);
        const hostname = url.hostname.toLowerCase();

        // Filter out baud9600.com and related domains
        if (hostname.includes('baud9600.com') ||
            hostname.includes('baud9600.local') ||
            hostname === 'localhost') {
            section.classList.remove('show');
            return;
        }

        // Display external referrer
        valueEl.textContent = referrer;
        section.classList.add('show');

    } catch (e) {
        // Invalid URL, hide section
        section.classList.remove('show');
    }
}
</script>