yvan/pet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
yvan
2025-08-12 20:06:22 +08:00
parent 34988874a0
commit 5877a1ee43
11 changed files with 4904 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/layout8-pet-dashboard.html
+593
View File
@@ -0,0 +1,593 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方案8：宠物仪表盘聚合式</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
max-width: 375px;
margin: 0 auto;
padding: 15px;
}
.header-card {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.header-title {
font-size: 20px;
font-weight: bold;
color: #333;
}
.header-subtitle {
font-size: 14px;
color: #666;
margin-top: 2px;
}
.add-pet-btn {
width: 36px;
height: 36px;
border-radius: 18px;
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
transition: transform 0.2s;
}
.add-pet-btn:hover {
transform: scale(1.1);
}
.pets-overview {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 5px;
}
.pet-mini {
min-width: 80px;
text-align: center;
background: #F8F9FA;
border-radius: 15px;
padding: 12px 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.pet-mini.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: rgba(255,255,255,0.3);
}
.pet-mini-avatar {
width: 40px;
height: 40px;
border-radius: 20px;
background: #FFE0B2;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 auto 8px;
}
.pet-mini.active .pet-mini-avatar {
background: rgba(255,255,255,0.2);
}
.pet-mini-name {
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
}
.pet-mini-status {
font-size: 10px;
opacity: 0.8;
}
.main-stats {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.stats-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 15px;
}
.stat-card {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 15px;
border-radius: 15px;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.stat-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.stat-number {
font-size: 20px;
font-weight: bold;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
opacity: 0.9;
}
.today-focus {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.focus-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.focus-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.focus-item {
background: #F8F9FA;
border-radius: 12px;
padding: 15px;
text-align: center;
border-left: 4px solid #4ECDC4;
}
.focus-item.urgent {
border-left-color: #FF6B6B;
background: #FFF5F5;
}
.focus-item.completed {
border-left-color: #96CEB4;
background: #F0FFF4;
}
.focus-emoji {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.focus-text {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 4px;
}
.focus-desc {
font-size: 12px;
color: #666;
}
.activities-stream {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.stream-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.activity-timeline {
position: relative;
padding-left: 30px;
}
.activity-timeline::before {
content: '';
position: absolute;
left: 12px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #667eea, #764ba2);
}
.activity-item {
position: relative;
margin-bottom: 15px;
background: #F8F9FA;
border-radius: 12px;
padding: 12px;
}
.activity-item::before {
content: '';
position: absolute;
left: -22px;
top: 12px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #667eea;
border: 2px solid white;
}
.activity-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.activity-pet {
width: 24px;
height: 24px;
border-radius: 12px;
background: #FFE0B2;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.activity-text {
font-size: 14px;
color: #333;
flex: 1;
}
.activity-time {
font-size: 11px;
color: #999;
}
.quick-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.quick-btn {
background: rgba(255,255,255,0.95);
border: none;
border-radius: 15px;
padding: 15px 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.quick-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.quick-btn-icon {
font-size: 20px;
margin-bottom: 6px;
display: block;
}
.quick-btn-text {
font-size: 11px;
color: #666;
font-weight: bold;
}
.floating-record {
position: fixed;
bottom: 30px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 30px;
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
color: white;
border: none;
font-size: 24px;
cursor: pointer;
box-shadow: 0 6px 24px rgba(255,107,107,0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.floating-record:hover {
transform: scale(1.1);
}
.health-alerts {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 20px;
margin-bottom: 80px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.alerts-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.alert-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #FFF3E0;
border-radius: 12px;
margin-bottom: 8px;
border-left: 4px solid #FFB74D;
}
.alert-item:last-child {
margin-bottom: 0;
}
.alert-item.urgent {
background: #FFEBEE;
border-left-color: #FF6B6B;
}
.alert-icon {
font-size: 20px;
}
.alert-content {
flex: 1;
}
.alert-text {
font-size: 14px;
color: #333;
margin-bottom: 2px;
}
.alert-time {
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div class="header-card">
<div class="header-top">
<div>
<div class="header-title">🏠 宠物管家</div>
<div class="header-subtitle">3只毛孩子的智能管理</div>
</div>
<button class="add-pet-btn">+</button>
</div>
<div class="pets-overview">
<div class="pet-mini active">
<div class="pet-mini-avatar">🐱</div>
<div class="pet-mini-name">小橘</div>
<div class="pet-mini-status">健康</div>
</div>
<div class="pet-mini">
<div class="pet-mini-avatar">🐶</div>
<div class="pet-mini-name">小白</div>
<div class="pet-mini-status">活跃</div>
</div>
<div class="pet-mini">
<div class="pet-mini-avatar">🐰</div>
<div class="pet-mini-name">小灰</div>
<div class="pet-mini-status">安静</div>
</div>
<div class="pet-mini">
<div class="pet-mini-avatar">➕</div>
<div class="pet-mini-name">添加</div>
<div class="pet-mini-status">新宠物</div>
</div>
</div>
</div>
<div class="main-stats">
<div class="stats-title">📊 家庭数据概览</div>
<div class="stats-grid">
<div class="stat-card">
<span class="stat-icon">📝</span>
<div class="stat-number">190</div>
<div class="stat-label">总记录数</div>
</div>
<div class="stat-card">
<span class="stat-icon">📅</span>
<div class="stat-number">1640</div>
<div class="stat-label">陪伴天数</div>
</div>
<div class="stat-card">
<span class="stat-icon">💚</span>
<div class="stat-number">100%</div>
<div class="stat-label">健康率</div>
</div>
<div class="stat-card">
<span class="stat-icon">🎯</span>
<div class="stat-number">23</div>
<div class="stat-label">本月记录</div>
</div>
</div>
</div>
<div class="today-focus">
<div class="focus-title">🎯 今日重点</div>
<div class="focus-content">
<div class="focus-item completed">
<span class="focus-emoji">🍽️</span>
<div class="focus-text">早餐完成</div>
<div class="focus-desc">3/3只已用餐</div>
</div>
<div class="focus-item">
<span class="focus-emoji">🚶</span>
<div class="focus-text">遛弯计划</div>
<div class="focus-desc">小白待遛弯</div>
</div>
<div class="focus-item urgent">
<span class="focus-emoji">💊</span>
<div class="focus-text">用药提醒</div>
<div class="focus-desc">小橘驱虫药</div>
</div>
<div class="focus-item">
<span class="focus-emoji">🛁</span>
<div class="focus-text">洗澡安排</div>
<div class="focus-desc">本周计划</div>
</div>
</div>
</div>
<div class="quick-actions">
<button class="quick-btn">
<span class="quick-btn-icon">📝</span>
<span class="quick-btn-text">快速记录</span>
</button>
<button class="quick-btn">
<span class="quick-btn-icon">📸</span>
<span class="quick-btn-text">拍照记录</span>
</button>
<button class="quick-btn">
<span class="quick-btn-icon">💬</span>
<span class="quick-btn-text">AI聊天</span>
</button>
<button class="quick-btn">
<span class="quick-btn-icon">📊</span>
<span class="quick-btn-text">数据统计</span>
</button>
</div>
<div class="activities-stream">
<div class="stream-title">⏰ 活动流</div>
<div class="activity-timeline">
<div class="activity-item">
<div class="activity-header">
<div class="activity-pet">🐱</div>
<div class="activity-text">小橘完成早餐</div>
<div class="activity-time">2小时前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-header">
<div class="activity-pet">🐶</div>
<div class="activity-text">小白外出散步</div>
<div class="activity-time">3小时前</div>
</div>
</div>
<div class="activity-item">
<div class="activity-header">
<div class="activity-pet">🐰</div>
<div class="activity-text">小灰吃胡萝卜</div>
<div class="activity-time">4小时前</div>
</div>
</div>
</div>
</div>
<div class="health-alerts">
<div class="alerts-title">🔔 健康提醒</div>
<div class="alert-item urgent">
<div class="alert-icon">💊</div>
<div class="alert-content">
<div class="alert-text">小橘驱虫药到期</div>
<div class="alert-time">明天</div>
</div>
</div>
<div class="alert-item">
<div class="alert-icon">💉</div>
<div class="alert-content">
<div class="alert-text">小白疫苗接种</div>
<div class="alert-time">下周</div>
</div>
</div>
</div>
<button class="floating-record">📝</button>
</body>
</html>