96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 1200px; height: 630px; overflow: hidden; }
|
|
|
|
body {
|
|
font-family: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
|
|
background: #0d1220;
|
|
color: #e6edf3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 34px 48px 0;
|
|
}
|
|
.avatar {
|
|
width: 48px; height: 48px; border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: #ffffff; padding: 4px;
|
|
}
|
|
.avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
|
.brand {
|
|
font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
|
|
font-weight: 700; font-size: 22px; color: #ffffff; letter-spacing: 0.3px;
|
|
}
|
|
.brand .domain { color: #6b7c99; font-weight: 500; font-size: 19px; }
|
|
|
|
.tag {
|
|
margin: 40px 48px 0;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
width: fit-content; padding: 7px 16px; border-radius: 6px;
|
|
background: rgba(41, 92, 255, 0.16);
|
|
border: 1px solid rgba(41, 92, 255, 0.5);
|
|
color: #7599ff; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase;
|
|
}
|
|
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #295cff; }
|
|
|
|
.title {
|
|
margin: 30px 48px 0;
|
|
font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
|
|
font-weight: 700; font-size: 40px;
|
|
line-height: 1.15; color: #ffffff; max-width: 1000px;
|
|
}
|
|
.title .accent { color: #ff5c5c; }
|
|
|
|
.terminal {
|
|
margin: 34px 48px 0;
|
|
background: #161e2e; border: 1px solid #2a3550; border-radius: 10px;
|
|
padding: 22px 28px;
|
|
font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
|
|
font-size: 21px; line-height: 1.6; max-width: 1040px;
|
|
}
|
|
.terminal .line { display: flex; gap: 12px; }
|
|
.terminal .prompt { color: #7599ff; }
|
|
.terminal .cmd { color: #e6edf3; }
|
|
.terminal .err { color: #ff5c5c; background: rgba(255, 92, 92, 0.10); padding: 1px 8px; border-radius: 4px; }
|
|
.terminal .fix { color: #3fb950; }
|
|
|
|
.footer {
|
|
margin-top: auto; padding: 0 48px 34px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.footer .tags { color: #6b7c99; font-size: 17px; }
|
|
.footer .tags span { margin-right: 18px; color: #7599ff; }
|
|
.footer .url { color: #6b7c99; font-size: 17px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<div class="avatar"><img src="file:///D:/dev/hoelee-blog/public/logo-square.png" alt=""></div>
|
|
<div class="brand">Mr Hoelee <span class="domain">· blog.hoelee.com</span></div>
|
|
</div>
|
|
|
|
<div class="tag"><span class="dot"></span>devops · DevOps</div>
|
|
|
|
<div class="title">Why Telegram Bot Notifications Die: IPv6, DNS,<br>and a 400 That Took a Day</div>
|
|
|
|
<div class="terminal">
|
|
|
|
<div class="line"><span class="prompt">$</span><span class="cmd">docker exec monitor python check_notify.py</span></div>
|
|
<div class="line"><span class="prompt"> </span><span class="err">telegram sendPhoto failed: 400 nginx/1.30.1</span></div>
|
|
<div class="line"><span class="prompt">$</span><span class="cmd">fix = IPv6 · DNS · multipart</span><span class="fix">→ delivered ✓</span></div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="tags"><span>#docker</span><span>#telegram</span><span>#python</span><span>#dns</span><span>#ipv6</span><span>#debugging</span><span>#portainer</span></div>
|
|
<div class="url">blog.hoelee.com</div>
|
|
</div>
|
|
</body>
|
|
</html> |