{"id":830,"date":"2025-10-30T15:49:04","date_gmt":"2025-10-30T15:49:04","guid":{"rendered":"https:\/\/tipsbyanita.in\/?page_id=830"},"modified":"2025-10-30T15:49:14","modified_gmt":"2025-10-30T15:49:14","slug":"find-i-p-and-location","status":"publish","type":"page","link":"https:\/\/tipsbyanita.in\/hi\/find-i-p-and-location\/","title":{"rendered":"Find I.P And Location"},"content":{"rendered":"<style>\n  .ip-location-widget {\n    --primary-color: #0b5ed7;\n    --primary-hover: #0a58ca;\n    --text-color: #0f172a;\n    --text-light: #475569;\n    --text-muted: #6b7280;\n    --bg-color: #f5f7fb;\n    --card-bg: #ffffff;\n    --border-color: #e6e9ef;\n    --shadow: 0 8px 30px rgba(15,23,42,0.06);\n    --radius: 12px;\n    font-family: Inter, Arial, sans-serif;\n    background: var(--bg-color);\n    color: var(--text-color);\n    padding: 20px;\n    text-align: center;\n    max-width: 100%;\n  }\n  \n  .ip-location-widget * {\n    box-sizing: border-box;\n  }\n  \n  .ip-location-widget h1 {\n    color: var(--primary-color);\n    margin: 0 0 8px;\n    font-size: 1.5rem;\n  }\n  \n  .ip-location-widget .lead {\n    color: var(--text-light);\n    margin: 6px 0 16px;\n    font-size: 0.95rem;\n  }\n  \n  .ip-location-widget .card {\n    display: inline-block;\n    background: var(--card-bg);\n    padding: 16px;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    min-width: 300px;\n    max-width: 100%;\n    text-align: left;\n    margin-top: 10px;\n  }\n  \n  .ip-location-widget .row {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 12px;\n  }\n  \n  .ip-location-widget button {\n    padding: 10px 14px;\n    border-radius: 8px;\n    border: none;\n    background: var(--primary-color);\n    color: #fff;\n    cursor: pointer;\n    font-size: 0.9rem;\n    transition: all 0.2s;\n  }\n  \n  .ip-location-widget button:hover {\n    background: var(--primary-hover);\n    transform: translateY(-1px);\n  }\n  \n  .ip-location-widget input {\n    padding: 10px;\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n    width: 200px;\n    font-size: 0.9rem;\n    transition: all 0.2s;\n  }\n  \n  .ip-location-widget input:focus {\n    outline: none;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.1);\n  }\n  \n  .ip-location-widget .muted {\n    color: var(--text-muted);\n    font-size: 0.8rem;\n  }\n  \n  .ip-location-widget .kv {\n    font-size: 0.85rem;\n    margin: 6px 0;\n  }\n  \n  .ip-location-widget iframe.map {\n    width: 100%;\n    height: 220px;\n    border: 0;\n    border-radius: 8px;\n    margin-top: 10px;\n  }\n  \n  .ip-location-widget a.smalllink {\n    font-size: 0.8rem;\n    color: var(--primary-color);\n    text-decoration: none;\n  }\n  \n  .ip-location-widget a.smalllink:hover {\n    text-decoration: underline;\n  }\n  \n  @media (max-width: 480px) {\n    .ip-location-widget input {\n      width: 100%;\n    }\n    \n    .ip-location-widget .row {\n      flex-direction: column;\n      align-items: stretch;\n    }\n    \n    .ip-location-widget button {\n      width: 100%;\n    }\n  }\n<\/style>\n\n<div class=\"ip-location-widget\">\n  <h1>\ud83c\udf10 IP &#038; Location Finder<\/h1>\n  <p class=\"lead\">Click &#8220;Get My IP&#8221; \u2014 IP aane ke baad location details aur map bhi show hogi.<\/p>\n\n  <div class=\"row\">\n    <button id=\"btnIP\">Get My IP &#038; Location<\/button>\n    <button id=\"btnIPOnly\">Get Only IP<\/button>\n    <input id=\"manualIP\" placeholder=\"Or enter any IP (optional)\" \/>\n    <button id=\"btnLookup\">Lookup IP<\/button>\n  <\/div>\n\n  <div id=\"card\" class=\"card\" style=\"display:none;\">\n    <div id=\"status\" class=\"muted\">Ready<\/div>\n    <h2 id=\"ipTitle\" style=\"margin:8px 0 4px\">IP: \u2014<\/h2>\n\n    <div id=\"info\">\n      <!-- dynamic content -->\n    <\/div>\n\n    <div id=\"mapContainer\" style=\"display:none;\">\n      <iframe id=\"mapFrame\" class=\"map\"><\/iframe>\n    <\/div>\n\n    <div style=\"margin-top:10px\" class=\"muted\">Data sources: ipify.org (IP) \u2022 ipapi.co (geo) \u2022 OpenStreetMap (map)<\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function() {\n    const btnIP = document.getElementById('btnIP');\n    const btnIPOnly = document.getElementById('btnIPOnly');\n    const btnLookup = document.getElementById('btnLookup');\n    const manualIP = document.getElementById('manualIP');\n    const card = document.getElementById('card');\n    const status = document.getElementById('status');\n    const ipTitle = document.getElementById('ipTitle');\n    const info = document.getElementById('info');\n    const mapContainer = document.getElementById('mapContainer');\n    const mapFrame = document.getElementById('mapFrame');\n\n    \/\/ Allow Enter key in input field\n    manualIP.addEventListener('keypress', (e) => {\n      if (e.key === 'Enter') {\n        btnLookup.click();\n      }\n    });\n\n    btnIP.addEventListener('click', async () => {\n      await getIPAndLocation();\n    });\n\n    btnIPOnly.addEventListener('click', async () => {\n      await getOnlyIP();\n    });\n\n    btnLookup.addEventListener('click', async () => {\n      const ip = manualIP.value.trim();\n      if (!ip) { \n        showMessage('Please enter an IP address first.', 'error'); \n        return; \n      }\n      await lookupIP(ip);\n    });\n\n    async function getOnlyIP() {\n      showCard('Fetching your public IP...');\n      try {\n        const res = await fetch('https:\/\/api.ipify.org?format=json', { mode: 'cors' });\n        if (!res.ok) throw new Error('Network error');\n        const data = await res.json();\n        showIP(data.ip);\n        showStatus('IP fetched. Use \"Get My IP & Location\" to fetch location.');\n      } catch (e) {\n        showError('Unable to fetch IP. Open this page from a hosted URL (https).');\n        console.error(e);\n      }\n    }\n\n    async function getIPAndLocation() {\n      showCard('Fetching your public IP...');\n      try {\n        const res = await fetch('https:\/\/api.ipify.org?format=json', { mode: 'cors' });\n        if (!res.ok) throw new Error('Network error');\n        const data = await res.json();\n        showIP(data.ip);\n        await lookupIP(data.ip);\n      } catch (e) {\n        showError('Unable to fetch IP & location. Open this page from a hosted URL (https).');\n        console.error(e);\n      }\n    }\n\n    async function lookupIP(ip) {\n      showStatus('Looking up location for ' + ip + ' ...');\n      try {\n        \/\/ ipapi.co is used for IP geolocation; it supports HTTPS & CORS\n        const res = await fetch('https:\/\/ipapi.co\/' + encodeURIComponent(ip) + '\/json\/', { mode: 'cors' });\n        if (!res.ok) throw new Error('Geo lookup failed');\n        const d = await res.json();\n\n        if (d.error) {\n          showError('Lookup error: ' + (d.reason || JSON.stringify(d)));\n          return;\n        }\n\n        \/\/ show data\n        const parts = [];\n        parts.push(`<div class=\"kv\"><strong>IP:<\/strong> ${escapeHtml(d.ip || ip)}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>City \/ Region:<\/strong> ${escapeHtml((d.city || '\u2014') + (d.region ? ', ' + d.region : ''))}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>Country:<\/strong> ${escapeHtml(d.country_name || '\u2014')}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>Latitude, Longitude:<\/strong> ${d.latitude && d.longitude ? escapeHtml(d.latitude + ', ' + d.longitude) : '\u2014'}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>Postal:<\/strong> ${escapeHtml(d.postal || '\u2014')}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>ISP \/ Org:<\/strong> ${escapeHtml(d.org || d.company || '\u2014')}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>Timezone:<\/strong> ${escapeHtml(d.timezone || '\u2014')}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>ASN:<\/strong> ${escapeHtml(d.asn || '\u2014')}<\/div>`);\n        parts.push(`<div class=\"kv\"><strong>Currency:<\/strong> ${escapeHtml(d.currency || '\u2014')}<\/div>`);\n        parts.push(`<div style=\"margin-top:8px\"><a class=\"smalllink\" href=\"https:\/\/ipapi.co\/${encodeURIComponent(ip)}\/\" target=\"_blank\">View raw ipapi result<\/a><\/div>`);\n\n        info.innerHTML = parts.join('');\n        showStatus('Location fetched successfully.');\n        card.style.display = 'block';\n\n        \/\/ show map if we have coordinates\n        if (d.latitude && d.longitude) {\n          const lat = parseFloat(d.latitude);\n          const lon = parseFloat(d.longitude);\n          const bbox = (lon - 0.03) + ',' + (lat - 0.03) + ',' + (lon + 0.03) + ',' + (lat + 0.03);\n          const src = `https:\/\/www.openstreetmap.org\/export\/embed.html?bbox=${encodeURIComponent(bbox)}&layer=mapnik&marker=${encodeURIComponent(lat + ',' + lon)}`;\n          mapFrame.src = src;\n          mapContainer.style.display = 'block';\n        } else {\n          mapContainer.style.display = 'none';\n          mapFrame.src = '';\n        }\n\n      } catch (err) {\n        showError('Failed to lookup IP location. Try again later.');\n        console.error(err);\n      }\n    }\n\n    function showCard(msg) {\n      card.style.display = 'block';\n      status.textContent = msg;\n      ipTitle.textContent = 'IP: \u2014';\n      info.innerHTML = '';\n      mapContainer.style.display = 'none';\n    }\n\n    function showIP(ip) {\n      ipTitle.textContent = 'IP: ' + ip;\n    }\n\n    function showStatus(msg) { \n      status.textContent = msg; \n    }\n    \n    function showError(msg) {\n      status.textContent = 'Error';\n      info.innerHTML = `<div style=\"color:#b91c1c;font-weight:600\">${escapeHtml(msg)}<\/div>`;\n      mapContainer.style.display = 'none';\n    }\n    \n    function showMessage(msg, type) {\n      alert(msg); \/\/ Simple alert for user feedback\n    }\n\n    \/\/ small helper to avoid XSS in demo\n    function escapeHtml(s){ \n      return String(s||'').replace(\/[&<>\"']\/g,(c)=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c])); \n    }\n  })();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf10 IP &#038; Location Finder Click &#8220;Get My IP&#8221; \u2014 IP aane ke baad location details aur map bhi show hogi. Get My IP &#038; Location Get Only IP Lookup IP Ready IP: \u2014 Data sources: ipify.org (IP) \u2022 ipapi.co (geo) \u2022 OpenStreetMap (map)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-830","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":1,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/830\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/830\/revisions\/832"}],"wp:attachment":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/media?parent=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}