380 lines
15 KiB
HTML
380 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Fuxsto Host V5 - 公益虚拟主机服务</title>
|
||
<style>
|
||
:root {
|
||
--primary: #FF6D41;
|
||
--secondary: #FF9F6D;
|
||
--surface: linear-gradient(15deg, #FFF8F5 0%, #FFF0EB 100%);
|
||
--on-surface: #2D2D2D;
|
||
--border: rgba(0,0,0,0.1);
|
||
--shadow: 0 12px 40px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
@keyframes float {
|
||
0% { transform: translateY(0px); }
|
||
50% { transform: translateY(-8px); }
|
||
100% { transform: translateY(0px); }
|
||
}
|
||
|
||
body {
|
||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
margin: 0;
|
||
background: #fafafa;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
padding: 6vh 20px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border-radius: 32px;
|
||
padding: 56px;
|
||
box-shadow: var(--shadow);
|
||
margin-bottom: 40px;
|
||
transition: transform 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
|
||
opacity: 0.05;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
padding: 48px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: linear-gradient(45deg, var(--primary), var(--secondary));
|
||
padding: 14px 32px;
|
||
border-radius: 32px;
|
||
font-weight: 600;
|
||
color: white;
|
||
box-shadow: 0 6px 20px rgba(255,109,65,0.2);
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 40px;
|
||
color: var(--on-surface);
|
||
margin: 32px 0;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.border-left {
|
||
border-left: 4px solid var(--primary);
|
||
padding: 16px 0 16px 32px;
|
||
margin: 48px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.border-left::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -4px;
|
||
top: 50%;
|
||
width: 8px;
|
||
height: 60%;
|
||
background: var(--surface);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin: 40px 0;
|
||
}
|
||
|
||
.feature-item {
|
||
text-align: center;
|
||
padding: 24px;
|
||
background: rgba(255,255,255,0.8);
|
||
border-radius: 16px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 32px;
|
||
color: var(--primary);
|
||
margin-bottom: 16px;
|
||
display: inline-block;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 0px;
|
||
background: linear-gradient(45deg, var(--primary), var(--secondary));
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 16px;
|
||
font-weight: 700;
|
||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||
width: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.button::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: rgba(255,255,255,0.1);
|
||
transform: translate(20%, 20%) rotate(45deg);
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.button:hover::after {
|
||
transform: translate(-20%, -20%) rotate(45deg);
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 7px;
|
||
top: 8px;
|
||
height: calc(100% - 16px);
|
||
width: 2px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 6px;
|
||
width: 14px;
|
||
height: 14px;
|
||
background: var(--primary);
|
||
border-radius: 50%;
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 2px var(--primary);
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
color: #888;
|
||
padding: 64px 0 32px;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.container {
|
||
padding: 4vh 16px;
|
||
}
|
||
|
||
.card {
|
||
padding: 32px;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.feature-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<div class="section-header">
|
||
<div class="badge">
|
||
<svg style="margin-right: 12px;" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
|
||
</svg>
|
||
Fly Me To The Moon
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Card -->
|
||
<div class="card">
|
||
<h1>
|
||
<span style="background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
|
||
Fuxsto Host V5
|
||
</span>
|
||
<div style="font-size: 24px; color: #888; margin-top: 16px;">公益虚拟主机服务</div>
|
||
</h1>
|
||
|
||
<div class="border-left">
|
||
<div style="display: flex; align-items: center; gap: 24px; margin-bottom: 24px;">
|
||
<div class="feature-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div style="color: #888; font-size: 14px;">持续运行</div>
|
||
<div style="font-size: 28px; color: var(--on-surface); font-weight: 700;">1000+ 天</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 24px;">
|
||
<div class="feature-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div style="color: #888; font-size: 14px;">服务用户</div>
|
||
<div style="font-size: 28px; color: var(--primary); font-weight: 700;">1000+</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
|
||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
|
||
<line x1="12" y1="19" x2="12" y2="23"></line>
|
||
<line x1="8" y1="23" x2="16" y2="23"></line>
|
||
</svg>
|
||
</div>
|
||
<h3 style="margin: 0 0 8px; color: var(--on-surface);">公益性质</h3>
|
||
<p style="margin: 0; font-size: 14px;">一切收费都为了免费</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 style="margin: 0 0 8px; color: var(--on-surface);">企业防护</h3>
|
||
<p style="margin: 0; font-size: 14px;">多层安全防护</p>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
||
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 style="margin: 0 0 8px; color: var(--on-surface);">技术支持</h3>
|
||
<p style="margin: 0; font-size: 14px;">24/7 在线支持</p>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="Dashboard" class="button">
|
||
<svg style="margin-right: 12px;" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
<polyline points="22,6 12,13 2,6"></polyline>
|
||
</svg>
|
||
立即开始
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Version Timeline -->
|
||
<div class="card">
|
||
<h3 style="margin: 0 0 32px; font-size: 24px; color: var(--on-surface);">
|
||
<svg style="margin-right: 12px;" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
版本历程
|
||
</h3>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<strong style="display: block; color: var(--on-surface);">V5 - 2025</strong>
|
||
<p style="margin: 8px 0 0; color: #888;">代号 BMS 全面架构升级，数据库性能提升300%</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong style="display: block; color: var(--on-surface);">V4 - 2024</strong>
|
||
<p style="margin: 8px 0 0; color: #888;">代号 CMS 推出全新系统预览版</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong style="display: block; color: var(--on-surface);">V3 - 2024</strong>
|
||
<p style="margin: 8px 0 0; color: #888;">最新正式版! 工单客服已上线!</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong style="display: block; color: var(--on-surface);">V2 - 2023</strong>
|
||
<p style="margin: 8px 0 0; color: #888;">全新的UI! 架构升级! 重构至V3</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong style="display: block; color: var(--on-surface);">V1 - 2022</strong>
|
||
<p style="margin: 8px 0 0; color: #888;">梦开始的地方! 已停止,永远悼念.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;">
|
||
<a href="mailto:admin@fuxsto.cn" style="color: #888; text-decoration: none;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
<polyline points="22,6 12,13 2,6"></polyline>
|
||
</svg>
|
||
</a>
|
||
<a href="" style="color: #888; text-decoration: none;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="" style="color: #888; text-decoration: none;">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<p style="margin: 0 0 8px; font-size: 14px;">© 2025 Fuxsto Host Service</p>
|
||
<p style="margin: 0; font-size: 14px; color: var(--primary);">
|
||
<svg style="margin-right: 8px;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||
</svg>
|
||
公益服务 · 匠心传承
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |