-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathrsvp.html
More file actions
111 lines (97 loc) · 5.95 KB
/
rsvp.html
File metadata and controls
111 lines (97 loc) · 5.95 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
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrompterOne — Learn</title>
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&display=swap" rel="stylesheet">
</head>
<body>
<!-- ==================== GLOBAL HEADER ==================== -->
<header class="app-header">
<div class="app-header-left" onclick="navigateTo('library')" style="cursor:pointer">
<div class="logo-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M4 6h16M4 12h12M4 18h14" stroke="url(#glogo)" stroke-width="2.5" stroke-linecap="round"/>
<defs><linearGradient id="glogo" x1="4" y1="6" x2="20" y2="18"><stop stop-color="#F5E6D0"/><stop offset="1" stop-color="#C4A882"/></linearGradient></defs>
</svg>
</div>
<span class="app-logo-text">PrompterOne</span>
</div>
<div class="app-header-center" id="app-header-center">
<!-- Filled dynamically per screen -->
</div>
<div class="app-header-right" id="app-header-right">
<!-- Filled dynamically per screen -->
</div>
</header>
<div id="screen-rsvp" class="screen active">
<div class="rsvp">
<!-- Progress -->
<div class="rsvp-progress"><div class="rsvp-progress-fill" style="width:23%"></div></div>
<!-- Horizontal word display -->
<div class="rsvp-display">
<!-- Crosshair above ORP -->
<div class="rsvp-crosshair">
<svg width="16" height="16" viewBox="0 0 16 16">
<line x1="8" y1="0" x2="8" y2="16" stroke="rgba(255,82,82,.3)" stroke-width="1.5" stroke-dasharray="3,2"/>
<line x1="0" y1="8" x2="16" y2="8" stroke="rgba(255,82,82,.3)" stroke-width="1.5" stroke-dasharray="3,2"/>
<circle cx="8" cy="8" r="2" fill="rgba(255,82,82,.5)"/>
</svg>
</div>
<!-- 3 words LEFT | FOCUS WORD | 3 words RIGHT -->
<div class="rsvp-h-row">
<div class="rsvp-ctx-left" id="rsvp-ctx-l">
<span>what</span>
<span>I</span>
<span>believe</span>
</div>
<div class="rsvp-focus" id="rsvp-word">
<span>t</span><span>r</span><span class="orp">a</span><span>n</span><span>s</span><span>f</span><span>o</span><span>r</span><span>m</span><span>a</span><span>t</span><span>i</span><span>v</span><span>e</span>
</div>
<div class="rsvp-ctx-right" id="rsvp-ctx-r">
<span>moment</span>
<span>for</span>
<span>our</span>
</div>
</div>
<!-- ORP vertical line -->
<div class="rsvp-orp-line"></div>
<!-- Phrase preview -->
<div class="rsvp-phrase">
<span class="rsvp-phrase-label">Next</span>
<p>Today, we're not just launching a product — we're introducing a solution...</p>
</div>
<!-- Pause bar -->
<div class="rsvp-pause-track">
<div class="rsvp-pause-fill"></div>
</div>
</div>
<!-- Controls -->
<div class="rsvp-bottom">
<div class="rsvp-speed">
<button class="rsvp-btn" onclick="changeRsvpSpeed(-10)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
<div class="rsvp-speed-num"><span id="rsvp-speed">250</span><small>WPM</small></div>
<button class="rsvp-btn" onclick="changeRsvpSpeed(10)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
</div>
<div class="rsvp-play-row">
<button class="rsvp-btn" onclick="stepRsvpWord(-5)" title="Back 5 words"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19,20 9,12 19,4"/><line x1="5" y1="19" x2="5" y2="5"/></svg></button>
<button class="rsvp-btn rsvp-btn-sm" onclick="stepRsvpWord(-1)" title="Back 1 word"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15,18 9,12 15,6"/></svg></button>
<button class="rsvp-play" id="rsvp-play-btn" onclick="toggleRsvp()">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
</button>
<button class="rsvp-btn rsvp-btn-sm" onclick="stepRsvpWord(1)" title="Forward 1 word"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9,6 15,12 9,18"/></svg></button>
<button class="rsvp-btn" onclick="stepRsvpWord(5)" title="Forward 5 words"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5,4 15,12 5,20"/><line x1="19" y1="5" x2="19" y2="19"/></svg></button>
</div>
<div class="rsvp-pos">Word 24 / 342 · ~0:42 left</div>
</div>
</div>
</div>
</div><!-- /screen -->
<script src="app.js"></script>
</body>
</html>