用AI做一个离线提词器：暂停后不跳行，改完再验收

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; connect-src 'none'; form-action 'none'; base-uri 'none'">
<title>离线练习提词器</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font: 18px/1.6 system-ui,sans-serif; background: #f5f4ef; color: #182126; }
main { max-width: 960px; margin: auto; }
h1 { font-size: 26px; margin: 0 0 8px; }
textarea { width: 100%; min-height: 150px; padding: 10px; font: inherit; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0; }
button { padding: 10px 16px; min-height: 44px; font: inherit; }
label { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#viewport { height: 60vh; overflow: auto; overscroll-behavior: none; background: #14232a; color: #fff; border: 2px solid #14232a; border-radius: 12px; }
#display { white-space: pre-wrap; overflow-wrap: anywhere; font: 40px/1.7 system-ui,sans-serif; margin: 0; padding: 20px 24px 50vh; }
:focus-visible { outline: 3px solid #b34600; outline-offset: 3px; }
</style>
<main>
<h1>离线练习提词器</h1>
<p>本工具不保存稿件；刷新或关闭可能丢失。先另存一份文字稿。</p>
<label for="source">练习稿</label>
<textarea id="source" spellcheck="false">01 今天只演示桌面整理。
02 先把空盒摆在左边。
03 把铅笔放进盒子。
04 留一支笔在桌上。
05 停一下，检查有没有遗漏。
06 把笔记本合上。
07 将笔记本放在盒子右边。
08 两件物品之间留出空隙。
09 这行用来检查换行是否保留。
10 &lt;b&gt;这应当显示为普通文字&lt;/b&gt;
11 读完这一句，准备结束。
12 演示结束。</textarea>
<div class="controls">
<button id="apply" type="button">载入稿件</button>
<button id="toggle" type="button">开始</button>
<button id="reset" type="button">回到开头</button>
</div>
<div class="controls">
<label>速度 <input id="speed" type="range" min="10" max="100" value="30"> <output id="speedValue">30</output> 像素/秒</label>
<label>字号 <input id="size" type="range" min="24" max="72" value="40"> <output id="sizeValue">40</output> 像素</label>
</div>
<p id="status" role="status">已就绪</p>
<section id="viewport" tabindex="0" aria-label="提词区域">
<pre id="display"></pre>
</section>
</main>
<script>
'use strict';
const byId = id => document.getElementById(id);
const source = byId('source'), display = byId('display');
const viewport = byId('viewport'), toggle = byId('toggle');
const speed = byId('speed'), size = byId('size'), status = byId('status');
let running = false, frameId = null, previous = null, position = 0;
function stop(message = '已暂停') {
  running = false;
  if (frameId !== null) cancelAnimationFrame(frameId);
  frameId = null;
  previous = null;
  toggle.textContent = '开始';
  status.textContent = message;
}
function tick(now) {
  if (!running) return;
  if (previous !== null) {
    const seconds = Math.min((now - previous) / 1000, 0.1);
    const end = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
    position = Math.min(end, position + Number(speed.value) * seconds);
    viewport.scrollTop = position;
    if (position >= end) { stop('已到结尾'); return; }
  }
  previous = now;
  frameId = requestAnimationFrame(tick);
}
function apply() {
  stop('已载入；点击开始');
  display.textContent = source.value;
  viewport.scrollTop = 0;
}
byId('apply').addEventListener('click', apply);
toggle.addEventListener('click', () => {
  if (running) { stop(); return; }
  if (!display.textContent.trim()) { stop('先输入并载入稿件'); return; }
  const tail = parseFloat(getComputedStyle(display).paddingBottom) || 0;
  if (display.scrollHeight - tail <= viewport.clientHeight) {
    stop('内容已全部显示，无需滚动'); return;
  }
  const end = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
  if (end <= 1) { stop('内容已全部显示，无需滚动'); return; }
  if (viewport.scrollTop >= end - 1) viewport.scrollTop = 0;
  position = viewport.scrollTop;
  previous = null;
  running = true;
  toggle.textContent = '暂停';
  status.textContent = '正在滚动';
  frameId = requestAnimationFrame(tick);
});
byId('reset').addEventListener('click', () => { stop('已回到开头'); viewport.scrollTop = 0; });
speed.addEventListener('input', () => { byId('speedValue').textContent = speed.value; });
size.addEventListener('input', () => {
  stop('字号已改变；请找回阅读位置，再点开始');
  display.style.fontSize = size.value + 'px';
  byId('sizeValue').textContent = size.value;
});
['wheel', 'touchstart', 'pointerdown', 'keydown'].forEach(type => {
  viewport.addEventListener(type, () => { if (running) stop('已暂停，可手动找回位置'); }, { passive: true });
});
document.addEventListener('visibilitychange', () => { if (document.hidden) stop('切换页面后已暂停'); });
window.addEventListener('resize', () => { if (running) stop('窗口改变后已暂停'); });
apply();
</script>
</html>