feat: add more info to page

This commit is contained in:
Zxilly 2024-07-21 02:52:30 +08:00
parent 2156a5e2c9
commit 3aac1769d4
No known key found for this signature in database
GPG Key ID: 47AB1DEC841BC6A2

View File

@ -2,7 +2,7 @@
$userAgent = $_SERVER['HTTP_USER_AGENT'];
?>
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -15,7 +15,7 @@ $userAgent = $_SERVER['HTTP_USER_AGENT'];
background-color: #f0f0f0;
}
.user-agent {
.block {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
@ -29,7 +29,7 @@ $userAgent = $_SERVER['HTTP_USER_AGENT'];
}
@media (min-width: 1200px) {
.user-agent {
.block {
max-width: 800px;
margin: 20px auto;
}
@ -38,19 +38,55 @@ $userAgent = $_SERVER['HTTP_USER_AGENT'];
font-size: 24px;
}
}
button {
background-color: #f8f9fa;
border: 1px solid #ccc;
color: #333;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
</style>
<script>
function jump_port(port) {
let url = window.location.protocol + '//' + window.location.hostname;
if (port !== 80) {
url += ':' + port;
}
url += window.location.pathname;
window.location.href = url;
}
</script>
</head>
<body>
<div class="user-agent" id="php-user-agent">
<div class="block" id="php-user-agent">
<h2 class="title">服务器端 User-Agent:</h2>
<p><?php echo htmlspecialchars($userAgent); ?></p>
</div>
<div class="user-agent" id="js-user-agent">
<div class="block" id="js-user-agent">
<h2 class="title">用户端 User-Agent:</h2>
<p></p>
</div>
<div class="user-agent" id="ua2f-status">
<h2 class="title"><a href="https://github.com/Zxilly/UA2F" target="_blank">UA2F</a> 状态:</h2>
<div class="block" id="ip">
<h2 class="title">IP 地址:</h2>
<p><?php echo $_SERVER['REMOTE_ADDR']; ?></p>
</div>
<div class="block" id="port">
<h2 class="title">端口:</h2>
<p><?php echo $_SERVER['SERVER_PORT']; ?></p>
<!-- if port is 80, show a link to 2333, or show a link to 80, wrap the link with button-->
<?php if ($_SERVER['SERVER_PORT'] == 80): ?>
<button onclick="jump_port(2333)">访问 2333 端口</button>
<?php else: ?>
<button onclick="jump_port(80)">访问 80 端口</button>
<?php endif; ?>
</div>
<div class="block" id="ua2f-status">
<h2 class="title"><a href="https://github.com/Zxilly/UA2F" target="_blank">UA2F</a> 推测状态:</h2>
<p></p>
</div>
<script>
@ -63,12 +99,11 @@ $userAgent = $_SERVER['HTTP_USER_AGENT'];
document.getElementById('ua2f-status').querySelector('p').textContent = ua2fStatusText;
if (window.location.protocol === 'https:') {
document.querySelectorAll('.user-agent').forEach(function(element) {
document.querySelectorAll('.block').forEach(function (element) {
element.style.display = 'none';
});
// 创建并显示消息
var messageDiv = document.createElement('div');
const messageDiv = document.createElement('div');
messageDiv.textContent = '此网页无法在 https 下正常工作';
messageDiv.style.padding = '20px';
messageDiv.style.marginTop = '20px';
@ -77,6 +112,22 @@ $userAgent = $_SERVER['HTTP_USER_AGENT'];
messageDiv.style.border = '1px solid #ffaaaa';
document.body.appendChild(messageDiv);
}
const ip = document.getElementById('ip').querySelector('p').textContent;
fetch('https://api.ip.sb/geoip/' + ip)
.then(response => response.json())
.then(data => {
const ele = document.getElementById('ip').querySelector('p');
ele.textContent += ' (' + data.country + ')';
if (data.country_code !== 'CN') {
ele.style.color = 'red';
ele.textContent += ' 请检查是否使用了代理';
document.getElementById('ua2f-status').querySelector('p').textContent += " (在代理下可能不准确)"
}
})
.catch(error => {
console.error('Error:', error);
});
</script>
</body>
</html>