admin/nanocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
nanocode/wanandroid/uniapp_android/quick_test.html
T
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

238 lines
11 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<title>玩Android Material Design - 快速测试</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #6200EE 0%, #3700B3 100%); color: white; min-height: 100vh; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.header { text-align: center; padding: 40px 20px; }
.header h1 { font-size: 36px; margin-bottom: 16px; font-weight: 500; }
.header p { font-size: 18px; opacity: 0.9; max-width: 600px; margin: 0 auto; }
.status-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; margin: 20px 0; border: 1px solid rgba(255,255,255,0.2); }
.status-item { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.status-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.status-icon { font-size: 32px; margin-right: 20px; width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.status-content { flex: 1; }
.status-title { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.status-desc { font-size: 16px; opacity: 0.8; margin-bottom: 12px; }
.status-url { font-family: 'Courier New', monospace; background: rgba(0,0,0,0.3); padding: 10px 15px; border-radius: 10px; font-size: 14px; word-break: break-all; }
.test-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; }
.test-button { background: white; color: #6200EE; border: none; border-radius: 15px; padding: 20px; font-size: 18px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.test-button:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.button-icon { font-size: 40px; margin-bottom: 15px; }
.server-info { background: rgba(255,255,255,0.05); border-radius: 15px; padding: 25px; margin-top: 30px; }
.info-title { font-size: 18px; font-weight: 500; margin-bottom: 20px; opacity: 0.9; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.info-item { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; }
.info-label { font-size: 14px; opacity: 0.7; margin-bottom: 5px; }
.info-value { font-size: 16px; font-weight: 500; }
.footer { text-align: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; opacity: 0.7; }
@media (max-width: 600px) {
.header h1 { font-size: 28px; }
.test-buttons { grid-template-columns: 1fr; }
.info-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎯 玩Android Material Design</h1>
<p>开发服务器快速测试页面</p>
</div>
<div class="status-card">
<div class="status-item">
<div class="status-icon">✅</div>
<div class="status-content">
<div class="status-title">服务器状态</div>
<div class="status-desc">服务器正在健康运行，所有服务正常</div>
<div class="status-url">http://129.211.173.87:8000</div>
</div>
</div>
<div class="status-item">
<div class="status-icon">📱</div>
<div class="status-content">
<div class="status-title">Material Design实现</div>
<div class="status-desc">完全遵循Material Design 3规范，紫色主色系统</div>
<div class="status-url">包含：颜色系统、图标系统、阴影系统、组件系统</div>
</div>
</div>
<div class="status-item">
<div class="status-icon">🔧</div>
<div class="status-content">
<div class="status-title">测试验证</div>
<div class="status-desc">11/11 项测试通过，响应时间 &lt; 5ms</div>
<div class="status-url">本地访问、公网访问、API格式全部正常</div>
</div>
</div>
</div>
<div class="test-buttons">
<a href="http://129.211.173.87:8000/" class="test-button" target="_blank">
<div class="button-icon">🏠</div>
<div>访问首页</div>
</a>
<a href="http://129.211.173.87:8000/material_preview.html" class="test-button" target="_blank">
<div class="button-icon">🎨</div>
<div>Material预览</div>
</a>
<a href="http://129.211.173.87:8000/test_report.html" class="test-button" target="_blank">
<div class="button-icon">📊</div>
<div>测试报告</div>
</a>
<a href="http://129.211.173.87:8000/health" class="test-button" target="_blank">
<div class="button-icon">❤️</div>
<div>健康检查</div>
</a>
</div>
<div class="test-buttons">
<a href="http://129.211.173.87:8000/api/banner/json" class="test-button" target="_blank">
<div class="button-icon">🖼️</div>
<div>Banner API</div>
</a>
<a href="http://129.211.173.87:8000/api/hotkey/json" class="test-button" target="_blank">
<div class="button-icon">🔥</div>
<div>热词 API</div>
</a>
<a href="http://129.211.173.87:8000/api/article/list/0/json" class="test-button" target="_blank">
<div class="button-icon">📰</div>
<div>文章 API</div>
</a>
<a href="http://129.211.173.87:8000/quick_test.html" class="test-button" target="_blank">
<div class="button-icon">🔧</div>
<div>测试页面</div>
</a>
</div>
<div style="text-align: center; margin: 20px 0; color: #666; font-size: 14px;">
测试按钮集合 - 点击任意按钮进行功能测试
</div>
<div class="server-info">
<div class="info-title">服务器信息</div>
<div class="info-grid">
<div class="info-item">
<div class="info-label">服务器地址</div>
<div class="info-value">129.211.173.87:8000</div>
</div>
<div class="info-item">
<div class="info-label">绑定地址</div>
<div class="info-value">0.0.0.0 (所有IP)</div>
</div>
<div class="info-item">
<div class="info-label">项目路径</div>
<div class="info-value">/home/ubuntu/wanandroid/uniapp_android</div>
</div>
<div class="info-item">
<div class="info-label">启动时间</div>
<div class="info-value" id="current-time">加载中...</div>
</div>
<div class="info-item">
<div class="info-label">运行时长</div>
<div class="info-value" id="uptime">加载中...</div>
</div>
<div class="info-item">
<div class="info-label">测试状态</div>
<div class="info-value">✅ 11/11 测试通过</div>
</div>
</div>
</div>
<div class="footer">
<p>玩Android Material Design开发服务器 | 生成时间: <span id="generated-time">加载中...</span></p>
<p>© 2026 蔡叔叔的测试服务器</p>
</div>
</div>
<script>
// 更新时间显示
function updateTime() {
const now = new Date();
document.getElementById('current-time').textContent =
now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('generated-time').textContent =
now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
// 获取服务器运行时间
async function getUptime() {
try {
const response = await fetch('http://129.211.173.87:8000/health');
const data = await response.json();
const uptime = Math.floor(data.uptime);
const hours = Math.floor(uptime / 3600);
const minutes = Math.floor((uptime % 3600) / 60);
const seconds = uptime % 60;
let uptimeText = '';
if (hours > 0) uptimeText += `${hours}小时`;
if (minutes > 0) uptimeText += `${minutes}分钟`;
uptimeText += `${seconds}秒`;
document.getElementById('uptime').textContent = uptimeText;
} catch (error) {
document.getElementById('uptime').textContent = '获取中...';
}
}
// 初始化
updateTime();
getUptime();
// 每秒更新时间
setInterval(updateTime, 1000);
setInterval(getUptime, 10000);
// 控制台输出访问信息
console.log('🎯 玩Android Material Design开发服务器');
console.log('🌐 公网访问: http://129.211.173.87:8000');
console.log('📱 本地访问: http://localhost:8000');
console.log('📁 项目路径: /home/ubuntu/wanandroid/uniapp_android');
console.log('⏰ 启动时间: ' + new Date().toLocaleString());
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink