-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
130 lines (121 loc) · 5.43 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Free Live Transcript</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<header id="header">
<div class="title-wrap">
<h1>Free Live Transcript</h1>
<button id="start-listen" class='listen-toggle startListen'>
<img src="img/microphone.png" alt="" height="24">
Start Transcribing
</button>
<button id="stop-listen" class="listen-toggle stopListen" style="display:none">
<img src="img/microphone.png" alt="" height="24">
Stop Transcribing
</button>
<div id="name-transcript"></div>
</div>
<div class="menu">
<div class="settings-box">
<button id="font-minus" class="setting-button"><img src="img/ftfontsizedown.svg" alt="Reduce Font Size"
width="20"></button>
<button id="font-plus" class="setting-button"><img src="img/ftfontsizeup.svg" alt="Increase Font Size"
width="20"></button>
<button id="theme-toggle" class="setting-button">Toggle Light/Dark</button>
<button id="export-button" class="setting-button"><img src="img/clipboard.svg" alt="" width="20">
Copy Transcript
</button>
<button id="name-button" class="setting-button">Save/Share Transcript</button>
<a href="/about.html">About Free Live Transcript</a>
<label for="select-language" style="display: none;">
I am speaking in:</label>
<select id="select-language" name="select-language" style="display: none;">
<!-- <option value="Afrikaans">Afrikaans</option>
<option value="Bahasa Indonesia">Bahasa Indonesia</option>
<option value="Bahasa Melayu">Bahasa Melayu</option>
<option value="Català">Català</option>
<option value="Čeština">Čeština</option>
<option value="Deutsch">Deutsch</option> -->
<option value="en-US" default>English (US)</option>
<option value="es">Español</option>
<!-- <option value="Euskara">Euskara</option>
<option value="Français">Français</option>
<option value="Galego">Galego</option>
<option value="Hrvatski">Hrvatski</option>
<option value="IsiZulu">IsiZulu</option>
<option value="Íslenska">Íslenska</option>
<option value="Italiano">Italiano</option>
<option value="Magyar">Magyar</option>
<option value="Nederlands">Nederlands</option>
<option value="Norsk bokmål">Norsk bokmål</option>
<option value="Polski">Polski</option>
<option value="Português">Português</option>
<option value="Română">Română</option>
<option value="Slovenčina">Slovenčina</option>
<option value="Suomi">Suomi</option>
<option value="Svenska">Svenska</option>
<option value="Türkçe">Türkçe</option>
<option value="български">български</option>
<option value="Pусский">Pусский</option>
<option value="Српски">Српски</option>
<option value="한국어">한국어</option>
<option value="中文">中文</option>
<option value="日本語">日本語</option>
<option value="Lingua latīna">Lingua latīna</option> -->
</select>
</div>
</div>
<button id="header-toggle-button" class="setting-button">Hide Header</button>
</header>
<main>
<!-- transcript area -->
<p id="transcript" contenteditable="false"></p>
<span class="interim" id="interim"></span>
</main>
<!-- Name Popup -->
<div class="name-box hidden">
<h2>Save/Share Transcript</h2>
<button id="exit-popup">Close</button>
<form id="transcriptIDForm" class="transcript-id-form">
<label>Transcript name (letters, numbers, and dashes only):
<input type="text" id="newTranscriptID" pattern="[a-zA-Z0-9-]+">
</label>
<button type="submit">Name Transcript</button>
</form>
<p>Named transcripts are saved, can be watched and translated on other devices.</p>
<p>
⚠️ Note: named transcripts are <strong>public</strong>. Anybody who knows the name can access them.
If you need greater privacy, don't name the transcript. It will disappear when you close this tab.
</p>
<p>If you need to share transcripts privately, you can use the "Copy Transcript" to make your own copy.</p>
<p>If you need something else, you might want a paid professional transcription service.
FLT is not intended as a replacement for such services. It's a little free thing created mostly as a learning tool.
</p>
</div>
<div class="export-box hidden"></div>
<script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
<script>
window.noZensmooth = true
// set top margin for main content based on the rendered height of the header.
function setMargin() {
document.querySelector('main').style.marginTop = document.querySelector("header").clientHeight + 20 + 'px';
}
setMargin()
// call set margin again when window is resized... can probably cache old height of header and only reset styles when the window resize caused a change in height.
window.addEventListener('resize', setMargin)
if (!(window.SpeechRecognition ||
window.webkitSpeechRecognition ||
window.mozSpeechRecognition ||
window.msSpeechRecognition)) {
window.alert("Speech recognition is unavailable in your browser. You will be able to watch transcripts, but not generate them.")
}
</script>
<script src="javascripts/listen.js"></script>
</body>
</html>