编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗词学习APP - 用户端原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'paper': '#F9F6F2',
                        'cinnabar': '#B22222',
                        'ink': '#333333',
                        'dimmary': '#777777',
                        'azure': '#1A2F48',
                        'jade': '#4A7C59',
                        'amber': '#D4A574',
                    },
                    fontFamily: {
                        'serif': ['Noto Serif SC', 'serif'],
                        'sans': ['Noto Sans SC', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Noto Sans SC', sans-serif; }
        .poem-text { font-family: 'Noto Serif SC', serif; }
        ::-webkit-scrollbar { width: 0; }
        .phone-frame {
            width: 375px;
            height: 812px;
            border-radius: 47px;
            box-shadow: 0 0 0 12px #1a1a1a, 0 0 0 14px #333, 0 25px 50px -12px rgba(0,0,0,0.6);
        }
        .notch {
            width: 150px;
            height: 30px;
            background: #1a1a1a;
            border-radius: 0 0 20px 20px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }
        .dynamic-island {
            width: 120px;
            height: 35px;
            background: #000;
            border-radius: 20px;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }
        .page { display: none; }
        .page.active { display: flex; flex-direction: column; }
        .tab-content { flex: 1; overflow-y: auto; }
        .card-shadow {
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        .glass {
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .poem-highlight {
            background: linear-gradient(to bottom, transparent 60%, rgba(178,34,34,0.15) 60%);
        }
        .fade-in { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .slide-up { animation: slideUp 0.35s ease-out; }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(100%); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen flex items-center justify-center p-4">
    <!-- 手机外框 -->
    <div class="phone-frame bg-paper relative overflow-hidden" id="phone">
        <!-- 灵动岛 -->
        <div class="dynamic-island"></div>
        
        <!-- 状态栏 -->
        <div class="h-11 flex items-end justify-between px-6 pb-1 text-xs">
            <span class="font-semibold">9:41</span>
            <div class="flex items-center gap-1">
                <i class="fas fa-signal text-xs"></i>
                <i class="fas fa-wifi text-xs"></i>
                <i class="fas fa-battery-full text-xs"></i>
            </div>
        </div>
        
        <!-- 首页 -->
        <div id="page-home" class="page active h-full">
            <!-- 顶部导航 -->
            <div class="glass sticky top-0 z-30 px-4 pt-2 pb-3">
                <div class="flex items-center justify-between mb-3">
                    <h1 class="text-xl font-serif font-bold text-cinnabar">诗词学堂</h1>
                    <div class="flex items-center gap-3">
                        <button class="w-9 h-9 rounded-full bg-white/80 flex items-center justify-center card-shadow" onclick="showPage('study')">
                            <i class="fas fa-chart-line text-cinnabar"></i>
                        </button>
                        <button class="w-9 h-9 rounded-full bg-white/80 flex items-center justify-center card-shadow" onclick="showPage('favorites')">
                            <i class="fas fa-bookmark text-cinnabar"></i>
                        </button>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="relative">
                    <input type="text" placeholder="搜索诗词、作者..." class="w-full h-11 pl-11 pr-4 rounded-full bg-white/90 text-sm card-shadow focus:outline-none focus:ring-2 focus:ring-cinnabar/30">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-dimmary"></i>
                </div>
            </div>
            
            <!-- 朝代筛选 -->
            <div class="px-4 py-3 flex gap-2 overflow-x-auto scrollbar-hide">
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-cinnabar text-white whitespace-nowrap">全部</button>
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-white text-ink whitespace-nowrap border border-gray-200">唐</button>
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-white text-ink whitespace-nowrap border border-gray-200">宋</button>
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-white text-ink whitespace-nowrap border border-gray-200">元</button>
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-white text-ink whitespace-nowrap border border-gray-200">明</button>
                <button class="px-4 py-1.5 rounded-full text-sm font-medium bg-white text-ink whitespace-nowrap border border-gray-200">清</button>
            </div>
            
            <!-- 诗词卡片列表 -->
            <div class="tab-content px-4 pb-20 space-y-4 pt-1">
                <!-- 卡片1 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">游园不值</h3>
                            <p class="text-dimmary text-sm mb-1">叶绍翁 · 宋</p>
                            <p class="text-ink/70 text-xs leading-relaxed">应怜屐齿印苍苔，小扣柴扉久不开...</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-amber/20 text-amber text-xs rounded-full">七言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 卡片2 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">送元二使安西</h3>
                            <p class="text-dimmary text-sm mb-1">王维 · 唐</p>
                            <p class="text-ink/70 text-xs leading-relaxed">渭城朝雨浥轻尘，客舍青青柳色新...</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-jade/20 text-jade text-xs rounded-full">七言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 卡片3 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1507400492013-162706c8c05e?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">静夜思</h3>
                            <p class="text-dimmary text-sm mb-1">李白 · 唐</p>
                            <p class="text-ink/70 text-xs leading-relaxed">床前明月光，疑是地上霜...</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-azure/20 text-azure text-xs rounded-full">五言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 卡片4 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">春晓</h3>
                            <p class="text-dimmary text-sm mb-1">孟浩然 · 唐</p>
                            <p class="text-ink/70 text-xs leading-relaxed">春眠不觉晓，处处闻啼鸟...</p>
                        </div>
                    </div>
<div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-jade/20 text-jade text-xs rounded-full">五言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 卡片5 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">题西林壁</h3>
                            <p class="text-dimmary text-sm mb-1">苏轼 · 宋</p>
                            <p class="text-ink/70 text-xs leading-relaxed">横看成岭侧成峰，远近高低各不同...</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-amber/20 text-amber text-xs rounded-full">七言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 卡片6 -->
                <div class="bg-white rounded-2xl p-4 card-shadow cursor-pointer active:scale-[0.98] transition-transform" onclick="showPage('detail')">
                    <div class="flex gap-4">
                        <div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=200&h=200&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 flex flex-col justify-center">
                            <h3 class="font-serif font-bold text-lg text-ink mb-1">悯农</h3>
                            <p class="text-dimmary text-sm mb-1">李绅 · 唐</p>
                            <p class="text-ink/70 text-xs leading-relaxed">锄禾日当午，汗滴禾下土...</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center justify-between">
                        <span class="px-2 py-0.5 bg-jade/20 text-jade text-xs rounded-full">五言绝句</span>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 诗词详情页 -->
        <div id="page-detail" class="page h-full bg-paper">
            <div class="tab-content">
                <!-- 顶部导航栏 -->
                <div class="glass sticky top-0 z-30 px-4 py-3 flex items-center justify-between">
                    <button class="w-10 h-10 rounded-full bg-white/80 flex items-center justify-center card-shadow" onclick="showPage('home')">
                        <i class="fas fa-arrow-left text-ink"></i>
                    </button>
                    <div class="flex items-center gap-3">
                        <button class="w-10 h-10 rounded-full bg-white/80 flex items-center justify-center card-shadow">
                            <i class="fas fa-share-alt text-ink"></i>
                        </button>
                        <button class="w-10 h-10 rounded-full bg-white/80 flex items-center justify-center card-shadow" id="btn-collect">
                            <i class="far fa-bookmark text-ink"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 诗词配图 -->
                <div class="relative h-48 mx-4 rounded-2xl overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 text-white">
                        <h1 class="text-2xl font-serif font-bold mb-1">游园不值</h1>
                        <p class="text-white/80 text-sm">叶绍翁 · 宋代</p>
                    </div>
                </div>
                
                <!-- 诗词正文 -->
                <div class="px-6 py-5">
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="px-3 py-1 bg-amber/20 text-amber text-xs rounded-full font-medium">七言绝句</span>
                            <span class="px-3 py-1 bg-cinnabar/10 text-cinnabar text-xs rounded-full font-medium">必背</span>
                        </div>
                        <div class="poem-text text-xl text-ink leading-loose text-center">
                            <p class="mb-2">应怜屐齿印苍苔，</p>
                            <p class="mb-2">小扣柴扉久不开。</p>
                            <p class="mb-2">春色满园关不住，</p>
                            <p class="mb-2">一枝红杏出墙来。</p>
                        </div>
                    </div>
                    
                    <!-- 音频播放条 -->
                    <div class="bg-white rounded-2xl p-4 card-shadow mb-4">
                        <div class="flex items-center gap-4">
                            <button class="w-12 h-12 rounded-full bg-cinnabar flex items-center justify-center flex-shrink-0" onclick="toggleAudio(this)">
                                <i class="fas fa-play text-white"></i>
                            </button>
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-ink font-medium">诗词朗诵</span>
                                    <span class="text-xs text-dimmary">2:35</span>
                                </div>
                                <div class="h-1 bg-gray-200 rounded-full">
                                    <div class="h-full bg-cinnabar rounded-full w-1/3"></div>
                                </div>
                            </div>
                            <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                <i class="fas fa-music text-dimmary text-sm"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 重点字词 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-book-open text-cinnabar mr-2"></i>
                            重点字词
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start gap-3">
                                <span class="w-6 h-6 bg-cinnabar/10 text-cinnabar rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</span>
                                <div>
                                    <span class="text-ink font-medium">屐齿</span>
                                    <span class="text-dimmary text-sm ml-2">：木鞋底部的齿状突出物</span>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <span class="w-6 h-6 bg-cinnabar/10 text-cinnabar rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</span>
                                <div>
                                    <span class="text-ink font-medium">柴扉</span>
                                    <span class="text-dimmary text-sm ml-2">：用树枝编成的简陋门</span>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <span class="w-6 h-6 bg-cinnabar/10 text-cinnabar rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</span>
                                <div>
                                    <span class="text-ink font-medium">满园</span>
                                    <span class="text-dimmary text-sm ml-2">：整个园子，形容春意盎然</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 诗文翻译 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-language text-cinnabar mr-2"></i>
                            诗文翻译
                        </h3>
                        <p class="text-ink/80 leading-relaxed">
                            也许是担心木屐踩坏他那珍贵的苍苔吧，轻轻地敲那柴门前好久也没有人来开。满园的春色怎么也关不住，一枝粉红色的杏花早就探出墙来了。
                        </p>
                    </div>
                    
                    <!-- 中心思想 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-lightbulb text-cinnabar mr-2"></i>
                            中心思想
                        </h3>
                        <p class="text-ink/80 leading-relaxed">
                            这首诗描写了诗人春日游园时的所见所感，表达了诗人对春天美好景色的喜爱之情，以及对新生事物不可阻挡的哲理思考。
                        </p>
                    </div>
                    
                    <!-- 诗词赏析 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-pen-fancy text-cinnabar mr-2"></i>
                            诗词赏析
                        </h3>
                        <p class="text-ink/80 leading-relaxed">
                            这是一首著名的描写春天景色的七言绝句。前两句写诗人游园不值主人的遗憾，后两句笔锋一转，写春色之美。"春色满园关不住，一枝红杏出墙来"是千古名句，富有哲理：新生的美好事物是任何力量都阻挡不了的。
                        </p>
                    </div>
                    
                    <!-- 作者介绍 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-4">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-user-circle text-cinnabar mr-2"></i>
                            作者介绍
                        </h3>
                        <div class="flex items-start gap-3">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-br from-amber to-cinnabar flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-feather-alt text-white text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-ink">叶绍翁</h4>
                                <p class="text-dimmary text-xs mb-2">宋代诗人</p>
                                <p class="text-ink/80 text-sm leading-relaxed">
                                    字嗣宗，号靖逸，龙泉（今属浙江）人。擅长七言绝句，诗风清丽自然，意境深远。有《靖逸小集》传世。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 名句溯源 -->
                    <div class="bg-white rounded-2xl p-5 card-shadow mb-6">
                        <h3 class="font-bold text-ink mb-3 flex items-center">
                            <i class="fas fa-quote-left text-cinnabar mr-2"></i>
                            名句溯源
                        </h3>
                        <div class="bg-amber/10 rounded-xl p-4 mb-3">
                            <p class="poem-text text-lg text-ink text-center italic">"春色满园关不住，一枝红杏出墙来"</p>
                        </div>
                        <p class="text-ink/80 text-sm leading-relaxed">
                            此句后来成为千古传诵的名句，常用来比喻新生事物总会冲破阻力蓬勃发展，也用来形容春意盎然的景象。
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 底部操作栏 -->
            <div class="absolute bottom-0 left-0 right-0 glass px-4 py-3 border-t border-white/20">
                <div class="flex gap-3">
                    <button class="flex-1 h-12 bg-cinnabar rounded-full text-white font-medium flex items-center justify-center gap-2" onclick="markAsLearned()">
                        <i class="fas fa-check-circle"></i>
                        <span>标记已学</span>
                    </button>
                    <button class="w-12 h-12 bg-cinnabar rounded-full flex items-center justify-center" onclick="showPage('home')">
                        <i class="fas fa-home text-white"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 学习页 -->
        <div id="page-study" class="page h-full bg-paper">
            <div class="tab-content">
                <!-- 顶部导航栏 -->
                <div class="glass sticky top-0 z-30 px-4 py-3 flex items-center justify-between">
                    <button class="w-10 h-10 rounded-full bg-white/80 flex items-center justify-center card-shadow" onclick="showPage('home')">
                        <i class="fas fa-arrow-left text-ink"></i>
                    </button>
                    <h1 class="text-lg font-bold text-ink">学习中心</h1>
                    <div class="w-10"></div>
                </div>
                
                <!-- 学习成就卡片 -->
                <div class="px-4 py-4">
                    <div class="bg-gradient-to-br from-cinnabar to-cinnabar/80 rounded-2xl p-5 card-shadow">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fas fa-trophy text-amber text-xl"></i>
                            <span class="text-white/80 text-sm">学习成就</span>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div class="text-center">
                                <p class="text-3xl font-bold text-white mb-1">28</p>
                                <p class="text-white/70 text-xs">已学诗词</p>
                            </div>
                            <div class="text-center">
                                <p class="text-3xl font-bold text-white mb-1">7</p>
                                <p class="text-white/70 text-xs">连续打卡</p>
                            </div>
                            <div class="text-center">
                                <p class="text-3xl font-bold text-white mb-1">85%</p>
                                <p class="text-white/70 text-xs">掌握程度</p>
                            </div>
                        </div>
                        <div class="mt-4 h-2 bg-white/20 rounded-full">
                            <div class="h-full bg-amber rounded-full" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 学习进度 -->
                <div class="px-4 mb-4">
                    <h3 class="font-bold text-ink mb-3">本周学习进度</h3>
                    <div class="flex justify-between">
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-cinnabar text-white flex items-center justify-center text-sm font-bold mb-1">一</div>
                            <span class="text-xs text-dimmary">已完成</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-cinnabar text-white flex items-center justify-center text-sm font-bold mb-1">二</div>
                            <span class="text-xs text-dimmary">已完成</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-cinnabar text-white flex items-center justify-center text-sm font-bold mb-1">三</div>
                            <span class="text-xs text-dimmary">已完成</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-cinnabar text-white flex items-center justify-center text-sm font-bold mb-1">四</div>
                            <span class="text-xs text-dimmary">已完成</span>
                        </div>
                        <div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-cinnabar text-white flex items-center justify-center text-sm font-bold mb-1">五</div>
                            <span class="text-xs text-dimmary">已完成</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-cinnabar/50 text-white flex items-center justify-center text-sm font-bold mb-1">六</div>
                            <span class="text-xs text-dimmary">今日</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-gray-200 text-dimmary flex items-center justify-center text-sm font-bold mb-1">日</div>
                            <span class="text-xs text-dimmary">待学习</span>
                        </div>
                    </div>
                </div>
                
                <!-- 学习历史 -->
                <div class="px-4 pb-20">
                    <h3 class="font-bold text-ink mb-3">最近学习</h3>
                    <div class="space-y-3">
                        <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                            <div class="w-12 h-12 rounded-xl bg-jade/20 flex items-center justify-center">
                                <i class="fas fa-check-circle text-jade"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-ink">静夜思</h4>
                                <p class="text-dimmary text-xs">已完成 · 昨天 14:30</p>
                            </div>
                            <i class="fas fa-chevron-right text-dimmary"></i>
                        </div>
                        <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                            <div class="w-12 h-12 rounded-xl bg-jade/20 flex items-center justify-center">
                                <i class="fas fa-check-circle text-jade"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-ink">春晓</h4>
                                <p class="text-dimmary text-xs">已完成 · 前天 16:20</p>
                            </div>
                            <i class="fas fa-chevron-right text-dimmary"></i>
                        </div>
                        <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                            <div class="w-12 h-12 rounded-xl bg-cinnabar/20 flex items-center justify-center">
                                <i class="fas fa-clock text-cinnabar"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-ink">送元二使安西</h4>
                                <p class="text-dimmary text-xs">学习中 · 5月23日 10:15</p>
                            </div>
                            <i class="fas fa-chevron-right text-dimmary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 收藏页 -->
        <div id="page-favorites" class="page h-full bg-paper">
            <div class="tab-content">
                <!-- 顶部导航栏 -->
                <div class="glass sticky top-0 z-30 px-4 py-3 flex items-center justify-between">
                    <button class="w-10 h-10 rounded-full bg-white/80 flex items-center justify-center card-shadow" onclick="showPage('home')">
                        <i class="fas fa-arrow-left text-ink"></i>
                    </button>
                    <h1 class="text-lg font-bold text-ink">我的收藏</h1>
                    <div class="w-10"></div>
                </div>
                
                <!-- 筛选排序 -->
                <div class="px-4 py-3 flex items-center justify-between">
                    <span class="text-dimmary text-sm">共 12 首诗词</span>
                    <button class="flex items-center gap-1 text-cinnabar text-sm">
                        <span>按朝代</span>
                        <i class="fas fa-sort-down"></i>
                    </button>
                </div>
                
                <!-- 收藏列表 -->
                <div class="px-4 pb-20 space-y-3">
                    <!-- 收藏项1 -->
                    <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                        <div class="w-14 h-14 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-serif font-bold text-ink mb-0.5">游园不值</h4>
                            <p class="text-dimmary text-xs mb-1">叶绍翁 · 宋</p>
                            <span class="px-2 py-0.5 bg-amber/20 text-amber text-xs rounded-full">七言绝句</span>
                        </div>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                    
                    <!-- 收藏项2 -->
                    <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                        <div class="w-14 h-14 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?w=100&h=100&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-serif font-bold text-ink mb-0.5">送元二使安西</h4>
                            <p class="text-dimmary text-xs mb-1">王维 · 唐</p>
                            <span class="px-2 py-0.5 bg-jade/20 text-jade text-xs rounded-full">七言绝句</span>
                        </div>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                    
                    <!-- 收藏项3 -->
                    <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                        <div class="w-14 h-14 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1507400492013-162706c8c05e?w=100&h=100&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-serif font-bold text-ink mb-0.5">静夜思</h4>
                            <p class="text-dimmary text-xs mb-1">李白 · 唐</p>
                            <span class="px-2 py-0.5 bg-azure/20 text-azure text-xs rounded-full">五言绝句</span>
                        </div>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                    
                    <!-- 收藏项4 -->
                    <div class="bg-white rounded-xl p-4 card-shadow flex items-center gap-3 cursor-pointer" onclick="showPage('detail')">
                        <div class="w-14 h-14 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=100&h=100&fit=crop" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h4 class="font-serif font-bold text-ink mb-0.5">春晓</h4>
                            <p class="text-dimmary text-xs mb-1">孟浩然 · 唐</p>
                            <span class="px-2 py-0.5 bg-jade/20 text-jade text-xs rounded-full">五言绝句</span>
                        </div>
                        <button class="w-8 h-8 rounded-full bg-cinnabar/10 flex items-center justify-center">
                            <i class="fas fa-play text-cinnabar text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部TabBar -->
        <div class="absolute bottom-0 left-0 right-0 glass border-t border-white/20 px-6 py-2 z-40">
            <div class="flex justify-around">
                <button class="flex flex-col items-center py-1 px-4 tab-btn active" data-page="home" onclick="showPage('home')">
                    <i class="fas fa-home text-xl mb-1 text-cinnabar"></i>
                    <span class="text-xs text-cinnabar font-medium">首页</span>
                </button>
                <button class="flex flex-col items-center py-1 px-4 tab-btn" data-page="study" onclick="showPage('study')">
                    <i class="fas fa-book-open text-xl mb-1 text-dimmary"></i>
                    <span class="text-xs text-dimmary">学习</span>
                </button>
                <button class="flex flex-col items-center py-1 px-4 tab-btn" data-page="favorites" onclick="showPage('favorites')">
                    <i class="fas fa-bookmark text-xl mb-1 text-dimmary"></i>
                    <span class="text-xs text-dimmary">收藏</span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- Toast提示 -->
    <div id="toast" class="fixed top-20 left-1/2 -translate-x-1/2 bg-cinnabar text-white px-6 py-3 rounded-full shadow-lg opacity-0 pointer-events-none transition-opacity z-50">
        <span id="toast-text"></span>
    </div>
    
    <script>
        // 页面切换
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            // 显示目标页面
            const targetPage = document.getElementById('page-' + pageId);
            if (targetPage) {
                targetPage.classList.add('active');
                targetPage.classList.add('fade-in');
            }
            
            // 更新TabBar状态
            document.querySelectorAll('.tab-btn').forEach(btn => {
                const isActive = btn.dataset.page === pageId;
                const icon = btn.querySelector('i');
                const text = btn.querySelector('span');
                if (isActive) {
                    icon.classList.remove('text-dimmary');
                    icon.classList.add('text-cinnabar');
                    text.classList.remove('text-dimmary');
                    text.classList.add('text-cinnabar', 'font-medium');
                } else {
                    icon.classList.remove('text-cinnabar');
                    icon.classList.add('text-dimmary');
                    text.classList.remove('text-cinnabar', 'font-medium');
                    text.classList.add('text-dimmary');
                }
            });
        }
        
        // 收藏功能
        document.getElementById('btn-collect').addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                showToast('已添加到收藏');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                showToast('已取消收藏');
            }
        });
        
        // 标记已学
        function markAsLearned() {
            showToast('已标记为已学习');
        }
        
        // 音频播放切换
        function toggleAudio(btn) {
            const icon = btn.querySelector('i');
            if (icon.classList.contains('fa-play')) {
                icon.classList.remove('fa-play');
                icon.classList.add('fa-pause');
            } else {
                icon.classList.remove('fa-pause');
                icon.classList.add('fa-play');
            }
        }
        
        // Toast提示
        function showToast(message) {
            const toast = document.getElementById('toast');
            const toastText = document.getElementById('toast-text');
            toastText.textContent = message;
            toast.classList.remove('opacity-0');
            toast.classList.add('opacity-100');
            setTimeout(() => {
                toast.classList.remove('opacity-100');
                toast.classList.add('opacity-0');
            }, 2000);
        }
    </script>
</body>
</html>