Hugging Face's logo

Spaces:
eaglelandsonce
/
presentation_v8
Running

App Files Community
eaglelandsonce commited on
Commit
6b5a5cb
·
verified ·
1 Parent(s): 2dd550a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +977 -19
index.html CHANGED
@@ -1,19 +1,977 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>PDF Slide Viewer · Styled</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
8
+ <style>
9
+ :root{
10
+ --bg-1:#0b0f14; /* page background */
11
+ --bg-2:#0e131a; /* canvas background */
12
+ --panel:rgba(18, 22, 30, .6);
13
+ --panel-2:rgba(18, 22, 30, .85);
14
+ --border:rgba(255,255,255,.08);
15
+ --accent:#5cc8ff; /* primary accent */
16
+ --accent-2:#a78bfa; /* secondary accent */
17
+ --text:#eef2f7; /* primary text */
18
+ --muted:#a3b0c2; /* muted text */
19
+ --danger:#ff6b6b;
20
+ --shadow:0 10px 30px rgba(0,0,0,.35);
21
+ --radius:14px;
22
+ }
23
+ *{box-sizing:border-box}
24
+ html,body{height:100%}
25
+ body{
26
+ margin:0;
27
+ overflow:hidden;
28
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
29
+ background: radial-gradient(1200px 800px at 70% 10%, rgba(92,200,255,.08), transparent 60%),
30
+ radial-gradient(900px 900px at 10% 80%, rgba(167,139,250,.08), transparent 60%),
31
+ var(--bg-1);
32
+ color:var(--text);
33
+ -webkit-font-smoothing:antialiased;
34
+ -moz-osx-font-smoothing:grayscale;
35
+ user-select:none;
36
+ }
37
+ /* Canvas layer */
38
+ #canvas-container{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; }
39
+ canvas{
40
+ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
41
+ background:linear-gradient(180deg, var(--bg-2), #141a23);
42
+ border-radius:18px;
43
+ box-shadow: var(--shadow);
44
+ transition:opacity .35s ease;
45
+ }
46
+ #spotlight-canvas{ z-index:50; display:none; pointer-events:none; background:transparent !important; }
47
+ /* Top-left tool dock */
48
+ .toolbar{
49
+ position:absolute; top:20px; left:16px; z-index:20;
50
+ display:flex; flex-direction:column; gap:10px;
51
+ padding:10px; border-radius:var(--radius);
52
+ background: var(--panel);
53
+ border: 1px solid var(--border);
54
+ backdrop-filter: blur(10px);
55
+ box-shadow: var(--shadow);
56
+ }
57
+ .toolbar-section{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
58
+ .toolbar-section:last-child{ border-bottom:none; padding-bottom:0; }
59
+ .toolbar button{
60
+ width:36px; height:36px; border:none; border-radius:12px; cursor:pointer; color:var(--text);
61
+ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
62
+ outline:1px solid var(--border);
63
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
64
+ transition: transform .12s ease, outline-color .2s ease, background .2s ease;
65
+ }
66
+ .toolbar button:hover{ transform: translateY(-1px); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
67
+ .toolbar button:active{ transform: translateY(0); }
68
+ .drawing-tool.active{
69
+ background:linear-gradient(180deg, rgba(92,200,255,.35), rgba(92,200,255,.15));
70
+ outline-color: rgba(92,200,255,.65);
71
+ box-shadow: 0 0 0 2px rgba(92,200,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
72
+ }
73
+ .color-button{ width:26px; height:22px; border-radius:6px; border:2px solid #fff; opacity:.95; }
74
+ .color-button.red{ background:#ff3b30; border-color:#ffc7c3; }
75
+ .color-button.green{ background:#34c759; border-color:#c6f5d5; }
76
+ .color-button.blue{ background:#0a84ff; border-color:#c7e1ff; }
77
+ .color-button.yellow{ background:#ffd60a; border-color:#fff0a3; }
78
+ .color-button.orange{ background:#ff9f0a; border-color:#ffe0b8; }
79
+ .color-button.active-color{ outline:2px solid var(--accent); transform:scale(1.08); }
80
+ .arrow-button{
81
+ position:absolute; top:50%; transform:translateY(-50%);
82
+ }
83
+ .small-arrow {
84
+ font-size: 11px !important;
85
+ width: 20px !important;
86
+ height: 20px !important;
87
+ padding: 2px !important;
88
+ min-width: 0 !important;
89
+ min-height: 0 !important;
90
+ }
91
+ .arrow-button:hover{ transform: translateY(-50%) scale(1.06); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
92
+ #prev-slide{ left:14px } #next-slide{ right:14px }
93
+ .slider-container{
94
+ position:static; display:flex; gap:6px; align-items:center;
95
+ padding:8px 10px; border-radius:12px;
96
+ background: var(--panel);
97
+ border:1px solid var(--border);
98
+ backdrop-filter: blur(8px);
99
+ box-shadow: var(--shadow);
100
+ }
101
+ #page-slider{ width:140px }
102
+ input[type="range"]{ appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,.15); outline:none }
103
+ input[type="range"]::-webkit-slider-thumb{ appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 2px 6px rgba(92,200,255,.4) }
104
+ input[type="number"], #timer-input{
105
+ width:48px; padding:5px 6px; border-radius:10px; border:1px solid var(--border);
106
+ }
107
+ .small-indicator {
108
+ font-size: 10px !important;
109
+ padding: 2px 5px !important;
110
+ box-shadow: 0 2px 6px rgba(167,139,250,.13) !important;
111
+ border-radius: 999px;
112
+ font-weight: 600;
113
+ letter-spacing: .2px;
114
+ color: var(--text);
115
+ background: linear-gradient(180deg, rgba(167,139,250,.18), rgba(167,139,250,.08));
116
+ border: 1px solid rgba(167,139,250,.35);
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ }
121
+ /* Links panel */
122
+ .links-container{
123
+ position:static; max-height:30vh; overflow:auto;
124
+ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:var(--radius);
125
+ background: var(--panel-2);
126
+ border:1px solid var(--border);
127
+ backdrop-filter: blur(12px);
128
+ box-shadow: var(--shadow);
129
+ }
130
+ .links-container::before{
131
+ content:"Links"; display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
132
+ margin:2px 2px 8px;
133
+ }
134
+ .links-container a{
135
+ width:100%;
136
+ justify-content:space-between;
137
+ color: #fff !important;
138
+ text-decoration: underline;
139
+ transition: color 0.2s;
140
+ }
141
+ .links-container a:visited {
142
+ color: #fff !important;
143
+ }
144
+ .links-container a:hover {
145
+ color: #5cc8ff !important;
146
+ }
147
+ /* Clock & Timer */
148
+ #clock-container{
149
+ position:absolute; top:20px; right:20px; z-index:25; color:var(--text);
150
+ background: var(--panel);
151
+ border:1px solid var(--border);
152
+ border-radius:var(--radius);
153
+ padding:8px; width:130px; text-align:center; backdrop-filter: blur(10px); box-shadow: var(--shadow);
154
+ }
155
+ /* Smaller idle display (less intrusive) */
156
+ #clock-display{
157
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
158
+ font-weight:700; font-size:13px; letter-spacing:.3px; margin-bottom:4px;
159
+ }
160
+ #timer-setup .timer-row {
161
+ gap: 4px !important;
162
+ }
163
+ #timer-input, #timer-message-input {
164
+ font-size: 11px !important;
165
+ padding: 2px 4px !important;
166
+ height: 22px !important;
167
+ border-radius: 7px !important;
168
+ width: 38px;
169
+ background: transparent !important;
170
+ color: var(--text) !important;
171
+ box-shadow: none !important;
172
+ border: 1.5px solid #b5c6e0 !important;
173
+ transition: border-color 0.2s;
174
+ }
175
+
176
+ #timer-input:focus, #timer-message-input:focus {
177
+ border-color: #5cc8ff !important;
178
+ }
179
+ #timer-message-input {
180
+ width: 70px;
181
+ }
182
+ #timer-start-btn {
183
+ font-size: 11px !important;
184
+ padding: 2px 8px !important;
185
+ border-radius: 7px !important;
186
+ height: 22px !important;
187
+ }
188
+ #timer-controls button {
189
+ font-size: 11px !important;
190
+ padding: 2px 8px !important;
191
+ border-radius: 7px !important;
192
+ height: 22px !important;
193
+ }
194
+ #timer-controls button, #timer-setup button{
195
+ padding:6px 10px; border-radius:10px; border:1px solid var(--border); color:var(--text);
196
+ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); cursor:pointer;
197
+ }
198
+ /* File loader */
199
+ #file-loader{ position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:25 }
200
+ #pdf-upload{ display:none }
201
+ /* Welcome */
202
+ #welcome-screen{
203
+ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5;
204
+ color:#cfd6e4; font-size:22px; text-align:center; pointer-events:none;
205
+ }
206
+ #welcome-screen p{
207
+ background: var(--panel-2); border:1px solid var(--border); border-radius:18px; padding:18px 22px; backdrop-filter: blur(10px);
208
+ box-shadow: var(--shadow);
209
+ }
210
+ /* Page indicator */
211
+ #page-indicator{
212
+ position:absolute; right:18px; bottom:18px;
213
+ padding:8px 12px; border-radius:999px; font-weight:600; letter-spacing:.3px; color:var(--text);
214
+ background: linear-gradient(180deg, rgba(167,139,250,.18), rgba(167,139,250,.08));
215
+ border:1px solid rgba(167,139,250,.35); box-shadow:0 6px 20px rgba(167,139,250,.2);
216
+ z-index:1200;
217
+ }
218
+ /* Scrollbar aesthetics (WebKit) */
219
+ .links-container::-webkit-scrollbar{ width:10px }
220
+ .links-container::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:10px }
221
+ .links-container::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent), var(--accent-2)); border-radius:10px }
222
+ .hidden{ display:none !important }
223
+
224
+ /* --- Interaction & z-index overrides --- */
225
+ #canvas-container{ z-index:0 }
226
+ #pdf-canvas-1, #pdf-canvas-2{ z-index:1 }
227
+ .toolbar, .arrow-button, #fullscreen-btn, #file-loader{ z-index:1000; pointer-events:auto }
228
+ .links-container{ z-index:900 }
229
+ #welcome-screen{ z-index:5; pointer-events:none }
230
+
231
+ /* --- Small link buttons & compact links panel --- */
232
+ .link-button{ padding:6px 8px; border-radius:8px; font-size:12px; }
233
+ .link-icon{ width:12px; height:12px; }
234
+ .links-container{ width:220px; gap:6px; padding:10px; }
235
+
236
+ /* Bottom bar layout */
237
+ .bottom-bar{ position:absolute; bottom:16px; left:12px; z-index:20; display:flex; align-items:flex-end; gap:10px; }
238
+
239
+ /* Timer message UI (type-in only) */
240
+ #timer-message-input{ width:160px; padding:6px 8px; border-radius:10px; border:1px solid var(--border); background: rgba(255,255,255,.04); color:var(--text); outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
241
+
242
+ /* Full-screen banner for timer message */
243
+ #timer-banner{ position:absolute; top:0; left:0; right:0; bottom:auto; display:flex; align-items:flex-start; justify-content:center; padding-top:4vh; z-index:1100; pointer-events:none; }
244
+ #timer-banner-text{ width:min(92vw, 1600px); text-align:center; font-weight:800; font-size:clamp(28px, 7vw, 120px); line-height:1.05; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.95); text-shadow:0 6px 30px rgba(0,0,0,.6); background:linear-gradient(180deg, rgba(92,200,255,.18), rgba(92,200,255,.08)); padding:.15em .5em; border-radius:16px; border:1px solid rgba(255,255,255,.18); }
245
+ /* Large clock when timer is running (kept) */
246
+ #clock-container.running{ width:280px; padding:14px; }
247
+ #clock-container.running #clock-display{ font-size:64px; }
248
+
249
+ /* Whiteboard slide-in panel */
250
+ #whiteboard{
251
+ position:fixed; top:0; right:0; width:100vw; height:100vh; z-index:2200;
252
+ transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; background:#ffffff; color:#111;
253
+ box-shadow: 0 30px 80px rgba(0,0,0,.6);
254
+ }
255
+ #whiteboard.open{ transform:translateX(0); }
256
+ .wb-toolbar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:#111; color:#fff; height:56px; position:absolute; top:0; left:0; right:0; z-index:2400; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
257
+ .wb-toolbar .wb-left{ display:flex; gap:8px; align-items:center; }
258
+ .wb-toolbar button{ border:none; background:transparent; color:inherit; padding:8px 10px; border-radius:8px; cursor:pointer; }
259
+ .wb-controls{ margin-left:auto; display:flex; gap:10px; align-items:center; }
260
+ .wb-color{ width:20px; height:20px; border-radius:6px; border:1px solid rgba(0,0,0,.06); cursor:pointer; }
261
+ #whiteboard-canvas{ flex:1; background:#fff; touch-action:none; margin-top:56px; }
262
+ .wb-input-range{ width:120px; }
263
+ </style>
264
+ </head>
265
+ <body>
266
+ <div id="canvas-container">
267
+ <canvas id="pdf-canvas-1"></canvas>
268
+ <canvas id="pdf-canvas-2"></canvas>
269
+ </div>
270
+ <canvas id="spotlight-canvas"></canvas>
271
+
272
+ <!-- Tool Dock -->
273
+ <div class="toolbar main-tool">
274
+ <div class="toolbar-section">
275
+ <button id="tool-pen" class="drawing-tool active" title="Pen Tool (T)">✏️</button>
276
+ <button id="tool-rectangle" class="drawing-tool" title="Draw Rectangle (D)">▭</button>
277
+ <button id="tool-spotlight" class="drawing-tool" title="Spotlight (S)">🔦</button>
278
+ </div>
279
+ <div class="toolbar-section">
280
+ <button id="thickness-increase" title="Increase Size (+)">＋</button>
281
+ <button id="thickness-decrease" title="Decrease Size (-)">－</button>
282
+ </div>
283
+ <div class="toolbar-section">
284
+ <button class="color-button red" data-color="red" title="Red (R)"></button>
285
+ <button class="color-button green" data-color="green" title="Green (G)"></button>
286
+ <button class="color-button blue" data-color="blue" title="Blue (B)"></button>
287
+ <button class="color-button yellow" data-color="yellow" title="Yellow (Y)"></button>
288
+ <button class="color-button orange" data-color="orange" title="Orange (O)"></button>
289
+ </div>
290
+ <div class="toolbar-section">
291
+ <button id="clear-draw" title="Clear All Drawings (E)">🧹</button>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Bottom bar: Links (toggle with L) + Slider -->
296
+ <div id="bottom-bar" class="bottom-bar main-tool">
297
+ <div id="links-container" class="links-container"></div>
298
+ <div class="slider-container">
299
+ <input type="range" id="page-slider" min="1" max="1" value="1" />
300
+ <input type="number" id="page-number-input" min="1" value="1" />
301
+ </div>
302
+ </div>
303
+
304
+
305
+ <!-- File chooser -->
306
+ <div id="file-loader">
307
+ <label for="pdf-upload" class="link-button">
308
+ <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3a1 1 0 0 1 1 1v8.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L11 12.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>
309
+ Open PDF
310
+ </label>
311
+ <input type="file" id="pdf-upload" accept="application/pdf,.pdf" />
312
+ </div>
313
+
314
+ <!-- Clock & Timer -->
315
+ <div id="clock-container">
316
+ <div id="clock-display">00:00:00</div>
317
+ <div id="timer-setup">
318
+ <div class="timer-row" style="display:flex; gap:8px; justify-content:center; align-items:center;">
319
+ <input type="number" id="timer-input" min="1" />
320
+ <input type="text" id="timer-message-input" />
321
+ <button id="timer-start-btn">Start</button>
322
+ </div>
323
+ <!-- Presets removed -->
324
+ </div>
325
+ <div id="timer-controls" style="display:none">
326
+ <button id="timer-pause-btn">Pause</button>
327
+ <button id="timer-stop-btn">Stop</button>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Slide navigation arrows and page indicator (bottom right) -->
332
+ <div id="slide-nav-bar" style="position:absolute; right:18px; bottom:18px; z-index:1201; display:flex; align-items:center; gap:8px;">
333
+ <button id="prev-slide" class="arrow-button small-arrow" title="Previous Slide" aria-label="Previous Slide" style="position:static;">&#8592;</button>
334
+ <div id="page-indicator" class="small-indicator" style="position:static;">1 / 1</div>
335
+ <button id="next-slide" class="arrow-button small-arrow" title="Next Slide" aria-label="Next Slide" style="position:static;">&#8594;</button>
336
+ </div>
337
+
338
+ <!-- Welcome overlay -->
339
+ <div id="welcome-screen"><p>Please select a PDF to begin</p></div>
340
+
341
+ <!-- Timer banner -->
342
+ <div id="timer-banner" class="hidden"><div id="timer-banner-text"></div></div>
343
+
344
+ <script>
345
+ console.info('[PDF Viewer] ready v2.0');
346
+ if (window.pdfjsLib) {
347
+ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
348
+ } else {
349
+ console.error('PDF.js failed to load.');
350
+ const ws = document.getElementById('welcome-screen');
351
+ if (ws) { ws.textContent = 'PDF.js failed to load. Check your network connection and reload.'; }
352
+ }
353
+ // --- 1. DOM ---
354
+ const mainTools = document.querySelectorAll('.main-tool');
355
+ const canvases = [document.getElementById('pdf-canvas-1'), document.getElementById('pdf-canvas-2')];
356
+ const ctxs = [canvases[0].getContext('2d'), canvases[1].getContext('2d')];
357
+ const spotlightCanvas = document.getElementById('spotlight-canvas');
358
+ const spotlightCtx = spotlightCanvas.getContext('2d');
359
+ const toolSpotlightBtn = document.getElementById('tool-spotlight');
360
+ const prevSlideBtn = document.getElementById('prev-slide');
361
+ const nextSlideBtn = document.getElementById('next-slide');
362
+ const linksContainer = document.getElementById('links-container');
363
+ const clearDrawBtn = document.getElementById('clear-draw');
364
+ const colorButtons = document.querySelectorAll('.color-button[data-color]');
365
+ const pageSlider = document.getElementById('page-slider');
366
+ const pageNumberInput = document.getElementById('page-number-input');
367
+ const pdfUploadInput = document.getElementById('pdf-upload');
368
+ const pdfFileLoader = document.getElementById('file-loader');
369
+ const openPdfLabel = document.querySelector('label[for="pdf-upload"]');
370
+ if (pdfUploadInput) {
371
+ pdfUploadInput.addEventListener('click', () => { pdfUploadInput.value = ''; });
372
+ }
373
+ if (openPdfLabel) {
374
+ const triggerPicker = () => { if (pdfUploadInput) { pdfUploadInput.value = ''; pdfUploadInput.click(); } };
375
+ openPdfLabel.addEventListener('click', (e) => { e.preventDefault(); triggerPicker(); });
376
+ openPdfLabel.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); triggerPicker(); } });
377
+ }
378
+ const toolPenBtn = document.getElementById('tool-pen');
379
+ const toolRectangleBtn = document.getElementById('tool-rectangle');
380
+ const thicknessIncreaseBtn = document.getElementById('thickness-increase');
381
+ const thicknessDecreaseBtn = document.getElementById('thickness-decrease');
382
+ const drawingToolBtns = document.querySelectorAll('.drawing-tool');
383
+ const clockContainer = document.getElementById('clock-container');
384
+ const clockDisplay = document.getElementById('clock-display');
385
+ const timerInput = document.getElementById('timer-input');
386
+ const timerSetupDiv = document.getElementById('timer-setup');
387
+ const timerControlsDiv = document.getElementById('timer-controls');
388
+ const timerStartBtn = document.getElementById('timer-start-btn');
389
+ const timerPauseBtn = document.getElementById('timer-pause-btn');
390
+ const timerStopBtn = document.getElementById('timer-stop-btn');
391
+ const timerMessageInput = document.getElementById('timer-message-input');
392
+ const timerBanner = document.getElementById('timer-banner');
393
+ const timerBannerText = document.getElementById('timer-banner-text');
394
+ const welcomeScreen = document.getElementById('welcome-screen');
395
+ const pageIndicator = document.getElementById('page-indicator');
396
+ // --- 2. State ---
397
+ let pdfDoc = null, currentPage = 1, totalPages = 0;
398
+ let isDrawing = false;
399
+ let drawColor = 'red';
400
+ let activeCanvasIndex = 0, isTransitioning = false;
401
+ let lastX = 0, lastY = 0;
402
+ let currentTool = 'pen';
403
+ let lineWidth = 4;
404
+ let shapeStartX = 0, shapeStartY = 0;
405
+ let shapeSnapshot = null;
406
+ let spotlightMode = false;
407
+ let clockInterval, timerInterval, timerState = 'stopped', timerRemainingTime = 0;
408
+ let queuedPage = null;
409
+ function normalizeUrl(u){
410
+ try{ const url = new URL(u); url.hash=''; url.host=url.host.toLowerCase(); url.pathname=url.pathname.replace(/\/+$/, ''); return url.toString(); }
411
+ catch{ return (u||'').trim().toLowerCase().replace(/\/+$/, ''); }
412
+ }
413
+ function makeLinkLabel(url, title){ if(title) return title; try{ return new URL(url).hostname }catch{ return url } }
414
+ function addLinkButton(url, title, perPageSeen){
415
+ const norm = normalizeUrl(url); if(perPageSeen.has(norm)) return; perPageSeen.add(norm);
416
+ const a = document.createElement('a');
417
+ a.href = url; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'link-button';
418
+ a.innerHTML = `<span>${makeLinkLabel(url, title) || 'Link'}</span>
419
+ <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 3h7v7h-2V6.414l-7.293 7.293a1 1 0 1 1-1.414-1.414L17.586 5H14V3ZM5 5h5a1 1 0 1 1 0 2H6v10h10v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/></svg>`;
420
+ linksContainer.appendChild(a);
421
+ }
422
+ async function renderPdfPage(pageNumber, canvas, context){
423
+ if(!pdfDoc) return;
424
+ linksContainer.innerHTML = '';
425
+ const perPageSeen = new Set();
426
+ const page = await pdfDoc.getPage(pageNumber);
427
+ const pdfViewport = page.getViewport({ scale:1.0 });
428
+ const scale = Math.min(window.innerWidth / pdfViewport.width, window.innerHeight / pdfViewport.height);
429
+ const viewport = page.getViewport({ scale });
430
+ canvas.width = viewport.width; canvas.height = viewport.height;
431
+ canvas.style.width = `${viewport.width}px`; canvas.style.height = `${viewport.height}px`;
432
+ const renderContext = { canvasContext: context, viewport };
433
+ await page.render(renderContext).promise;
434
+ if (canvas === canvases[activeCanvasIndex]){
435
+ const annotations = await page.getAnnotations();
436
+ annotations.forEach(ann => { if(ann && ann.url) addLinkButton(ann.url, ann.title, perPageSeen); });
437
+ }
438
+ pageIndicator.textContent = `${pageNumber} / ${totalPages || 1}`;
439
+ }
440
+ async function loadPdf(pdfSource){
441
+ try{
442
+ if (!window.pdfjsLib) throw new Error('PDF.js not available');
443
+ const isLocalFile = location && location.protocol === 'file:';
444
+ let loadingTask;
445
+ if (pdfSource instanceof ArrayBuffer) {
446
+ loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(pdfSource), disableWorker: isLocalFile });
447
+ } else if (pdfSource && typeof pdfSource.byteLength === 'number') {
448
+ loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(pdfSource), disableWorker: isLocalFile });
449
+ } else if (typeof pdfSource === 'string') {
450
+ loadingTask = pdfjsLib.getDocument({ url: pdfSource, disableWorker: isLocalFile });
451
+ } else {
452
+ throw new Error('Unsupported PDF source');
453
+ }
454
+ welcomeScreen.textContent = 'Loading...';
455
+ const doc = await loadingTask.promise;
456
+ pdfDoc = doc;
457
+ linksContainer.innerHTML = '';
458
+ totalPages = pdfDoc.numPages; currentPage = 1;
459
+ pageSlider.max = totalPages; pageSlider.value = 1;
460
+ pageNumberInput.max = totalPages; pageNumberInput.value = 1;
461
+ pageIndicator.textContent = `1 / ${totalPages}`;
462
+ canvases[0].style.zIndex = 1; canvases[0].style.opacity = '1';
463
+ canvases[1].style.zIndex = 0; canvases[1].style.opacity = '0';
464
+ activeCanvasIndex = 0;
465
+ await renderPdfPage(currentPage, canvases[0], ctxs[0]);
466
+ if (prevSlideBtn) prevSlideBtn.disabled = currentPage === 1;
467
+ if (nextSlideBtn) nextSlideBtn.disabled = currentPage === totalPages;
468
+ welcomeScreen.style.display = 'none';
469
+ }catch(error){
470
+ console.error('Error loading PDF:', error);
471
+ const msg = (error && error.message) ? error.message : 'Failed to load PDF. Please try another file.';
472
+ welcomeScreen.textContent = `Failed to load PDF: ${msg}`;
473
+ welcomeScreen.style.display = 'block';
474
+ pdfDoc = null;
475
+ }
476
+ }
477
+ async function transitionToPage(pageNumber){
478
+ if(isTransitioning || !pdfDoc) return; isTransitioning = true;
479
+ const oldCanvasIndex = activeCanvasIndex; const newCanvasIndex = 1 - oldCanvasIndex;
480
+ const oldCanvas = canvases[oldCanvasIndex]; const newCanvas = canvases[newCanvasIndex];
481
+ activeCanvasIndex = newCanvasIndex;
482
+ await renderPdfPage(pageNumber, newCanvas, ctxs[newCanvasIndex]);
483
+ newCanvas.style.zIndex = 1; oldCanvas.style.zIndex = 0;
484
+ newCanvas.style.opacity = '1'; oldCanvas.style.opacity = '0';
485
+ currentPage = pageNumber;
486
+ setTimeout(() => {
487
+ isTransitioning = false;
488
+ if (queuedPage && queuedPage !== currentPage) {
489
+ const next = queuedPage; queuedPage = null;
490
+ transitionToPage(next);
491
+ }
492
+ }, 350);
493
+ if (prevSlideBtn) prevSlideBtn.disabled = currentPage === 1;
494
+ if (nextSlideBtn) nextSlideBtn.disabled = currentPage === totalPages;
495
+ pageSlider.value = currentPage; pageNumberInput.value = currentPage;
496
+ }
497
+ function setDrawColor(newColor){ drawColor = newColor; colorButtons.forEach(btn => btn.classList.remove('active-color')); const btn = document.querySelector(`.color-button[data-color="${newColor}"]`); if(btn) btn.classList.add('active-color'); }
498
+ function changeThickness(amount){ lineWidth = Math.max(2, Math.min(50, lineWidth + amount)); }
499
+ function setTool(tool){ if(spotlightMode) toggleSpotlightMode(false); currentTool = tool; drawingToolBtns.forEach(btn => btn.classList.remove('active')); const t=document.getElementById(`tool-${tool}`); if(t) t.classList.add('active'); }
500
+ function drawSpotlight(e){
501
+ spotlightCtx.clearRect(0,0,spotlightCanvas.width,spotlightCanvas.height);
502
+ spotlightCtx.fillStyle = 'rgba(0,0,0,.82)';
503
+ spotlightCtx.fillRect(0,0,spotlightCanvas.width,spotlightCanvas.height);
504
+ spotlightCtx.globalCompositeOperation = 'destination-out';
505
+ spotlightCtx.beginPath(); spotlightCtx.arc(e.pageX, e.pageY, 110, 0, Math.PI*2); spotlightCtx.fill();
506
+ spotlightCtx.globalCompositeOperation = 'source-over';
507
+ }
508
+ function toggleSpotlightMode(forceState){
509
+ spotlightMode = forceState !== undefined ? forceState : !spotlightMode;
510
+ if(spotlightMode){
511
+ drawingToolBtns.forEach(btn => btn.classList.remove('active')); toolSpotlightBtn.classList.add('active');
512
+ spotlightCanvas.width = window.innerWidth; spotlightCanvas.height = window.innerHeight; spotlightCanvas.style.display='block';
513
+ window.addEventListener('mousemove', drawSpotlight);
514
+ }else{
515
+ spotlightCanvas.style.display='none'; window.removeEventListener('mousemove', drawSpotlight);
516
+ if(toolSpotlightBtn.classList.contains('active')) setTool('pen');
517
+ }
518
+ }
519
+ const goToPage = (num)=>{
520
+ if(!pdfDoc || num < 1 || num > totalPages || num === currentPage) return;
521
+ if (isTransitioning) { queuedPage = num; return; }
522
+ transitionToPage(num);
523
+ };
524
+ const clearDrawing = ()=>{ if(pdfDoc) renderPdfPage(currentPage, canvases[activeCanvasIndex], ctxs[activeCanvasIndex]); };
525
+ const stopDrawing = ()=>{
526
+ if(!isDrawing) return; isDrawing=false; const ctx=ctxs[activeCanvasIndex];
527
+ if(currentTool==='pen'){ ctx.closePath(); }
528
+ else if(currentTool==='rectangle'){ ctx.putImageData(shapeSnapshot,0,0); ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth; ctx.strokeRect(shapeStartX, shapeStartY, lastX-shapeStartX, lastY-shapeStartY); }
529
+ };
530
+ if (pdfUploadInput) {
531
+ pdfUploadInput.addEventListener('change', (e)=>{
532
+ const file = e.target.files && e.target.files[0];
533
+ if (!file) return;
534
+ const isPdf = (file.type === 'application/pdf') || (file.name && file.name.toLowerCase().endsWith('.pdf'));
535
+ if (!isPdf) {
536
+ welcomeScreen.textContent = 'Please choose a PDF file (.pdf).';
537
+ welcomeScreen.style.display = 'block';
538
+ e.target.value = '';
539
+ return;
540
+ }
541
+ const reader = new FileReader();
542
+ reader.onload = (ev) => { loadPdf(ev.target.result); };
543
+ reader.onerror = () => { welcomeScreen.textContent = 'Could not read the file.'; welcomeScreen.style.display = 'block'; };
544
+ reader.onloadend = () => { e.target.value = ''; };
545
+ reader.readAsArrayBuffer(file);
546
+ });
547
+ }
548
+ toolPenBtn.addEventListener('click', ()=>setTool('pen'));
549
+ toolRectangleBtn.addEventListener('click', ()=>setTool('rectangle'));
550
+ toolSpotlightBtn.addEventListener('click', ()=>toggleSpotlightMode());
551
+ thicknessIncreaseBtn.addEventListener('click', ()=>changeThickness(2));
552
+ thicknessDecreaseBtn.addEventListener('click', ()=>changeThickness(-2));
553
+ document.addEventListener('keydown', (event)=>{
554
+ const tag = (event.target && event.target.tagName ? event.target.tagName.toLowerCase() : '');
555
+ const isTextInput = tag === 'input' || tag === 'textarea' || tag === 'select' || (event.target && event.target.isContentEditable);
556
+ if (event.key === 'ArrowLeft' || event.key === 'ArrowRight'){
557
+ event.preventDefault();
558
+ if (event.key === 'ArrowLeft') goToPage(currentPage - 1); else goToPage(currentPage + 1);
559
+ if (event.target === pageSlider || event.target === pageNumberInput) {
560
+ event.target.blur();
561
+ }
562
+ return;
563
+ }
564
+ if(isTextInput) return;
565
+ switch(event.key){
566
+ case 'e': clearDrawing(); break;
567
+ case 'd': setTool('rectangle'); break;
568
+ case 's': toggleSpotlightMode(); break;
569
+ case 't': setTool('pen'); break;
570
+ case '+': changeThickness(2); break;
571
+ case '-': changeThickness(-2); break;
572
+ case 'h':
573
+ mainTools.forEach(el => { if (el.id !== 'bottom-bar') el.classList.toggle('hidden'); });
574
+ const bottomBar = document.getElementById('bottom-bar');
575
+ if (bottomBar) { const sliderWrap = bottomBar.querySelector('.slider-container'); if (sliderWrap) sliderWrap.classList.toggle('hidden'); }
576
+ break;
577
+ case 'f':
578
+ if (!document.fullscreenElement) {
579
+ document.documentElement.requestFullscreen().catch(err=>console.error(err));
580
+ } else {
581
+ document.exitFullscreen();
582
+ }
583
+ break;
584
+ case 'c': clockContainer.classList.toggle('hidden'); break;
585
+ case 'p': pdfFileLoader.classList.toggle('hidden'); break;
586
+ case 'r': setDrawColor('red'); break;
587
+ case 'g': setDrawColor('green'); break;
588
+ case 'b': setDrawColor('blue'); break;
589
+ case 'y': setDrawColor('yellow'); break;
590
+ case 'o': setDrawColor('orange'); break;
591
+ case 'l':
592
+ case 'L':
593
+ linksContainer.classList.toggle('hidden');
594
+ break;
595
+ }
596
+ });
597
+ canvases.forEach((canvas, index)=>{
598
+ canvas.addEventListener('mousedown', e=>{
599
+ if(index!==activeCanvasIndex || spotlightMode) return; isDrawing=true; const ctx=ctxs[activeCanvasIndex];
600
+ if(currentTool==='pen'){
601
+ [lastX,lastY] = [e.offsetX, e.offsetY]; ctx.beginPath(); ctx.moveTo(lastX,lastY);
602
+ ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth; ctx.lineCap='round'; ctx.lineJoin='round';
603
+ } else if(currentTool==='rectangle'){
604
+ shapeSnapshot = ctx.getImageData(0,0,canvas.width,canvas.height);
605
+ [shapeStartX,lastX] = [e.offsetX, e.offsetX]; [shapeStartY,lastY] = [e.offsetY, e.offsetY];
606
+ }
607
+ });
608
+ canvas.addEventListener('mousemove', e=>{
609
+ if(!isDrawing || index!==activeCanvasIndex || spotlightMode) return; const ctx=ctxs[activeCanvasIndex];
610
+ if(currentTool==='pen'){
611
+ ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX,lastY] = [e.offsetX, e.offsetY];
612
+ } else if(currentTool==='rectangle'){
613
+ ctx.putImageData(shapeSnapshot,0,0); ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth;
614
+ ctx.strokeRect(shapeStartX, shapeStartY, e.offsetX-shapeStartX, e.offsetY-shapeStartY);
615
+ [lastX,lastY] = [e.offsetX, e.offsetY];
616
+ }
617
+ });
618
+ });
619
+ window.addEventListener('mouseup', stopDrawing);
620
+ window.addEventListener('blur', stopDrawing);
621
+ window.addEventListener('resize', ()=>{
622
+ if(pdfDoc) renderPdfPage(currentPage, canvases[activeCanvasIndex], ctxs[activeCanvasIndex]);
623
+ if(spotlightMode){ spotlightCanvas.width = window.innerWidth; spotlightCanvas.height = window.innerHeight; }
624
+ });
625
+ clearDrawBtn.addEventListener('click', clearDrawing);
626
+ colorButtons.forEach(btn=>btn.addEventListener('click', ()=>setDrawColor(btn.dataset.color)));
627
+ if (prevSlideBtn) prevSlideBtn.addEventListener('click', ()=>goToPage(currentPage-1));
628
+ if (nextSlideBtn) nextSlideBtn.addEventListener('click', ()=>goToPage(currentPage+1));
629
+ pageSlider.addEventListener('input', e=>goToPage(parseInt(e.target.value,10)));
630
+ pageNumberInput.addEventListener('change', e=>goToPage(parseInt(e.target.value,10)));
631
+ /* ---- Clock & Timer ---- */
632
+ function showBanner(text){ if(!timerBanner || !timerBannerText) return; timerBannerText.textContent = text; timerBanner.classList.remove('hidden'); }
633
+ function hideBanner(){ if(!timerBanner) return; timerBanner.classList.add('hidden'); }
634
+ function playEndBeeps(count=1){
635
+ let beepsPlayed=0; const audioCtx = new (window.AudioContext||window.webkitAudioContext)();
636
+ function beep(){ if(beepsPlayed>=count) return; const osc=audioCtx.createOscillator(); osc.type='sine'; osc.frequency.setValueAtTime(880, audioCtx.currentTime);
637
+ osc.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime+0.3); beepsPlayed++; setTimeout(beep, 500); }
638
+ beep();
639
+ }
640
+ function displayTime(ms){ if(ms<0) ms=0; const mins=Math.floor(ms/60000); const secs=Math.floor((ms%60000)/1000); clockDisplay.textContent = `${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}`; }
641
+ function startClock(){ clearInterval(timerInterval); const update=()=>clockDisplay.textContent=new Date().toLocaleTimeString(); update(); clockInterval=setInterval(update, 1000); }
642
+ function runTimer(duration){
643
+ clearInterval(clockInterval);
644
+ const endTime=Date.now()+duration;
645
+ timerState='running';
646
+ timerInterval=setInterval(()=>{
647
+ timerRemainingTime=endTime-Date.now();
648
+ if(timerRemainingTime<=0){
649
+ playEndBeeps(3);
650
+ stopTimer(); // ensures UI reset + Start visible
651
+ } else {
652
+ displayTime(timerRemainingTime);
653
+ }
654
+ }, 250);
655
+ displayTime(duration);
656
+ }
657
+ // ✅ Strong reset so Start always returns
658
+ function stopTimer(){
659
+ clearInterval(timerInterval);
660
+ timerState='stopped';
661
+ timerRemainingTime=0;
662
+ // UI reset
663
+ timerControlsDiv.style.display='none';
664
+ timerSetupDiv.style.display='flex'; // keep original layout
665
+ timerPauseBtn.textContent='Pause';
666
+ clockContainer.classList.remove('running');
667
+ hideBanner();
668
+ // restore live clock
669
+ startClock();
670
+ // ready for next run
671
+ if (timerInput) timerInput.value = '';
672
+ if (timerMessageInput) timerMessageInput.value = '';
673
+ setTimeout(() => timerInput && timerInput.focus(), 0);
674
+ }
675
+ // 🔁 Start from inputs (used by button and Enter key)
676
+ function startFromInputs(){
677
+ const minutes = parseInt(timerInput.value,10);
678
+ const msg = (timerMessageInput && timerMessageInput.value.trim()) || '';
679
+ if(minutes && minutes>0){
680
+ runTimer(minutes*60*1000);
681
+ if (msg) { showBanner(msg); } else { hideBanner(); }
682
+ clockContainer.classList.add('running'); // large clock while running
683
+ timerSetupDiv.style.display='none';
684
+ timerControlsDiv.style.display='flex';
685
+ timerPauseBtn.textContent='Pause';
686
+ timerInput.value='';
687
+ }
688
+ }
689
+ // Start button
690
+ timerStartBtn.addEventListener('click', startFromInputs);
691
+ // Enter in either field starts timer
692
+ [timerInput, timerMessageInput].forEach(el=>{
693
+ el.addEventListener('keydown', (e)=>{
694
+ if (e.key === 'Enter'){
695
+ e.preventDefault();
696
+ startFromInputs();
697
+ }
698
+ });
699
+ });
700
+ timerPauseBtn.addEventListener('click', ()=>{
701
+ if(timerState==='running'){
702
+ clearInterval(timerInterval); timerState='paused'; timerPauseBtn.textContent='Resume';
703
+ } else if(timerState==='paused'){
704
+ runTimer(timerRemainingTime); timerState='running'; timerPauseBtn.textContent='Pause';
705
+ }
706
+ });
707
+ timerStopBtn.addEventListener('click', stopTimer);
708
+ // --- 6. Init ---
709
+ function init(){ setDrawColor('red'); setTool('pen'); startClock(); }
710
+ init();
711
+ </script>
712
+
713
+ <!-- Whiteboard Panel -->
714
+ <div id="whiteboard" aria-hidden="true">
715
+ <div class="wb-toolbar">
716
+ <div class="wb-left">
717
+ <button id="wb-tool-pen" title="Pen">✏️</button>
718
+ <button id="wb-tool-rect" title="Rectangle">▭</button>
719
+ <button id="wb-tool-circle" title="Circle">◯</button>
720
+ <button id="wb-tool-line" title="Line">/</button>
721
+ <button id="wb-back-free" title="Back to Freehand">↩️✏️</button>
722
+ <button id="wb-tool-select" title="Select/Move">🔲</button>
723
+ <button id="wb-bring-front" title="Bring to Front">⬆️</button>
724
+ <button id="wb-send-back" title="Send to Back">⬇️</button>
725
+ <button id="wb-import" title="Import Image">🖼️</button>
726
+ <button id="wb-close" title="Close (X)">✕</button>
727
+ <button id="wb-undo" title="Undo">↶ Undo</button>
728
+ <button id="wb-clear" title="Clear">🧹 Clear</button>
729
+ <button id="wb-save" title="Save drawing">💾 Save</button>
730
+ <label style="display:flex;align-items:center;gap:8px;color:#fff;margin-left:6px">Size <input id="wb-size" class="wb-input-range" type="range" min="1" max="60" value="6" /></label>
731
+ </div>
732
+ <div class="wb-controls">
733
+ <div id="wb-colors" style="display:flex;gap:8px;align-items:center;">
734
+ <div class="wb-color" data-color="#000000" style="background:#000"></div>
735
+ <div class="wb-color" data-color="#ff3b30" style="background:#ff3b30"></div>
736
+ <div class="wb-color" data-color="#34c759" style="background:#34c759"></div>
737
+ <div class="wb-color" data-color="#0a84ff" style="background:#0a84ff"></div>
738
+ <div class="wb-color" data-color="#ffd60a" style="background:#ffd60a"></div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+
743
+ <canvas id="whiteboard-canvas"></canvas>
744
+ <input type="file" id="wb-image-input" accept="image/*" style="display:none" />
745
+ </div>
746
+ <script>
747
+ // Whiteboard tools: pen / rect / circle / line / select (move)
748
+ (function(){
749
+ const wb = document.getElementById('whiteboard');
750
+ const canvas = document.getElementById('whiteboard-canvas');
751
+ const ctx = canvas.getContext('2d');
752
+ const closeBtn = document.getElementById('wb-close');
753
+ const clearBtn = document.getElementById('wb-clear');
754
+ const saveBtn = document.getElementById('wb-save');
755
+ const sizeInput = document.getElementById('wb-size');
756
+ const colors = document.getElementById('wb-colors');
757
+ const tools = {
758
+ pen: document.getElementById('wb-tool-pen'),
759
+ rect: document.getElementById('wb-tool-rect'),
760
+ circle: document.getElementById('wb-tool-circle'),
761
+ line: document.getElementById('wb-tool-line'),
762
+ select: document.getElementById('wb-tool-select')
763
+ };
764
+
765
+ let deviceRatio = window.devicePixelRatio || 1;
766
+ let tool = 'pen';
767
+ let color = '#000000';
768
+ let lineWidth = parseInt(sizeInput.value,10) || 4;
769
+ let drawing = false;
770
+ let start = {x:0,y:0};
771
+ let shapes = [];
772
+ let current = null;
773
+ let selected = -1;
774
+ let history = [];
775
+ const HANDLE_SIZE = 16; // visual handle size
776
+ const HALF_HANDLE = HANDLE_SIZE / 2;
777
+ let replaceImageIndex = -1;
778
+ const HISTORY_LIMIT = 120;
779
+
780
+ function pushHistory(){ try{ const snap = JSON.parse(JSON.stringify(shapes || [])); history.push(snap); if(history.length>HISTORY_LIMIT) history.shift(); }catch(e){ /* ignore */ } }
781
+
782
+ function undo(){ if(history.length===0) return; shapes = history.pop() || []; selected = -1; saveShapes(); redraw(); }
783
+
784
+
785
+ function resize(){ deviceRatio = window.devicePixelRatio || 1; const th = document.querySelector('.wb-toolbar')?.offsetHeight||48; canvas.width = Math.floor(window.innerWidth * deviceRatio); canvas.height = Math.floor((window.innerHeight - th) * deviceRatio); canvas.style.width = window.innerWidth+'px'; canvas.style.height = (window.innerHeight-th)+'px'; ctx.setTransform(deviceRatio,0,0,deviceRatio,0,0); redraw(); }
786
+
787
+ function getHandlesForShape(s){ if(!s) return []; if(s.type==='rect' || s.type==='circle'){ const w = s.w||0, h = s.h||0; return [ {name:'nw', x:s.x, y:s.y}, {name:'ne', x:s.x+w, y:s.y}, {name:'se', x:s.x+w, y:s.y+h}, {name:'sw', x:s.x, y:s.y+h} ]; } if(s.type==='line'){ return [ {name:'p1', x:s.x1, y:s.y1}, {name:'p2', x:s.x2, y:s.y2} ]; } return []; }
788
+
789
+ function drawHandles(s){ const handles = getHandlesForShape(s); handles.forEach(h=>{ ctx.save(); ctx.fillStyle='white'; ctx.strokeStyle='black'; ctx.lineWidth=1; ctx.fillRect(h.x-HALF_HANDLE,h.y-HALF_HANDLE,HANDLE_SIZE,HANDLE_SIZE); ctx.strokeRect(h.x-HALF_HANDLE,h.y-HALF_HANDLE,HANDLE_SIZE,HANDLE_SIZE); ctx.restore(); }); }
790
+
791
+ function redraw(){ ctx.clearRect(0,0,canvas.width/deviceRatio, canvas.height/deviceRatio); shapes.forEach((s, i)=>{ draw(s); if(i===selected) drawHandles(s); }); if(current) draw(current, true); }
792
+
793
+ // draw a smoothed pen path (variable-width approximation)
794
+ // Render pen as a continuous solid stroke (no gaps). We approximate variable width
795
+ // by averaging per-point widths for a single stroked path to avoid visible seams.
796
+ function drawSmoothPath(context, path){ if(!path || path.length===0) return; const pts = path; if(pts.length===1){ context.beginPath(); context.arc(pts[0].x, pts[0].y, (pts[0].w||2)/2, 0, Math.PI*2); context.fill(); return; }
797
+ context.lineJoin = 'round'; context.lineCap = 'round';
798
+ // average width to approximate variable pressure while keeping stroke continuous
799
+ let totalW = 0; for(let i=0;i<pts.length;i++) totalW += (pts[i].w || context.lineWidth || 2);
800
+ const avgW = Math.max(1, Math.round(totalW / pts.length));
801
+ context.lineWidth = avgW;
802
+ // build a single continuous stroked path
803
+ context.beginPath(); context.moveTo(pts[0].x, pts[0].y);
804
+ for(let i=1;i<pts.length;i++){ const p = pts[i]; context.lineTo(p.x, p.y); }
805
+ context.stroke();
806
+ }
807
+
808
+ function getHandlesForShape(s){ if(!s) return []; if(s.type==='rect' || s.type==='circle' || s.type==='image'){ const w = s.w||0, h = s.h||0; return [ {name:'nw', x:s.x, y:s.y}, {name:'ne', x:s.x+w, y:s.y}, {name:'se', x:s.x+w, y:s.y+h}, {name:'sw', x:s.x, y:s.y+h} ]; } if(s.type==='line'){ return [ {name:'p1', x:s.x1, y:s.y1}, {name:'p2', x:s.x2, y:s.y2} ]; } return []; }
809
+
810
+ function draw(s, preview){ if(!s) return; ctx.save(); ctx.strokeStyle = s.color; ctx.fillStyle = s.color; ctx.lineWidth = s.lineWidth||2; if(s.type==='pen'){ if(!s.path || s.path.length===0){ ctx.restore(); return; } drawSmoothPath(ctx, s.path); } else if(s.type==='rect'){ if(s.fill) ctx.fillRect(s.x,s.y,s.w,s.h); ctx.strokeRect(s.x,s.y,s.w,s.h); } else if(s.type==='circle'){ const cx=s.x+s.w/2, cy=s.y+s.h/2, rx=Math.abs(s.w/2), ry=Math.abs(s.h/2); ctx.beginPath(); ctx.ellipse(cx,cy,rx,ry,0,0,Math.PI*2); if(s.fill) ctx.fill(); ctx.stroke(); } else if(s.type==='line'){ ctx.beginPath(); ctx.moveTo(s.x1, s.y1); ctx.lineTo(s.x2, s.y2); ctx.stroke(); } else if(s.type==='image'){ // draw image if available
811
+ if(s._img){ try{ ctx.drawImage(s._img, s.x, s.y, s.w, s.h); }catch(e){ /* ignore draw errors */ } }
812
+ else if(s.src){ // lazy load
813
+ const img = new Image(); img.onload = ()=>{ s._img = img; redraw(); }; img.src = s.src;
814
+ }
815
+ }
816
+ ctx.restore(); }
817
+
818
+ function setTool(t){ tool=t; Object.values(tools).forEach(b=>b && b.classList && b.classList.remove('active')); const btn = tools[t]; if(btn) btn.classList.add('active'); updateBackToFreeBtn(); }
819
+ function updateBackToFreeBtn(){ const back = document.getElementById('wb-back-free'); if(!back) return; back.style.display = (tool === 'pen') ? 'none' : 'inline-block'; }
820
+ Object.keys(tools).forEach(k=>{ const b = tools[k]; if(b) b.addEventListener('click', ()=>setTool(k)); });
821
+ colors.querySelectorAll('.wb-color').forEach(c=>c.addEventListener('click', ()=>{ colors.querySelectorAll('.wb-color').forEach(x=>x.style.outline=''); c.style.outline='3px solid rgba(0,0,0,.18)'; color = c.dataset.color || c.style.backgroundColor || '#000'; }));
822
+ sizeInput.addEventListener('input', ()=>{ lineWidth = parseInt(sizeInput.value,10)||4; // update currently selected shape's stroke width if any
823
+ if(selected>=0 && shapes[selected]){ shapes[selected].lineWidth = lineWidth; saveShapes(); redraw(); } });
824
+
825
+ function toLocal(e){ const rect = canvas.getBoundingClientRect(); const cx = e.clientX ?? (e.touches && e.touches[0].clientX); const cy = e.clientY ?? (e.touches && e.touches[0].clientY); const pressure = (typeof e.pressure === 'number' ? e.pressure : (e.force || 0)) || 0; return { x: cx - rect.left, y: cy - rect.top, pressure }; }
826
+
827
+ function hitTest(p){ // return index of topmost shape under point or -1
828
+ for(let i=shapes.length-1;i>=0;i--){ const s=shapes[i]; if(!s) continue; if(s.type==='rect'){ if(p.x>=s.x && p.x<=s.x+s.w && p.y>=s.y && p.y<=s.y+s.h) return i; } else if(s.type==='circle'){ const cx=s.x+s.w/2, cy=s.y+s.h/2, rx=Math.abs(s.w/2), ry=Math.abs(s.h/2); if(rx>0 && ry>0 && ((p.x-cx)*(p.x-cx)/(rx*rx) + (p.y-cy)*(p.y-cy)/(ry*ry))<=1) return i; } else if(s.type==='line'){ // distance to segment
829
+ const x1=s.x1,y1=s.y1,x2=s.x2,y2=s.y2; const A=p.x-x1, B=p.y-y1, C=x2-x1, D=y2-y1; const dot = A*C + B*D; const len2 = C*C + D*D; let t = (len2===0)?0:dot/len2; t = Math.max(0, Math.min(1, t)); const projx = x1 + t*C, projy = y1 + t*D; const dx = p.x - projx, dy = p.y - projy; const dist2 = dx*dx + dy*dy; if(dist2 <= 9) return i; } else if(s.type==='pen'){ let minx=Infinity,miny=Infinity,maxx=-Infinity,maxy=-Infinity; (s.path||[]).forEach(pt=>{ minx=Math.min(minx,pt.x); miny=Math.min(miny,pt.y); maxx=Math.max(maxx,pt.x); maxy=Math.max(maxy,pt.y); }); if(p.x>=minx-6 && p.x<=maxx+6 && p.y>=miny-6 && p.y<=maxy+6) return i; } }
830
+ return -1;
831
+ }
832
+
833
+ canvas.addEventListener('pointerdown', (ev)=>{
834
+ ev.preventDefault(); const p = toLocal(ev); drawing = true; start = p;
835
+ // push history before a change is started
836
+ pushHistory();
837
+
838
+ if(tool==='pen'){
839
+ // capture pointer to keep drawing when cursor leaves canvas
840
+ try{ canvas.setPointerCapture(ev.pointerId); }catch(e){}
841
+ const w = Math.max(1, (lineWidth || 2) * (p.pressure || 1));
842
+ // If last shape is a pen with the same settings, continue drawing into it (continuous freehand)
843
+ const last = shapes.length ? shapes[shapes.length-1] : null;
844
+ const PROXIMITY = 20; // px — only append if new stroke starts near the last stroke end
845
+ let appendToLast = false;
846
+ if(last && last.type === 'pen' && last.color === color && (last.lineWidth||0) === (lineWidth||0) && last.path && last.path.length){
847
+ const lp = last.path[last.path.length-1];
848
+ const dx = lp.x - p.x, dy = lp.y - p.y; if((dx*dx + dy*dy) <= (PROXIMITY*PROXIMITY)) appendToLast = true;
849
+ }
850
+ if(appendToLast){ current = last; current.path = current.path || []; current.path.push({ x: p.x, y: p.y, w }); current._isExisting = true; }
851
+ else { current = { type:'pen', path:[{ x:p.x, y:p.y, w }], color, lineWidth }; current._isExisting = false; }
852
+ } else if(tool==='rect' || tool==='circle'){
853
+ current = { type: tool==='rect'?'rect':'circle', x:p.x, y:p.y, w:0, h:0, color, lineWidth, fill:false };
854
+ } else if(tool==='line'){
855
+ current = { type:'line', x1:p.x, y1:p.y, x2:p.x, y2:p.y, color, lineWidth };
856
+ } else if(tool==='select'){
857
+ selected = hitTest(p);
858
+ if(selected<0){ current=null; redraw(); return; }
859
+ // check handles first (larger hitbox)
860
+ const s = shapes[selected]; const handles = getHandlesForShape(s);
861
+ for(const h of handles){ if(p.x>=h.x-HALF_HANDLE && p.x<=h.x+HALF_HANDLE && p.y>=h.y-HALF_HANDLE && p.y<=h.y+HALF_HANDLE){ drawing=false; current={resize:true, handle:h.name, shapeIndex:selected, orig:JSON.parse(JSON.stringify(s)), startPt:p}; canvas.setPointerCapture(ev.pointerId); redraw(); return; } }
862
+ // start moving
863
+ current = { move:true, shapeIndex:selected, startPt:p, orig:JSON.parse(JSON.stringify(s)) };
864
+ canvas.setPointerCapture(ev.pointerId);
865
+ }
866
+ redraw();
867
+ });
868
+
869
+ canvas.addEventListener('pointermove', (ev)=>{ const p = toLocal(ev);
870
+ // update cursor when idle
871
+ if(!drawing && (!current || (!current.move && !current.resize))){ const hit = hitTest(p); if(hit>=0){ const s=shapes[hit]; const handles = getHandlesForShape(s); let over=null; for(const h of handles){ if(p.x>=h.x-HALF_HANDLE && p.x<=h.x+HALF_HANDLE && p.y>=h.y-HALF_HANDLE && p.y<=h.y+HALF_HANDLE){ over=h.name; break; } } if(over){ canvas.style.cursor = (over==='nw' || over==='se') ? 'nwse-resize' : (over==='ne' || over==='sw') ? 'nesw-resize' : 'pointer'; } else { canvas.style.cursor = 'move'; } } else { canvas.style.cursor = (tool==='pen') ? 'crosshair' : 'default'; } }
872
+
873
+ if(current && current.resize){ const s = shapes[current.shapeIndex]; const h = current.handle;
874
+ if(s.type==='rect' || s.type==='circle' || s.type==='image'){
875
+ // support shift to constrain aspect ratio
876
+ if(h==='se'){ let nx = p.x - s.x; let ny = p.y - s.y; if(ev.shiftKey){ const sz = Math.max(Math.abs(nx), Math.abs(ny)); nx = sz * Math.sign(nx||1); ny = sz * Math.sign(ny||1); } s.w = nx; s.h = ny; }
877
+ else if(h==='ne'){ let nx = p.x - s.x; let ny = (s.y + s.h) - p.y; if(ev.shiftKey){ const sz = Math.max(Math.abs(nx), Math.abs(ny)); nx = sz * Math.sign(nx||1); ny = sz * Math.sign(ny||1); } s.w = nx; s.h = (s.y + s.h) - p.y; s.y = p.y; }
878
+ else if(h==='nw'){ let nx = (s.x + s.w) - p.x; let ny = (s.y + s.h) - p.y; if(ev.shiftKey){ const sz = Math.max(Math.abs(nx), Math.abs(ny)); nx = sz * Math.sign(nx||1); ny = sz * Math.sign(ny||1); } s.w = nx; s.h = ny; s.x = p.x; s.y = p.y; }
879
+ else if(h==='sw'){ let nx = (s.x + s.w) - p.x; let ny = p.y - s.y; if(ev.shiftKey){ const sz = Math.max(Math.abs(nx), Math.abs(ny)); nx = sz * Math.sign(nx||1); ny = sz * Math.sign(ny||1); } s.w = nx; s.h = ny; s.x = p.x; }
880
+ } else if(s.type==='line'){
881
+ if(h==='p1'){ s.x1 = p.x; s.y1 = p.y; } else if(h==='p2'){ s.x2 = p.x; s.y2 = p.y; }
882
+ }
883
+ // normalize
884
+ if(s.w!==undefined && s.w<0){ s.x += s.w; s.w = Math.abs(s.w); }
885
+ if(s.h!==undefined && s.h<0){ s.y += s.h; s.h = Math.abs(s.h); }
886
+ redraw(); return; }
887
+
888
+ if(current && current.move){ const s = shapes[current.shapeIndex]; const dx = p.x - current.startPt.x; const dy = p.y - current.startPt.y;
889
+ if(s.type==='rect' || s.type==='circle' || s.type==='image'){ s.x = current.orig.x + dx; s.y = current.orig.y + dy; }
890
+ else if(s.type==='line'){ s.x1 = current.orig.x1 + dx; s.y1 = current.orig.y1 + dy; s.x2 = current.orig.x2 + dx; s.y2 = current.orig.y2 + dy; }
891
+ else if(s.type==='pen'){ s.path = (current.orig.path||[]).map(pt=>({ x: pt.x + dx, y: pt.y + dy })); }
892
+ redraw(); return; }
893
+
894
+ if(!drawing) return; if(tool==='pen' && current){ const w = Math.max(1, (lineWidth || 2) * (p.pressure || 1)); current.path.push({ x: p.x, y: p.y, w }); redraw(); } else if((tool==='rect' || tool==='circle') && current){ current.w = p.x - current.x; current.h = p.y - current.y; redraw(); } else if(tool==='line' && current){ current.x2 = p.x; current.y2 = p.y; redraw(); }
895
+ });
896
+
897
+ canvas.addEventListener('pointerup', (ev)=>{ drawing=false; if(current){ if(current.resize){ saveShapes(); current=null; redraw(); canvas.releasePointerCapture(ev.pointerId); return; } if(current.move){ saveShapes(); current=null; redraw(); canvas.releasePointerCapture(ev.pointerId); return; }
898
+ if(current.type==='pen'){ if(!current._isExisting){ shapes.push(current); } } else if(current.type==='rect' || current.type==='circle'){ if(current.w<0){ current.x+=current.w; current.w=Math.abs(current.w); } if(current.h<0){ current.y+=current.h; current.h=Math.abs(current.h); } shapes.push(current); } else if(current.type==='line'){ shapes.push(current); }
899
+ current=null; redraw(); saveShapes(); try{ canvas.releasePointerCapture(ev.pointerId); }catch(e){} } });
900
+
901
+ function saveShapes(){ localStorage.setItem('whiteboard:shapes', JSON.stringify(shapes)); }
902
+ function loadShapes(){ try{ const data = localStorage.getItem('whiteboard:shapes'); if(data) shapes = JSON.parse(data).filter(s=>s && s.type && s.type!=='text'); }catch(e){ shapes=[]; } redraw(); }
903
+
904
+ // enhance loadShapes to hydrate image objects
905
+ (function(){ const _load = loadShapes; loadShapes = function(){ try{ const data = localStorage.getItem('whiteboard:shapes'); if(data) shapes = JSON.parse(data).filter(s=>s && s.type && s.type!=='text'); else shapes = []; // hydrate images
906
+ shapes.forEach(s=>{ if(s.type==='image' && s.src && !s._img){ const img=new Image(); img.onload=()=>{ s._img = img; redraw(); }; img.src = s.src; } });
907
+ }catch(e){ shapes=[]; } redraw(); }; })();
908
+
909
+ clearBtn.addEventListener('click', ()=>{ if(confirm('Clear whiteboard?')){ pushHistory(); shapes=[]; saveShapes(); redraw(); }});
910
+ const undoBtn = document.getElementById('wb-undo');
911
+ if(undoBtn) undoBtn.addEventListener('click', ()=>{ undo(); });
912
+
913
+ // bring to front / send to back
914
+ const bringBtn = document.getElementById('wb-bring-front');
915
+ const sendBtn = document.getElementById('wb-send-back');
916
+ if(bringBtn) bringBtn.addEventListener('click', ()=>{ if(selected<0) return; const s = shapes.splice(selected,1)[0]; shapes.push(s); selected = shapes.length-1; saveShapes(); redraw(); });
917
+ if(sendBtn) sendBtn.addEventListener('click', ()=>{ if(selected<0) return; const s = shapes.splice(selected,1)[0]; shapes.unshift(s); selected = 0; saveShapes(); redraw(); });
918
+
919
+ const backBtn = document.getElementById('wb-back-free');
920
+ if(backBtn) backBtn.addEventListener('click', ()=>{ setTool('pen'); });
921
+
922
+ // removed Bezier checkbox — pen smoothing uses continuous line
923
+
924
+ // keyboard: Ctrl/Cmd+Z for undo
925
+ document.addEventListener('keydown', (e)=>{
926
+ const z = e.key && (e.key.toLowerCase() === 'z');
927
+ if(!z) return;
928
+ if((e.ctrlKey || e.metaKey) && !e.shiftKey){ e.preventDefault(); undo(); }
929
+ });
930
+ saveBtn.addEventListener('click', async ()=>{
931
+ // Ensure all image shapes have _img loaded before export
932
+ const loads = [];
933
+ shapes.forEach(s=>{ if(s.type==='image' && !s._img && s.src){ loads.push(new Promise((res)=>{ const img=new Image(); img.onload=()=>{ s._img = img; res(); }; img.onerror=()=>res(); img.src = s.src; })); } });
934
+ if(loads.length) await Promise.all(loads);
935
+ const tmp=document.createElement('canvas'); tmp.width=canvas.width; tmp.height=canvas.height; const tctx=tmp.getContext('2d'); tctx.setTransform(deviceRatio,0,0,deviceRatio,0,0); shapes.forEach(s=>drawTo(tctx,s)); const data = tmp.toDataURL('image/png'); const a=document.createElement('a'); a.href=data; a.download=`whiteboard-${Date.now()}.png`; a.click(); saveShapes();
936
+ });
937
+
938
+ function drawTo(c,s){ c.save(); c.strokeStyle=s.color; c.fillStyle=s.color; c.lineWidth=s.lineWidth||2; if(s.type==='pen'){ if(!s.path||s.path.length===0){ c.restore(); return; } // draw pen
939
+ drawSmoothPath(c, s.path);
940
+ } else if(s.type==='rect'){ if(s.fill) c.fillRect(s.x,s.y,s.w,s.h); c.strokeRect(s.x,s.y,s.w,s.h); } else if(s.type==='circle'){ const cx=s.x+s.w/2, cy=s.y+s.h/2, rx=Math.abs(s.w/2), ry=Math.abs(s.h/2); c.beginPath(); c.ellipse(cx,cy,rx,ry,0,0,Math.PI*2); if(s.fill) c.fill(); c.stroke(); } else if(s.type==='line'){ c.beginPath(); c.moveTo(s.x1, s.y1); c.lineTo(s.x2, s.y2); c.stroke(); } else if(s.type==='image'){ if(s._img){ try{ c.drawImage(s._img, s.x, s.y, s.w, s.h); }catch(e){ /* ignore */ } } else if(s.src){ // fallback: draw by creating an Image synchronously (may be async)
941
+ const img = new Image(); img.onload = ()=>{ try{ c.drawImage(img, s.x, s.y, s.w, s.h); }catch(e){} }; img.src = s.src; }
942
+ } c.restore(); }
943
+
944
+ // image import handling
945
+ const importBtn = document.getElementById('wb-import');
946
+ const imgInput = document.getElementById('wb-image-input');
947
+ if(importBtn && imgInput){ importBtn.addEventListener('click', ()=>imgInput.click()); imgInput.addEventListener('change', (ev)=>{
948
+ const f = ev.target.files && ev.target.files[0]; if(!f) return; const reader = new FileReader(); reader.onload = (e)=>{
949
+ const dataUrl = e.target.result;
950
+ // if replaceImageIndex is set, replace that shape instead of adding a new one
951
+ if(replaceImageIndex>=0 && shapes[replaceImageIndex] && shapes[replaceImageIndex].type==='image'){
952
+ pushHistory(); const s = shapes[replaceImageIndex]; s.src = dataUrl; const img = new Image(); img.onload = ()=>{ s._img = img; saveShapes(); redraw(); };
953
+ img.src = dataUrl; replaceImageIndex = -1; ev.target.value=''; return;
954
+ }
955
+ pushHistory(); const rect = canvas.getBoundingClientRect(); const defaultW = Math.min(300, rect.width*0.5); const defaultH = defaultW; const x = (rect.width - defaultW)/2; const y = (rect.height - defaultH)/2; const shape = { type:'image', x, y, w:defaultW, h:defaultH, src:dataUrl };
956
+ const img = new Image(); img.onload = ()=>{ shape._img = img; redraw(); };
957
+ img.src = dataUrl; shapes.push(shape); saveShapes(); redraw(); ev.target.value=''; };
958
+ reader.readAsDataURL(f);
959
+ }); }
960
+
961
+ // double-click on image to replace it
962
+ canvas.addEventListener('dblclick', (ev)=>{
963
+ const p = toLocal(ev); const idx = hitTest(p);
964
+ if(idx<0) return; const s = shapes[idx]; if(s.type==='image'){ replaceImageIndex = idx; imgInput.click(); }
965
+ });
966
+
967
+ closeBtn.addEventListener('click', ()=>{ wb.classList.remove('open'); wb.setAttribute('aria-hidden','true'); });
968
+ const openWhiteboard = ()=>{ wb.classList.add('open'); wb.setAttribute('aria-hidden','false'); resize(); loadShapes(); const firstTool = tools['pen']; if(firstTool) firstTool.focus(); };
969
+ window.addEventListener('resize', ()=>{ if(wb.classList.contains('open')) resize(); });
970
+ document.addEventListener('keydown', (e)=>{ if(e.key==='w'){ if(wb.classList.contains('open')){ wb.classList.remove('open'); wb.setAttribute('aria-hidden','true'); } else { openWhiteboard(); } } });
971
+
972
+ // initialize
973
+ setTool('pen'); loadShapes();
974
+ })();
975
+ </script>
976
+ </body>
977
+ </html>