118 lines
3.7 KiB
HTML
118 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
:root {
|
|
--primary: #FF6D41;
|
|
--surface: #FFF8F5;
|
|
--on-surface: #2D2D2D;
|
|
--radius-lg: 24px;
|
|
--radius-md: 12px;
|
|
--space-xl: 48px;
|
|
--space-lg: 32px;
|
|
--space-md: 24px;
|
|
--space-sm: 16px;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
background: #f5f5f5;
|
|
line-height: 1.6;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.badge {
|
|
background: rgba(255,109,65,0.12);
|
|
padding: 12px 24px;
|
|
border-radius: var(--radius-lg);
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
}
|
|
.card {
|
|
background: var(--surface);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-xl);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
|
|
}
|
|
.highlight {
|
|
border-left: 4px solid var(--primary);
|
|
padding-left: var(--space-md);
|
|
margin: var(--space-lg) 0;
|
|
}
|
|
.btn-primary {
|
|
display: block;
|
|
padding: 18px;
|
|
background: var(--primary);
|
|
color: white!important;
|
|
text-decoration: none;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
.divider {
|
|
height: 1px;
|
|
background: rgba(0,0,0,0.1);
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="padding: 8vh 0;">
|
|
<div class="container">
|
|
|
|
<!-- Header -->
|
|
<div style="text-align: center; padding: var(--space-lg) 0;">
|
|
<div class="badge">
|
|
⏰ 服务到期提醒
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<div class="card">
|
|
<h1 style="font-size: 2em; color: var(--on-surface); margin: 0 0 var(--space-lg);">
|
|
<span style="color: var(--primary);">Fuxsto Host</span><br>
|
|
<span style="font-weight: 300;">您的服务即将到期</span>
|
|
</h1>
|
|
|
|
<!-- Key Info -->
|
|
<div class="highlight">
|
|
<p style="color: #666; margin: 0 0 var(--space-sm);">
|
|
📅 到期时间：<strong>[到期时间]</strong>
|
|
</p>
|
|
<p style="color: #666; margin: 0;">
|
|
⏳ 剩余天数：<strong style="color: var(--primary);">[剩余天数]</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Business Info -->
|
|
<div style="margin-bottom: var(--space-xl);">
|
|
<h3 style="font-size: 1.2em; color: var(--on-surface); margin: 0 0 var(--space-sm);">
|
|
📄 业务信息
|
|
</h3>
|
|
<ul style="color: #666; margin: 0; padding-left: var(--space-md);">
|
|
<li style="margin-bottom: 8px;">[业务名称]</li>
|
|
<li style="margin-bottom: 8px;">[业务ID]</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<a href="https://hv5.fuxsto.cn" class="btn-primary">
|
|
🚀 立即续订
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="text-align: center; color: #888; padding: var(--space-xl) 0 var(--space-md);">
|
|
<div class="divider" style="margin-bottom: var(--space-lg);"></div>
|
|
<p style="margin: 0 0 8px;">需要帮助？ 📧 admin@fuxsto.cn</p>
|
|
<p style="margin: 0; font-size: 0.875em;">© 2025 Fuxsto</p>
|
|
<p style="margin: 8px 0 0; font-size: 0.875em;">如果邮件显示异常请使用邮箱客户端</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|