-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (122 loc) · 6.77 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Use ip tracker help you locate an ip address, or find your ip address, and show the ip addresses base registration information.">
<meta property="og:type" content="website" />
<meta property="og:zh_tw" content="website" />
<meta property="og:title" content="IP Tracker" />
<meta property="og:description" content="Use ip tracker help you locate an ip address, or find your ip address, and show the ip addresses base registration information." />
<meta property="og:image" content="https://static-ip-tracker.vercel.app/favicon.png" />
<meta property="og:url" content="https://static-ip-tracker.vercel.app/" />
<meta property="og:site_name" content="IP Tracker" />
<link rel="icon" type="image/png" href="favicon.png">
<!-- tailwindcss -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- fontawesome 5.15.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<!-- leaflet js -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- tailwindcss config -->
<script>
tailwind.config = {
theme: {
backgroundImage: {
'earth': "url('earth.jpg')",
}
}
}
</script>
<title>IP Tracker</title>
</head>
<body>
<div id="app" class="w-screen h-screen flex flex-col overflow-auto
after:fixed after:w-screen after:h-screen
after:top-0 after:left-0 after:right-0 after:bottom-0
after:bg-earth after:bg-no-repeat after:bg-center after:bg-cover
after:z-[-1] after:opacity-90 after:fixed
relative z-0 ">
<div class="py-5 h-auto flex flex-col justify-center items-center">
<div class="w-11/12 md:w-2/3 flex text-sm md:text-3xl rounded-full
bg-gray-100/30 shadow-lg shadow-dark-500">
<button type="button" class="pl-5" onclick="getIPInfo(true)">
<i class="fas fa-location-arrow"></i>
</button>
<input id="ip" class="flex-1 bg-transparent
focus:outline-none text-center p-1 md:p-2 my-1 md:my-2"
type="text" value=""/>
<button type="button" class="pr-5" onclick="getIPInfo(false)">
<i class="fas fa-search"></i>
</button>
</div>
<div id="info" class="flex-1 w-11/12 md:w-2/3 flex flex-wrap mt-5 p-2 rounded-xl
bg-gray-100/30 shadow-lg shadow-dark-500 hidden">
<div class="flex flex-col w-1/2">
<span class="font-bold text-xs lg:text-lg text-gray-700">IP Address</span>
<span id="ip-address" class="text-xs md:text-xl flex-1 flex justify-center items-center font-bold"></span>
</div>
<div class="flex flex-col w-1/2 border-l-2 border-gray-800/50 px-2">
<span class="font-bold text-xs lg:text-lg text-gray-700">Location</span>
<span id="location" class="text-xs md:text-xl flex-1 flex justify-center items-center font-bold"></span>
</div>
<div class="flex flex-col w-1/2 border-t-2 border-gray-800/50 px-2">
<span class="font-bold text-xs lg:text-lg text-gray-700">Timezone</span>
<span id="timezone" class="text-xs md:text-xl flex-1 flex justify-center items-center font-bold"></span>
</div>
<div class="flex flex-col w-1/2 border-t-2 border-l-2 border-gray-800/50 px-2">
<span class="font-bold text-xs lg:text-lg text-gray-700">ISP</span>
<span id="isp" class="text-xs md:text-xl flex-1 flex justify-center items-center font-bold"></span>
</div>
</div>
</div>
<div id="map" class="w-11/12 flex-1 mx-auto rounded-3xl overflow-hidden"></div>
</div>
<script>
// API 金鑰
const apiKey = "bdc_5ef795c9e7784d2da5d08f842223b414";
// 地圖標記
var marker;
// 設定地圖中心點與放大級別
const map = L.map("map", { center: [24.123456, 121.123456], zoom: 5 });
// 載入圖資
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const verifyIP = (val) => {
return (/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/).test(val);
}
const getIPInfo = async (self) => {
const ip = self ? '' : document.getElementById('ip').value;
if(ip&&!verifyIP(ip)) {
alert('IP 地址格式有誤');
return false;
}
fetch(`https://api.bigdatacloud.net/data/ip-geolocation?ip=${ip}&localityLanguage=zh&key=${apiKey}`)
.then((res) => res.json())
.then((json) => {
document.getElementById('ip').value = json.ip;
// 加上標記
if (marker) map.removeLayer(marker);
marker = L.marker([json.location.latitude, json.location.longitude]).addTo(map).bindPopup(json.ip).openPopup();
map.setView(new L.LatLng(json.location.latitude, json.location.longitude), 16);
document.getElementById("ip-address").innerHTML=json.ip;
document.getElementById("timezone").innerHTML=json.location.timeZone.displayName;
document.getElementById("location").innerHTML= json.location.principalSubdivision+' '+json.location.city +' '+json.location.localityName;
document.getElementById("isp").innerHTML=json.network.organisation;
document.getElementById("info").classList.toggle('hidden');
});
}
window.onload = ()=> getIPInfo(true);
</script>
</body>
</html>