feat: add more info to page

Zxilly · Jul 20, 2024 · 3aac176 · 3aac176
1 parent 2156a5e
commit 3aac176
Showing 1 changed file with 61 additions and 10 deletions.
diff --git a/uacheck/index.php b/uacheck/index.php
@@ -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 @@
             background-color: #f0f0f0;
         }
 
-        .user-agent {
+        .block {
             background-color: #fff;
             border: 1px solid #ddd;
             padding: 20px;
@@ -29,7 +29,7 @@
         }
 
         @media (min-width: 1200px) {
-            .user-agent {
+            .block {
                 max-width: 800px;
                 margin: 20px auto;
             }
@@ -38,19 +38,55 @@
                 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 @@
     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 @@
         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>