1058 lines
46 KiB
HTML
1058 lines
46 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>PetDiary 养宠记录</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&family=Nunito+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #F97316;
|
|
--primary-light: #FB923C;
|
|
--primary-bg: #FFF7ED;
|
|
--primary-soft: #FFEDD5;
|
|
--cta: #2563EB;
|
|
--cta-light: #3B82F6;
|
|
--success: #10B981;
|
|
--success-light: #D1FAE5;
|
|
--warning: #F59E0B;
|
|
--danger: #EF4444;
|
|
--text: #9A3412;
|
|
--text-secondary: #C2410C;
|
|
--text-muted: #9CA3AF;
|
|
--white: #FFFFFF;
|
|
--bg-card: #FFFFFF;
|
|
--border: #FED7AA;
|
|
--tab-bg: #FFFFFF;
|
|
--radius-sm: 12px;
|
|
--radius-md: 18px;
|
|
--radius-lg: 24px;
|
|
--radius-xl: 28px;
|
|
--shadow-clay-outer: 4px 4px 12px rgba(249, 115, 22, 0.10), -2px -2px 8px rgba(255, 255, 255, 0.9);
|
|
--shadow-clay-inner: inset 2px 2px 6px rgba(249, 115, 22, 0.08), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
|
|
--shadow-clay-pressed: inset 3px 3px 8px rgba(249, 115, 22, 0.12), inset -3px -3px 8px rgba(255, 255, 255, 0.7);
|
|
--shadow-card: 0 2px 16px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
|
|
--shadow-float: 0 8px 32px rgba(249, 115, 22, 0.16);
|
|
--font-heading: 'Varela Round', sans-serif;
|
|
--font-body: 'Nunito Sans', sans-serif;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: #F5F0EB;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.phone-frame {
|
|
width: 390px;
|
|
max-width: 100%;
|
|
height: 844px;
|
|
max-height: 95vh;
|
|
background: var(--primary-bg);
|
|
border-radius: 40px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 8px #1a1a1a, 0 0 0 10px #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 28px 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
flex-shrink: 0;
|
|
}
|
|
.status-bar .time { font-family: var(--font-heading); font-size: 13px; }
|
|
.status-icons { display: flex; gap: 6px; align-items: center; }
|
|
.status-icons svg { width: 14px; height: 14px; }
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 20px 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.page-header h1 {
|
|
font-family: var(--font-heading);
|
|
font-size: 22px;
|
|
color: var(--text);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.header-actions { display: flex; gap: 12px; }
|
|
.icon-btn {
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--white);
|
|
border: 2px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-clay-outer);
|
|
}
|
|
.icon-btn:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.icon-btn svg { width: 20px; height: 20px; color: var(--primary); }
|
|
|
|
.page-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 16px 16px;
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.page-content::-webkit-scrollbar { width: 0; }
|
|
|
|
/* Tab Pages */
|
|
.tab-page { display: none; flex-direction: column; gap: 14px; }
|
|
.tab-page.active { display: flex; }
|
|
|
|
/* Pet Card */
|
|
.pet-card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
box-shadow: var(--shadow-clay-outer);
|
|
border: 3px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.pet-card:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.pet-avatar {
|
|
width: 72px; height: 72px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #FFEDD5, #FED7AA);
|
|
border: 3px solid var(--primary-light);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 36px;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-clay-outer);
|
|
}
|
|
.pet-avatar svg { width: 40px; height: 40px; color: var(--primary); }
|
|
.pet-info { flex: 1; }
|
|
.pet-name { font-family: var(--font-heading); font-size: 20px; color: var(--text); }
|
|
.pet-breed { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
|
|
.pet-meta { display: flex; gap: 12px; margin-top: 8px; }
|
|
.pet-meta-item {
|
|
font-size: 12px; color: var(--text-secondary);
|
|
background: var(--primary-soft); padding: 3px 10px; border-radius: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Stats Bento Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.stat-card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
border: 2px solid var(--border);
|
|
box-shadow: var(--shadow-clay-outer);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.stat-card:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.stat-card.full-width { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
|
|
.stat-icon-circle {
|
|
width: 44px; height: 44px;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.stat-icon-circle.orange { background: #FFF7ED; }
|
|
.stat-icon-circle.orange svg { color: var(--primary); }
|
|
.stat-icon-circle.blue { background: #EFF6FF; }
|
|
.stat-icon-circle.blue svg { color: var(--cta); }
|
|
.stat-icon-circle.green { background: #ECFDF5; }
|
|
.stat-icon-circle.green svg { color: var(--success); }
|
|
.stat-icon-circle.purple { background: #F5F3FF; }
|
|
.stat-icon-circle.purple svg { color: #8B5CF6; }
|
|
.stat-icon-circle svg { width: 22px; height: 22px; }
|
|
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.stat-value { font-family: var(--font-heading); font-size: 24px; color: var(--text); }
|
|
.stat-sub { font-size: 11px; color: var(--text-secondary); }
|
|
.stat-progress {
|
|
height: 6px; background: var(--primary-soft); border-radius: 3px;
|
|
margin-top: 4px; overflow: hidden;
|
|
}
|
|
.stat-progress-fill {
|
|
height: 100%; border-radius: 3px;
|
|
transition: width 0.6s ease;
|
|
}
|
|
.stat-progress-fill.orange { background: var(--primary); }
|
|
.stat-progress-fill.blue { background: var(--cta); }
|
|
.stat-progress-fill.green { background: var(--success); }
|
|
|
|
/* Quick Actions */
|
|
.quick-actions {
|
|
display: flex; gap: 10px;
|
|
}
|
|
.quick-action-btn {
|
|
flex: 1;
|
|
background: var(--white);
|
|
border: 2px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 14px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-clay-outer);
|
|
text-decoration: none;
|
|
}
|
|
.quick-action-btn:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.quick-action-btn .qa-icon {
|
|
width: 48px; height: 48px;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: var(--shadow-clay-inner);
|
|
background: var(--primary-soft);
|
|
}
|
|
.quick-action-btn .qa-icon svg { width: 24px; height: 24px; color: var(--primary); }
|
|
.quick-action-btn span { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-heading); }
|
|
|
|
/* Timeline */
|
|
.section-title {
|
|
font-family: var(--font-heading);
|
|
font-size: 17px;
|
|
color: var(--text);
|
|
padding: 0 4px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.section-title .see-all { font-size: 13px; color: var(--primary); cursor: pointer; font-family: var(--font-body); font-weight: 600; }
|
|
.timeline { display: flex; flex-direction: column; gap: 0; }
|
|
.timeline-item {
|
|
display: flex; gap: 14px;
|
|
padding: 14px 0;
|
|
position: relative;
|
|
}
|
|
.timeline-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 19px; top: 48px; bottom: -2px;
|
|
width: 2px;
|
|
background: var(--border);
|
|
}
|
|
.timeline-dot {
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
background: var(--white);
|
|
border: 2px solid var(--border);
|
|
box-shadow: var(--shadow-clay-outer);
|
|
z-index: 1;
|
|
}
|
|
.timeline-dot svg { width: 20px; height: 20px; color: var(--primary); }
|
|
.timeline-content { flex: 1; min-width: 0; }
|
|
.timeline-title { font-size: 14px; font-weight: 700; color: var(--text); }
|
|
.timeline-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
|
.timeline-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
/* Record Card */
|
|
.record-card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
border: 2px solid var(--border);
|
|
box-shadow: var(--shadow-clay-outer);
|
|
display: flex; align-items: center; gap: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.record-card:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.record-emoji {
|
|
width: 44px; height: 44px;
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 22px;
|
|
flex-shrink: 0;
|
|
}
|
|
.rc-icon {
|
|
width: 44px; height: 44px;
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.rc-icon.orange { background: #FFF7ED; }
|
|
.rc-icon.orange svg { color: var(--primary); }
|
|
.rc-icon.blue { background: #EFF6FF; }
|
|
.rc-icon.blue svg { color: var(--cta); }
|
|
.rc-icon.green { background: #ECFDF5; }
|
|
.rc-icon.green svg { color: var(--success); }
|
|
.rc-icon.warn { background: #FFFBEB; }
|
|
.rc-icon.warn svg { color: var(--warning); }
|
|
.rc-icon svg { width: 24px; height: 24px; }
|
|
.record-info { flex: 1; }
|
|
.record-title { font-size: 15px; font-weight: 700; color: var(--text); }
|
|
.record-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
|
.record-value { font-family: var(--font-heading); font-size: 16px; color: var(--primary); font-weight: 700; }
|
|
|
|
/* Health Cards */
|
|
.health-card {
|
|
background: var(--white);
|
|
border-radius: var(--radius-md);
|
|
padding: 18px;
|
|
border: 2px solid var(--border);
|
|
box-shadow: var(--shadow-clay-outer);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.health-card:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.health-card-header {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.health-card-header h3 { font-family: var(--font-heading); font-size: 16px; color: var(--text); }
|
|
.health-chart-placeholder {
|
|
height: 100px;
|
|
background: var(--primary-soft);
|
|
border-radius: var(--radius-sm);
|
|
display: flex; align-items: flex-end; gap: 8px;
|
|
padding: 12px 12px 8px;
|
|
}
|
|
.chart-bar {
|
|
flex: 1;
|
|
border-radius: 8px 8px 0 0;
|
|
transition: height 0.6s ease;
|
|
min-width: 20px;
|
|
position: relative;
|
|
}
|
|
.chart-bar .bar-label {
|
|
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
|
|
font-size: 10px; font-weight: 600; color: var(--text-secondary);
|
|
}
|
|
.chart-bar:nth-child(odd) { background: var(--primary-light); }
|
|
.chart-bar:nth-child(even) { background: var(--primary); }
|
|
|
|
.vaccine-row {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--primary-soft);
|
|
}
|
|
.vaccine-row:last-child { border-bottom: 0; }
|
|
.vaccine-name { font-size: 14px; font-weight: 600; color: var(--text); }
|
|
.vaccine-date { font-size: 12px; color: var(--text-secondary); }
|
|
.badge {
|
|
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
|
|
}
|
|
.badge-done { background: var(--success-light); color: #065F46; }
|
|
.badge-pending { background: #FFFBEB; color: #92400E; }
|
|
|
|
/* Profile */
|
|
.profile-section {
|
|
background: var(--white);
|
|
border-radius: var(--radius-lg);
|
|
border: 2px solid var(--border);
|
|
box-shadow: var(--shadow-clay-outer);
|
|
overflow: hidden;
|
|
}
|
|
.profile-item {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 16px 20px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
border-bottom: 1px solid var(--primary-soft);
|
|
}
|
|
.profile-item:last-child { border-bottom: none; }
|
|
.profile-item:hover { background: #FFFBEB; }
|
|
.profile-item .pi-icon {
|
|
width: 36px; height: 36px;
|
|
border-radius: 10px; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.profile-item .pi-icon svg { width: 20px; height: 20px; color: var(--primary); }
|
|
.profile-item .pi-label { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
|
|
.profile-item .pi-arrow svg { width: 18px; height: 18px; color: var(--text-muted); }
|
|
|
|
/* Bottom Tab Bar */
|
|
.tab-bar {
|
|
display: flex;
|
|
background: var(--tab-bg);
|
|
border-top: 2px solid var(--border);
|
|
padding: 6px 12px 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 0;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
}
|
|
.tab-item.active { border-color: var(--primary-soft); background: var(--primary-soft); }
|
|
.tab-item.active .tab-label { color: var(--primary); }
|
|
.tab-item.active svg { color: var(--primary); }
|
|
.tab-item svg { width: 24px; height: 24px; color: var(--text-muted); transition: color 0.2s; }
|
|
.tab-label { font-size: 11px; font-weight: 600; color: var(--text-muted); transition: color 0.2s; }
|
|
|
|
/* FAB */
|
|
.fab {
|
|
position: absolute;
|
|
bottom: 90px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 52px; height: 52px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
border: 3px solid var(--border);
|
|
box-shadow: var(--shadow-float);
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.fab:hover { background: var(--primary-light); transform: translateX(-50%) scale(1.05); }
|
|
.fab svg { width: 26px; height: 26px; color: white; }
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
|
|
background: var(--text); color: white;
|
|
padding: 10px 24px; border-radius: 50px;
|
|
font-size: 14px; font-weight: 600;
|
|
opacity: 0; pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 100;
|
|
white-space: nowrap;
|
|
}
|
|
.toast.show { opacity: 1; }
|
|
|
|
/* Modal Overlay */
|
|
.modal-overlay {
|
|
position: absolute; inset: 0;
|
|
background: rgba(0,0,0,0.3);
|
|
display: flex; align-items: flex-end; justify-content: center;
|
|
opacity: 0; pointer-events: none;
|
|
transition: opacity 0.25s ease;
|
|
z-index: 50;
|
|
}
|
|
.modal-overlay.show { opacity: 1; pointer-events: auto; }
|
|
.modal-sheet {
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
padding: 24px 20px 32px;
|
|
width: 100%;
|
|
max-height: 70%;
|
|
overflow-y: auto;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease;
|
|
border-top: 3px solid var(--border);
|
|
}
|
|
.modal-overlay.show .modal-sheet { transform: translateY(0); }
|
|
.modal-handle {
|
|
width: 40px; height: 5px;
|
|
background: var(--border);
|
|
border-radius: 3px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
.modal-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.modal-action {
|
|
background: var(--primary-soft);
|
|
border: 2px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px 8px;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-clay-outer);
|
|
}
|
|
.modal-action:hover { box-shadow: var(--shadow-clay-pressed); }
|
|
.modal-action .ma-icon {
|
|
width: 44px; height: 44px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: var(--shadow-clay-inner);
|
|
}
|
|
.modal-action .ma-icon svg { width: 22px; height: 22px; color: var(--primary); }
|
|
.modal-action span { font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--font-heading); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
body { padding: 0; }
|
|
.phone-frame { border-radius: 0; height: 100vh; max-height: 100vh; width: 100%; box-shadow: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="phone-frame" id="app">
|
|
|
|
<!-- Status Bar -->
|
|
<div class="status-bar">
|
|
<span class="time">9:41</span>
|
|
<span class="status-icons">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C17.93 4.14 6.07 4.14 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-6-6l2 2c2.76-2.76 7.24-2.76 10 0l2-2C13.27 8.56 6.73 8.56 3 13z"/></svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="1" y="6" width="18" height="12" rx="2"/><rect x="20" y="10" width="3" height="4" rx="1"/></svg>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<h1 id="pageTitle">PetDiary</h1>
|
|
<div class="header-actions">
|
|
<button class="icon-btn" onclick="showToast('通知')" aria-label="通知">
|
|
<svg 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 d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Content -->
|
|
<div class="page-content" id="pageContent">
|
|
<!-- Home Page -->
|
|
<div class="tab-page active" id="page-home">
|
|
<!-- Pet Card -->
|
|
<div class="pet-card" onclick="showToast('查看宠物详情')">
|
|
<div class="pet-avatar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
|
|
</div>
|
|
<div class="pet-info">
|
|
<div class="pet-name">糯糯 Nuònuo</div>
|
|
<div class="pet-breed">金毛寻回犬 · 2岁6个月</div>
|
|
<div class="pet-meta">
|
|
<span class="pet-meta-item">♀ 母</span>
|
|
<span class="pet-meta-item">28.5 kg</span>
|
|
</div>
|
|
</div>
|
|
<svg style="width:20px;height:20px;color:var(--text-muted);flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
</div>
|
|
|
|
<!-- Today Stats -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card" onclick="showToast('喂食详情')">
|
|
<div class="stat-icon-circle orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
</div>
|
|
<div class="stat-label">今日喂食</div>
|
|
<div class="stat-value">2/3 餐</div>
|
|
<div class="stat-progress"><div class="stat-progress-fill orange" style="width:66%"></div></div>
|
|
</div>
|
|
<div class="stat-card" onclick="showToast('饮水详情')">
|
|
<div class="stat-icon-circle blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
|
|
</div>
|
|
<div class="stat-label">今日饮水</div>
|
|
<div class="stat-value">650 ml</div>
|
|
<div class="stat-sub">目标 800ml</div>
|
|
</div>
|
|
<div class="stat-card" onclick="showToast('遛弯详情')">
|
|
<div class="stat-icon-circle green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0Z"/><circle cx="12" cy="8" r="2"/></svg>
|
|
</div>
|
|
<div class="stat-label">今日运动</div>
|
|
<div class="stat-value">1.8 km</div>
|
|
<div class="stat-sub">时长 32分钟</div>
|
|
</div>
|
|
<div class="stat-card" onclick="showToast('体重趋势')">
|
|
<div class="stat-icon-circle purple">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
|
|
</div>
|
|
<div class="stat-label">最新体重</div>
|
|
<div class="stat-value">28.5 kg</div>
|
|
<div class="stat-sub">较上月 +0.3 kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="section-title">
|
|
<span>快捷记录</span>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<button class="quick-action-btn" onclick="openQuickAdd()">
|
|
<div class="qa-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
</div>
|
|
<span>喂食</span>
|
|
</button>
|
|
<button class="quick-action-btn" onclick="openQuickAdd()">
|
|
<div class="qa-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H20a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/><path d="M12 7v4"/><circle cx="8" cy="15" r="1"/><circle cx="16" cy="15" r="1"/><path d="M4 15s-1-1-1-2 1-4 9-4 9 3 9 4-1 2-1 2"/><line x1="9" y1="19" x2="15" y2="19"/></svg>
|
|
</div>
|
|
<span>遛弯</span>
|
|
</button>
|
|
<button class="quick-action-btn" onclick="openQuickAdd()">
|
|
<div class="qa-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="12" cy="8" r="1"/><circle cx="12" cy="16" r="1"/></svg>
|
|
</div>
|
|
<span>体重</span>
|
|
</button>
|
|
<button class="quick-action-btn" onclick="openQuickAdd()">
|
|
<div class="qa-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2h8l4 10H4L8 2Z"/><path d="M12 12v6"/><path d="M8 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H8Z"/></svg>
|
|
</div>
|
|
<span>更多</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Today Timeline -->
|
|
<div class="section-title">
|
|
<span>今日动态</span>
|
|
<span class="see-all">查看全部</span>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">早晨遛弯</div>
|
|
<div class="timeline-desc">散步 1.8km · 32分钟 · 排便正常</div>
|
|
<div class="timeline-time">07:30</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/></svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">早餐喂食</div>
|
|
<div class="timeline-desc">皇家金毛成犬粮 · 250g · 食欲良好</div>
|
|
<div class="timeline-time">08:00</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">午后玩耍</div>
|
|
<div class="timeline-desc">公园社交 · 遇到新朋友 · 心情愉悦</div>
|
|
<div class="timeline-time">14:20</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><polyline points="12 5 19 12 12 19"/></svg>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">晚餐喂食</div>
|
|
<div class="timeline-desc">皇家金毛成犬粮 · 250g · 已吃完</div>
|
|
<div class="timeline-time">18:00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height:20px"></div>
|
|
</div>
|
|
|
|
<!-- Records Page -->
|
|
<div class="tab-page" id="page-records">
|
|
<div class="section-title"><span>记录筛选</span></div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
<span style="background:var(--primary);color:white;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer">全部</span>
|
|
<span style="background:var(--primary-soft);color:var(--text);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer">喂食</span>
|
|
<span style="background:var(--primary-soft);color:var(--text);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer">遛弯</span>
|
|
<span style="background:var(--primary-soft);color:var(--text);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer">健康</span>
|
|
<span style="background:var(--primary-soft);color:var(--text);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer">玩耍</span>
|
|
</div>
|
|
|
|
<div class="section-title" style="margin-top:4px"><span>7月7日 星期一</span></div>
|
|
<div class="record-card">
|
|
<div class="rc-icon orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
</div>
|
|
<div class="record-info">
|
|
<div class="record-title">早餐喂食</div>
|
|
<div class="record-meta">08:00 · 食欲良好</div>
|
|
</div>
|
|
<div class="record-value">250g</div>
|
|
</div>
|
|
<div class="record-card" style="margin-top:10px">
|
|
<div class="rc-icon blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0Z"/><circle cx="12" cy="8" r="2"/></svg>
|
|
</div>
|
|
<div class="record-info">
|
|
<div class="record-title">早晨遛弯</div>
|
|
<div class="record-meta">07:30 · 排便正常</div>
|
|
</div>
|
|
<div class="record-value">1.8km</div>
|
|
</div>
|
|
<div class="record-card" style="margin-top:10px">
|
|
<div class="rc-icon green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
|
|
</div>
|
|
<div class="record-info">
|
|
<div class="record-title">称重记录</div>
|
|
<div class="record-meta">09:00 · 诊所测量</div>
|
|
</div>
|
|
<div class="record-value">28.5kg</div>
|
|
</div>
|
|
|
|
<div class="section-title" style="margin-top:10px"><span>7月6日 星期日</span></div>
|
|
<div class="record-card">
|
|
<div class="rc-icon warn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/></svg>
|
|
</div>
|
|
<div class="record-info">
|
|
<div class="record-title">洗澡美容</div>
|
|
<div class="record-meta">14:00 · 宠物店 · 剪指甲+清洁耳朵</div>
|
|
</div>
|
|
<div class="record-value">全套</div>
|
|
</div>
|
|
<div class="record-card" style="margin-top:10px">
|
|
<div class="rc-icon orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/></svg>
|
|
</div>
|
|
<div class="record-info">
|
|
<div class="record-title">午餐+晚餐</div>
|
|
<div class="record-meta">12:00 / 18:00 · 食欲良好</div>
|
|
</div>
|
|
<div class="record-value">500g</div>
|
|
</div>
|
|
|
|
<div style="height:20px"></div>
|
|
</div>
|
|
|
|
<!-- Health Page -->
|
|
<div class="tab-page" id="page-health">
|
|
<!-- Weight Chart -->
|
|
<div class="health-card">
|
|
<div class="health-card-header">
|
|
<div class="rc-icon orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
|
|
</div>
|
|
<h3>体重趋势</h3>
|
|
<span style="margin-left:auto;font-size:13px;color:var(--text-muted)">近7天</span>
|
|
</div>
|
|
<div class="health-chart-placeholder">
|
|
<div class="chart-bar" style="height:60%"><span class="bar-label">28.2</span></div>
|
|
<div class="chart-bar" style="height:68%"><span class="bar-label">28.3</span></div>
|
|
<div class="chart-bar" style="height:55%"><span class="bar-label">28.1</span></div>
|
|
<div class="chart-bar" style="height:72%"><span class="bar-label">28.4</span></div>
|
|
<div class="chart-bar" style="height:80%"><span class="bar-label">28.5</span></div>
|
|
<div class="chart-bar" style="height:75%"><span class="bar-label">28.4</span></div>
|
|
<div class="chart-bar" style="height:82%"><span class="bar-label">28.5</span></div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:4px">
|
|
<span>7/1</span><span>7/2</span><span>7/3</span><span>7/4</span><span>7/5</span><span>7/6</span><span>7/7</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health Stats -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card" onclick="showToast('饮食详情')">
|
|
<div class="stat-icon-circle orange">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/></svg>
|
|
</div>
|
|
<div class="stat-label">日均喂食量</div>
|
|
<div class="stat-value">500g</div>
|
|
<div class="stat-sub">稳定</div>
|
|
</div>
|
|
<div class="stat-card" onclick="showToast('运动详情')">
|
|
<div class="stat-icon-circle blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0Z"/><circle cx="12" cy="8" r="2"/></svg>
|
|
</div>
|
|
<div class="stat-label">周运动量</div>
|
|
<div class="stat-value">12.6km</div>
|
|
<div class="stat-sub">达标</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vaccination -->
|
|
<div class="health-card">
|
|
<div class="health-card-header">
|
|
<div class="rc-icon blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
|
|
</div>
|
|
<h3>疫苗记录</h3>
|
|
</div>
|
|
<div class="vaccine-row">
|
|
<div>
|
|
<div class="vaccine-name">狂犬病疫苗</div>
|
|
<div class="vaccine-date">接种日期 2026-03-15</div>
|
|
</div>
|
|
<span class="badge badge-done">已完成</span>
|
|
</div>
|
|
<div class="vaccine-row">
|
|
<div>
|
|
<div class="vaccine-name">犬六联疫苗</div>
|
|
<div class="vaccine-date">接种日期 2026-01-20</div>
|
|
</div>
|
|
<span class="badge badge-done">已完成</span>
|
|
</div>
|
|
<div class="vaccine-row">
|
|
<div>
|
|
<div class="vaccine-name">体内驱虫</div>
|
|
<div class="vaccine-date">下次 2026-08-01</div>
|
|
</div>
|
|
<span class="badge badge-pending">待接种</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vet Visits -->
|
|
<div class="health-card">
|
|
<div class="health-card-header">
|
|
<div class="rc-icon green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
|
</div>
|
|
<h3>就诊记录</h3>
|
|
</div>
|
|
<div class="vaccine-row">
|
|
<div>
|
|
<div class="vaccine-name">年度体检</div>
|
|
<div class="vaccine-date">2026-05-10 · 爱宠动物医院</div>
|
|
</div>
|
|
<span class="badge badge-done">正常</span>
|
|
</div>
|
|
<div class="vaccine-row">
|
|
<div>
|
|
<div class="vaccine-name">皮肤检查</div>
|
|
<div class="vaccine-date">2026-02-18 · 爱宠动物医院</div>
|
|
</div>
|
|
<span class="badge badge-done">已康复</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height:20px"></div>
|
|
</div>
|
|
|
|
<!-- Profile Page -->
|
|
<div class="tab-page" id="page-profile">
|
|
<!-- User & Pet Info -->
|
|
<div class="pet-card" style="flex-direction:column;align-items:flex-start;gap:12px">
|
|
<div style="display:flex;align-items:center;gap:16px;width:100%">
|
|
<div class="pet-avatar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg>
|
|
</div>
|
|
<div class="pet-info">
|
|
<div class="pet-name">糯糯 Nuònuo</div>
|
|
<div class="pet-breed">金毛寻回犬 Golden Retriever</div>
|
|
<div class="pet-meta" style="margin-top:6px">
|
|
<span class="pet-meta-item">♀ 母</span>
|
|
<span class="pet-meta-item">2岁6个月</span>
|
|
<span class="pet-meta-item">28.5kg</span>
|
|
</div>
|
|
</div>
|
|
<svg style="width:20px;height:20px;color:var(--text-muted);flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
</div>
|
|
<div style="font-size:13px;color:var(--text-secondary);line-height:1.6">
|
|
生日 2024-01-15 · 已陪伴 908 天 · 芯片号 900118000012345
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Pet -->
|
|
<div class="profile-section">
|
|
<div class="profile-item" onclick="showToast('添加新宠物')">
|
|
<div class="pi-icon" style="background:var(--primary-soft)">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
</div>
|
|
<span class="pi-label">添加新宠物</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div class="profile-section">
|
|
<div class="profile-item" onclick="showToast('提醒设置')">
|
|
<div class="pi-icon" style="background:#EFF6FF">
|
|
<svg 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 d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
</div>
|
|
<span class="pi-label">提醒设置</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
<div class="profile-item" onclick="showToast('数据导出')">
|
|
<div class="pi-icon" style="background:#ECFDF5">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
</div>
|
|
<span class="pi-label">数据导出</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
<div class="profile-item" onclick="showToast('家庭成员')">
|
|
<div class="pi-icon" style="background:#F5F3FF">
|
|
<svg 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"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<span class="pi-label">家庭成员共享</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings 2 -->
|
|
<div class="profile-section">
|
|
<div class="profile-item" onclick="showToast('关于我们')">
|
|
<div class="pi-icon" style="background:var(--primary-soft)">
|
|
<svg 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"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
|
</div>
|
|
<span class="pi-label">关于 PetDiary</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
<div class="profile-item" onclick="showToast('意见反馈')">
|
|
<div class="pi-icon" style="background:#FFFBEB">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
</div>
|
|
<span class="pi-label">意见反馈</span>
|
|
<span class="pi-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align:center;padding:20px;font-size:12px;color:var(--text-muted)">
|
|
PetDiary v1.0.0 · 养宠记录好帮手
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAB -->
|
|
<button class="fab" onclick="openQuickAdd()" aria-label="快速记录">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
</button>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<!-- Quick Add Modal -->
|
|
<div class="modal-overlay" id="modalOverlay" onclick="closeQuickAdd(event)">
|
|
<div class="modal-sheet" onclick="event.stopPropagation()">
|
|
<div class="modal-handle"></div>
|
|
<div style="font-family:var(--font-heading);font-size:18px;color:var(--text);text-align:center;margin-bottom:20px">快速记录</div>
|
|
<div class="modal-grid">
|
|
<div class="modal-action" onclick="quickRecord('喂食')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
|
</div>
|
|
<span>喂食</span>
|
|
</div>
|
|
<div class="modal-action" onclick="quickRecord('遛弯')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0Z"/><circle cx="12" cy="8" r="2"/></svg>
|
|
</div>
|
|
<span>遛弯</span>
|
|
</div>
|
|
<div class="modal-action" onclick="quickRecord('称重')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/></svg>
|
|
</div>
|
|
<span>称重</span>
|
|
</div>
|
|
<div class="modal-action" onclick="quickRecord('饮水')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
|
|
</div>
|
|
<span>饮水</span>
|
|
</div>
|
|
<div class="modal-action" onclick="quickRecord('美容')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H20a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
|
|
</div>
|
|
<span>美容</span>
|
|
</div>
|
|
<div class="modal-action" onclick="quickRecord('就医')">
|
|
<div class="ma-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
|
</div>
|
|
<span>就医</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Tab Bar -->
|
|
<div class="tab-bar">
|
|
<div class="tab-item active" data-tab="home" onclick="switchTab('home')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
<span class="tab-label">首页</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="records" onclick="switchTab('records')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
<span class="tab-label">记录</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="health" onclick="switchTab('health')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
<span class="tab-label">健康</span>
|
|
</div>
|
|
<div class="tab-item" data-tab="profile" onclick="switchTab('profile')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
<span class="tab-label">我的</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const pageTitles = {
|
|
home: 'PetDiary',
|
|
records: '养宠记录',
|
|
health: '健康管理',
|
|
profile: '我的'
|
|
};
|
|
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('.tab-page').forEach(p => p.classList.remove('active'));
|
|
document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
|
|
|
|
const page = document.getElementById('page-' + tab);
|
|
const tabBtn = document.querySelector('[data-tab="' + tab + '"]');
|
|
if (page) page.classList.add('active');
|
|
if (tabBtn) tabBtn.classList.add('active');
|
|
|
|
document.getElementById('pageTitle').textContent = pageTitles[tab] || 'PetDiary';
|
|
document.getElementById('pageContent').scrollTop = 0;
|
|
}
|
|
|
|
function showToast(msg) {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = msg;
|
|
toast.classList.add('show');
|
|
clearTimeout(toast._timeout);
|
|
toast._timeout = setTimeout(() => toast.classList.remove('show'), 1600);
|
|
}
|
|
|
|
function openQuickAdd() {
|
|
document.getElementById('modalOverlay').classList.add('show');
|
|
}
|
|
|
|
function closeQuickAdd(e) {
|
|
if (e && e.target !== e.currentTarget) return;
|
|
document.getElementById('modalOverlay').classList.remove('show');
|
|
}
|
|
|
|
function quickRecord(type) {
|
|
closeQuickAdd();
|
|
showToast(type + '记录已添加');
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
document.getElementById('modalOverlay').classList.remove('show');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|