文件内容
docs/screen1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 390px; height: 844px;
background: #0e1621;
font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
color: #fff; overflow: hidden;
}
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; font-size: 15px; font-weight: 600; }
.status-icons { display: flex; gap: 5px; font-size: 13px; }
.header { display: flex; align-items: center; justify-content: center; padding: 12px 16px; position: relative; }
.header .back { position: absolute; left: 16px; color: #64b5f6; font-size: 15px; }
.header .name { font-size: 17px; font-weight: 600; }
.header .subtitle { font-size: 13px; color: #64b5f6; text-align: center; }
.header-center { text-align: center; }
.header .dots { position: absolute; right: 16px; color: #aaa; font-size: 20px; }
.chat { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg-out { align-self: flex-end; background: #2b5278; border-radius: 16px 16px 4px 16px; padding: 8px 14px; max-width: 75%; font-size: 15px; line-height: 1.4; }
.msg-out .time { font-size: 11px; color: #7eb8e0; float: right; margin-left: 8px; margin-top: 4px; }
.msg-in { align-self: flex-start; background: #182533; border-radius: 16px 16px 16px 4px; padding: 10px 14px; max-width: 85%; font-size: 15px; line-height: 1.5; }
.msg-in .time { font-size: 11px; color: #6b8a9e; float: right; margin-left: 8px; margin-top: 4px; }
.card { background: #1e2c3a; border-radius: 12px; padding: 14px; margin-top: 6px; }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.card-title .emoji { margin-right: 6px; }
.cmd-table { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.8; color: #b0bec5; }
.cmd-name { color: #81d4fa; }
.cmd-desc { color: #78909c; margin-left: 8px; }
.card-footer { margin-top: 12px; font-size: 13px; color: #78909c; line-height: 1.5; }
.highlight { color: #ffab40; }
.input-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: 10px 12px 34px; gap: 10px; background: #0e1621; }
.input-bar .field { flex: 1; background: #182533; border-radius: 20px; padding: 10px 16px; color: #6b8a9e; font-size: 15px; }
</style>
</head>
<body>
<div class="status-bar"><span>9:41</span><div class="status-icons"><span>📶</span><span>📡</span><span>🔋</span></div></div>
<div class="header"><span class="back">‹ Chats</span><div class="header-center"><div class="name">Clawd 📰</div><div class="subtitle">bot</div></div><span class="dots">•••</span></div>
<div class="chat">
<div class="msg-out">/bitcoin-daily<span class="time">10:15 ✓✓</span></div>
<div class="msg-in">
<div class="card">
<div class="card-title"><span class="emoji">📰</span> Bitcoin Dev Digest</div>
<div class="cmd-table">
<div><span class="cmd-name">digest [date]</span><span class="cmd-desc">Today's summary</span></div>
<div><span class="cmd-name">archive</span><span class="cmd-desc">Past digests</span></div>
<div><span class="cmd-name">read <date></span><span class="cmd-desc">Read a past day</span></div>
</div>
<div class="card-footer">Daily mailing list threads + Bitcoin Core commits.<br>Sources: <span class="highlight">bitcoindev</span> mailing list,<br><span class="highlight">bitcoin/bitcoin</span> GitHub.</div>
</div>
<span class="time">10:15</span>
</div>
</div>
<div class="input-bar"><span>📎</span><div class="field">Message</div><span>🎙</span></div>
</body>
</html>