openwrt_helloworld/luci-app-openclash/luasrc/view/openclash/myip.htm
2025-02-15 10:30:29 +08:00

522 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="dns-prefetch" href="//whois.pconline.com.cn">
<link rel="dns-prefetch" href="//pubstatic.b0.upaiyun.com">
<link rel="dns-prefetch" href="//api-ipv4.ip.sb">
<link rel="dns-prefetch" href="//api.ipify.org">
<link rel="dns-prefetch" href="//api.ttt.sh">
<link rel="dns-prefetch" href="//qqwry.api.skk.moe">
<link rel="dns-prefetch" href="//d.skk.moe">
<link rel="preconnect" href="https://pubstatic.b0.upaiyun.com">
<link rel="preconnect" href="https://whois.pconline.com.cn">
<link rel="preconnect" href="https://api-ipv4.ip.sb">
<link rel="preconnect" href="https://api.ipify.org">
<link rel="preconnect" href="https://api.ttt.sh">
<link rel="preconnect" href="https://qqwry.api.skk.moe">
<link rel="preconnect" href="https://d.skk.moe">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
<title>IP 地址查询</title>
<style>
.title-ip {
margin: 10px -2% 15px 8%;
padding: 0px !important;
text-align: left;
font-size: 20px;
font-weight: bold;
}
.title-http {
margin: 10px 0 15px 5%;;
padding: 0px !important;
text-align: left;
font-size: 20px;
font-weight: bold;
}
.ip-title {
font-weight: bold;
font-size:15px;
display: inline-block;
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
}
.ip-state_title {
font-weight: bold;
font-size:15px;
display: inline-block;
width: 42%;
vertical-align:bottom;
overflow: hidden;
text-overflow: ellipsis;
}
.ip-result {
font-size:15px;
margin:0px 0px 0px 5%;
white-space: nowrap;
display: inline-block;
width: 32%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
}
.ip-geo {
font-size:15px;
line-height:20px;
white-space: nowrap;
display: inline-block;
width: 35%;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
vertical-align:bottom;
}
.ip-checking {
font-size:15px;
line-height:20px;
display: inline-block;
vertical-align:bottom;
width: 29%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sk-text-success {
color: #32b643;
font-size:15px;
line-height:20px;
display: inline-block;
vertical-align:bottom;
width: 30%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.sk-load-success {
font-size:15px;
line-height:20px;
display: inline-block;
vertical-align:bottom;
width: 18%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.sk-text-error {
color: #e85600;
font-size:15px;
line-height:20px;
display: inline-block;
vertical-align:bottom;
width: 30%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
:root[data-darkmode="true"] {
#eye-icon {
-webkit-filter: invert(1);
filter: invert(1);
}
#data-refresh-icon {
-webkit-filter: invert(1);
filter: invert(1);
}
}
</style>
</head>
<body>
<fieldset class="cbi-section">
<table width="100%">
<tr><td>
<div style="display: flex; min-width: 820px;">
<div style="width: 48%">
<p style="margin: 20px 0 20px 8%; padding: 0px !important; text-align: left; font-size: 25px; font-weight: bold;"><%:IP Address%>
<span style="float: right;"><img src="/luci-static/resources/openclash/img/eye-light.svg" height="20px" title="<%:Hide IP%>" alt="<%:Hide IP%>" id="eye-icon" onclick="return privacy_my_ip(this)" /></span>
</p>
<p style="margin: 10px -2% 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-title">UpaiYun:</span><span class="ip-result" id="ip-upaiyun"></span> <span class="ip-geo" id="ip-upaiyun-geo"></span>
</p>
<p style="margin: 10px -2% 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-title">PConline:</span><span class="ip-result" id="ip-pcol"></span> <span class="ip-geo" id="ip-pcol-geo"></span>
</p>
<p style="margin: 10px -2% 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-title">IP.SB:</span><span class="ip-result" id="ip-ipsb"></span> <span class="ip-geo" id="ip-ipsb-geo"></span>
</p>
<p style="margin: 10px -2% 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-title">IPIFY:</span><span class="ip-result" id="ip-ipify"></span> <span class="ip-geo" id="ip-ipify-geo"></span>
</p>
</div>
<div style="width: 52%">
<p style="margin: 20px 0 20px 8%; padding: 0px !important;text-align: left; font-size: 25px; font-weight: bold;"><%:Website Access Check%>
<span style="float: right; margin: 0 10% 0 0;"><img src="/luci-static/resources/openclash/img/arrow-clockwise-light.svg" height="20px" title="<%:Refresh%>" alt="<%:Refresh%>" id="data-refresh-icon" onclick="return refresh_myip(this)" /></span>
</p>
<p style="margin: 10px 0 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-state_title"><%:Baidu Search%>:</span><span id="http-baidu"></span><span id="ldtime-baidu"></span>
</p>
<p style="margin: 10px 0 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-state_title"><%:NetEase Music%>:</span><span id="http-163"></span><span id="ldtime-163"></span>
</p>
<p style="margin: 10px 0 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-state_title">GitHub:</span><span id="http-github"></span><span id="ldtime-github"></span>
</p>
<p style="margin: 10px 0 0 8%; text-align: left; padding-left: 0px !important; padding-right: 0px !important;">
<span class="ip-state_title">YouTube:</span><span id="http-youtube"></span><span id="ldtime-youtube"></span>
</p>
</div>
</div>
<div>
<p style="float: right; margin: 0.5% 2.5% 0 0; font-size:15px; line-height: 20px; padding-left: 0px !important; padding-right: 0px !important;">Powered by <a style="text-decoration: none; color: #666" onclick="return ip_skk()" href="javascript:void(0);">ip.skk.moe</a></p>
</div>
</td></tr>
</table>
</fieldset>
</body>
<script>
function addTitleOnOverflow() {
document.querySelectorAll('.ip-result, .ip-geo').forEach(function (span) {
if (span.scrollWidth > span.clientWidth && localStorage.getItem('privacy_my_ip') !== 'true') {
span.setAttribute('title', span.textContent);
} else {
span.removeAttribute('title');
}
});
}
function ip_skk()
{
url2='https://ip.skk.moe';
window.open(url2);
}
const $$ = document;
var ip_pcol_ip;
var ip_ipsb_ip;
var ip_upaiyun_ip;
var ip_ipify_ip;
var refresh_http;
var refresh_ip;
$$.getElementById('ip-pcol').innerHTML = '<%:Querying...%>';
$$.getElementById('ip-ipify').innerHTML = '<%:Querying...%>';
$$.getElementById('ip-upaiyun').innerHTML = '<%:Querying...%>';
$$.getElementById('ip-ipsb').innerHTML = '<%:Querying...%>';
let random = parseInt(Math.random() * 100000000);
let IP = {
get: (url, type) =>
fetch(url, { method: 'GET' }).then((resp) => {
if (type === 'text')
return Promise.all([resp.ok, resp.status, resp.text(), resp.headers]);
else {
return Promise.all([resp.ok, resp.status, resp.json(), resp.headers]);
}
}).then(([ok, status, data, headers]) => {
if (ok) {
let json = {
ok,
status,
data,
headers
}
return json;
} else {
throw new Error(JSON.stringify(json.error));
}
}).catch(error => {
throw error;
}),
parseIPIpip: (ip, elID) => {
const v4 = '(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)(?:\\.(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)){3}';
const v4Exact = new RegExp(`^${v4}$`);
const anonymizedIp = (() => {
if (v4Exact.test(ip)) {
const [a, b, c] = ip.split('.');
return `${a}.${b}.${c}.0`;
}
return ip;
})();
fetch(`https://api.ip.sb/geoip/${anonymizedIp}`, {
referrerPolicy: 'no-referrer-when-downgrade',
}).then(r => r.json())
.then(resp => {
if ( resp.country && resp.country != '' && resp.isp && resp.isp != '' ) {
$$.getElementById(elID).innerHTML = resp.country + ' ' + resp.isp;
}
else {
fetch(`https://qqwry.api.skk.moe/${anonymizedIp}`, {
referrerPolicy: 'no-referrer-when-downgrade',
}).then(r => r.json())
.then(resp => {
if ( resp.geo.indexOf('skk.moe') == -1 ) {
$$.getElementById(elID).innerHTML = resp.geo;
}
else {
$$.getElementById(elID).innerHTML = 'Unknown';
}
})
}
//https://api.ip.sb/geoip/${anonymizedIp}
//http://ip-api.com/json/${anonymizedIp}?lang=zh-CN
//$$.getElementById(elID).innerHTML = `${resp.data.country} ${resp.data.regionName} ${resp.data.city} ${resp.data.isp}`;
})
},
getIpipnetIP: () => {
IP.get(window.location.protocol+`//myip.ipip.net/?z=${random}`, 'text')
.then((resp) => {
let data = resp.data.replace('当前 IP', '').split(' 来自于:');
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-ipipnet').innerHTML = `${data[0]}`;
};
$$.getElementById('ip-ipipnet-geo').innerHTML = `${data[1]}`;
addTitleOnOverflow();
});
},
getIPApiIP: () => {
IP.get(`https://ipapi.co/json?z=${random}`, 'json')
.then(resp => {
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-ipapi').innerHTML = resp.data.ip;
};
IP.parseIPIpip(resp.data.ip, 'ip-ipapi-geo');
addTitleOnOverflow();
})
},
//getSpeedIP: () => {
// IP.get(`https://forge.speedtest.cn/api/location/info?z=${random}`, 'json')
// .then(resp => {
// if (localStorage.getItem('privacy_my_ip') != 'true') {
// $$.getElementById('ip-speedtest').innerHTML = resp.data.ip;
// };
//$$.getElementById('ip-speedtest-geo').innerHTML = resp.data.country + resp.data.province + resp.data.city + (resp.data.distinct == "null" ? '' : resp.data.distinct) + ' ' + (resp.data.isp == "null" ? '' : resp.data.isp);
// IP.parseIPIpip(resp.data.ip, 'ip-speedtest-geo');
// })
//},
getUpaiIP: () => {
IP.get(`https://pubstatic.b0.upaiyun.com/?_upnode&z=${random}`, 'json')
.then(resp => {
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-upaiyun').innerHTML = resp.data.remote_addr;
};
$$.getElementById('ip-upaiyun-geo').innerHTML = resp.data.remote_addr_location.country + ' ' + resp.data.remote_addr_location.province + ' ' + resp.data.remote_addr_location.city + ' ' + resp.data.remote_addr_location.isp;
//IP.parseIPIpip(resp.data.remote_addr, 'ip-upaiyun-geo');
addTitleOnOverflow();
})
},
getIpifyIP: () => {
IP.get(`https://api.ipify.org/?format=json&z=${random}`, 'json')
.then(resp => {
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-ipify').innerHTML = resp.data.ip;
};
return resp.data.ip;
})
.then(ip => {
IP.parseIPIpip(ip, 'ip-ipify-geo');
addTitleOnOverflow();
})
}
};
$$.getElementById('http-baidu').innerHTML = '<span class="ip-checking"><%:Testing...%></span>';
$$.getElementById('http-163').innerHTML = '<span class="ip-checking"><%:Testing...%></span>';
$$.getElementById('http-github').innerHTML = '<span class="ip-checking"><%:Testing...%></span>';
$$.getElementById('http-youtube').innerHTML = '<span class="ip-checking"><%:Testing...%></span>';
let HTTP = {
checker: (domain, cbElID, cbLoID) => {
let img = new Image;
let img_start_time = (+new Date());
let timeout = setTimeout(() => {
img.onerror = img.onload = null;
$$.getElementById(cbLoID).style.display = 'none';
$$.getElementById(cbElID).innerHTML = '<span class="sk-text-error"><%:Access Timed Out%></span>'
}, 5000);
img.onerror = () => {
clearTimeout(timeout);
$$.getElementById(cbLoID).style.display = 'none';
$$.getElementById(cbElID).innerHTML = '<span class="sk-text-error"><%:Access Denied%></span>'
}
img.onload = () => {
clearTimeout(timeout);
let img_load_time = (new Date())- img_start_time;
if ($$.getElementById(cbLoID).style.display == 'none') {
$$.getElementById(cbLoID).style.display = '';
}
if (img_load_time <= 500) {
$$.getElementById(cbLoID).innerHTML = '<span class="sk-load-success">' + img_load_time + ' ms</span>'
$$.getElementById(cbLoID).style.color = '#32b643';
}
else if (img_load_time > 500 && img_load_time <= 1000) {
$$.getElementById(cbLoID).innerHTML = '<span class="sk-load-success">' + img_load_time + ' ms</span>'
$$.getElementById(cbLoID).style.color = 'orange';
}
else {
$$.getElementById(cbLoID).innerHTML = '<span class="sk-load-success">' + img_load_time + ' ms</span>'
$$.getElementById(cbLoID).style.color = '#e85600';
}
$$.getElementById(cbElID).innerHTML = '<span class="sk-text-success"><%:Access Normal%></span>'
}
img.src = `https://${domain}/favicon.ico?${+(new Date)}`
},
runcheck: () => {
HTTP.checker('www.baidu.com', 'http-baidu', 'ldtime-baidu');
HTTP.checker('s1.music.126.net/style', 'http-163', 'ldtime-163');
HTTP.checker('github.com', 'http-github', 'ldtime-github');
HTTP.checker('www.youtube.com', 'http-youtube', 'ldtime-youtube');
}
};
function getPcolIP(data){
let pcisp = data.addr.split(' ');
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-pcol').innerHTML = data.ip;
};
$$.getElementById('ip-pcol-geo').innerHTML = `${data.pro} ${data.city} ${data.region} ${pcisp[1]}`;
addTitleOnOverflow();
};
function getIpsbIP(data){
if (localStorage.getItem('privacy_my_ip') != 'true') {
$$.getElementById('ip-ipsb').innerHTML = data.ip;
};
//IP.parseIPIpip(data.ip, 'ip-ipsb-geo');
$$.getElementById('ip-ipsb-geo').innerHTML = `${data.country} ${data.isp}`;
addTitleOnOverflow();
};
//function ipCallback(data){
// if (localStorage.getItem('privacy_my_ip') != 'true') {
// $$.getElementById('ip-taobao').innerHTML = data.ip;
// };
// IP.parseIPIpip(data.ip, 'ip-taobao-geo');
//};
function delete_ip_script()
{
var scripts = document.getElementsByTagName('script');
for (var i = scripts.length; i--; ) {
if (document.getElementsByTagName("script")[i]['src'].indexOf('whois.pconline.com.cn') > -1
|| document.getElementsByTagName("script")[i]['src'].indexOf('api-ipv4.ip.sb') > -1) {
scripts[i].parentNode.removeChild(scripts[i]);
};
};
};
function myip_Load()
{
delete_ip_script();
var mypage = document.getElementsByTagName('HEAD').item(0);
var pcipScript= document.createElement("script");
var random = parseInt(Math.random() * 100000000);
pcipScript.defer = "defer";
pcipScript.src=`https://whois.pconline.com.cn/ipJson.jsp?callback=getPcolIP&z=${random}`;
mypage.appendChild(pcipScript);
var sbipScript= document.createElement("script");
sbipScript.defer = "defer";
sbipScript.src=`https://api-ipv4.ip.sb/geoip?callback=getIpsbIP&z=${random}`;
mypage.appendChild(sbipScript);
//HTTP.runcheck();
IP.getUpaiIP();
IP.getIpifyIP();
};
function show_my_ip()
{
if (localStorage.getItem('privacy_my_ip') == 'true') {
$$.getElementById('eye-icon').src='/luci-static/resources/openclash/img/eye-slash-light.svg';
$$.getElementById('eye-icon').title='<%:Show IP%>';
$$.getElementById('eye-icon').alt='<%:Show IP%>';
ip_pcol_ip = $$.getElementById('ip-pcol').innerHTML;
ip_ipsb_ip = $$.getElementById('ip-ipsb').innerHTML;
ip_upaiyun_ip = $$.getElementById('ip-upaiyun').innerHTML;
ip_ipify_ip = $$.getElementById('ip-ipify').innerHTML;
$$.getElementById('ip-pcol').innerHTML = '***.***.***.***';
$$.getElementById('ip-ipsb').innerHTML = '***.***.***.***';
$$.getElementById('ip-upaiyun').innerHTML = '***.***.***.***';
$$.getElementById('ip-ipify').innerHTML = '***.***.***.***';
addTitleOnOverflow();
}
else {
refresh_http = setInterval("HTTP.runcheck()", Math.floor(Math.random()*(10-5+1)+5)*1000);
refresh_ip = setInterval("myip_Load()", Math.floor(Math.random()*(30-10+1)+10)*1000);
};
};
function privacy_my_ip(imgobj)
{
if (imgobj.getAttribute("src") == "/luci-static/resources/openclash/img/eye-light.svg") {
delete_ip_script();
clearInterval(refresh_ip);
localStorage.setItem('privacy_my_ip', 'true');
imgobj.src='/luci-static/resources/openclash/img/eye-slash-light.svg';
imgobj.title='<%:Show IP%>';
imgobj.alt='<%:Show IP%>';
ip_pcol_ip = $$.getElementById('ip-pcol').innerHTML;
ip_ipsb_ip = $$.getElementById('ip-ipsb').innerHTML;
ip_upaiyun_ip = $$.getElementById('ip-upaiyun').innerHTML;
ip_ipify_ip = $$.getElementById('ip-ipify').innerHTML;
$$.getElementById('ip-pcol').innerHTML = '***.***.***.***';
$$.getElementById('ip-ipsb').innerHTML = '***.***.***.***';
$$.getElementById('ip-upaiyun').innerHTML = '***.***.***.***';
$$.getElementById('ip-ipify').innerHTML = '***.***.***.***';
addTitleOnOverflow();
}
else {
imgobj.src='/luci-static/resources/openclash/img/eye-light.svg';
imgobj.title='<%:Hide IP%>';
imgobj.alt='<%:Hide IP%>';
$$.getElementById('ip-pcol').innerHTML = ip_pcol_ip;
$$.getElementById('ip-ipsb').innerHTML = ip_ipsb_ip;
$$.getElementById('ip-upaiyun').innerHTML = ip_upaiyun_ip;
$$.getElementById('ip-ipify').innerHTML = ip_ipify_ip;
localStorage.removeItem('privacy_my_ip');
myip_Load();
refresh_ip = setInterval("myip_Load()", Math.floor(Math.random()*(30-10+1)+10)*1000);
};
};
function refresh_myip(imgobj)
{
clearInterval(refresh_http);
clearInterval(refresh_ip);
myip_Load();
HTTP.runcheck();
refresh_http = setInterval("HTTP.runcheck()", Math.floor(Math.random()*(10-5+1)+5)*1000);
refresh_ip = setInterval("myip_Load()", Math.floor(Math.random()*(30-10+1)+10)*1000);
};
HTTP.runcheck();
IP.getIpifyIP();
IP.getUpaiIP();
show_my_ip();
</script>
<script type="text/javascript">
document.write('<script defer="defer" src="https://whois.pconline.com.cn/ipJson.jsp?callback=getPcolIP&z='+parseInt(Math.random() * 100000000)+'" type="text/javascript"><\/script>');
</script>
<script type="text/javascript">
document.write('<script defer="defer" src="https://api-ipv4.ip.sb/geoip?callback=getIpsbIP&z='+parseInt(Math.random() * 100000000)+'" type="text/javascript"><\/script>');
</script>
</html>