10 lines
7.2 KiB
HTML
10 lines
7.2 KiB
HTML
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=1600"><title>TTREE · 产品界面渲染图</title>
|
||
<style>
|
||
*{box-sizing:border-box}body{margin:0;background:#f5f5f7;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}main{width:1600px;height:1080px;padding:64px 96px;overflow:hidden}.intro{display:flex;align-items:center;gap:20px}.intro img{width:68px;height:68px}.wordmark{font-size:24px;font-weight:650;letter-spacing:2px}.tagline{margin-left:auto;font-size:21px;color:#6e6e73}.devices{display:flex;gap:52px;align-items:flex-start;margin-top:45px}.device{flex:1;min-width:0}.label{font-size:14px;color:#6e6e73;letter-spacing:.4px;margin:0 0 16px 4px;display:flex;align-items:center;gap:9px}.label b{color:#1d1d1f;font-size:18px;letter-spacing:0}.label span{font-size:13px}.window{height:722px;border:1px solid #d5d5d8;background:#fcfcfd;box-shadow:0 24px 50px #00000015,0 4px 12px #00000008;overflow:hidden}.mac{border-radius:22px;background:linear-gradient(135deg,#fafafc,#efeff2)}.win{border-radius:12px;position:relative}.toolbar{height:64px;display:flex;align-items:center;gap:22px;padding:0 22px;border-bottom:1px solid #dfdfe3}.tabs{display:flex;gap:2px;background:#e9e9ed;padding:3px;border-radius:10px;font-size:14px}.tab{padding:7px 24px;color:#86868b}.tab.selected{background:#fff;color:#1d1d1f;border-radius:8px;box-shadow:0 1px 3px #00000010;font-weight:600}.actions{margin-left:auto;display:flex;gap:18px;color:#6e6e73}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pane{padding:23px 25px;position:relative}.source{height:193px}.source p{font-size:25px;line-height:1.45;letter-spacing:-.45px;margin:4px 0 0;max-width:480px;font-weight:450}.languages{height:55px;border-top:1px solid #dcdce1;border-bottom:1px solid #dcdce1;display:flex;align-items:center;padding:0 25px;gap:22px;font-size:14px;color:#545458}.languages .arrow{color:#a0a0a6;font-size:18px}.chevron{color:#a0a0a6;margin-left:9px}.result{height:190px;border-bottom:1px solid #dcdce1}.result.last{border:0;height:218px}.kicker{display:flex;align-items:center;font-size:11px;letter-spacing:.8px;color:#86868b;font-weight:600}.copy{margin-left:auto;color:#86868b;font-size:12px;letter-spacing:0;font-weight:400}.result p{font-size:23px;line-height:1.65;margin:22px 0;color:#303033;max-width:480px;font-weight:500}.grip{position:absolute;width:32px;height:3px;border-radius:4px;background:#c8c8ce;left:calc(50% - 16px);bottom:-2px}.win-title{height:38px;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#6e6e73;background:#f5f5f7}.win-title img{width:17px;height:17px;margin-right:8px}.window-btns{margin-left:auto;display:flex;gap:27px;font-size:15px;color:#6e6e73}.win-shell{display:flex;height:calc(100% - 38px)}.rail{width:55px;background:#f0f0f3;border-right:1px solid #e2e2e6;display:flex;flex-direction:column;align-items:center;padding:20px 7px;gap:23px;color:#77777e}.rail .active{padding:8px;background:#fff;border-radius:6px;box-shadow:0 1px 4px #00000009;color:#1d1d1f}.rail .settings{margin-top:auto}.win-body{flex:1;min-width:0;background:#fcfcfd}.win .toolbar{height:48px;font-size:14px;font-weight:600;padding:0 21px}.win .source{height:177px;padding:21px}.win .source p{font-size:23px}.win .languages{height:48px;padding:0 21px;font-size:13px;gap:17px}.win .result{height:183px;padding:21px}.win .last{height:226px}.win .result p{font-size:21px;margin-top:22px}.footer{display:flex;justify-content:center;align-items:center;gap:28px;color:#86868b;font-size:13px;margin-top:37px}.key{font-size:12px;border:1px solid #d7d7dc;border-radius:5px;padding:4px 8px;background:#fff;box-shadow:0 1px 1px #00000007;color:#5c5c63}.disclaimer{text-align:center;color:#a1a1a7;font-size:11px;margin-top:27px;letter-spacing:.2px}
|
||
</style>
|
||
<svg style="position:absolute;width:0;height:0"><defs><symbol id="pin" viewBox="0 0 24 24"><path d="M8 3h8l-1 7 4 4H5l4-4-1-7M12 14v7"/></symbol><symbol id="gear" viewBox="0 0 24 24"><path d="m9 3-1 3-3 1 1 3-2 2 2 2-1 3 3 1 1 3h6l1-3 3-1-1-3 2-2-2-2 1-3-3-1-1-3Z"/><circle cx="12" cy="12" r="3"/></symbol><symbol id="chat" viewBox="0 0 24 24"><path d="M5 4h14v12H9l-4 4V4Z"/><path d="M9 8h6M9 12h4"/></symbol><symbol id="translate" viewBox="0 0 24 24"><path d="M3 5h10M8 2v3M5 5c0 5 4 9 8 10M11 5c0 5-4 9-8 10M13 21l4-11 4 11M15 17h4"/></symbol></defs></svg>
|
||
<main><div class="intro"><img src="../../assets/icons/icon.svg" alt="TTREE"><span class="wordmark">TTREE</span><span class="tagline">让语言退后。让想法向前。</span></div><div class="devices">
|
||
<section class="device"><div class="label"><b>Mac</b><span>原生 AppKit</span></div><div class="window mac"><div class="toolbar"><div class="tabs"><div class="tab selected">翻译</div><div class="tab">AI</div></div><div class="actions"><svg><use href="#pin"/></svg><svg><use href="#gear"/></svg></div></div><div class="pane source"><p>Ideas travel further when<br>language gets out of the way.</p><i class="grip"></i></div><div class="languages"><span>自动检测 <small class="chevron">⌃</small></span><span class="arrow">→</span><span>中 ⇄ 英（自适应） <small class="chevron">⌃</small></span></div><div class="pane result"><div class="kicker">翻译 · GOOGLE / BING <span class="copy">复制</span></div><p>当语言不再成为障碍时，<br>思想就会传播得更远。</p><i class="grip"></i></div><div class="pane result last"><div class="kicker">AI · HY-MT1.5 <span class="copy">复制</span></div><p>当语言不再成为障碍时，<br>想法就能传播得更远。</p></div></div></section>
|
||
<section class="device"><div class="label"><b>Windows</b><span>原生 Win32</span></div><div class="window win"><div class="win-title"><img src="../../assets/icons/icon.svg" alt="">TTREE<div class="window-btns"><span>−</span><span>□</span><span>×</span></div></div><div class="win-shell"><div class="rail"><div class="active"><svg><use href="#translate"/></svg></div><svg><use href="#chat"/></svg><svg class="settings"><use href="#gear"/></svg></div><div class="win-body"><div class="toolbar">翻译<div class="actions"><svg><use href="#pin"/></svg></div></div><div class="pane source"><p>Ideas travel further when<br>language gets out of the way.</p><i class="grip"></i></div><div class="languages"><span>自动检测 <small class="chevron">⌄</small></span><span class="arrow">→</span><span>中 ⇄ 英（自适应） <small class="chevron">⌄</small></span></div><div class="pane result"><div class="kicker">翻译 · GOOGLE / BING <span class="copy">复制</span></div><p>当语言不再成为障碍时，<br>思想就会传播得更远。</p><i class="grip"></i></div><div class="pane result last"><div class="kicker">AI · HY-MT1.5 <span class="copy">复制</span></div><p>当语言不再成为障碍时，<br>想法就能传播得更远。</p></div></div></div></div></section></div>
|
||
<div class="footer"><span><span class="key">⌘ ⇧ Space</span> Mac 呼出</span><span>轻轻唤起，接着思考。</span><span><span class="key">Ctrl ⇧ Space</span> Windows 呼出</span></div><div class="disclaimer">界面渲染示意 · 示例译文仅作展示，实际外观随系统主题与设置变化</div></main></html>
|