1003 lines
34 KiB
HTML
1003 lines
34 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Chookoo App - 智能宠物健康管理</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #f5f7fb;
|
|
--text: #0f172a;
|
|
--muted: #5b6472;
|
|
--primary: #2f6bff;
|
|
--primary-weak: #e8f1ff;
|
|
--card: #ffffff;
|
|
--line: #e5e7eb;
|
|
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
|
--gradient: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-width: 320px;
|
|
line-height: 1.6;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
.container {
|
|
width: min(1200px, 100%);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
/* 导航栏 */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
.navbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.navbar-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.navbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-logo img {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
.navbar-link {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-link:hover {
|
|
color: var(--text);
|
|
background: rgba(0, 0, 0, 0.04);
|
|
text-decoration: none;
|
|
}
|
|
.navbar-link.active {
|
|
color: var(--primary);
|
|
background: var(--primary-weak);
|
|
}
|
|
.navbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.navbar-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-btn:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
color: var(--text);
|
|
}
|
|
.navbar-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.navbar-cta {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
|
}
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.navbar-menu {
|
|
display: none;
|
|
}
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
}
|
|
.navbar-cta {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Hero Section */
|
|
.app-hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
|
padding: 120px 24px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.app-hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(47, 107, 255, 0.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 50% at 70% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
.app-hero-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 80px;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero-text {
|
|
flex: 1;
|
|
}
|
|
.app-hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(47, 107, 255, 0.15);
|
|
border: 1px solid rgba(47, 107, 255, 0.3);
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
color: #60a5fa;
|
|
margin-bottom: 24px;
|
|
}
|
|
.app-hero-badge svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #60a5fa;
|
|
}
|
|
.app-hero h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1.1;
|
|
margin: 0 0 24px;
|
|
letter-spacing: -0.02em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero h1 span {
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.app-hero-desc {
|
|
font-size: 18px;
|
|
color: #94a3b8;
|
|
line-height: 1.8;
|
|
margin-bottom: 40px;
|
|
max-width: 520px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero-desc strong {
|
|
color: #60a5fa;
|
|
font-weight: 500;
|
|
}
|
|
.app-download-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.download-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 24px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.download-btn:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
.download-btn-android {
|
|
background: linear-gradient(135deg, #3ddc84 0%, #00a86b 100%);
|
|
border-color: transparent;
|
|
}
|
|
.download-btn-android:hover {
|
|
background: linear-gradient(135deg, #34c759 0%, #009f5d 100%);
|
|
}
|
|
.download-btn-android svg {
|
|
color: #fff;
|
|
}
|
|
.download-btn svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.download-btn-text {
|
|
text-align: left;
|
|
}
|
|
.download-btn-text span {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.download-btn-text strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
.app-hero-phone {
|
|
flex: 0 0 320px;
|
|
position: relative;
|
|
}
|
|
.phone-mockup {
|
|
width: 280px;
|
|
height: 560px;
|
|
background: linear-gradient(145deg, #1e293b, #0f172a);
|
|
border-radius: 44px;
|
|
padding: 12px;
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.phone-mockup::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100px;
|
|
height: 28px;
|
|
background: #0f172a;
|
|
border-radius: 20px;
|
|
}
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
|
|
border-radius: 36px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.phone-screen-content {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.phone-screen-content .app-icon {
|
|
width: 72px;
|
|
height: 72px;
|
|
background: linear-gradient(135deg, var(--primary), #06b6d4);
|
|
border-radius: 18px;
|
|
margin: 0 auto 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
box-shadow: 0 10px 30px rgba(47, 107, 255, 0.3);
|
|
}
|
|
.phone-screen-content h3 {
|
|
font-size: 20px;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
font-weight: 600;
|
|
}
|
|
.phone-screen-content p {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
@media (max-width: 968px) {
|
|
.app-hero-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.app-hero-text {
|
|
order: 2;
|
|
}
|
|
.app-hero-phone {
|
|
order: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.app-hero h1 {
|
|
font-size: 40px;
|
|
}
|
|
.app-hero-desc {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.app-download-buttons {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
/* Feature Section */
|
|
.feature-section {
|
|
padding: 100px 24px;
|
|
background: var(--bg);
|
|
}
|
|
.feature-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 60px;
|
|
}
|
|
.feature-header .pill {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature-header h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin: 0 0 16px;
|
|
}
|
|
.feature-header p {
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.feature-card {
|
|
display: flex;
|
|
gap: 24px;
|
|
padding: 32px;
|
|
background: var(--card);
|
|
border-radius: 20px;
|
|
border: 1px solid var(--line);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.feature-icon {
|
|
flex: 0 0 64px;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.feature-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.feature-icon.blue {
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: #2563eb;
|
|
}
|
|
.feature-icon.purple {
|
|
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
|
|
color: #7c3aed;
|
|
}
|
|
.feature-icon.pink {
|
|
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
|
|
color: #db2777;
|
|
}
|
|
.feature-icon.green {
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
|
|
color: #059669;
|
|
}
|
|
.feature-content h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin: 0 0 8px;
|
|
}
|
|
.feature-content p {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.feature-card {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.feature-icon {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* Function Section */
|
|
.function-section {
|
|
padding: 100px 24px;
|
|
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
|
|
}
|
|
.function-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 80px;
|
|
max-width: 1100px;
|
|
margin: 0 auto 80px;
|
|
}
|
|
.function-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.function-item:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.function-text {
|
|
flex: 1;
|
|
}
|
|
.function-text .tag {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
background: rgba(47, 107, 255, 0.15);
|
|
color: #60a5fa;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.function-text h3 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 16px;
|
|
}
|
|
.function-text p {
|
|
font-size: 16px;
|
|
color: #94a3b8;
|
|
line-height: 1.7;
|
|
margin: 0 0 24px;
|
|
}
|
|
.function-features {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.function-features span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #cbd5e1;
|
|
}
|
|
.function-features svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--primary);
|
|
}
|
|
.function-image {
|
|
flex: 0 0 400px;
|
|
height: 300px;
|
|
background: linear-gradient(145deg, #1e293b, #334155);
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.function-image::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at center, rgba(47, 107, 255, 0.2) 0%, transparent 70%);
|
|
}
|
|
.function-image svg {
|
|
width: 80px;
|
|
height: 80px;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
@media (max-width: 968px) {
|
|
.function-item,
|
|
.function-item:nth-child(even) {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.function-image {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
height: 240px;
|
|
}
|
|
.function-features {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats-section {
|
|
padding: 80px 24px;
|
|
background: var(--bg);
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 32px;
|
|
background: var(--card);
|
|
border-radius: 20px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.stat-number {
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--primary), #06b6d4);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 8px;
|
|
}
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
padding: 100px 24px;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
text-align: center;
|
|
}
|
|
.cta-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
.cta-content h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 16px;
|
|
}
|
|
.cta-content p {
|
|
font-size: 16px;
|
|
color: #94a3b8;
|
|
margin: 0 0 40px;
|
|
}
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: #0f172a;
|
|
color: #94a3b8;
|
|
padding: 60px 24px 40px;
|
|
}
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
}
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.footer-logo img {
|
|
height: 48px;
|
|
width: auto;
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
}
|
|
.footer-links a {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-links a:hover {
|
|
color: #fff;
|
|
}
|
|
.footer-copyright {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 40px;
|
|
margin-top: 40px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="navbar-inner">
|
|
<a href="index.html" class="navbar-logo">
|
|
<img src="logo.png" alt="Chookoo" />
|
|
</a>
|
|
<div class="navbar-menu">
|
|
<a href="index.html" class="navbar-link">首页</a>
|
|
<a href="products.html" class="navbar-link">产品</a>
|
|
<a href="stories.html" class="navbar-link">故事</a>
|
|
<a href="app.html" class="navbar-link active">App</a>
|
|
<a href="index.html#support" class="navbar-link">关于我们</a>
|
|
</div>
|
|
<div class="navbar-actions">
|
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
</a>
|
|
<a href="index.html#contact" class="navbar-cta">联系我们</a>
|
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="app-hero">
|
|
<div class="app-hero-content">
|
|
<div class="app-hero-text">
|
|
<div class="app-hero-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
全球独家 · 毫米波雷达 + 红外测温
|
|
</div>
|
|
<h1>Chookoo <span>App</span></h1>
|
|
<p class="app-hero-desc">AI宠物健康平台，全球独家搭载<strong>毫米波雷达</strong>与<strong>红外测温</strong>技术。不仅能自动铲屎，更能<strong>24小时无感监测</strong>猫咪心率、呼吸与体温，通过多设备生态联动主动管理宠物健康，是真正能<strong>"救命"</strong>的AI宠物医生。</p>
|
|
<div class="app-download-buttons">
|
|
<a href="#" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>Google Play</strong>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="download-btn download-btn-android">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>安卓直装</span>
|
|
<strong>APK 下载</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="app-hero-phone">
|
|
<div class="phone-mockup">
|
|
<div class="phone-screen">
|
|
<div class="phone-screen-content">
|
|
<div class="app-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
<h3>Chookoo</h3>
|
|
<p>智能宠物健康管理</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="feature-section">
|
|
<div class="container">
|
|
<div class="feature-header">
|
|
<span class="pill">核心技术</span>
|
|
<h2>AI宠物健康平台</h2>
|
|
<p>全球独家搭载毫米波雷达与红外测温，真正能"救命"的AI宠物医生</p>
|
|
</div>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>毫米波雷达监测</h3>
|
|
<p>24小时无感监测宠物心率与呼吸频率，无需佩戴任何设备，实现真正无接触健康追踪</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon purple">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>红外体温检测</h3>
|
|
<p>精准红外测温技术，实时监测宠物体温变化，发烧预警第一时间推送</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon pink">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>AI健康预警</h3>
|
|
<p>基于AI算法分析健康趋势，异常情况即时提醒，在问题发生前主动干预</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>多设备生态联动</h3>
|
|
<p>智能喂食器、猫砂盆、饮水机等设备数据互通，构建完整健康管理生态</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Function Details -->
|
|
<section class="function-section">
|
|
<div class="container">
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">全球独家</span>
|
|
<h3>毫米波雷达 · 心率呼吸监测</h3>
|
|
<p>搭载医疗级毫米波雷达技术，24小时无感监测宠物心率与呼吸频率。无需任何穿戴设备，宠物在猫砂盆内即可完成健康检测，数据实时同步至App。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
无接触监测
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
心率异常预警
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
呼吸频率追踪
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">红外测温</span>
|
|
<h3>体温实时监测 · 发烧即时预警</h3>
|
|
<p>精准红外测温传感器，每次如厕自动测量体温。体温异常立即推送通知，让家长第一时间发现潜在健康问题，真正做到"救命"于未然。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
精准±0.1°C
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
发烧即时提醒
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
体温趋势分析
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">AI分析</span>
|
|
<h3>多设备联动 · 主动健康管理</h3>
|
|
<p>喂食器、猫砂盆、饮水机数据互通，AI综合分析饮食、排泄、活动等多维度数据。识别健康风险趋势，提供个性化建议，主动守护宠物健康。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
多维度数据分析
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
健康风险预警
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
个性化建议
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">智能清洁</span>
|
|
<h3>自动铲屎 · 如厕行为追踪</h3>
|
|
<p>智能猫砂盆自动清理，App实时记录如厕次数、时长、排泄量等数据。通过历史趋势分析，及早发现泌尿系统疾病征兆。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
自动清理
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
如厕行为分析
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
泌尿健康预警
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-number">100万+</div>
|
|
<div class="stat-label">活跃用户</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">10亿+</div>
|
|
<div class="stat-label">健康数据点</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">30+</div>
|
|
<div class="stat-label">覆盖国家</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">4.9</div>
|
|
<div class="stat-label">用户评分</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section">
|
|
<div class="cta-content">
|
|
<h2>立即下载 Chookoo App</h2>
|
|
<p>开启AI宠物健康管理之旅，让毫米波雷达和AI守护每一个毛孩子的生命健康</p>
|
|
<div class="cta-buttons">
|
|
<a href="#" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>Google Play</strong>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="download-btn download-btn-android">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>安卓直装</span>
|
|
<strong>APK 下载</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-logo">
|
|
<img src="白字logo.png" alt="Chookoo" />
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="index.html">首页</a>
|
|
<a href="products.html">产品</a>
|
|
<a href="stories.html">故事</a>
|
|
<a href="index.html#support">关于我们</a>
|
|
</div>
|
|
<div class="footer-copyright">
|
|
© 2025 Chookoo 宠科智能科技. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|