58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>示例应用</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, "MiSans", "PingFang SC", sans-serif;
|
|
background: #f5f5f7;
|
|
color: #1a1a1a;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding: 24px;
|
|
}
|
|
.icon {
|
|
width: 72px; height: 72px; border-radius: 20px;
|
|
background: linear-gradient(135deg, #ff6900, #ff9d00);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 34px; color: #fff;
|
|
}
|
|
h1 { font-size: 24px; font-weight: 600; }
|
|
.card {
|
|
background: #fff; border-radius: 16px; padding: 16px 20px;
|
|
width: 100%; max-width: 360px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,.06);
|
|
}
|
|
.row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
|
|
.row .k { color: #8a8a90; }
|
|
.note { font-size: 12px; color: #8a8a90; text-align: center; line-height: 1.6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="icon">🎨</div>
|
|
<h1>示例应用</h1>
|
|
<div class="card">
|
|
<div class="row"><span class="k">来源</span><span>远程服务器</span></div>
|
|
<div class="row"><span class="k">当前时间</span><span id="clock">--:--:--</span></div>
|
|
</div>
|
|
<p class="note">这是 Hearth 服务端的示例 webapp<br>用于演示远程下发 / 加载进度 / 离线包</p>
|
|
<script>
|
|
function tick() {
|
|
var now = new Date();
|
|
var p = function (n) { return String(n).padStart(2, '0'); };
|
|
document.getElementById('clock').textContent =
|
|
p(now.getHours()) + ':' + p(now.getMinutes()) + ':' + p(now.getSeconds());
|
|
}
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|