87 lines
3.4 KiB
HTML
87 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
:root {
|
|
--primary: #FF6D41;
|
|
--surface: #FFF8F5;
|
|
--on-surface: #2D2D2D;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
background: #f5f5f5;
|
|
}
|
|
.emoji-focus {
|
|
display: inline-block;
|
|
transform: scale(1.2);
|
|
margin: 0 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="padding: 8vh 0;">
|
|
<div style="max-width: 600px; margin: 0 auto; padding: 0 20px;">
|
|
|
|
<!-- 头部 -->
|
|
<div style="text-align: center; padding: 32px 0;">
|
|
<div style="display: inline-block; background: rgba(255,109,65,0.12);
|
|
padding: 12px 24px; border-radius: 24px; font-weight: 500;">
|
|
<span class="emoji-focus">⏰</span> 服务到期提醒
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主卡片 -->
|
|
<div style="background: var(--surface); border-radius: 24px; padding: 48px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.06);">
|
|
|
|
<!-- 标题区 -->
|
|
<h1 style="font-size: 32px; color: var(--on-surface); margin: 0 0 32px;">
|
|
<span style="color: var(--primary);">Fuxsto Host</span><br>
|
|
<span style="font-weight: 300;">您的服务即将到期</span>
|
|
</h1>
|
|
|
|
<!-- 核心信息 -->
|
|
<div style="border-left: 4px solid var(--primary); padding-left: 24px; margin-bottom: 40px;">
|
|
<p style="color: #666; margin: 0 0 16px; line-height: 1.6;">
|
|
<span class="emoji-focus">🙌</span> 到期时间：<strong>[到期时间]</strong>
|
|
</p>
|
|
<p style="color: #666; margin: 0; line-height: 1.6;">
|
|
<span class="emoji-focus">🤐</span> 剩余天数：<strong style="color: var(--primary);">[剩余天数]</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 功能列表 -->
|
|
<div style="margin-bottom: 40px;">
|
|
<div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px;">
|
|
<span class="emoji-focus">📄</span>
|
|
<h3 style="margin: 0; color: var(--on-surface);">业务信息</h3>
|
|
</div>
|
|
<ul style="color: #666; margin: 0; padding-left: 32px;">
|
|
<li style="margin-bottom: 8px;">[业务名称]</li>
|
|
<li style="margin-bottom: 8px;">[业务ID]</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div style="display: grid; gap: 16px;">
|
|
<a href="https://hv5.fuxsto.cn" style="display: block; padding: 18px; background: var(--primary);
|
|
color: white!important; text-decoration: none; border-radius: 12px;
|
|
font-weight: 700; text-align: center; transition: all 0.2s;">
|
|
🚀 立即续订
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<div style="text-align: center; color: #888; padding: 48px 0 24px;">
|
|
<div style="height:1px; background:rgba(0,0,0,0.1); margin: 0 auto 32px; width: 60%;"></div>
|
|
<p style="margin: 0 0 8px;">需要帮助？ 📧 admin@fuxsto.cn</p>
|
|
<p style="margin: 0; font-size: 14px;">© 2025 Fuxsto</p>
|
|
<p style="margin: 8px 0 0; font-size: 14px;">如果邮件显示异常请使用邮箱客户端
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|