Setting the file. One moment. 34.16
Terminal
(opens in a new tab)
references/styles/terminal.html
HTML·196 lines·7 KB
Best with
16 layouts: split, pip
17 frames: hairline, clean
18 content: 技术分析 / 代码片段 / 性能数据 / 工程思考
19 Notes
20 - "Blinking cursor" must be a CSS animation, NOT a data-anim. Allowed
21 because pure CSS @keyframes on a single visual indicator is harmless.
22 - For animated reveal of lines, use data-anim="fade-in" per line.
23-->
24<!doctype html>
25<html lang="zh-CN">
26 <head>
27 <meta charset="utf-8" />
28 <title>style · terminal</title>
29 <style>
30 html,
31 body {
32 margin: 0;
33 padding: 0;
34 background: #0a0c12;
35 font-family: ui-sans-serif, system-ui, sans-serif;
36 }
37 .stage {
38 position: relative;
39 width: 1920px;
40 height: 1080px;
41 transform-origin: top left;
42 transform: scale(0.5);
43 overflow: hidden;
44 }
45 .card-host {
46 position: absolute;
47 left: 0;
48 top: 0;
49 width: 1920px;
50 height: 1080px;
51 }
52 </style>
53 </head>
54 <body>
55 <div class="stage">
56 <div class="card-host">
57 <div class="card" data-card-id="ref-terminal">
58 <style>
59 .card[data-card-id="ref-terminal"] .root {
60 --bg: #0d1117;
61 --ink: #e6edf3;
62 --muted: #7d8590;
63 --green: #4ade80;
64 --amber: #fbbf24;
65 --magenta: #f472b6;
66 --blue: #60a5fa;
67 --font-mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
68
69 width: 100%;
70 height: 100%;
71 position: relative;
72 overflow: hidden;
73 background: var(--bg);
74 color: var(--ink);
75 padding: 36px 48px;
76 box-sizing: border-box;
77 font: 28px/1.55 var(--font-mono);
78 }
79 .card[data-card-id="ref-terminal"] .ascii-frame {
80 position: absolute;
81 inset: 16px;
82 border: 2px solid #2c333e;
83 border-radius: 6px;
84 box-shadow:
85 inset 0 0 0 1px #1a1f27,
86 0 0 0 1px #06080c;
87 }
88 .card[data-card-id="ref-terminal"] .titlebar {
89 position: absolute;
90 left: 36px;
91 top: 12px;
92 padding: 0 8px;
93 background: var(--bg);
94 font: 600 14px/1 var(--font-mono);
95 color: var(--muted);
96 letter-spacing: 0.12em;
97 }
98 .card[data-card-id="ref-terminal"] .content {
99 position: relative;
100 padding: 18px 12px;
101 display: flex;
102 flex-direction: column;
103 gap: 14px;
104 }
105 .card[data-card-id="ref-terminal"] .prompt {
106 color: var(--green);
107 }
108 .card[data-card-id="ref-terminal"] .line .blue {
109 color: var(--blue);
110 }
111 .card[data-card-id="ref-terminal"] .line .amber {
112 color: var(--amber);
113 }
114 .card[data-card-id="ref-terminal"] .line .pink {
115 color: var(--magenta);
116 }
117 .card[data-card-id="ref-terminal"] .line .green {
118 color: var(--green);
119 }
120 .card[data-card-id="ref-terminal"] .line .muted {
121 color: var(--muted);
122 }
123 .card[data-card-id="ref-terminal"] .kicker {
124 color: var(--muted);
125 font: 600 16px/1 var(--font-mono);
126 letter-spacing: 0.22em;
127 margin-bottom: 4px;
128 }
129 .card[data-card-id="ref-terminal"] .headline {
130 font: 700 56px/1.15 var(--font-mono);
131 color: var(--ink);
132 margin: 4px 0 14px;
133 }
134 .card[data-card-id="ref-terminal"] .headline .hl {
135 background: rgba(74, 222, 128, 0.18);
136 color: var(--green);
137 padding: 0 6px;
138 }
139 .card[data-card-id="ref-terminal"] .cursor {
140 display: inline-block;
141 width: 14px;
142 height: 28px;
143 background: var(--green);
144 margin-left: 4px;
145 vertical-align: -4px;
146 animation: ref-term-blink 1s steps(1) infinite;
147 }
148 @keyframes ref-term-blink {
149 50% {
150 opacity: 0;
151 }
152 }
153 </style>
154
155 <div class="root">
156 <div class="ascii-frame"></div>
157 <span class="titlebar">~/notes/takeaway-007.md</span>
158
159 <div class="content">
160 <div class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.3">
161 $ cat takeaway
162 </div>
163
164 <h2
165 class="headline"
166 data-anim="fade-in"
167 data-anim-at="0.25"
168 data-anim-duration="0.45"
169 >
170 缓存命中率提升到 <span class="hl">92%</span>
171 </h2>
172
173 <div class="line" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.35">
174 <span class="prompt">$</span> bench --tier <span class="amber">"hot"</span>
175 <span class="muted">--n 10k</span>
176 </div>
177 <div class="line" data-anim="fade-in" data-anim-at="0.8" data-anim-duration="0.35">
178 <span class="muted">→</span> <span class="blue">p50</span>=<span class="green"
179 >12ms</span
180 >
181 <span class="blue">p99</span>=<span class="green">38ms</span>
182 <span class="pink">hit</span>=<span class="green">92.4%</span>
183 </div>
184 <div class="line" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.35">
185 <span class="muted">// before this change: hit=63%, p99=210ms</span>
186 </div>
187 <div class="line" data-anim="fade-in" data-anim-at="1.35" data-anim-duration="0.3">
188 <span class="prompt">$</span><span class="cursor"></span>
189 </div>
190 </div>
191 </div>
192 </div>
193 </div>
194 </div>
195 </body>
196</html>