133 lines
3.7 KiB
HTML
133 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 1600px; height: 900px; overflow: hidden; }
|
|
|
|
body {
|
|
font-family: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
|
|
background: #0d1220;
|
|
position: relative;
|
|
padding: 48px 52px;
|
|
}
|
|
|
|
.glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
}
|
|
.glow.g1 { width: 500px; height: 500px; background: #295cff; opacity: 0.28; top: -180px; right: -120px; }
|
|
.glow.g2 { width: 400px; height: 400px; background: #0e94ff; opacity: 0.20; bottom: -150px; left: -120px; }
|
|
|
|
.topbar {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 26px;
|
|
}
|
|
.topbar .crumb {
|
|
display: flex; align-items: center; gap: 10px;
|
|
color: #6b7c99; font-size: 18px;
|
|
}
|
|
.topbar .crumb .pipe { color: #2a3550; }
|
|
.topbar .crumb .active { color: #e6edf3; }
|
|
.topbar .logo { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 3px; }
|
|
.topbar .logo img { width: 100%; height: 100%; object-fit: contain; }
|
|
|
|
.terminal {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 690px;
|
|
background: rgba(22, 30, 46, 0.95);
|
|
border: 1px solid #2a3550;
|
|
border-radius: 14px;
|
|
box-shadow: 0 24px 70px rgba(0,0,0,0.45);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.terminal .titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 22px;
|
|
background: #131a2a;
|
|
border-bottom: 1px solid #2a3550;
|
|
}
|
|
.terminal .dot { width: 13px; height: 13px; border-radius: 50%; }
|
|
.terminal .dot.r { background: #ff5c5c; }
|
|
.terminal .dot.y { background: #f5a524; }
|
|
.terminal .dot.g { background: #3fb950; }
|
|
.terminal .title-text { margin-left: 12px; color: #6b7c99; font-size: 16px; }
|
|
|
|
.terminal .body { padding: 30px 36px; font-size: 22px; line-height: 1.8; flex: 1; }
|
|
.terminal .line { display: flex; gap: 12px; margin-bottom: 8px; }
|
|
.terminal .prompt { color: #7599ff; flex-shrink: 0; }
|
|
.terminal .cmd { color: #e6edf3; }
|
|
.terminal .dim { color: #6b7c99; }
|
|
.terminal .err {
|
|
color: #ff5c5c;
|
|
background: rgba(255,92,92,0.10);
|
|
padding: 2px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
.terminal .ok { color: #3fb950; }
|
|
.terminal .hl { color: #f5a524; }
|
|
|
|
.flow {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-top: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.flow .step {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 14px 8px;
|
|
background: #161e2e;
|
|
border: 1px solid #2a3550;
|
|
border-radius: 10px;
|
|
color: #e6edf3;
|
|
font-size: 17px;
|
|
}
|
|
.flow .step .num { display: block; color: #7599ff; font-size: 13px; margin-bottom: 4px; }
|
|
.flow .step.err-step { border-color: #ff5c5c; }
|
|
.flow .step.err-step .num { color: #ff5c5c; }
|
|
.flow .arrow { color: #2a3550; font-size: 22px; flex-shrink: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="glow g1"></div>
|
|
<div class="glow g2"></div>
|
|
|
|
<div class="topbar">
|
|
<div class="crumb">
|
|
<span>blog.hoelee.com</span><span class="pipe">/</span>
|
|
<span>{{CATEGORY}}</span><span class="pipe">/</span>
|
|
<span class="active">{{SLUG}}</span>
|
|
</div>
|
|
<div class="logo"><img src="{{LOGO_PATH}}" alt=""></div>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<div class="titlebar">
|
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
|
<span class="title-text">{{TITLEBAR}}</span>
|
|
</div>
|
|
<div class="body">
|
|
{{TERMINAL_HTML}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flow">
|
|
{{FLOW_HTML}}
|
|
</div>
|
|
</body>
|
|
</html> |