-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (107 loc) · 6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User IP Information</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4">
<h1 class="text-4xl font-bold underline mb-6 text-center text-gray-800">IP Information</h1>
<div class="mb-4 flex items-center justify-center">
<input
type="text"
id="customIp"
class="p-2 border rounded-md mr-2"
placeholder="Enter IP Address"
/>
<button
class="bg-blue-500 text-white px-4 py-2 rounded-md"
onclick="getCustomIpInfo()"
>
Get Info
</button>
</div>
<div class="flex flex-col items-center">
<div id="exportableContent" class="exportableContent frameBorder shadowBox w-full max-w-4xl rounded-xl overflow-hidden p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-gray-700">
<p><strong>IP:</strong> <span id="ip"></span></p>
<p><strong>Type:</strong> <span id="type"></span></p>
<p><strong>Continent:</strong> <span id="continent"></span></p>
<p><strong>Country:</strong> <span id="country"></span> (<span id="countryCode"></span>)</p>
<p><strong>Region:</strong> <span id="region"></span></p>
<p><strong>City:</strong> <span id="city"></span></p>
<p><strong>Latitude:</strong> <span id="latitude"></span></p>
<p><strong>Longitude:</strong> <span id="longitude"></span></p>
<p><strong>EU Member:</strong> <span id="is_eu"></span></p>
<p><strong>Postal Code:</strong> <span id="postal"></span></p>
<p><strong>Calling Code:</strong> <span id="calling_code"></span></p>
<p><strong>Capital:</strong> <span id="capital"></span></p>
<p><strong>Borders:</strong> <span id="borders"></span></p>
<p><strong>ISP:</strong> <span id="isp"></span></p>
<p><strong>Organization:</strong> <span id="organization"></span></p>
<p><strong>ASN:</strong> <span id="asn"></span></p>
<p><strong>TimeZone:</strong> <span id="timezone"></span></p>
<p><strong>Current Time:</strong> <span id="currentTime"></span></p>
</div>
</div>
</div>
</div>
<script>
fetch('https://ipwho.is/')
.then(response => response.json())
.then(data => {
// Update HTML elements with API data
document.getElementById('ip').textContent = data.ip;
document.getElementById('type').textContent = data.type;
document.getElementById('continent').textContent = data.continent;
document.getElementById('country').textContent = data.country;
document.getElementById('countryCode').textContent = data.country_code;
document.getElementById('region').textContent = data.region;
document.getElementById('city').textContent = data.city;
document.getElementById('latitude').textContent = data.latitude;
document.getElementById('longitude').textContent = data.longitude;
document.getElementById('is_eu').textContent = data.is_eu ? 'Yes' : 'No';
document.getElementById('postal').textContent = data.postal;
document.getElementById('calling_code').textContent = data.calling_code;
document.getElementById('capital').textContent = data.capital;
document.getElementById('borders').textContent = data.borders;
document.getElementById('isp').textContent = data.connection.isp;
document.getElementById('organization').textContent = data.connection.org;
document.getElementById('asn').textContent = data.connection.asn;
document.getElementById('timezone').textContent = data.timezone.id;
document.getElementById('currentTime').textContent = data.timezone.current_time;
})
.catch(error => console.error('Error fetching data:', error));
function getCustomIpInfo() {
const customIp = document.getElementById('customIp').value;
const apiUrl = customIp ? `https://ipwho.is/${customIp}` : 'https://ipwho.is/';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('ip').textContent = data.ip;
document.getElementById('type').textContent = data.type;
document.getElementById('continent').textContent = data.continent;
document.getElementById('country').textContent = data.country;
document.getElementById('countryCode').textContent = data.country_code;
document.getElementById('region').textContent = data.region;
document.getElementById('city').textContent = data.city;
document.getElementById('latitude').textContent = data.latitude;
document.getElementById('longitude').textContent = data.longitude;
document.getElementById('is_eu').textContent = data.is_eu ? 'Yes' : 'No';
document.getElementById('postal').textContent = data.postal;
document.getElementById('calling_code').textContent = data.calling_code;
document.getElementById('capital').textContent = data.capital;
document.getElementById('borders').textContent = data.borders;
document.getElementById('isp').textContent = data.connection.isp;
document.getElementById('organization').textContent = data.connection.org;
document.getElementById('asn').textContent = data.connection.asn;
document.getElementById('timezone').textContent = data.timezone.id;
document.getElementById('currentTime').textContent = data.timezone.current_time;
})
.catch(error => console.error('Error fetching data:', error));
}
</script>
</body>
</html>