<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tythonic Help Center</title>
<style>
/* 全局样式重置与字体设置 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #fafafa;
color: #333;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
/* 顶部 Banner 区域（响应式布局） */
.header-banner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 20px 30px;
margin-bottom: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
gap: 20px;
}
.brand-logo-area {
flex: 1;
max-width: 280px;
}
.brand-logo-area img {
width: 100%;
height: auto;
display: block;
}
.banner-image-area {
flex: 2;
max-width: 550px;
border-radius: 12px;
overflow: hidden;
}
.banner-image-area img {
width: 100%;
height: auto;
display: block;
}
/* 标题样式 */
h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
color: #000;
}
h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
color: #000;
}
/* 产品选择区域（网格布局） */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 35px;
}
.product-card {
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 20px 10px;
text-align: center;
text-decoration: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.product-img-wrapper {
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.product-img-wrapper img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.product-name {
font-size: 14px;
font-weight: 700;
color: #0056b3;
}
.product-name span {
font-weight: 400;
color: #666;
font-size: 12px;
margin-left: 3px;
}
/* 帮助模块区域（网格布局） */
.help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.help-card {
background-color: #fff;
border: 1.5px solid #0056b3;
border-radius: 16px;
padding: 25px 15px;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
transition: background-color 0.2s ease, transform 0.2s ease;
cursor: pointer;
}
.help-card:hover {
background-color: #f0f7ff;
transform: translateY(-2px);
}
.help-icon {
width: 50px;
height: 50px;
color: #007bff;
}
.help-title {
font-size: 18px;
font-weight: 700;
color: #000;
}
/* 移动端适配 */
@media (max-width: 768px) {
.header-banner {
flex-direction: column;
padding: 20px;
}
.brand-logo-area, .banner-image-area {
max-width: 100%;
width: 100%;
}
body {
padding: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部 Banner 区域 -->
<header class="header-banner">
<div class="brand-logo-area">
<!-- 替换为您实际的 Logo 图片链接 -->
<img src="https://placehold.co/280x120/png?text=Logo+Here" alt="Tythonic Logo">
</div>
<div class="banner-image-area">
<!-- 替换为您实际的 Banner 推广图链接 -->
<img src="https://placehold.co/550x220/png?text=Banner+Family+Here" alt="Family Banner">
</div>
</header>
<h1>Welcome to Tythonic Help Center</h1>
<!-- 模块 1: 按产品选择 -->
<section>
<h2>Choose by Product</h2>
<div class="product-grid">
<!-- 卡片: B12 -->
<a href="/model-b12" class="product-card">
<div class="product-img-wrapper">
<!-- 替换为您实际的 B12 产品图 -->
<img src="https://placehold.co/180x130/png?text=B12" alt="Model: B12">
</div>
<div class="product-name">Model: B12</div>
</a>
<!-- 卡片: T3 -->
<a href="/model-t3" class="product-card">
<div class="product-img-wrapper">
<!-- 替换为您实际的 T3 产品图 -->
<img src="https://placehold.co/180x130/png?text=T3" alt="Model: T3">
</div>
<div class="product-name">Model: T3</div>
</a>
<!-- 卡片: T2 -->
<a href="/model-t2" class="product-card">
<div class="product-img-wrapper">
<!-- 替换为您实际的 T2 产品图 -->
<img src="https://placehold.co/180x130/png?text=T2" alt="Model: T2">
</div>
<div class="product-name">Model: T2</div>
</a>
<!-- 卡片: B11 -->
<a href="/model-b11" class="product-card">
<div class="product-img-wrapper">
<!-- 替换为您实际的 B11 产品图 -->
<img src="https://placehold.co/180x130/png?text=B11" alt="Model: B11">
</div>
<div class="product-name">Model: B11<span>Night Light</span></div>
</a>
</div>
</section>
<!-- 模块 2: 常见帮助选项 -->
<section>
<h2>What do you need help with?</h2>
<div class="help-grid">
<!-- 快速设置 -->
<a href="/quick-setup" class="help-card">
<svg class="help-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- 齿轮 + 闪电 SVG -->
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
<polygon points="13 10 9 13 12 13 11 16 15 13 12 13" fill="currentColor"/>
</svg>
<div class="help-title">Quick Setup</div>
</a>
<!-- 门铃不工作 -->
<a href="/chime-not-working" class="help-card">
<svg class="help-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- 圆圈 + 问号 SVG -->
<circle cx="12" cy="12" r="10"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
<div class="help-title">Chime NOT Working</div>
</a>
<!-- 故障排除 -->
<a href="/troubleshooting" class="help-card">
<svg class="help-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- 八角形 + 感叹号 SVG -->
<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
<div class="help-title">Troubleshooting</div>
</a>
</div>
</section>
</div>
</body>
</html>