507 lines
17 KiB
HTML
507 lines
17 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>宠物详情 - 游戏化式</title>
|
|
<link rel="stylesheet" href="assets/css/common.css">
|
|
<style>
|
|
/* 游戏化式特有样式 */
|
|
.game-container {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
|
|
animation: twinkle 3s infinite;
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
.game-header {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: var(--spacing-lg);
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.level-badge {
|
|
display: inline-block;
|
|
background: linear-gradient(45deg, #FFD700, #FFA500);
|
|
color: #333;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-md);
|
|
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
|
}
|
|
|
|
.pet-avatar-game {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: var(--radius-round);
|
|
border: 4px solid #FFD700;
|
|
margin: 0 auto var(--spacing-md);
|
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
|
animation: glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
|
|
to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
|
|
}
|
|
|
|
.pet-name-game {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-sm);
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.pet-title {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.exp-bar-container {
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 20px;
|
|
padding: 4px;
|
|
margin: var(--spacing-md) 0;
|
|
}
|
|
|
|
.exp-bar {
|
|
background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
height: 20px;
|
|
border-radius: 16px;
|
|
width: 75%;
|
|
position: relative;
|
|
transition: width 1s ease;
|
|
}
|
|
|
|
.exp-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-md);
|
|
text-align: center;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 32px;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.achievements-section {
|
|
background: rgba(255,255,255,0.95);
|
|
margin: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.achievements-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.achievements-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.achievement-item {
|
|
text-align: center;
|
|
padding: var(--spacing-sm);
|
|
border-radius: var(--radius-md);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.achievement-item.unlocked {
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
|
}
|
|
|
|
.achievement-item.locked {
|
|
background: #F0F0F0;
|
|
color: #999;
|
|
}
|
|
|
|
.achievement-icon {
|
|
font-size: 24px;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.achievement-name {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.daily-tasks {
|
|
background: rgba(255,255,255,0.95);
|
|
margin: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.tasks-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
background: #F8F9FA;
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.task-item.completed {
|
|
background: linear-gradient(135deg, #4CAF50, #8BC34A);
|
|
color: white;
|
|
}
|
|
|
|
.task-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: var(--radius-round);
|
|
border: 2px solid #ddd;
|
|
margin-right: var(--spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.task-item.completed .task-checkbox {
|
|
background: white;
|
|
color: #4CAF50;
|
|
border-color: white;
|
|
}
|
|
|
|
.task-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.task-name {
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.task-reward {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.task-points {
|
|
background: #FFD700;
|
|
color: #333;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.game-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.game-btn {
|
|
background: linear-gradient(135deg, var(--pet-primary), #FF6B6B);
|
|
color: white;
|
|
border: none;
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
box-shadow: 0 4px 15px rgba(255, 138, 128, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.game-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255, 138, 128, 0.4);
|
|
}
|
|
|
|
.game-btn.secondary {
|
|
background: linear-gradient(135deg, var(--pet-accent), #4FC3F7);
|
|
box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);
|
|
}
|
|
|
|
.floating-coins {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
color: #333;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container game-container">
|
|
<div class="game-background"></div>
|
|
|
|
<!-- 游戏头部 -->
|
|
<div class="game-header">
|
|
<div class="level-badge">🏆 Lv.15 宠物大师</div>
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
|
alt="小橘" class="pet-avatar-game">
|
|
<h1 class="pet-name-game">小橘</h1>
|
|
<p class="pet-title">传奇橘猫战士</p>
|
|
|
|
<div class="exp-bar-container">
|
|
<div class="exp-bar">
|
|
<div class="exp-text">EXP: 1250/1500</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 属性面板 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">❤️</div>
|
|
<div class="stat-value">85</div>
|
|
<div class="stat-label">健康值</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">😊</div>
|
|
<div class="stat-value">92</div>
|
|
<div class="stat-label">快乐值</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🍽️</div>
|
|
<div class="stat-value">78</div>
|
|
<div class="stat-label">饱食度</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🏃</div>
|
|
<div class="stat-value">65</div>
|
|
<div class="stat-label">活力值</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成就系统 -->
|
|
<div class="achievements-section">
|
|
<h2 class="achievements-title">🏆 成就收集</h2>
|
|
<div class="achievements-grid">
|
|
<div class="achievement-item unlocked">
|
|
<div class="achievement-icon">🥇</div>
|
|
<div class="achievement-name">初次见面</div>
|
|
</div>
|
|
<div class="achievement-item unlocked">
|
|
<div class="achievement-icon">💉</div>
|
|
<div class="achievement-name">疫苗勇士</div>
|
|
</div>
|
|
<div class="achievement-item unlocked">
|
|
<div class="achievement-icon">🛁</div>
|
|
<div class="achievement-name">洗澡达人</div>
|
|
</div>
|
|
<div class="achievement-item locked">
|
|
<div class="achievement-icon">🎂</div>
|
|
<div class="achievement-name">生日快乐</div>
|
|
</div>
|
|
<div class="achievement-item unlocked">
|
|
<div class="achievement-icon">⚖️</div>
|
|
<div class="achievement-name">体重管家</div>
|
|
</div>
|
|
<div class="achievement-item locked">
|
|
<div class="achievement-icon">🏠</div>
|
|
<div class="achievement-name">一周年</div>
|
|
</div>
|
|
<div class="achievement-item unlocked">
|
|
<div class="achievement-icon">😸</div>
|
|
<div class="achievement-name">搞怪专家</div>
|
|
</div>
|
|
<div class="achievement-item locked">
|
|
<div class="achievement-icon">👑</div>
|
|
<div class="achievement-name">宠物之王</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 每日任务 -->
|
|
<div class="daily-tasks">
|
|
<h2 class="tasks-title">📋 每日任务</h2>
|
|
|
|
<div class="task-item completed">
|
|
<div class="task-checkbox">✓</div>
|
|
<div class="task-content">
|
|
<div class="task-name">记录体重</div>
|
|
<div class="task-reward">奖励: 经验值 +50</div>
|
|
</div>
|
|
<div class="task-points">+50 EXP</div>
|
|
</div>
|
|
|
|
<div class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<div class="task-content">
|
|
<div class="task-name">添加一条记录</div>
|
|
<div class="task-reward">奖励: 金币 +100</div>
|
|
</div>
|
|
<div class="task-points">+100 💰</div>
|
|
</div>
|
|
|
|
<div class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<div class="task-content">
|
|
<div class="task-name">与AI助手聊天</div>
|
|
<div class="task-reward">奖励: 经验值 +30</div>
|
|
</div>
|
|
<div class="task-points">+30 EXP</div>
|
|
</div>
|
|
|
|
<div class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<div class="task-content">
|
|
<div class="task-name">查看健康报告</div>
|
|
<div class="task-reward">奖励: 金币 +50</div>
|
|
</div>
|
|
<div class="task-points">+50 💰</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 游戏操作 -->
|
|
<div class="game-actions">
|
|
<button class="game-btn" onclick="interactions.handleButtonClick('addRecord')">
|
|
📝 记录冒险
|
|
</button>
|
|
<button class="game-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
|
|
💬 召唤助手
|
|
</button>
|
|
<button class="game-btn" onclick="interactions.handleButtonClick('healthChart')">
|
|
📊 查看属性
|
|
</button>
|
|
<button class="game-btn secondary" onclick="interactions.handleButtonClick('timeline')">
|
|
⏰ 冒险日志
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 悬浮金币显示 -->
|
|
<div class="floating-coins">
|
|
💰 2,450
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/common.js"></script>
|
|
<script>
|
|
// 游戏化式特有交互
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 经验条动画
|
|
setTimeout(() => {
|
|
const expBar = document.querySelector('.exp-bar');
|
|
expBar.style.width = '83%'; // 1250/1500
|
|
}, 1000);
|
|
|
|
// 任务点击交互
|
|
const taskItems = document.querySelectorAll('.task-item:not(.completed)');
|
|
taskItems.forEach(task => {
|
|
task.addEventListener('click', function() {
|
|
this.classList.add('completed');
|
|
const checkbox = this.querySelector('.task-checkbox');
|
|
checkbox.textContent = '✓';
|
|
|
|
// 金币动画
|
|
const coins = document.querySelector('.floating-coins');
|
|
const currentCoins = parseInt(coins.textContent.replace(/[^\d]/g, ''));
|
|
const newCoins = currentCoins + 50;
|
|
coins.textContent = `💰 ${newCoins.toLocaleString()}`;
|
|
|
|
// 简单的奖励动画
|
|
coins.style.transform = 'scale(1.2)';
|
|
setTimeout(() => {
|
|
coins.style.transform = 'scale(1)';
|
|
}, 300);
|
|
|
|
interactions.showToast('任务完成！获得奖励！', 'success');
|
|
});
|
|
});
|
|
|
|
// 成就悬停效果
|
|
const achievements = document.querySelectorAll('.achievement-item');
|
|
achievements.forEach(achievement => {
|
|
achievement.addEventListener('mouseenter', function() {
|
|
if (this.classList.contains('unlocked')) {
|
|
this.style.transform = 'scale(1.1)';
|
|
}
|
|
});
|
|
|
|
achievement.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
|
|
console.log('游戏化式原型已加载');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|