805 lines
33 KiB
HTML
805 lines
33 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>AI讲故事 - 智能童话世界</title>
|
||
<link rel="stylesheet" href="../css/indexHome.css">
|
||
<link rel="stylesheet" href="../css/animate.min.css">
|
||
<link rel="stylesheet" href="../css/font-awesome.min.css">
|
||
<link rel="stylesheet" href="../css/ai_storytelling.css">
|
||
<meta name="description" content="AI智能讲故事平台，为孩子提供寓教于乐的阅读体验">
|
||
<meta name="keywords" content="AI讲故事,儿童教育,童话故事,语音朗读">
|
||
<meta name="theme-color" content="#0284c7">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 主容器 -->
|
||
<div class="ai-storytelling-container">
|
||
<!-- 页面头部 -->
|
||
<header class="story-header">
|
||
<div class="header-content">
|
||
<h1 class="animate__animated animate__fadeInDown">
|
||
<span class="header-icon">📚</span>
|
||
<span class="header-text">AI智能讲故事</span>
|
||
<img src="../asset/logo.png" alt="logo" class="header-logo">
|
||
</h1>
|
||
<p class="animate__animated animate__fadeInUp animate__delay-1s header-subtitle">
|
||
🌟 专为儿童设计的智能故事平台，结合AI技术与教育理念<br>
|
||
🎭 互动式分支剧情，让孩子参与故事创作<br>
|
||
🎵 专业语音朗读，提升语言表达能力<br>
|
||
📖 寓教于乐，在故事中学习成长
|
||
</p>
|
||
|
||
<!-- 搜索和统计信息 -->
|
||
<div class="header-features animate__animated animate__fadeInUp animate__delay-2s">
|
||
<div class="search-container">
|
||
<input type="text" id="storySearch" placeholder="搜索故事标题、内容或关键词..." class="search-input">
|
||
<button class="search-btn" id="searchBtn" title="搜索故事">
|
||
<i class="fa fa-search"></i>
|
||
</button>
|
||
</div>
|
||
<div class="stats-info">
|
||
<span class="stat-item" title="故事总数">
|
||
<i class="fa fa-book"></i>
|
||
<span id="totalStories">5</span> 个故事
|
||
</span>
|
||
<span class="stat-item" title="总阅读时长">
|
||
<i class="fa fa-clock-o"></i>
|
||
<span id="totalDuration">19分钟</span> 阅读时间
|
||
</span>
|
||
<span class="stat-item" title="互动选择总数">
|
||
<i class="fa fa-magic"></i>
|
||
<span id="totalChoices">12</span> 个选择
|
||
</span>
|
||
<span class="stat-item" title="教育价值评分">
|
||
<i class="fa fa-star"></i>
|
||
<span id="educationScore">4.8</span> 教育评分
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 故事库 -->
|
||
<main class="story-library">
|
||
<!-- 筛选和排序 -->
|
||
<div class="library-controls animate__animated animate__fadeInUp animate__delay-3s">
|
||
<div class="library-filter">
|
||
<button class="filter-btn active" data-category="all" title="显示所有故事">
|
||
<i class="fa fa-th-list"></i> 全部故事
|
||
</button>
|
||
<button class="filter-btn" data-category="生活故事" title="日常生活相关故事">
|
||
<i class="fa fa-heart"></i> 生活故事
|
||
<span class="filter-count">3</span>
|
||
</button>
|
||
<button class="filter-btn" data-category="经典故事" title="经典童话和寓言">
|
||
<i class="fa fa-star"></i> 经典故事
|
||
<span class="filter-count">2</span>
|
||
</button>
|
||
<button class="filter-btn" data-category="数学故事" title="数学启蒙故事">
|
||
<i class="fa fa-calculator"></i> 数学故事
|
||
<span class="filter-count">4</span>
|
||
</button>
|
||
<button class="filter-btn" data-category="梦想故事" title="激发想象力的故事">
|
||
<i class="fa fa-magic"></i> 梦想故事
|
||
<span class="filter-count">2</span>
|
||
</button>
|
||
<button class="filter-btn" data-category="成长故事" title="品格教育故事">
|
||
<i class="fa fa-graduation-cap"></i> 成长故事
|
||
<span class="filter-count">3</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="sort-controls">
|
||
<label for="sortBy">排序：</label>
|
||
<select id="sortBy" class="sort-select" title="选择排序方式">
|
||
<option value="default">默认排序</option>
|
||
<option value="difficulty">难度等级</option>
|
||
<option value="duration">阅读时长</option>
|
||
<option value="popularity">受欢迎度</option>
|
||
<option value="education">教育价值</option>
|
||
<option value="interactive">互动程度</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 高级筛选 -->
|
||
<div class="advanced-filters">
|
||
<button class="filter-toggle" id="advancedFilterToggle" title="高级筛选">
|
||
<i class="fa fa-filter"></i> 高级筛选
|
||
</button>
|
||
<div class="advanced-filter-panel" id="advancedFilterPanel" style="display: none;">
|
||
<div class="filter-group">
|
||
<label>年龄推荐：</label>
|
||
<select id="ageFilter" class="filter-select">
|
||
<option value="all">全部年龄</option>
|
||
<option value="3-5">3-5岁</option>
|
||
<option value="6-8">6-8岁</option>
|
||
<option value="9-12">9-12岁</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>阅读时长：</label>
|
||
<select id="durationFilter" class="filter-select">
|
||
<option value="all">全部时长</option>
|
||
<option value="short">5分钟以内</option>
|
||
<option value="medium">5-10分钟</option>
|
||
<option value="long">10分钟以上</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>互动类型：</label>
|
||
<select id="interactionFilter" class="filter-select">
|
||
<option value="all">全部类型</option>
|
||
<option value="choice">选择分支</option>
|
||
<option value="quiz">问答互动</option>
|
||
<option value="creative">创意表达</option>
|
||
</select>
|
||
</div>
|
||
<button class="filter-apply" id="applyFilters">应用筛选</button>
|
||
<button class="filter-reset" id="resetFilters">重置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 故事网格 -->
|
||
<div class="story-grid" id="storyGrid">
|
||
<!-- 故事卡片将通过JavaScript动态生成 -->
|
||
</div>
|
||
|
||
<!-- 故事详情对话框 -->
|
||
<div class="story-detail-modal" id="storyDetailModal" style="display: none;">
|
||
<div class="detail-backdrop" id="detailBackdrop"
|
||
style="position: fixed; inset: 0; background: rgba(0,0,0,.35);"></div>
|
||
<div class="detail-container" role="dialog" aria-modal="true" aria-labelledby="detailTitle"
|
||
style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 960px); background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(2,8,23,.25); overflow: hidden; z-index: 1003;">
|
||
<div class="detail-header"
|
||
style="display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eef2f7;">
|
||
<h3 id="detailTitle" style="margin:0; font-size: 18px; color:#0f172a;">故事详情</h3>
|
||
<button class="detail-close" id="closeDetail" title="关闭" aria-label="关闭"
|
||
style="border:none; background: transparent; font-size: 18px; cursor: pointer; color:#334155;">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="detail-content" style="display:grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px;">
|
||
<div class="detail-cover" style="position: relative;">
|
||
<img id="detailImage" src="" alt="故事封面"
|
||
style="width:100%; height:auto; border-radius: 12px; box-shadow: 0 10px 24px rgba(2,8,23,.08);"
|
||
onerror="this.src='../asset/logo.png'">
|
||
</div>
|
||
<div class="detail-info" style="min-height: 220px;">
|
||
<div class="detail-meta"
|
||
style="display:flex; flex-wrap: wrap; gap:10px; color:#475569; margin-bottom: 8px;">
|
||
<span class="meta-item"><i class="fa fa-book"></i> <span id="detailCategory">类别</span></span>
|
||
<span class="meta-item"><i class="fa fa-signal"></i> 难度 <span id="detailDifficulty">⭐</span></span>
|
||
<span class="meta-item"><i class="fa fa-clock-o"></i> <span id="detailDuration">时长</span></span>
|
||
<span class="meta-item"><i class="fa fa-child"></i> <span id="detailAge">年龄</span></span>
|
||
</div>
|
||
<div class="detail-description" id="detailDescription"
|
||
style="line-height:1.8; color:#334155; margin-bottom: 10px;"></div>
|
||
<div class="detail-actions" style="display:flex; gap:10px; flex-wrap: wrap;">
|
||
<button class="btn-story btn-primary" id="detailStart"><i class="fa fa-play"></i> 开始阅读</button>
|
||
<button class="btn-story btn-secondary" id="detailFavorite"><i class="fa fa-heart-o"></i> 收藏</button>
|
||
<button class="btn-story btn-info" id="detailShare"><i class="fa fa-share"></i> 分享</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 故事预览模态框 -->
|
||
<div class="story-preview-modal" id="storyPreviewModal" style="display: none;">
|
||
<div class="preview-container">
|
||
<div class="preview-header">
|
||
<h3 id="previewTitle">故事预览</h3>
|
||
<button class="preview-close" id="closePreview">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="preview-content">
|
||
<div class="preview-cover">
|
||
<img id="previewImage" src="" alt="故事封面">
|
||
<div class="preview-overlay">
|
||
<button class="btn-story btn-large btn-primary" id="startFromPreview">
|
||
<i class="fa fa-play"></i> 开始阅读
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="preview-info">
|
||
<div class="preview-meta">
|
||
<span class="meta-item">
|
||
<i class="fa fa-clock-o"></i>
|
||
<span id="previewDuration">5分钟</span>
|
||
</span>
|
||
<span class="meta-item">
|
||
<i class="fa fa-star"></i>
|
||
<span id="previewRating">4.8</span>
|
||
</span>
|
||
<span class="meta-item">
|
||
<i class="fa fa-users"></i>
|
||
<span id="previewAge">3-8岁</span>
|
||
</span>
|
||
</div>
|
||
<div class="preview-description" id="previewDescription">
|
||
<!-- 故事描述 -->
|
||
</div>
|
||
<div class="preview-features">
|
||
<h4>故事特色</h4>
|
||
<ul id="previewFeatures">
|
||
<!-- 特色列表 -->
|
||
</ul>
|
||
</div>
|
||
<div class="preview-actions">
|
||
<button class="btn-story btn-medium btn-secondary" id="addToFavorites">
|
||
<i class="fa fa-heart-o"></i> 收藏
|
||
</button>
|
||
<button class="btn-story btn-medium btn-info" id="shareStory">
|
||
<i class="fa fa-share"></i> 分享
|
||
</button>
|
||
<button class="btn-story btn-medium btn-warning" id="readAloud">
|
||
<i class="fa fa-volume-up"></i> 试听
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载指示器 -->
|
||
<div class="loading-indicator" id="loadingIndicator">
|
||
<div class="loading-spinner"></div>
|
||
<span class="loading-text">正在为你准备精彩的故事...</span>
|
||
</div>
|
||
|
||
<!-- 空状态提示 -->
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<div class="empty-icon">📚</div>
|
||
<h3>暂无匹配的故事</h3>
|
||
<p>尝试调整筛选条件或搜索关键词</p>
|
||
<button class="btn-story btn-primary" id="clearFilters">清除筛选</button>
|
||
</div>
|
||
|
||
<!-- 推荐故事区域 -->
|
||
<div class="recommended-stories" id="recommendedStories" style="display: none;">
|
||
<h3 class="recommended-title">
|
||
<i class="fa fa-star"></i> 为你推荐
|
||
</h3>
|
||
<div class="recommended-grid" id="recommendedGrid">
|
||
<!-- 推荐故事卡片 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 阅读统计面板 -->
|
||
<div class="reading-stats-panel" id="readingStatsPanel" style="display: none;">
|
||
<div class="stats-header">
|
||
<h3>📊 阅读统计</h3>
|
||
<button class="stats-close" id="closeStats">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="stats-content">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fa fa-book"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number" id="totalReadStories">0</span>
|
||
<span class="stat-label">已读故事</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fa fa-clock-o"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number" id="totalReadingTime">0</span>
|
||
<span class="stat-label">阅读时长</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fa fa-magic"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number" id="totalChoicesMade">0</span>
|
||
<span class="stat-label">互动选择</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fa fa-trophy"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number" id="achievements">0</span>
|
||
<span class="stat-label">获得成就</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reading-history">
|
||
<h4>最近阅读</h4>
|
||
<div class="history-list" id="historyList">
|
||
<!-- 阅读历史列表 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成就系统 -->
|
||
<div class="achievements-panel" id="achievementsPanel" style="display: none;">
|
||
<div class="achievements-header">
|
||
<h3>🏆 成就系统</h3>
|
||
<button class="achievements-close" id="closeAchievements">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="achievements-content">
|
||
<div class="achievements-grid" id="achievementsGrid">
|
||
<!-- 成就卡片 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 浮动语音控制区域 -->
|
||
<div class="voice-controls" role="toolbar" aria-label="语音播放控制">
|
||
<div class="voice-info">
|
||
<span class="voice-status" id="voiceStatus">语音已开启</span>
|
||
<span class="voice-progress" id="voiceProgress" style="display: none;">
|
||
<span class="progress-text">朗读进度: </span>
|
||
<span class="progress-percent">0%</span>
|
||
</span>
|
||
</div>
|
||
<div class="voice-buttons">
|
||
<button class="voice-btn" id="playPauseBtn" title="播放/暂停" aria-label="播放或暂停语音">
|
||
<i class="fa fa-play"></i>
|
||
</button>
|
||
<button class="voice-btn" id="stopBtn" title="停止" aria-label="停止语音播放">
|
||
<i class="fa fa-stop"></i>
|
||
</button>
|
||
<button class="voice-btn" id="voiceToggleBtn" title="语音开关" aria-label="切换语音功能">
|
||
<i class="fa fa-volume-up"></i>
|
||
</button>
|
||
<button class="voice-btn" id="speedControl" title="语速控制" aria-label="调整语音播放速度">
|
||
<i class="fa fa-tachometer"></i>
|
||
</button>
|
||
<button class="voice-btn" id="repeatBtn" title="重复朗读" aria-label="重复当前内容">
|
||
<i class="fa fa-repeat"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速导航 -->
|
||
<nav class="quick-nav" aria-label="快速导航">
|
||
<a href="#" class="nav-link" id="backToTop" title="返回页面顶部">
|
||
<i class="fa fa-arrow-up"></i>
|
||
<span>返回顶部</span>
|
||
</a>
|
||
<a href="#" class="nav-link" id="toggleFavorites" title="查看收藏的故事">
|
||
<i class="fa fa-heart-o"></i>
|
||
<span>收藏夹</span>
|
||
<span class="nav-badge" id="favoriteCount">0</span>
|
||
</a>
|
||
<a href="#" class="nav-link" id="showHistory" title="查看阅读历史">
|
||
<i class="fa fa-history"></i>
|
||
<span>阅读历史</span>
|
||
</a>
|
||
<a href="#" class="nav-link" id="showStats" title="查看阅读统计">
|
||
<i class="fa fa-bar-chart"></i>
|
||
<span>统计</span>
|
||
</a>
|
||
<a href="#" class="nav-link" id="showAchievements" title="查看成就">
|
||
<i class="fa fa-trophy"></i>
|
||
<span>成就</span>
|
||
<span class="nav-badge" id="achievementCount">0</span>
|
||
</a>
|
||
<a href="#" class="nav-link" id="showSettings" title="设置和偏好">
|
||
<i class="fa fa-cog"></i>
|
||
<span>设置</span>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 故事阅读器模态框 -->
|
||
<div class="story-reader" id="storyReader" role="dialog" aria-labelledby="readerTitle" aria-modal="true">
|
||
<div class="reader-container">
|
||
<header class="reader-header">
|
||
<div class="reader-title-info">
|
||
<h2 class="reader-title" id="readerTitle">故事标题</h2>
|
||
<div class="reader-progress">
|
||
<div class="progress-bar" id="progressBar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<span class="progress-text" id="progressText">1/3</span>
|
||
</div>
|
||
</div>
|
||
<div class="reader-controls">
|
||
<button class="reader-btn" id="bookmarkBtn" title="收藏故事">
|
||
<i class="fa fa-bookmark-o"></i>
|
||
</button>
|
||
<button class="reader-btn" id="shareBtn" title="分享故事">
|
||
<i class="fa fa-share"></i>
|
||
</button>
|
||
<button class="reader-btn" id="closeReader" title="关闭阅读器">
|
||
<i class="fa fa-times"></i> 关闭
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="story-content" id="storyContent" role="main">
|
||
<!-- 故事内容将通过JavaScript动态生成 -->
|
||
|
||
<!-- 剧情选择区域 -->
|
||
<div class="story-choices" id="storyChoices" style="display: none;">
|
||
<div class="choices-header">
|
||
<h3>🎭 互动选择 - 决定故事走向</h3>
|
||
<p>请选择一个选项，这将决定故事的发展方向。你的选择会影响故事的结局！</p>
|
||
<div class="choice-tips">
|
||
<span class="tip-item">
|
||
<i class="fa fa-lightbulb-o"></i> 每个选择都有不同的教育意义
|
||
</span>
|
||
<span class="tip-item">
|
||
<i class="fa fa-magic"></i> 可以随时更改选择
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="choices-container" id="choicesContainer">
|
||
<!-- 选择按钮将通过JavaScript动态生成 -->
|
||
</div>
|
||
<div class="choice-feedback" id="choiceFeedback">
|
||
<!-- 选择反馈将通过JavaScript动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分支剧情内容区域 -->
|
||
<div class="branching-content" id="branchingContent" style="display: none;">
|
||
<div class="branching-header">
|
||
<h4>🌟 你的选择带来了新的故事发展：</h4>
|
||
</div>
|
||
<div class="branch-narrative" id="branchNarrative">
|
||
<!-- 分支剧情内容 -->
|
||
</div>
|
||
<div class="branching-actions">
|
||
<button class="btn-story btn-large btn-continue" id="continueFromBranch">
|
||
<i class="fa fa-arrow-right"></i> 继续故事
|
||
</button>
|
||
<button class="btn-story btn-medium btn-secondary" id="changeChoice" style="display: none;">
|
||
<i class="fa fa-undo"></i> 重新选择
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="control-buttons">
|
||
<button class="btn-story btn-large btn-secondary" id="prevSection" title="上一段">
|
||
<i class="fa fa-chevron-left"></i> 上一段
|
||
</button>
|
||
<button class="btn-story btn-large btn-voice" id="readCurrentSection" title="朗读当前段落">
|
||
<i class="fa fa-volume-up"></i>
|
||
<span class="btn-text">朗读本段</span>
|
||
</button>
|
||
<button class="btn-story btn-large btn-primary" id="nextSection" title="下一段">
|
||
下一段 <i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
<button class="btn-story btn-large btn-info" id="autoPlayBtn" title="自动播放">
|
||
<i class="fa fa-play-circle"></i>
|
||
<span class="btn-text">自动播</span>
|
||
</button>
|
||
<button class="btn-story btn-medium btn-warning" id="bookmarkSection" title="收藏当前段落">
|
||
<i class="fa fa-bookmark-o"></i>
|
||
</button>
|
||
<button class="btn-story btn-medium btn-success" id="shareSection" title="分享当前段落">
|
||
<i class="fa fa-share"></i>
|
||
</button>
|
||
<button class="btn-story btn-medium btn-info" id="rateStory" title="为故事评分">
|
||
<i class="fa fa-star"></i>
|
||
</button>
|
||
<button class="btn-story btn-medium btn-warning" id="addNote" title="添加笔记">
|
||
<i class="fa fa-sticky-note"></i>
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 故事评分模态框 -->
|
||
<div class="rating-modal" id="ratingModal" style="display: none;">
|
||
<div class="rating-container">
|
||
<div class="rating-header">
|
||
<h3>为故事评分</h3>
|
||
<button class="rating-close" id="closeRating">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="rating-content">
|
||
<div class="rating-stars" id="ratingStars">
|
||
<span class="star" data-rating="1">★</span>
|
||
<span class="star" data-rating="2">★</span>
|
||
<span class="star" data-rating="3">★</span>
|
||
<span class="star" data-rating="4">★</span>
|
||
<span class="star" data-rating="5">★</span>
|
||
</div>
|
||
<div class="rating-feedback">
|
||
<textarea id="ratingComment" placeholder="分享你的想法..."></textarea>
|
||
</div>
|
||
<div class="rating-actions">
|
||
<button class="btn-story btn-primary" id="submitRating">提交评分</button>
|
||
<button class="btn-story btn-secondary" id="cancelRating">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 笔记模态框 -->
|
||
<div class="note-modal" id="noteModal" style="display: none;">
|
||
<div class="note-container">
|
||
<div class="note-header">
|
||
<h3>添加笔记</h3>
|
||
<button class="note-close" id="closeNote">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="note-content">
|
||
<div class="note-section">
|
||
<label>笔记标题：</label>
|
||
<input type="text" id="noteTitle" placeholder="为你的笔记起个标题">
|
||
</div>
|
||
<div class="note-section">
|
||
<label>笔记内容：</label>
|
||
<textarea id="noteContent" placeholder="记录你的想法、感受或学到的东西..."></textarea>
|
||
</div>
|
||
<div class="note-actions">
|
||
<button class="btn-story btn-primary" id="saveNote">保存笔记</button>
|
||
<button class="btn-story btn-secondary" id="cancelNote">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 语速控制面板 -->
|
||
<div class="speed-panel" id="speedPanel">
|
||
<div class="speed-content">
|
||
<h3>语速调节</h3>
|
||
<div class="speed-slider">
|
||
<label>语速</label>
|
||
<input type="range" id="speedSlider" min="0.5" max="2" step="0.1" value="0.8">
|
||
<span id="speedValue">0.8x</span>
|
||
</div>
|
||
<div class="speed-presets">
|
||
<button class="speed-preset" data-speed="0.7">慢速</button>
|
||
<button class="speed-preset" data-speed="0.8">正常</button>
|
||
<button class="speed-preset" data-speed="1.2">快速</button>
|
||
</div>
|
||
<button class="speed-close" id="closeSpeedPanel">完成</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 隐藏的音频元素 -->
|
||
<audio id="audioPlayer" preload="auto"></audio>
|
||
|
||
<!-- JavaScript 依赖 -->
|
||
<script src="../js/jquery-3.7.1.min.js"></script>
|
||
<script src="../js/virtualTeacher.js"></script>
|
||
<script src="../js/voiceBroadcast.js"></script>
|
||
<script src="../js/dataManager.js"></script>
|
||
<script src="../js/userManager.js"></script>
|
||
<script src="../js/aiStorytelling.js"></script>
|
||
|
||
<!-- 页面加载完成后的初始化脚本 -->
|
||
<script>
|
||
// 页面加载完成后的处理
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 显示加载动画
|
||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||
if (loadingIndicator) {
|
||
setTimeout(() => {
|
||
loadingIndicator.style.display = 'none';
|
||
}, 2000);
|
||
}
|
||
|
||
// 平滑滚动到顶部
|
||
document.getElementById('backToTop')?.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
// 搜索功能初始化
|
||
const searchInput = document.getElementById('storySearch');
|
||
const searchBtn = document.getElementById('searchBtn');
|
||
|
||
searchInput?.addEventListener('input', function () {
|
||
const query = this.value.trim();
|
||
if (query.length > 0) {
|
||
if (window.aiStorytelling && window.aiStorytelling.searchStories) {
|
||
window.aiStorytelling.searchStories(query);
|
||
}
|
||
} else {
|
||
// 清空搜索时显示所有故事
|
||
if (window.aiStorytelling && window.aiStorytelling.renderStoryGrid) {
|
||
window.aiStorytelling.renderStoryGrid();
|
||
}
|
||
}
|
||
});
|
||
|
||
searchBtn?.addEventListener('click', function () {
|
||
const query = searchInput?.value.trim() || '';
|
||
if (window.aiStorytelling && window.aiStorytelling.searchStories) {
|
||
window.aiStorytelling.searchStories(query);
|
||
}
|
||
});
|
||
|
||
// 高级筛选功能初始化
|
||
const advancedFilterToggle = document.getElementById('advancedFilterToggle');
|
||
const advancedFilterPanel = document.getElementById('advancedFilterPanel');
|
||
|
||
advancedFilterToggle?.addEventListener('click', function () {
|
||
const isVisible = advancedFilterPanel.style.display !== 'none';
|
||
advancedFilterPanel.style.display = isVisible ? 'none' : 'block';
|
||
this.classList.toggle('active', !isVisible);
|
||
});
|
||
|
||
// 应用筛选
|
||
document.getElementById('applyFilters')?.addEventListener('click', function () {
|
||
const ageFilter = document.getElementById('ageFilter').value;
|
||
const durationFilter = document.getElementById('durationFilter').value;
|
||
const interactionFilter = document.getElementById('interactionFilter').value;
|
||
|
||
if (window.aiStorytelling && window.aiStorytelling.applyAdvancedFilters) {
|
||
window.aiStorytelling.applyAdvancedFilters({
|
||
age: ageFilter,
|
||
duration: durationFilter,
|
||
interaction: interactionFilter
|
||
});
|
||
}
|
||
});
|
||
|
||
// 重置筛选
|
||
document.getElementById('resetFilters')?.addEventListener('click', function () {
|
||
document.getElementById('ageFilter').value = 'all';
|
||
document.getElementById('durationFilter').value = 'all';
|
||
document.getElementById('interactionFilter').value = 'all';
|
||
|
||
if (window.aiStorytelling && window.aiStorytelling.renderStoryGrid) {
|
||
window.aiStorytelling.renderStoryGrid();
|
||
}
|
||
});
|
||
|
||
// 清除筛选
|
||
document.getElementById('clearFilters')?.addEventListener('click', function () {
|
||
if (window.aiStorytelling && window.aiStorytelling.renderStoryGrid) {
|
||
window.aiStorytelling.renderStoryGrid();
|
||
}
|
||
});
|
||
|
||
// 故事预览功能
|
||
document.getElementById('closePreview')?.addEventListener('click', function () {
|
||
document.getElementById('storyPreviewModal').style.display = 'none';
|
||
});
|
||
|
||
document.getElementById('startFromPreview')?.addEventListener('click', function () {
|
||
const storyId = this.dataset.storyId;
|
||
if (storyId && window.aiStorytelling && window.aiStorytelling.openReader) {
|
||
document.getElementById('storyPreviewModal').style.display = 'none';
|
||
window.aiStorytelling.openReader(storyId);
|
||
}
|
||
});
|
||
|
||
// 阅读统计功能
|
||
document.getElementById('showStats')?.addEventListener('click', function () {
|
||
document.getElementById('readingStatsPanel').style.display = 'block';
|
||
if (window.aiStorytelling && window.aiStorytelling.updateReadingStats) {
|
||
window.aiStorytelling.updateReadingStats();
|
||
}
|
||
});
|
||
|
||
document.getElementById('closeStats')?.addEventListener('click', function () {
|
||
document.getElementById('readingStatsPanel').style.display = 'none';
|
||
});
|
||
|
||
// 成就系统功能
|
||
document.getElementById('showAchievements')?.addEventListener('click', function () {
|
||
document.getElementById('achievementsPanel').style.display = 'block';
|
||
if (window.aiStorytelling && window.aiStorytelling.updateAchievements) {
|
||
window.aiStorytelling.updateAchievements();
|
||
}
|
||
});
|
||
|
||
document.getElementById('closeAchievements')?.addEventListener('click', function () {
|
||
document.getElementById('achievementsPanel').style.display = 'none';
|
||
});
|
||
|
||
// 故事评分功能
|
||
document.getElementById('rateStory')?.addEventListener('click', function () {
|
||
document.getElementById('ratingModal').style.display = 'block';
|
||
});
|
||
|
||
document.getElementById('closeRating')?.addEventListener('click', function () {
|
||
document.getElementById('ratingModal').style.display = 'none';
|
||
});
|
||
|
||
document.getElementById('cancelRating')?.addEventListener('click', function () {
|
||
document.getElementById('ratingModal').style.display = 'none';
|
||
});
|
||
|
||
// 星级评分交互
|
||
const stars = document.querySelectorAll('.star');
|
||
stars.forEach(star => {
|
||
star.addEventListener('click', function () {
|
||
const rating = parseInt(this.dataset.rating);
|
||
stars.forEach((s, index) => {
|
||
s.classList.toggle('active', index < rating);
|
||
});
|
||
});
|
||
});
|
||
|
||
// 笔记功能
|
||
document.getElementById('addNote')?.addEventListener('click', function () {
|
||
document.getElementById('noteModal').style.display = 'block';
|
||
});
|
||
|
||
document.getElementById('closeNote')?.addEventListener('click', function () {
|
||
document.getElementById('noteModal').style.display = 'none';
|
||
});
|
||
|
||
document.getElementById('cancelNote')?.addEventListener('click', function () {
|
||
document.getElementById('noteModal').style.display = 'none';
|
||
});
|
||
|
||
// 键盘快捷键支持
|
||
document.addEventListener('keydown', function (e) {
|
||
// ESC键关闭模态框
|
||
if (e.key === 'Escape') {
|
||
const modals = document.querySelectorAll('[style*="display: block"]');
|
||
modals.forEach(modal => {
|
||
if (modal.id.includes('Modal') || modal.id.includes('Panel')) {
|
||
modal.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 空格键播放/暂停
|
||
if (e.key === ' ' && !e.target.matches('input, textarea')) {
|
||
e.preventDefault();
|
||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||
if (playPauseBtn) {
|
||
playPauseBtn.click();
|
||
}
|
||
}
|
||
});
|
||
|
||
// 离线支持检测
|
||
window.addEventListener('online', function () {
|
||
console.log('🌐 网络已连接');
|
||
if (window.aiStorytelling && window.aiStorytelling.onNetworkOnline) {
|
||
window.aiStorytelling.onNetworkOnline();
|
||
}
|
||
});
|
||
|
||
window.addEventListener('offline', function () {
|
||
console.log('📴 网络已断开');
|
||
if (window.aiStorytelling && window.aiStorytelling.onNetworkOffline) {
|
||
window.aiStorytelling.onNetworkOffline();
|
||
}
|
||
});
|
||
|
||
// 页面可见性API - 暂停/恢复语音
|
||
document.addEventListener('visibilitychange', function () {
|
||
if (document.hidden) {
|
||
// 页面隐藏时暂停语音
|
||
if (window.virtualTeacher && window.virtualTeacher.pauseSpeaking) {
|
||
window.virtualTeacher.pauseSpeaking();
|
||
}
|
||
} else {
|
||
// 页面显示时恢复语音（如果之前在播放）
|
||
if (window.virtualTeacher && window.virtualTeacher.resumeSpeaking) {
|
||
window.virtualTeacher.resumeSpeaking();
|
||
}
|
||
}
|
||
});
|
||
|
||
console.log('🎨 AI讲故事页面已加载完成');
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |