Blogger VPN IP Address Country Tools HTML CSS Javascript Code By Abdullah Coded

VPN IP Address Country Tools allows users to instantly check their public IP address and identify the country and region associated with it. This tool is designed to verify VPN connections by showing real-time IP details such as country, city/region, internet service provider (ISP), and local time zone.

Live Preview

It is ideal for users who want to:

• Confirm VPN or proxy location accuracy

• Check if their real IP is hidden 🔐

• Detect ISP and network information

• Test VPN performance and connectivity

With fast detection, mobile-friendly design, and accurate geolocation data, VPN IP Address Country Tools helps ensure online privacy, security, and location verification with ease.

<!-- PREMIUM EXECUTIVE CARD UI -->
<style>
  .exec-container {
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    background: #f4f6f8;
    padding: 0px 0px;
    display: flex;
    justify-content: center;
  }

  .exec-card {
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    overflow: hidden;
    border-top: 5px solid #2c3e50; /* Navy Blue Top */
  }

  .exec-header {
    padding: 25px 25px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .exec-title h4 { margin: 0; color: #2c3e50; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
  .exec-title span { font-size: 11px; color: #95a5a6; font-weight: 500; }

  .exec-flag { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #ecf0f1; }

  .exec-body { padding: 10px 25px 25px; }

  .exec-ip-box {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
  }

  .exec-ip-label { display: block; font-size: 10px; color: #7f8c8d; text-transform: uppercase; font-weight: bold; margin-bottom: 2px; }
  .exec-ip-val { font-size: 24px; color: #2c3e50; font-weight: 700; font-family: monospace; }

  .exec-details { border-top: 1px solid #ecf0f1; padding-top: 15px; margin-top: 15px; }
  
  .exec-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
  .exec-row span:first-child { color: #7f8c8d; }
  .exec-row span:last-child { color: #2c3e50; font-weight: 600; text-align: right; max-width: 60%; }

  .exec-footer {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .st-safe { background: #27ae60; color: white; }
  .st-danger { background: #c0392b; color: white; }
  .st-load { background: #bdc3c7; color: #fff; }

</style>

<div class="exec-container">
  <div class="exec-card">
    <div class="exec-header">
      <div class="exec-title">
        <h4>Digital Identity</h4>
        <span>Verification Protocol</span>
      </div>
      <img id="ex-flag" class="exec-flag" src="https://via.placeholder.com/40" alt="Flag">
    </div>

    <div class="exec-body">
      <div class="exec-ip-box">
        <span class="exec-ip-label">Public IP Address</span>
        <div id="ex-ip" class="exec-ip-val">...</div>
      </div>

      <div class="exec-details">
        <div class="exec-row">
          <span>Country</span>
          <span id="ex-country">-</span>
        </div>
        <div class="exec-row">
          <span>City / Region</span>
          <span id="ex-city">-</span>
        </div>
        <div class="exec-row">
          <span>Service Provider</span>
          <span id="ex-isp">-</span>
        </div>
        <div class="exec-row">
          <span>Local Time</span>
          <span id="ex-time">-</span>
        </div>
      </div>
    </div>

    <div id="ex-status" class="exec-footer st-load">
      Authenticating Connection...
    </div>
  </div>
</div>

<script>
  fetch('https://ipwho.is/')
    .then(r => r.json())
    .then(d => {
      document.getElementById('ex-ip').innerText = d.ip;
      document.getElementById('ex-flag').src = d.flag.img;
      document.getElementById('ex-country').innerText = d.country;
      document.getElementById('ex-city').innerText = d.city + ", " + d.region_code;
      document.getElementById('ex-isp').innerText = d.connection.isp;
      document.getElementById('ex-time').innerText = d.timezone.id;

      const ft = document.getElementById('ex-status');
      if(d.security.vpn || d.security.proxy || d.security.tor) {
        ft.className = "exec-footer st-danger";
        ft.innerText = "⚠️ PROXY CONNECTION DETECTED";
      } else {
        ft.className = "exec-footer st-safe";
        ft.innerText = "✓ RESIDENTIAL IP VERIFIED";
      }
    });
</script>
<!-- END EXECUTIVE UI --> 

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ