reader/index.html at main · sidmohan0/reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en" data-theme="lamp" data-view="landing" data-toc="open">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lumen — focus reader for papers</title>
<meta name="description" content="Local-first reader for research papers: sections, read-aloud, highlights, and spaced-repetition review. Everything stays in your browser." />
<meta name="theme-color" content="#14110d" />
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2314110d'/%3E%3Ccircle cx='32' cy='32' r='12' fill='%23e8a84b'/%3E%3Cg stroke='%23e8a84b' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M32 8v8M32 48v8M8 32h8M48 32h8M15 15l6 6M43 43l6 6M49 15l-6 6M21 43l-6 6'/%3E%3C/g%3E%3C/svg%3E" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>

<header class="topbar">
  <div class="wordmark">
    <svg class="glyph" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="core" cx="12" cy="12" r="4.2"/>
      <g class="ray">
        <line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/>
        <line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/>
        <line x1="5" y1="5" x2="7" y2="7"/><line x1="17" y1="17" x2="19" y2="19"/>
        <line x1="19" y1="5" x2="17" y2="7"/><line x1="7" y1="17" x2="5" y2="19"/>
      </g>
    </svg>
    <b>Lumen</b><span>focus reader</span>
  </div>
  <div class="top-spacer"></div>
  <button class="ghost-btn" id="reviewBtn" hidden>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
    Review<span class="pill" id="reviewCount"></span>
  </button>
  <button class="ghost-btn" id="themeBtn" aria-label="Toggle theme">
    <svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>
    <span id="themeLabel">Daylight</span>
  </button>
  <button class="ghost-btn" id="newSessionBtn" hidden>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
    New session
  </button>
</header>

<!-- ===================== LANDING ===================== -->
<section id="landing">
  <div class="hero">
    <div class="eyebrow">Local PDF reader</div>
    <h1>Read papers section by section. Remember what matters.</h1>
    <p class="lede">Lumen turns a PDF into a focused reading view with optional read-aloud. Highlight what matters, turn it into flashcards, and review on a spaced schedule — all offline, all in your browser.</p>

    <div class="drop" id="drop" role="button" tabindex="0" aria-label="Upload a PDF">
      <div class="pdf-mark">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h6"/></svg>
      </div>
      <div class="big">Drop a PDF here</div>
      <div class="small">or <span class="browse">browse your files</span> · arXiv papers work best</div>
      <input type="file" id="fileInput" accept="application/pdf,.pdf" />
    </div>
    <div id="dropError" role="alert" hidden></div>

    <div class="feat-row">
      <div class="feat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5v14l9-7zM14 5l7 7-7 7z"/></svg>Section &amp; selection read-aloud</div>
      <div class="feat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>Highlights &amp; notes</div>
      <div class="feat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>Spaced-repetition cards</div>
    </div>
    <p class="privacy">Your PDF never leaves your browser — LiteParse WASM parses it locally, and notes live in local storage on this device.</p>

    <div id="library" hidden>
      <h2>Recent papers</h2>
      <div id="libraryList"></div>
    </div>
  </div>
</section>

<!-- ===================== READER ===================== -->
<section id="reader">
  <aside id="toc" aria-label="Table of contents">
    <div class="toc-head">
      <h2>Contents</h2>
      <span class="count" id="tocCount"></span>
      <button id="tocToggle" title="Toggle contents (T)" aria-label="Toggle table of contents" aria-expanded="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
    </div>
    <div id="tocList"></div>
  </aside>

  <main id="stage" tabindex="-1">
    <div id="progress"><div class="bar" id="progressBar"></div></div>
    <div class="stage-inner">
      <div class="meta-line">
        <span id="sectionKicker"></span>
        <span id="docMeta"></span>
      </div>
      <h1 id="sectionTitle"></h1>
      <div id="sectionBody"></div>
    </div>
  </main>
</section>

<!-- ===================== REVIEW ===================== -->
<section id="review">
  <div id="reviewBody" aria-label="Flashcard review"></div>
</section>

<!-- transport -->
<div id="transport" role="toolbar" aria-label="Playback controls">
  <button class="t-btn" id="prevBtn" title="Previous section ([)" aria-label="Previous section">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h2v14H6zM20 5 9 12l11 7z"/></svg>
  </button>
  <button class="t-btn" id="restartBtn" title="Restart from top" aria-label="Restart section">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 4v4h4"/></svg>
  </button>
  <button class="t-btn play" id="playBtn" title="Play (Space)" aria-label="Play">
    <svg id="playIcon" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
  </button>
  <button class="t-btn" id="stopBtn" title="Stop (Esc)" aria-label="Stop">
    <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
  </button>
  <button class="t-btn" id="nextBtn" title="Next section (])" aria-label="Next section">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 5h2v14h-2zM4 5l11 7L4 19z"/></svg>
  </button>
  <div class="t-div"></div>
  <div class="t-status" id="status" aria-live="polite">Ready</div>
  <div class="t-div"></div>
  <button class="t-btn gear" id="gearBtn" title="Settings" aria-label="Settings" aria-expanded="false">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><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 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.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 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.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 0 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 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  </button>
</div>

<div id="settings" aria-label="Settings">
  <div class="set-group">Voice</div>
  <div class="set-row">
    <label for="voiceProfileSel">Voice profile</label>
    <select id="voiceProfileSel"></select>
    <div class="voice-actions">
      <button id="previewVoiceBtn">Preview</button>
    </div>
    <details class="advanced-voice">
      <summary>Browser voice</summary>
      <select id="voiceSel"></select>
    </details>
  </div>
  <div class="set-row">
    <label for="rate">Speed <span class="val" id="rateVal">1.0×</span></label>
    <input type="range" id="rate" min="0.6" max="1.8" step="0.05" value="1" />
  </div>

  <div class="set-group">Reading</div>
  <div class="set-row">
    <label>Text size</label>
    <div class="size-ctl">
      <button id="sizeDown" aria-label="Smaller text">A−</button>
      <button id="sizeUp" aria-label="Larger text">A+</button>
    </div>
  </div>
  <div class="set-row">
    <label for="measure">Text width <span class="val" id="measureVal">34rem</span></label>
    <input type="range" id="measure" min="26" max="56" step="2" value="34" aria-label="Text width" />
  </div>
  <div class="set-row toggle-line">
    <label style="margin:0">Dim other text while reading</label>
    <button class="switch on" id="dimToggle" role="switch" aria-checked="true" aria-label="Dim other text"><span class="knob"></span></button>
  </div>
</div>

<div id="toast" role="status" aria-live="polite"></div>

<!-- loading -->
<div id="loading">
  <div class="load-card">
    <div class="lamp-spin">
      <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6 19 19M19 5l-1.4 1.4M6.4 17.6 5 19" opacity=".5"/></svg>
    </div>
    <div class="lt" id="loadTitle">Reading your paper…</div>
    <div class="ls" id="loadSub">Extracting text</div>
  </div>
</div>

<script type="module" src="./src/main.js"></script>
</body>
</html>