selfreleaseandDevin
6329f3f6b4
- 分享按钮：系统分享 + 二维码卡片（qr.png），移动端移入播放行不再遮挡标题 - og 分享卡片元数据 + og.png 封面；beforeinstallprompt 安装提示 - robots.txt / sitemap.xml / poster.png 传播物料 - .sutra-paper 宣纸底纹：桌面 bg.jpg，移动端竖版 bg-m.jpg，夜间模式罩层适配 - 移动端设置区重排为双列标签网格 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
129 lines
6.8 KiB
HTML
129 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#f6f1e6">
|
||
<meta name="description" content="心经、金刚经、阿弥陀经、普门品、道德经、清静经、太上感应篇诵读——千问语音合成，晨钟暮鼓配乐，逐段跟读高亮。">
|
||
<title>经典诵读 · 心经</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="经典诵读 · 佛经道家经典在线诵读">
|
||
<meta property="og:description" content="心经、金刚经、道德经等七部经典：千问语音诵读，逐字高亮跟读，山寺晨钟配乐。">
|
||
<meta property="og:url" content="https://fj.all8ai.top/">
|
||
<meta property="og:image" content="https://fj.all8ai.top/og.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<link rel="icon" type="image/svg+xml" href="icon.svg">
|
||
<link rel="apple-touch-icon" href="icon-180.png">
|
||
<link rel="manifest" href="manifest.json">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||
<meta name="apple-mobile-web-app-title" content="经典诵读">
|
||
<link rel="stylesheet" href="style.css?v=17">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="site-logo" aria-hidden="true">
|
||
<img src="icon.svg" alt="" class="logo-mark">
|
||
<span class="logo-text">经典诵读</span>
|
||
</div>
|
||
|
||
<main class="page">
|
||
|
||
<section class="hero">
|
||
<div class="seal" id="seal" aria-hidden="true">心经</div>
|
||
<div class="hero-text">
|
||
<h1 class="sutra-title" id="sutra-title">般若波罗蜜多心经</h1>
|
||
<p class="subtitle" id="sutra-sub">唐三藏法师 玄奘 译</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel player-card" id="player-card" aria-label="语音诵读">
|
||
<div class="player-row">
|
||
<button id="btn-play" class="btn-play" type="button" aria-label="播放或停止">
|
||
<svg viewBox="0 0 24 24" class="icon icon-play"><path d="M8 5v14l11-7z"/></svg>
|
||
<svg viewBox="0 0 24 24" class="icon icon-stop"><rect x="6" y="6" width="12" height="12" rx="1.5"/></svg>
|
||
<span class="play-label">播 放</span>
|
||
</button>
|
||
<span id="sleep-remaining" class="sleep-remaining" aria-label="定时剩余时间"></span>
|
||
<div class="field-pair">
|
||
<label class="tool-name" for="sutra-select">经典</label>
|
||
<select id="sutra-select" aria-label="选择经典"></select>
|
||
</div>
|
||
<div class="player-meta">
|
||
<label class="voice-label" for="voice-select">诵读音色</label>
|
||
<select id="voice-select"></select>
|
||
</div>
|
||
<span class="flex-break" aria-hidden="true"></span>
|
||
<div class="tool-group" role="group" aria-label="字号">
|
||
<span class="tool-name">字号</span>
|
||
<button type="button" data-size="lg" class="size-btn">大</button>
|
||
<button type="button" data-size="md" class="size-btn active">中</button>
|
||
<button type="button" data-size="sm" class="size-btn">小</button>
|
||
</div>
|
||
<span class="flex-break flex-break-2" aria-hidden="true"></span>
|
||
<div class="tool-group" role="group" aria-label="排版">
|
||
<button type="button" id="btn-layout" class="layout-btn">切换竖排</button>
|
||
</div>
|
||
<div class="tool-group" role="group" aria-label="模式">
|
||
<button type="button" id="btn-loop" class="layout-btn" aria-pressed="false">循环</button>
|
||
<button type="button" id="btn-night" class="layout-btn" aria-pressed="false">夜间</button>
|
||
<div class="field-pair">
|
||
<label class="tool-name" for="bgm-select">配乐</label>
|
||
<select id="bgm-select" aria-label="背景音乐">
|
||
<option value="" selected>关</option>
|
||
<option value="bell">晨钟</option>
|
||
<option value="valley">空山</option>
|
||
</select>
|
||
</div>
|
||
<div class="field-pair">
|
||
<label class="tool-name" for="timer-select">定时</label>
|
||
<select id="timer-select" aria-label="定时停止">
|
||
<option value="0">关闭</option>
|
||
<option value="30">30 分钟</option>
|
||
<option value="60">60 分钟</option>
|
||
<option value="90">90 分钟</option>
|
||
<option value="120">120 分钟</option>
|
||
</select>
|
||
</div>
|
||
<div class="field-pair">
|
||
<label class="tool-name" for="rate-select">语速</label>
|
||
<select id="rate-select" aria-label="诵读语速">
|
||
<option value="0.8">慢 0.8×</option>
|
||
<option value="1" selected>常速</option>
|
||
<option value="1.25">快 1.25×</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="status" class="status" role="status"></div>
|
||
<button type="button" id="btn-share" class="share-btn" aria-label="分享本站">分享</button>
|
||
<button type="button" id="btn-expand" class="expand-btn" aria-expanded="false" aria-label="展开设置" title="设置">
|
||
<span class="expand-label">设置</span>
|
||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
</button>
|
||
</div>
|
||
<div id="progress" class="progress" aria-hidden="true"></div>
|
||
</section>
|
||
|
||
<article class="sutra-paper">
|
||
<div id="sutra" class="sutra size-md" role="document"></div>
|
||
<button type="button" id="btn-jump-now" class="jump-now" hidden>⤵ 回到诵读处</button>
|
||
</article>
|
||
|
||
<nav class="pager" id="pager" aria-label="分页" hidden>
|
||
<button type="button" id="btn-prev" class="pager-btn">‹ 上一页</button>
|
||
<span id="page-info" class="page-info"></span>
|
||
<button type="button" id="btn-next" class="pager-btn">下一页 ›</button>
|
||
</nav>
|
||
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p id="foot-hint">点击段落可从该段起诵读 · ← → 键翻页 · 语音由千问 Qwen3-TTS 合成 · 经文来源：<a id="sutra-source" href="https://www.dpm.org.cn/lemmas/243222.html" target="_blank" rel="noopener">故宫博物院</a></p>
|
||
</footer>
|
||
|
||
<audio id="audio" preload="auto"></audio>
|
||
<script src="app.js?v=15"></script>
|
||
</body>
|
||
</html>
|