-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
112 lines (106 loc) · 6.96 KB
/
index.html
File metadata and controls
112 lines (106 loc) · 6.96 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read TXT</title>
<meta name="description" content="Read TXT is a lightweight text-to-speech reader with auto language detection and chunked playback.">
<meta name="author" content="SPACESODA">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://spacesoda.github.io/read-txt">
<meta property="og:title" content="Read TXT">
<meta property="og:description" content="A lightweight text-to-speech reader with auto language detection and chunked playback.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://spacesoda.github.io/read-txt">
<meta name="theme-color" content="#0A84FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Read TXT">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="icons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-chrome-192x192.png">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="https://cloud.umami.is/script.js" data-website-id="8771ed9f-edd3-4665-bf16-1bc95940af08"></script>
</head>
<body>
<div class="container">
<header>
<div class="header-bar">
<h1>
<img src="icons/apple-touch-icon.png" alt="" class="app-logo" aria-hidden="true">
Read TXT
</h1>
<a class="github-link" href="https://github.com/SPACESODA/read-txt" target="_blank" rel="noopener noreferrer" aria-label="View source on GitHub">
<svg viewBox="0 0 24 24" aria-hidden="true" class="github-icon">
<path fill="currentColor" d="M12 2a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48v-1.7c-2.78.61-3.37-1.18-3.37-1.18-.46-1.17-1.12-1.48-1.12-1.48-.9-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.1-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.35 4.7-4.58 4.95.36.31.68.92.68 1.86v2.76c0 .27.18.59.69.48A10 10 0 0 0 12 2z"/>
</svg>
</a>
</div>
</header>
<main>
<div id="chunk-display" class="chunk-display hidden"></div>
<div class="input-area">
<div class="input-toolbar">
<div class="slot-buttons" role="group" aria-label="Sections">
<button class="slot-button is-active" type="button" data-slot="1" aria-label="Section 1" aria-pressed="true">1</button>
<button class="slot-button" type="button" data-slot="2" aria-label="Section 2" aria-pressed="false">2</button>
<button class="slot-button" type="button" data-slot="3" aria-label="Section 3" aria-pressed="false">3</button>
<button class="slot-button" type="button" data-slot="4" aria-label="Section 4" aria-pressed="false">4</button>
<button class="slot-button" type="button" data-slot="5" aria-label="Section 5" aria-pressed="false">5</button>
</div>
<button id="btn-paste" class="input-action" type="button" aria-label="Paste from clipboard">Paste</button>
</div>
<textarea id="text-input" placeholder="Paste your text, or drop a txt or md file here." spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false"></textarea>
<div class="auto-detect">
<label for="auto-detect" id="auto-detect-label">
<input type="checkbox" id="auto-detect" checked>
<span id="auto-detect-text">Auto-detect language</span>
</label>
</div>
</div>
<div class="controls-area">
<div class="voice-select-wrapper">
<select id="voice-select" aria-label="Voice selection">
<option value="" disabled selected>Loading voices...</option>
</select>
<p id="chrome-tip" class="helper-text" hidden>💡 On desktop, Edge offers Microsoft natural voices; Chrome offers Google voices.</p>
</div>
<div class="playback-controls">
<button id="btn-rewind" class="btn btn-secondary" aria-label="Previous Section" data-umami-event="read | Rewind Button">
<svg viewBox="0 0 24 24" fill="currentColor" class="icon">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
</svg>
</button>
<button id="btn-play-pause" class="btn btn-primary" aria-label="Play" data-umami-event="read | Play/Pause Button">
<svg viewBox="0 0 24 24" fill="currentColor" class="icon icon-play">
<path d="M8 5v14l11-7z" />
</svg>
<svg viewBox="0 0 24 24" fill="currentColor" class="icon icon-pause hidden">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
</svg>
</button>
<button id="btn-forward" class="btn btn-secondary hide-on-mobile" aria-label="Next Section" data-umami-event="read | Skip Button">
<svg viewBox="0 0 24 24" fill="currentColor" class="icon">
<path d="M6 6v12l8.5-6L6 6zm10 0h2v12h-2z" />
</svg>
</button>
<button id="btn-stop" class="btn btn-secondary" aria-label="Stop" data-umami-event="read | Stop Button" disabled>
<svg viewBox="0 0 24 24" fill="currentColor" class="icon">
<path d="M6 6h12v12H6z" />
</svg>
</button>
</div>
</div>
</main>
</div>
<noscript>This app needs JavaScript enabled to run.</noscript>
<script type="module" src="js/app.js"></script>
</body>
</html>