paperboy/reader.html at master · harbefas/paperboy · 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
<!DOCTYPE html>
<!-- data-theme is set by theme.js; dark is the pre-paint default. -->
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>paperboy — reader</title>
  <link rel="stylesheet" href="styles/mate-tokens.css">
  <link rel="stylesheet" href="fonts/fonts.css">
  <link rel="stylesheet" href="reader.css">
</head>
<body>
  <div class="progress-bar" id="progress-bar"></div>
  <header class="topbar">
    <button class="back-btn" id="back-btn">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
    </button>
    <span class="topbar-title" id="topbar-title"></span>
    <img class="topbar-icon" id="topbar-icon" src="" alt="" style="display:none">
    <div class="topbar-menu-wrap">
      <button class="topbar-btn topbar-menu-btn" id="menu-btn" title="Settings">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 0 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 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.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 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.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 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.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 class="topbar-menu" id="topbar-menu">
        <div class="menu-row">
          <span class="menu-label">Theme</span>
          <button class="topbar-btn" id="theme-btn" title="Theme: auto">Auto</button>
        </div>
        <div class="menu-row">
          <span class="menu-label">Font</span>
          <div class="font-controls">
            <button class="topbar-btn" id="font-family-btn" title="Toggle font family">Serif</button>
            <button class="topbar-btn" id="font-decrease" title="Decrease font size">A−</button>
            <button class="topbar-btn" id="font-increase" title="Increase font size">A+</button>
          </div>
        </div>
        <div class="menu-row">
          <span class="menu-label">Keys</span>
          <button class="topbar-btn" id="keys-btn" title="Keyboard shortcuts">?</button>
        </div>
      </div>
    </div>
    <a class="open-link" id="open-link" target="_blank" rel="noopener" title="Open original">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
    </a>
    <button class="star-btn-topbar" id="star-btn" title="Star article">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </button>
  </header>

  <main class="reader" id="reader">
    <div class="loading" id="loading">
      <span class="spinner"></span>
    </div>
    <div class="error" id="error" style="display:none"></div>
    <article id="article" style="display:none">
      <header class="article-header">
        <h1 id="article-title"></h1>
        <div class="article-meta" id="article-meta"></div>
      </header>
      <div class="prose" id="article-content"></div>
    </article>
  </main>

  <div class="modal-overlay" id="keys-overlay" style="display:none">
    <div class="modal keys-modal">
      <div class="modal-header">
        <span>Keyboard shortcuts</span>
        <button class="icon-btn" id="keys-close">✕</button>
      </div>
      <div class="keys-body">
        <div class="keys-section">
          <div class="keys-section-title">Scroll</div>
          <div class="keys-row"><kbd>j</kbd><kbd>k</kbd><span>scroll down / up</span></div>
          <div class="keys-row"><kbd>d</kbd><kbd>u</kbd><span>half page down / up</span></div>
          <div class="keys-row"><kbd>g g</kbd><span>top</span></div>
          <div class="keys-row"><kbd>G</kbd><span>bottom</span></div>
          <div class="keys-row"><kbd>h</kbd><kbd>l</kbd><span>prev / next heading</span></div>
        </div>
        <div class="keys-section">
          <div class="keys-section-title">Actions</div>
          <div class="keys-row"><kbd>Space</kbd><span>page down / up</span></div>
          <div class="keys-row"><kbd>o</kbd><span>open original</span></div>
          <div class="keys-row"><kbd>s</kbd><span>star article</span></div>
          <div class="keys-row"><kbd>c</kbd><span>toggle contents</span></div>
          <div class="keys-row"><kbd>t</kbd><span>toggle theme</span></div>
          <div class="keys-row"><kbd>+</kbd><kbd>−</kbd><span>font size</span></div>
          <div class="keys-row"><kbd>f</kbd><span>font family</span></div>
          <div class="keys-row"><kbd>[</kbd><kbd>]</kbd><span>prev / next article</span></div>
          <div class="keys-row"><kbd>Esc</kbd><span>go back</span></div>
        </div>
      </div>
    </div>
  </div>

  <script src="lib/highlight.min.js"></script>
  <script src="theme.js"></script>
  <script src="lib/Readability.js"></script>
  <script src="reader.js"></script>
</body>
</html>