Presentation-Prompter/prompter.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; }
  #shell {
    width: 100%; height: 100%;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    -webkit-app-region: drag;
  }
  #dragbar {
    height: 22px; flex: 0 0 22px;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    opacity: 0; transition: opacity .15s;
    font: 11px/1 sans-serif; color: #fff;
  }
  #shell:hover #dragbar { opacity: .6; }
  #dragbar .btn { -webkit-app-region: no-drag; cursor: pointer; padding: 0 4px; }
  #dragbar .btn.quit:hover { color: #ff5c5c; }
  #viewport {
    flex: 1; position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  #track {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 0 26px;
    will-change: transform;
    unicode-bidi: plaintext;
  }
  .line {
    transition: color .2s, opacity .2s, filter .2s;
    padding: 2px 0;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
  }
  .line.cur { opacity: 1; filter: none; font-weight: 600; }
  .line.dim { opacity: .4; filter: blur(.4px); }
  .line.pagestart { margin-top: .8em; }
  #pageTag {
    position: absolute; top: 24px; right: 10px;
    font: 11px/1 sans-serif; color: #fff; opacity: .35;
    -webkit-app-region: no-drag;
  }
  #status {
    position: absolute; bottom: 4px; left: 10px;
    font: 11px/1 sans-serif; color: #fff; opacity: .35;
  }
  #empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: .5; font: 14px/1.6 sans-serif; text-align: center; padding: 20px;
  }
  body.mirror #track { transform-origin: center; }
</style>
</head>
<body>
<div id="shell">
  <div id="dragbar">
    <span class="btn" id="btnControl">⚙ Controls</span>
    <span class="btn" id="btnLock">🔓 Lock</span>
    <span class="btn" id="btnPlay">▶ Auto</span>
    <span class="btn quit" id="btnQuit">✕ Quit</span>
  </div>
  <div id="viewport">
    <div id="track"></div>
    <div id="pageTag"></div>
    <div id="empty">Paste your speaker notes in the control panel.<br>Use ↓ / ↑ or the mouse wheel to advance line by line.</div>
  </div>
  <div id="status"></div>
</div>
<script src="prompter.js"></script>
</body>
</html>