323 lines
16 KiB
HTML
323 lines
16 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="static/css/style.css">
|
||
<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;700&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" href="static/images/favicon.ico" type="image/x-icon">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<div class="logo">
|
||
<i class="fas fa-book-open"></i>
|
||
<h1>古诗词智能解析器</h1>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#home" class="active"><i class="fas fa-home"></i> 首页</a>
|
||
<a href="#search"><i class="fas fa-search"></i> 查询</a>
|
||
<a href="#browse"><i class="fas fa-list"></i> 浏览</a>
|
||
<a href="#ai-analysis"><i class="fas fa-robot"></i> AI解析</a>
|
||
<a href="#learning"><i class="fas fa-graduation-cap"></i> 学习</a>
|
||
<a href="#personal"><i class="fas fa-user"></i> 个人中心</a>
|
||
</div>
|
||
<button class="menu-toggle" id="menuToggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="container">
|
||
<!-- 首页横幅 -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-content">
|
||
<h2>探索千年诗词之美</h2>
|
||
<p>AI智能解析，深度理解古诗词的意境与内涵</p>
|
||
<div class="search-box">
|
||
<input type="text" id="quickSearch" placeholder="输入诗词标题、作者、诗句或关键词...">
|
||
<button id="quickSearchBtn"><i class="fas fa-search"></i> 智能搜索</button>
|
||
</div>
|
||
<div class="quick-filters">
|
||
<span>快速筛选：</span>
|
||
<button class="filter-btn" data-dynasty="唐">唐代</button>
|
||
<button class="filter-btn" data-dynasty="宋">宋代</button>
|
||
<button class="filter-btn" data-type="山水">山水诗</button>
|
||
<button class="filter-btn" data-type="抒情">抒情诗</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 智能查询模块 -->
|
||
<section id="search" class="section">
|
||
<h2><i class="fas fa-search"></i> 智能查询</h2>
|
||
<div class="search-panel">
|
||
<div class="search-form">
|
||
<div class="form-group">
|
||
<label for="poetryTitle"><i class="fas fa-heading"></i> 诗词标题</label>
|
||
<input type="text" id="poetryTitle" placeholder="如：静夜思、春晓...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="author"><i class="fas fa-user"></i> 作者</label>
|
||
<input type="text" id="author" placeholder="如：李白、杜甫...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dynasty"><i class="fas fa-landmark"></i> 朝代</label>
|
||
<select id="dynasty">
|
||
<option value="">全部朝代</option>
|
||
<option value="唐">唐代</option>
|
||
<option value="宋">宋代</option>
|
||
<option value="元">元代</option>
|
||
<option value="明">明代</option>
|
||
<option value="清">清代</option>
|
||
<option value="先秦">先秦</option>
|
||
<option value="汉">汉代</option>
|
||
<option value="魏晋">魏晋南北朝</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="keywords"><i class="fas fa-key"></i> 关键词/诗句</label>
|
||
<input type="text" id="keywords" placeholder="输入诗句片段或关键词...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="poetryType"><i class="fas fa-tags"></i> 题材</label>
|
||
<select id="poetryType">
|
||
<option value="">全部题材</option>
|
||
<option value="山水">山水田园</option>
|
||
<option value="边塞">边塞战争</option>
|
||
<option value="咏物">咏物言志</option>
|
||
<option value="抒情">抒情诗</option>
|
||
<option value="叙事">叙事诗</option>
|
||
<option value="哲理">哲理诗</option>
|
||
<option value="送别">送别诗</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="wordCount"><i class="fas fa-text-height"></i> 字数</label>
|
||
<select id="wordCount">
|
||
<option value="">不限</option>
|
||
<option value="五言">五言</option>
|
||
<option value="七言">七言</option>
|
||
<option value="杂言">杂言</option>
|
||
<option value="词">词</option>
|
||
</select>
|
||
</div>
|
||
<button id="advancedSearchBtn" class="btn-primary">
|
||
<i class="fas fa-search-plus"></i> 高级搜索
|
||
</button>
|
||
<button id="resetSearchBtn" class="btn-secondary">
|
||
<i class="fas fa-redo"></i> 重置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI解析模块 -->
|
||
<section id="ai-analysis" class="section">
|
||
<h2><i class="fas fa-robot"></i> AI深度解析</h2>
|
||
<div class="ai-analysis-panel">
|
||
<div class="analysis-controls">
|
||
<div class="form-group">
|
||
<label for="purpose"><i class="fas fa-bullseye"></i> 查询目的</label>
|
||
<select id="purpose">
|
||
<option value="学习理解">学习理解</option>
|
||
<option value="教学参考">教学参考</option>
|
||
<option value="文学研究">文学研究</option>
|
||
<option value="创作参考">创作参考</option>
|
||
<option value="文化欣赏">文化欣赏</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="usage"><i class="fas fa-scenario"></i> 使用场景</label>
|
||
<select id="usage">
|
||
<option value="课堂教学">课堂教学</option>
|
||
<option value="自学研究">自学研究</option>
|
||
<option value="文学创作">文学创作</option>
|
||
<option value="文化传播">文化传播</option>
|
||
<option value="考试备考">考试备考</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="targetAudience"><i class="fas fa-users"></i> 目标读者</label>
|
||
<select id="targetAudience">
|
||
<option value="中小学生">中小学生</option>
|
||
<option value="大学生">大学生</option>
|
||
<option value="文学爱好者">文学爱好者</option>
|
||
<option value="研究人员">研究人员</option>
|
||
<option value="普通读者">普通读者</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="depth"><i class="fas fa-layer-group"></i> 解析深度</label>
|
||
<select id="depth">
|
||
<option value="基础">基础解析</option>
|
||
<option value="中等">中等深度</option>
|
||
<option value="深入">深入解析</option>
|
||
<option value="专业">专业级分析</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="focus"><i class="fas fa-crosshairs"></i> 关注重点</label>
|
||
<select id="focus">
|
||
<option value="意境分析">意境分析</option>
|
||
<option value="修辞手法">修辞手法</option>
|
||
<option value="格律分析">格律分析</option>
|
||
<option value="历史背景">历史背景</option>
|
||
<option value="文学价值">文学价值</option>
|
||
<option value="综合解析">综合解析</option>
|
||
</select>
|
||
</div>
|
||
<button id="generateAnalysisBtn" class="btn-primary">
|
||
<i class="fas fa-magic"></i> 生成AI解析
|
||
</button>
|
||
</div>
|
||
<div class="analysis-result" id="analysisResult">
|
||
<div class="result-placeholder">
|
||
<i class="fas fa-book-reader"></i>
|
||
<h3>AI解析结果将显示在这里</h3>
|
||
<p>选择诗词并设置解析参数后，点击"生成AI解析"按钮</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 诗词展示区 -->
|
||
<section id="browse" class="section">
|
||
<h2><i class="fas fa-list"></i> 诗词浏览</h2>
|
||
<div class="browse-controls">
|
||
<div class="view-toggle">
|
||
<button class="view-btn active" data-view="grid"><i class="fas fa-th"></i> 网格</button>
|
||
<button class="view-btn" data-view="list"><i class="fas fa-list"></i> 列表</button>
|
||
</div>
|
||
<div class="sort-controls">
|
||
<select id="sortBy">
|
||
<option value="time">按年代排序</option>
|
||
<option value="popularity">按热度排序</option>
|
||
<option value="title">按标题排序</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="poetry-grid" id="poetryGrid">
|
||
<!-- 诗词卡片将通过JavaScript动态加载 -->
|
||
</div>
|
||
<div class="loading" id="loadingIndicator">
|
||
<i class="fas fa-spinner fa-spin"></i> 加载中...
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 交互学习功能 -->
|
||
<section id="learning" class="section">
|
||
<h2><i class="fas fa-graduation-cap"></i> 交互学习</h2>
|
||
<div class="learning-features">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-balance-scale"></i>
|
||
</div>
|
||
<h3>对比分析</h3>
|
||
<p>比较两首诗词的异同，深入理解不同风格</p>
|
||
<button class="btn-secondary" id="compareBtn">开始对比</button>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-lightbulb"></i>
|
||
</div>
|
||
<h3>相似推荐</h3>
|
||
<p>基于当前诗词推荐主题、风格相似的作品</p>
|
||
<button class="btn-secondary" id="recommendBtn">获取推荐</button>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-question-circle"></i>
|
||
</div>
|
||
<h3>知识问答</h3>
|
||
<p>AI问答功能，解答关于诗词的各类问题</p>
|
||
<button class="btn-secondary" id="qaBtn">开始问答</button>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-brain"></i>
|
||
</div>
|
||
<h3>背诵助手</h3>
|
||
<p>填空测试、顺序排序等背诵辅助功能</p>
|
||
<button class="btn-secondary" id="memorizeBtn">开始背诵</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-section">
|
||
<h3><i class="fas fa-book-open"></i> 古诗词智能解析器</h3>
|
||
<p>探索中华诗词之美，传承千年文化精髓</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>功能模块</h4>
|
||
<a href="#search">智能查询</a>
|
||
<a href="#ai-analysis">AI解析</a>
|
||
<a href="#browse">诗词浏览</a>
|
||
<a href="#learning">交互学习</a>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>技术支持</h4>
|
||
<a href="#" id="apiDocs">API文档</a>
|
||
<a href="#" id="aboutAi">AI技术说明</a>
|
||
<a href="#" id="privacy">隐私政策</a>
|
||
<a href="#" id="contact">联系我们</a>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>关注我们</h4>
|
||
<div class="social-links">
|
||
<a href="#"><i class="fab fa-weixin"></i></a>
|
||
<a href="#"><i class="fab fa-weibo"></i></a>
|
||
<a href="#"><i class="fab fa-github"></i></a>
|
||
<a href="#"><i class="fab fa-bilibili"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2023 古诗词智能解析器 | 基于H5技术开发 | PWA支持</p>
|
||
<div class="pwa-badge">
|
||
<i class="fas fa-download"></i> 可添加到主屏幕
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 模态框 -->
|
||
<div class="modal" id="poetryDetailModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">诗词详情</h3>
|
||
<button class="close-modal">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody">
|
||
<!-- 诗词详情内容将通过JavaScript动态加载 -->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn-secondary" id="favoriteBtn">
|
||
<i class="far fa-heart"></i> 收藏
|
||
</button>
|
||
<button class="btn-primary" id="analyzeBtn">
|
||
<i class="fas fa-robot"></i> AI解析
|
||
</button>
|
||
<button class="btn-secondary" id="shareBtn">
|
||
<i class="fas fa-share-alt"></i> 分享
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 脚本 -->
|
||
<script src="static/js/main.js"></script>
|
||
<script src="static/js/service-worker.js"></script>
|
||
</body>
|
||
</html>
|