reading_ui.html

<!doctype html>
<html lang="zh-CN" class="scrollbar-hidden">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>思维训练</title>
<style>
:root{
  --bg:#fcfcfc;--surface:#fff;--hover:#f3f3f3;--text:#0d0d0d;--body:#343434;
  --text-2:#6e6e73;--text-3:#86868b;--text-4:#aeaeb2;--hairline:rgba(0,0,0,.07);
  --accent:#0071e3;--accent-hover:#0077ed;--accent-link:#0066cc;--field-line:rgba(0,0,0,.12);
  --ring-focus:0 0 0 4px rgba(0,113,227,.18);--r-pill:999px;--r-sheet:16px;
  --sidebar-font:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
  --reader-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display-font:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);font-family:var(--reader-font);font-optical-sizing:auto;color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,textarea{font:inherit}.hidden{display:none!important}
.scrollbar-hidden,.reading-list{scrollbar-width:none}.scrollbar-hidden::-webkit-scrollbar,.reading-list::-webkit-scrollbar{display:none}
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.rail{position:relative;padding:16px 6px 32px;background:var(--bg);font-family:var(--sidebar-font)}
.rail-head{padding:8px 14px 12px}.brand{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:0}
.sub{display:none}.group-label{margin:18px 14px 6px;color:#8a8a8a;font-size:13px;font-weight:400;line-height:20px}
.reading-list{display:grid;gap:0;overflow:auto}
.item{display:flex;align-items:center;width:100%;height:44px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:rgb(13,13,13);text-align:left;cursor:pointer;transition:background .14s var(--ease)}
.item:hover{background:#f3f3f3}.item.active{background:#efefef}
.item-icon{display:grid;place-items:center;width:20px;height:20px;margin-right:10px;flex:none;color:#2b2b2b}.item-icon svg{width:18px;height:18px}.item-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0}
.item.active .item-title{font-weight:400}.item-meta{display:none}
.stage{padding:clamp(44px,5vw,68px) clamp(28px,5vw,68px) 80px;font-family:var(--reader-font);font-synthesis:none}.reader{width:min(100%,720px);margin:0 auto}
.empty-state{padding-top:15vh}.empty-kicker,.step,.section-label{color:var(--text-3);font-size:11px;font-weight:480;letter-spacing:.035em}
.empty-state h2{margin:12px 0 8px;font-size:clamp(30px,4vw,40px);line-height:1.12;letter-spacing:-.035em}
.empty-state p{margin:0;color:var(--text-2);font-size:15px;line-height:1.7}.article-head{margin-bottom:clamp(32px,4vw,42px)}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.read-time{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
.title{margin:0;max-width:690px;font-family:var(--display-font);font-size:clamp(38px,3.7vw,41px);font-weight:530;line-height:1.09;letter-spacing:-.022em;color:#1d1d1f}
.source{margin:10px 0 0;color:#6e6e73;font-size:13px;line-height:1.45;letter-spacing:0}.reading-section{position:relative}
.reading-section+.reading-section{margin-top:clamp(32px,4vw,38px);padding-top:clamp(26px,3.5vw,32px);border-top:1px solid var(--hairline)}
.section-label{margin:0 0 10px}.body-copy{margin:0;color:#424245;font-size:clamp(16.5px,1.4vw,17px);font-weight:400;line-height:1.76;letter-spacing:-.002em}
.question{margin:0;color:#1d1d1f;font-family:var(--display-font);font-size:clamp(20px,2vw,21.5px);font-weight:500;line-height:1.38;letter-spacing:-.012em}
.answer-area{margin-top:22px}.field-label{display:block;margin:0 0 8px;color:var(--text-2);font-size:13px;font-weight:500}
textarea{display:block;width:100%;min-height:168px;padding:15px 16px;border:1px solid var(--field-line);border-radius:var(--r-sheet);outline:none;background:var(--surface);color:var(--text);font-size:16px;line-height:1.72;resize:vertical;box-shadow:0 1px 2px rgba(0,0,0,.02);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
textarea::placeholder{color:var(--text-4)}textarea:focus-visible{border-color:var(--accent);box-shadow:var(--ring-focus)}textarea[aria-invalid="true"]{border-color:#d70015}
.field-error{margin:8px 0 0;color:#d70015;font-size:12.5px;line-height:1.5}.actions{display:flex;align-items:center;gap:12px;margin-top:17px}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:0;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:background .18s var(--ease),transform .1s ease-out}
.primary:hover{background:var(--accent-hover)}.primary:active{transform:scale(.97)}.primary:disabled{opacity:.56;cursor:default;transform:none}.primary:focus-visible,.item:focus-visible,.text-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reveal-heading{margin:0 0 12px;font-size:clamp(21px,2.3vw,24px);font-weight:500;line-height:1.3;letter-spacing:-.014em;color:#1d1d1f}.conclusion{color:#424245;font-size:clamp(17px,1.8vw,19px);font-weight:400;line-height:1.62;letter-spacing:-.004em}
.comparison{white-space:pre-wrap}.text-link{display:inline-flex;align-items:baseline;gap:2px;margin-top:18px;color:var(--accent-link);font-size:14px;font-weight:400;line-height:1.5;text-decoration:none}.text-link:hover{text-decoration:underline;text-underline-offset:3px}.text-link .chev{transition:transform .18s var(--ease)}.text-link:hover .chev{transform:translateX(2px)}
.done{margin-top:50px;padding-top:42px;border-top:1px solid var(--hairline);text-align:left}.done-title{margin:0 0 8px;font-size:24px;font-weight:500;letter-spacing:-.018em;color:#1d1d1f}.done-copy{margin:0;color:var(--text-2);font-size:14px;line-height:1.65}
.toast{position:fixed;left:50%;bottom:26px;z-index:30;max-width:min(90vw,520px);padding:11px 16px;border-radius:var(--r-pill);background:rgba(29,29,31,.9);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);color:#fff;font-size:13px;transform:translateX(-50%);box-shadow:0 2px 8px rgba(0,0,0,.1),0 18px 50px rgba(0,0,0,.16)}
@media(max-width:760px){.app{display:block}.rail{position:sticky;top:0;z-index:20;padding:14px 16px 11px;border-right:0;border-bottom:1px solid transparent;background:rgba(245,245,247,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}.rail.scrolled{border-bottom-color:var(--hairline);box-shadow:0 1px 12px rgba(0,0,0,.04)}
  .rail-head{display:flex;align-items:center;padding:0 3px 11px}.brand{font-size:17px}.group-label{display:none}
  .reading-list{display:flex;overflow-x:auto;gap:4px}.item{flex:0 0 205px;min-height:54px;padding:9px 10px;border:0}.item-meta{font-size:11.5px}
  .stage{padding:38px 20px 62px}.article-head{margin-bottom:42px}.title{font-size:clamp(32px,9vw,40px)}.source{font-size:13px}.reading-section+.reading-section{margin-top:40px;padding-top:34px}.answer-area{margin-top:27px}.question{font-size:21px}.actions{margin-top:14px}.primary{width:100%}.done{margin-top:40px;padding-top:34px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.primary:active{transform:none}}
</style>
</head>
<body>
<div class="app">
<aside class="rail" id="rail">
  <header class="rail-head"><h1 class="brand">思维训练</h1></header>
  <div class="group-label">阅读</div>
  <nav id="list" class="reading-list" aria-label="阅读列表"></nav>
</aside>
<main class="stage"><div class="reader">
<section id="empty" class="empty-state"><div class="empty-kicker">独立思考</div><h2>选择一篇文章</h2><p>先形成自己的判断，再打开作者的思路。</p></section>
<article id="work" class="hidden">
  <header class="article-head"><div class="meta-row"><span class="step" id="step">独立判断</span><span class="read-time" id="readTime"></span></div><h1 class="title" id="title"></h1><p class="source" id="source"></p></header>
  <section id="blind" class="phase">
    <div class="reading-section"><p class="section-label">背景</p><p class="body-copy" id="background"></p></div>
    <div class="reading-section"><p class="section-label">问题</p><p class="question" id="question"></p>
      <div class="answer-area"><label class="field-label" for="answer">你的判断</label><textarea id="answer" aria-describedby="answerError" aria-invalid="false" placeholder="写下你现在真正的判断。先不用追求完整。"></textarea><p id="answerError" class="field-error hidden" role="alert">先写下你的判断。</p><div class="actions"><button class="primary" id="submit" type="button">提交判断</button></div></div>
    </div>
  </section>
  <section id="articlePhase" class="phase hidden">
    <div class="reading-section"><p class="section-label">你刚才写的是</p><p class="body-copy" id="firstAnswer"></p></div>
    <div class="reading-section"><p class="section-label">原文</p><p class="body-copy comparison" id="articleBody"></p><a id="originalLink" class="text-link hidden" target="_blank" rel="noopener noreferrer">在浏览器打开原文 <span class="chev" aria-hidden="true">›</span></a></div>
    <div class="reading-section"><div class="answer-area"><label class="field-label" for="reflection">看完以后呢？</label><textarea id="reflection" aria-describedby="reflectionError" aria-invalid="false" placeholder="哪里变了，哪里没变，或者还有哪一点你觉得文章没说通。"></textarea><p id="reflectionError" class="field-error hidden" role="alert">写一点你看完后的想法。</p><div class="actions"><button class="primary" id="saveReflection" type="button">继续</button></div></div></div>
  </section>
  <section id="comparePhase" class="phase hidden">
    <div class="reading-section"><p class="section-label">你一开始想的是</p><p class="body-copy" id="firstFinal"></p></div>
    <div class="reading-section"><p class="section-label">看完以后</p><p class="body-copy" id="secondFinal"></p></div>
    <div class="reading-section"><p class="section-label">再对照一下</p><p class="body-copy comparison" id="comparison"></p></div>
    <div class="reading-section"><p class="body-copy" id="savedState"></p></div>
  </section>
</article>
</div></main>
</div>
<div id="toast" class="toast hidden" role="status" aria-live="polite"></div>
<script>
let items=[],current=null,sessionToken=null,firstAnswer='';const $=id=>document.getElementById(id);
function toast(message){const el=$('toast');el.textContent=message;el.classList.remove('hidden');clearTimeout(toast.timer);toast.timer=setTimeout(()=>el.classList.add('hidden'),2600)}
function scrollTopSafe(){window.scrollTo({top:0,behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'})}
function renderList(){const list=$('list');list.replaceChildren();for(const item of items){const button=document.createElement('button');button.type='button';button.className='item';button.dataset.id=item.id;const icon=document.createElement('span');icon.className='item-icon';icon.setAttribute('aria-hidden','true');icon.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.75h7.5L19 8.25v12H7z"/><path d="M14.5 3.75v4.5H19"/></svg>';const title=document.createElement('span');title.className='item-title';title.textContent=item.title;button.append(icon,title);button.addEventListener('click',()=>openItem(item.id));list.append(button)}}
async function load(){items=await (await fetch('/api/items')).json();renderList();if(items[0])openItem(items[0].id)}
function clearFieldError(fieldId,errorId){$(fieldId).setAttribute('aria-invalid','false');$(errorId).classList.add('hidden')}
function showFieldError(fieldId,errorId){$(fieldId).setAttribute('aria-invalid','true');$(errorId).classList.remove('hidden');$(fieldId).focus()}
$('answer').addEventListener('input',()=>clearFieldError('answer','answerError'));
$('reflection').addEventListener('input',()=>clearFieldError('reflection','reflectionError'));
async function readJson(response){const data=await response.json();if(!response.ok)throw new Error(data.error||'请求失败');return data}
async function openItem(id){
  current=await readJson(await fetch('/api/items/'+encodeURIComponent(id)));sessionToken=null;firstAnswer='';
  $('empty').classList.add('hidden');$('work').classList.remove('hidden');$('blind').classList.remove('hidden');
  $('articlePhase').classList.add('hidden');$('comparePhase').classList.add('hidden');$('step').textContent='独立判断';
  $('readTime').textContent=`约 ${current.estimated_minutes} 分钟`;$('title').textContent=current.title;
  $('source').textContent=[current.source,current.topic].filter(Boolean).join(' · ');$('background').textContent=current.background;
  $('question').textContent=current.question;$('answer').value='';$('reflection').value='';$('savedState').textContent='';
  clearFieldError('answer','answerError');clearFieldError('reflection','reflectionError');$('originalLink').classList.add('hidden');
  document.querySelectorAll('.item').forEach(x=>{const active=x.dataset.id===id;x.classList.toggle('active',active);if(active)x.setAttribute('aria-current','page');else x.removeAttribute('aria-current')});scrollTopSafe()
}
$('submit').onclick=async()=>{
  const answer=$('answer').value.trim();if(!answer){showFieldError('answer','answerError');return}
  $('submit').disabled=true;$('submit').textContent='正在保存…';
  try{
    const data=await readJson(await fetch('/api/items/'+encodeURIComponent(current.id)+'/answer',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({answer})}));
    sessionToken=data.session_token;firstAnswer=answer;
    const article=await readJson(await fetch('/api/sessions/'+encodeURIComponent(sessionToken)+'/article'));
    $('firstAnswer').textContent=answer;$('articleBody').textContent=article.body||'';
    if(article.url){$('originalLink').href=article.url;$('originalLink').classList.remove('hidden')}
    $('blind').classList.add('hidden');$('articlePhase').classList.remove('hidden');$('step').textContent='读原文';scrollTopSafe();
  }catch(e){toast(e.message)}finally{$('submit').disabled=false;$('submit').textContent='提交判断'}
};
$('saveReflection').onclick=async()=>{
  const reflection=$('reflection').value.trim();if(!reflection){showFieldError('reflection','reflectionError');return}
  $('saveReflection').disabled=true;$('saveReflection').textContent='正在保存…';
  try{
    await readJson(await fetch('/api/sessions/'+encodeURIComponent(sessionToken)+'/reflection',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({reflection})}));
    $('firstFinal').textContent=firstAnswer;$('secondFinal').textContent=reflection;$('comparison').textContent='正在整理…';
    $('articlePhase').classList.add('hidden');$('comparePhase').classList.remove('hidden');$('step').textContent='对照';scrollTopSafe();
    await loadComparisonAndFinalize();
  }catch(e){toast(e.message)}finally{$('saveReflection').disabled=false;$('saveReflection').textContent='继续'}
};
async function loadComparisonAndFinalize(){
  try{
    const data=await readJson(await fetch('/api/sessions/'+encodeURIComponent(sessionToken)+'/comparison',{method:'POST',headers:{'Content-Type':'application/json'}}));
    $('comparison').textContent=data.comparison||'这次没有生成额外对照。';
  }catch(e){$('comparison').textContent='AI 对照暂时不可用，你前后的两次判断仍会保留。'}
  try{
    await readJson(await fetch('/api/sessions/'+encodeURIComponent(sessionToken)+'/finalize',{method:'POST',headers:{'Content-Type':'application/json'}}));
    $('savedState').textContent='已经记到 flomo。';
  }catch(e){toast(e.message)}
}
addEventListener('scroll',()=>$('rail').classList.toggle('scrolled',scrollY>8),{passive:true});
load().catch(()=>toast('阅读列表加载失败。'));
</script>
</body>
</html>