paperlight/popup.html at dev · kabir0st/paperlight · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Paperlight</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <main class="popup">

    <header class="header">
      <div class="wordmark">
        <h1>Paperlight</h1>
        <p class="status" id="status">
          <span class="status-dot" id="status-dot"></span>
          <span id="status-text">Checking this tab…</span>
        </p>
      </div>
      <label class="switch" title="Enable Paperlight">
        <input type="checkbox" id="enable-toggle" aria-label="Enable Paperlight">
        <span class="slider"></span>
      </label>
    </header>

    <section class="controls" id="controls">
      <fieldset class="themes">
        <legend class="eyebrow">Theme</legend>
        <div class="sheet-row">
          <label class="sheet" data-theme="paper">
            <input type="radio" name="theme" value="paper">
            <span class="page page-paper" aria-hidden="true">Aa</span>
            <span class="sheet-name">Paper</span>
          </label>
          <label class="sheet" data-theme="sepia">
            <input type="radio" name="theme" value="sepia">
            <span class="page page-sepia" aria-hidden="true">Aa</span>
            <span class="sheet-name">Sepia</span>
          </label>
          <label class="sheet" data-theme="dark">
            <input type="radio" name="theme" value="dark">
            <span class="page page-dark" aria-hidden="true">Aa</span>
            <span class="sheet-name">Dark</span>
          </label>
        </div>
      </fieldset>

      <div class="intensity">
        <div class="intensity-head">
          <label class="eyebrow" for="intensity-slider">Intensity</label>
          <span class="intensity-value" id="intensity-value">80%</span>
        </div>
        <input type="range" id="intensity-slider" min="0" max="100" step="5" value="80">
      </div>
    </section>

    <section class="tts">
      <fieldset class="voices">
        <legend class="eyebrow">Read aloud</legend>
        <div class="voice-list">
          <label class="voice" data-voice="robot">
            <input type="radio" name="voice" value="robot">
            <span class="voice-body">
              <span class="voice-name">Robot</span>
              <span class="voice-meta">System voice · no download</span>
            </span>
            <span class="voice-state" data-state-for="robot">Built-in</span>
          </label>
          <label class="voice" data-voice="fluent">
            <input type="radio" name="voice" value="fluent">
            <span class="voice-body">
              <span class="voice-name">Fluent</span>
              <span class="voice-meta">Kokoro AI · 4 speakers, on your device</span>
            </span>
            <span class="voice-state" data-state-for="fluent">~90 MB</span>
          </label>
        </div>
      </fieldset>

      <details class="voice-options" id="voice-options">
        <summary>Voice options</summary>

        <div class="opt-group" id="fluent-options" hidden>
          <label class="opt-row">
            <span class="opt-label">Speaker</span>
            <select id="kokoro-speaker"></select>
          </label>

          <div class="opt-row">
            <span class="opt-label">Speed</span>
            <input type="range" id="kokoro-speed" min="0.5" max="2" step="0.1" value="1"
                   aria-label="Speaking speed">
            <span class="opt-value" id="kokoro-speed-value">1.0×</span>
          </div>
        </div>

        <div class="opt-row">
          <span class="opt-label">Volume</span>
          <input type="range" id="volume" min="0" max="100" step="5" value="100"
                 aria-label="Volume">
          <span class="opt-value" id="volume-value">100%</span>
        </div>
      </details>

      <div class="read-pdf" id="read-pdf-row" hidden>
        <button class="btn primary" id="read-pdf-btn">Read this PDF</button>
        <label class="from-page">from page
          <input type="number" id="from-page" min="1" value="1" aria-label="Start page">
        </label>
      </div>

      <div class="tts-actions">
        <button class="btn primary" id="test-voice">Test voice</button>
        <button class="btn" id="pause-voice" disabled>Pause</button>
        <button class="btn" id="stop-voice" disabled>Stop</button>
      </div>

      <!-- Activity lives at the very bottom: the note doubles as the live
           status line, and higher up its changing wording shoved the buttons
           around mid-reading. -->
      <div class="tts-progress" id="tts-progress" hidden>
        <div class="tts-progress-label" id="tts-progress-label"></div>
        <div class="tts-progress-track"><div class="tts-progress-fill" id="tts-progress-fill"></div></div>
      </div>

      <div class="tts-status">
        <span class="spinner" id="tts-spinner" hidden aria-hidden="true"></span>
        <p class="tts-note" id="tts-note" role="status">Select text in a PDF, right-click → <strong>Read aloud</strong>. The Fluent voice downloads once, then works offline.</p>
      </div>
    </section>

    <footer class="footer">
      <span id="version">v2.7.0</span>
      <a href="https://github.com/kabir0st/paperlight/blob/HEAD/PRIVACY.md" target="_blank" rel="noopener">Privacy</a>
      <a href="https://kabirtamari.com/" target="_blank" rel="noopener">by Kabir Tamari</a>
    </footer>

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