568 lines
20 KiB
HTML
568 lines
20 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>
|
|
/* 故事书式特有样式 */
|
|
.storybook-container {
|
|
background: linear-gradient(135deg, #FFF8E1, #F3E5AB);
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.storybook-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"><path d="M20,20 Q30,10 40,20 T60,20" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/><circle cx="80" cy="30" r="2" fill="rgba(139,69,19,0.1)"/><path d="M10,80 Q20,70 30,80 T50,80" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/></svg>') repeat;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.book-cover {
|
|
position: relative;
|
|
z-index: 2;
|
|
background: linear-gradient(135deg, #8B4513, #A0522D);
|
|
color: white;
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
border-radius: 0 0 var(--spacing-lg) var(--spacing-lg);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.book-title {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-sm);
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.book-subtitle {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
opacity: 0.9;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.book-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: var(--radius-round);
|
|
border: 4px solid rgba(255,255,255,0.8);
|
|
margin: 0 auto var(--spacing-md);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.book-meta {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.story-page {
|
|
background: #FFFEF7;
|
|
margin: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: 1px solid #E8E2D4;
|
|
}
|
|
|
|
.story-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 20px;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, #E8E2D4, transparent);
|
|
}
|
|
|
|
.page-header {
|
|
background: linear-gradient(90deg, #F5F5DC, #FFFEF7);
|
|
padding: var(--spacing-md);
|
|
border-bottom: 2px solid #E8E2D4;
|
|
position: relative;
|
|
}
|
|
|
|
.page-number {
|
|
position: absolute;
|
|
top: var(--spacing-sm);
|
|
right: var(--spacing-md);
|
|
font-family: 'Georgia', serif;
|
|
font-size: 12px;
|
|
color: #8B7355;
|
|
}
|
|
|
|
.chapter-title {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #5D4E37;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.chapter-subtitle {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
color: #8B7355;
|
|
}
|
|
|
|
.story-content {
|
|
padding: var(--spacing-lg);
|
|
font-family: 'Georgia', serif;
|
|
line-height: 1.8;
|
|
color: #3E2723;
|
|
}
|
|
|
|
.story-paragraph {
|
|
margin-bottom: var(--spacing-md);
|
|
text-indent: 2em;
|
|
text-align: justify;
|
|
}
|
|
|
|
.story-illustration {
|
|
width: 100%;
|
|
height: 150px;
|
|
background: linear-gradient(135deg, #FFE0B2, #FFCC80);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48px;
|
|
margin: var(--spacing-lg) 0;
|
|
border: 2px solid #E8E2D4;
|
|
}
|
|
|
|
.story-quote {
|
|
background: #F5F5DC;
|
|
border-left: 4px solid #8B4513;
|
|
padding: var(--spacing-md);
|
|
margin: var(--spacing-lg) 0;
|
|
font-style: italic;
|
|
position: relative;
|
|
}
|
|
|
|
.story-quote::before {
|
|
content: '"';
|
|
font-size: 48px;
|
|
color: #8B4513;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.timeline-entry {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-date {
|
|
background: #8B4513;
|
|
color: white;
|
|
padding: var(--spacing-sm);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
height: fit-content;
|
|
}
|
|
|
|
.timeline-story {
|
|
flex: 1;
|
|
background: #F9F7F4;
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid #E8E2D4;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-weight: bold;
|
|
color: #5D4E37;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.timeline-text {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.character-profile {
|
|
background: #F5F5DC;
|
|
border: 2px solid #8B4513;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.character-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.character-name {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #5D4E37;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.character-traits {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
justify-content: center;
|
|
}
|
|
|
|
.trait-tag {
|
|
background: #8B4513;
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.page-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
background: #F5F5DC;
|
|
border-top: 1px solid #E8E2D4;
|
|
}
|
|
|
|
.nav-btn {
|
|
background: #8B4513;
|
|
color: white;
|
|
border: none;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
font-family: 'Georgia', serif;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
background: #A0522D;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
background: #CCCCCC;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.page-indicator {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 14px;
|
|
color: #8B7355;
|
|
}
|
|
|
|
.bookmark {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20px;
|
|
width: 30px;
|
|
height: 60px;
|
|
background: #DC143C;
|
|
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 60%, 0 80%);
|
|
z-index: 3;
|
|
}
|
|
|
|
.story-actions {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
background: #F5F5DC;
|
|
}
|
|
|
|
.story-btn {
|
|
flex: 1;
|
|
background: #8B4513;
|
|
color: white;
|
|
border: none;
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
font-family: 'Georgia', serif;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.story-btn:hover {
|
|
background: #A0522D;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.story-btn.secondary {
|
|
background: #5D4E37;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container storybook-container">
|
|
<div class="storybook-background"></div>
|
|
|
|
<!-- 书籍封面 -->
|
|
<div class="book-cover">
|
|
<div class="bookmark"></div>
|
|
<h1 class="book-title">小橘的奇妙冒险</h1>
|
|
<p class="book-subtitle">一只橘猫的温暖故事</p>
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
|
alt="小橘" class="book-avatar">
|
|
<div class="book-meta">
|
|
作者：小橘的铲屎官 | 出版日期：2022年4月20日<br>
|
|
已陪伴 645 个美好日子
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第一章：角色介绍 -->
|
|
<div class="story-page">
|
|
<div class="page-header">
|
|
<div class="page-number">第 1 页</div>
|
|
<h2 class="chapter-title">第一章：主角登场</h2>
|
|
<p class="chapter-subtitle">一只特别的橘猫</p>
|
|
</div>
|
|
|
|
<div class="story-content">
|
|
<div class="character-profile">
|
|
<div class="character-header">
|
|
<div class="character-name">小橘</div>
|
|
<div class="character-traits">
|
|
<span class="trait-tag">活泼</span>
|
|
<span class="trait-tag">粘人</span>
|
|
<span class="trait-tag">贪吃</span>
|
|
<span class="trait-tag">聪明</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="story-paragraph">
|
|
在一个春暖花开的日子里，一只名叫小橘的橘猫来到了这个温暖的家。
|
|
它有着一身金黄色的毛发，就像阳光一样温暖明亮。从那一刻起，
|
|
这个家就充满了欢声笑语。
|
|
</p>
|
|
|
|
<div class="story-illustration">🏠</div>
|
|
|
|
<p class="story-paragraph">
|
|
小橘不仅仅是一只普通的猫咪，它有着独特的性格和无穷的魅力。
|
|
每天早晨，它都会用轻柔的叫声唤醒主人，仿佛在说："新的一天开始了，
|
|
让我们一起创造美好的回忆吧！"
|
|
</p>
|
|
|
|
<div class="story-quote">
|
|
"从小橘来到我们家的那一刻起，我就知道，我们的生活将会变得更加精彩。"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二章：成长记录 -->
|
|
<div class="story-page">
|
|
<div class="page-header">
|
|
<div class="page-number">第 2 页</div>
|
|
<h2 class="chapter-title">第二章：成长足迹</h2>
|
|
<p class="chapter-subtitle">记录每一个珍贵时刻</p>
|
|
</div>
|
|
|
|
<div class="story-content">
|
|
<p class="story-paragraph">
|
|
时光荏苒，小橘在这个家里健康快乐地成长着。每一个重要的时刻，
|
|
都被细心地记录下来，成为这本故事书中最珍贵的篇章。
|
|
</p>
|
|
|
|
<div class="timeline-entry">
|
|
<div class="timeline-date">2024-01-20</div>
|
|
<div class="timeline-story">
|
|
<div class="timeline-title">体重记录</div>
|
|
<div class="timeline-text">
|
|
今天小橘的体重达到了4.2kg，比上周增加了0.1kg。
|
|
看着它健康成长，心中满怀欣慰。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-entry">
|
|
<div class="timeline-date">2024-01-18</div>
|
|
<div class="timeline-story">
|
|
<div class="timeline-title">勇敢的疫苗接种</div>
|
|
<div class="timeline-text">
|
|
小橘今天接种了狂犬疫苗第二针。整个过程中它表现得非常勇敢，
|
|
医生都夸奖它是个好孩子。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-entry">
|
|
<div class="timeline-date">2024-01-17</div>
|
|
<div class="timeline-story">
|
|
<div class="timeline-title">搞怪小能手</div>
|
|
<div class="timeline-text">
|
|
小橘又发挥了它的"破坏天赋"，把我的拖鞋咬得稀烂。
|
|
但看着它那得意的小表情，我竟然舍不得生气。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="story-illustration">📖</div>
|
|
|
|
<p class="story-paragraph">
|
|
每一个平凡的日子，都因为小橘的存在而变得特别。
|
|
它用自己的方式诠释着什么是陪伴，什么是爱。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第三章：健康档案 -->
|
|
<div class="story-page">
|
|
<div class="page-header">
|
|
<div class="page-number">第 3 页</div>
|
|
<h2 class="chapter-title">第三章：健康守护</h2>
|
|
<p class="chapter-subtitle">用心呵护每一天</p>
|
|
</div>
|
|
|
|
<div class="story-content">
|
|
<p class="story-paragraph">
|
|
作为一个负责任的铲屎官，记录小橘的健康状况是每天的重要任务。
|
|
从体重变化到疫苗接种，从日常护理到定期体检，
|
|
每一个细节都关乎着小橘的健康和幸福。
|
|
</p>
|
|
|
|
<div class="story-illustration">📊</div>
|
|
|
|
<div class="story-quote">
|
|
"健康是最大的财富，对于小橘来说也是如此。我愿意用我的细心和爱心，
|
|
守护它的每一天。"
|
|
</div>
|
|
|
|
<p class="story-paragraph">
|
|
目前小橘的健康评分是85分，这是一个令人满意的成绩。
|
|
定期的体检显示它的各项指标都在正常范围内，
|
|
这让我们对未来充满了信心。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="page-navigation">
|
|
<button class="nav-btn" disabled>← 上一页</button>
|
|
<div class="page-indicator">第 3 页 / 共 5 页</div>
|
|
<button class="nav-btn">下一页 →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 故事操作 -->
|
|
<div class="story-actions">
|
|
<button class="story-btn" onclick="interactions.handleButtonClick('addRecord')">
|
|
📝 续写故事
|
|
</button>
|
|
<button class="story-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
|
|
💬 故事助手
|
|
</button>
|
|
<button class="story-btn" onclick="interactions.handleButtonClick('share')">
|
|
📚 分享故事
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/common.js"></script>
|
|
<script>
|
|
// 故事书式特有交互
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let currentPage = 1;
|
|
const totalPages = 5;
|
|
|
|
// 翻页功能
|
|
const prevBtn = document.querySelector('.nav-btn:first-child');
|
|
const nextBtn = document.querySelector('.nav-btn:last-child');
|
|
const pageIndicator = document.querySelector('.page-indicator');
|
|
|
|
function updateNavigation() {
|
|
prevBtn.disabled = currentPage === 1;
|
|
nextBtn.disabled = currentPage === totalPages;
|
|
pageIndicator.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
|
|
}
|
|
|
|
nextBtn.addEventListener('click', function() {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
updateNavigation();
|
|
|
|
// 翻页动画
|
|
const pages = document.querySelectorAll('.story-page');
|
|
pages.forEach(page => {
|
|
page.style.transform = 'rotateY(-10deg)';
|
|
page.style.opacity = '0.8';
|
|
|
|
setTimeout(() => {
|
|
page.style.transform = 'rotateY(0deg)';
|
|
page.style.opacity = '1';
|
|
}, 300);
|
|
});
|
|
|
|
interactions.showToast(`翻到第 ${currentPage} 页`);
|
|
}
|
|
});
|
|
|
|
prevBtn.addEventListener('click', function() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
updateNavigation();
|
|
|
|
// 翻页动画
|
|
const pages = document.querySelectorAll('.story-page');
|
|
pages.forEach(page => {
|
|
page.style.transform = 'rotateY(10deg)';
|
|
page.style.opacity = '0.8';
|
|
|
|
setTimeout(() => {
|
|
page.style.transform = 'rotateY(0deg)';
|
|
page.style.opacity = '1';
|
|
}, 300);
|
|
});
|
|
|
|
interactions.showToast(`翻到第 ${currentPage} 页`);
|
|
}
|
|
});
|
|
|
|
// 页面加载动画
|
|
const storyPages = document.querySelectorAll('.story-page');
|
|
storyPages.forEach((page, index) => {
|
|
page.style.opacity = '0';
|
|
page.style.transform = 'translateY(20px)';
|
|
|
|
setTimeout(() => {
|
|
page.style.transition = 'all 0.6s ease';
|
|
page.style.opacity = '1';
|
|
page.style.transform = 'translateY(0)';
|
|
}, index * 200);
|
|
});
|
|
|
|
// 书签悬停效果
|
|
const bookmark = document.querySelector('.bookmark');
|
|
bookmark.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.1)';
|
|
});
|
|
|
|
bookmark.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
|
|
console.log('故事书式原型已加载');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|