Presentation-Prompter/control.html at main · mococouo/Presentation-Prompter · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
    background: #1e1e22;
    color: #e8e8ea;
    padding: 14px;
  }
  h3 { margin: 14px 0 6px; font-size: 13px; color: #9aa; font-weight: 600; }
  h3:first-child { margin-top: 0; }
  textarea {
    width: 100%; height: 180px; resize: vertical;
    background: #2a2a30; color: #fff; border: 1px solid #3a3a42; border-radius: 6px;
    padding: 8px;
    font: inherit;
    line-height: 1.5;
  }
  .row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  .row label { flex: 0 0 108px; color: #bbb; }
  input[type=range] { flex: 1; }
  input[type=number] { width: 60px; background: #2a2a30; color: #fff; border: 1px solid #3a3a42; border-radius: 4px; padding: 3px; }
  input[type=color] { width: 40px; height: 26px; border: none; background: none; }
  input[type=text], select {
    flex: 1;
    min-width: 0;
    background: #2a2a30;
    color: #fff;
    border: 1px solid #3a3a42;
    border-radius: 4px;
    padding: 4px;
  }
  .val { flex: 0 0 50px; text-align: right; color: #8af; }
  button { background: #3a6df0; color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
  button.sec { background: #3a3a42; }
  .toggle { display: flex; align-items: center; gap: 6px; }
  .hint { color: #888; font-size: 11px; margin: 4px 0; }
  .keys { background: #26262c; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #bbb; }
  .keys b { color: #8af; font-weight: 600; }
</style>
</head>
<body>
  <h3>Speaker Notes</h3>
  <textarea id="script" placeholder="Slide 1 notes...&#10;&#10;Slide 2 notes...&#10;&#10;Slide 3 notes..."></textarea>
  <div class="hint">Use one blank line between slides. Advance captions with Down / Up or the mouse wheel while Left / Right stays available for slides.</div>

  <h3>Language</h3>
  <div class="row"><label>Language</label><input type="text" id="language" list="languageList" placeholder="en"></div>
  <datalist id="languageList">
    <option value="auto" label="Auto"></option>
    <option value="en" label="English"></option>
    <option value="fr" label="French"></option>
    <option value="de" label="German"></option>
    <option value="es" label="Spanish"></option>
    <option value="it" label="Italian"></option>
    <option value="pt" label="Portuguese"></option>
    <option value="nl" label="Dutch"></option>
    <option value="pl" label="Polish"></option>
    <option value="tr" label="Turkish"></option>
    <option value="ru" label="Russian"></option>
    <option value="uk" label="Ukrainian"></option>
    <option value="ar" label="Arabic"></option>
    <option value="he" label="Hebrew"></option>
    <option value="hi" label="Hindi"></option>
    <option value="bn" label="Bengali"></option>
    <option value="th" label="Thai"></option>
    <option value="vi" label="Vietnamese"></option>
    <option value="id" label="Indonesian"></option>
    <option value="zh-Hans" label="Chinese Simplified"></option>
    <option value="zh-Hant" label="Chinese Traditional"></option>
    <option value="ja" label="Japanese"></option>
    <option value="ko" label="Korean"></option>
  </datalist>
  <div class="row"><label>Direction</label><select id="direction"><option value="auto">Auto</option><option value="ltr">Left to right</option><option value="rtl">Right to left</option></select></div>
  <div class="hint">Use a BCP 47 language code. Examples: en, fr, de, ja, ko, ar.</div>

  <h3>Appearance</h3>
  <div class="row"><label>Font size</label><input type="range" id="fontSize" min="16" max="80"><span class="val" id="fontSizeV"></span></div>
  <div class="row"><label>Line height</label><input type="range" id="lineHeight" min="10" max="30"><span class="val" id="lineHeightV"></span></div>
  <div class="row"><label>Opacity</label><input type="range" id="opacity" min="0" max="100"><span class="val" id="opacityV"></span></div>
  <div class="row"><label>Text color</label><input type="color" id="textColor"><label style="flex:0 0 74px">Background</label><input type="color" id="bgColor"></div>
  <div class="row"><label>Font family</label><input type="text" id="fontFamily" placeholder="system-ui, Segoe UI, Noto Sans"></div>

  <h3>Scrolling / Behavior</h3>
  <div class="row"><label>Auto speed</label><input type="range" id="scrollSpeed" min="8" max="200"><span class="val" id="scrollSpeedV"></span></div>
  <div class="row toggle"><input type="checkbox" id="contentProtection"><label style="flex:1">Hide prompter from screen sharing and recording</label></div>
  <div class="row toggle"><input type="checkbox" id="arrowControl"><label style="flex:1">Use Up / Down to control caption lines</label></div>
  <div class="row toggle"><input type="checkbox" id="mirror"><label style="flex:1">Mirror text for teleprompter glass</label></div>
  <div class="row"><label>Slide delimiter</label><input type="text" id="pageDelimiter" placeholder="\n\n"></div>

  <h3>Shortcuts</h3>
  <div class="keys">
    <div><b>Down / Up</b> Caption next line / previous line</div>
    <div><b>Mouse wheel</b> One step per wheel tick</div>
    <div><b>Left / Right or presenter remote</b> Change slides</div>
    <div style="margin-top:6px;color:#777">Auto scroll:</div>
    <div><b>Ctrl/Cmd + Shift + Space</b> Start / pause auto scroll</div>
    <div><b>Ctrl/Cmd + Shift + Up / Down</b> Slower / faster</div>
    <div style="margin-top:6px;color:#777">Window:</div>
    <div><b>Ctrl/Cmd + Shift + L</b> Lock click-through mode</div>
    <div><b>Ctrl/Cmd + Shift + H</b> Hide / show prompter</div>
    <div><b>Ctrl/Cmd + Shift + Q</b> Quit</div>
  </div>

  <div class="row" style="margin-top:14px">
    <button id="save">Save and Apply</button>
    <button class="sec" id="lock">Lock Prompter</button>
  </div>
  <div class="hint">Most changes apply immediately. Saving keeps your notes for the next launch.</div>

<script src="control.js"></script>
</body>
</html>