zzstoatzz.io
powerpointproto
slides.waow.tech
slides
1<script lang="ts">
2 import { getCurrentSlide } from "$lib/state.svelte";
3
4 let notes = $state("");
5
6 // Sync with current slide
7 $effect(() => {
8 const slide = getCurrentSlide();
9 notes = slide?.notes || "";
10 });
11
12 const handleInput = (e: Event) => {
13 const slide = getCurrentSlide();
14 if (slide) {
15 slide.notes = (e.target as HTMLTextAreaElement).value;
16 }
17 };
18</script>
19
20<div class="notes-editor">
21 <label for="notes">notes</label>
22 <textarea
23 id="notes"
24 bind:value={notes}
25 oninput={handleInput}
26 placeholder="speaker notes for this slide..."
27 ></textarea>
28</div>
29
30<style>
31 .notes-editor {
32 display: flex;
33 flex-direction: column;
34 gap: 6px;
35 padding: 12px;
36 background: #111;
37 border-top: 1px solid #222;
38 min-height: 100px;
39 max-height: 180px;
40 }
41
42 label {
43 font-size: 11px;
44 color: #666;
45 text-transform: uppercase;
46 letter-spacing: 0.5px;
47 }
48
49 textarea {
50 flex: 1;
51 background: #0a0a0a;
52 border: 1px solid #222;
53 border-radius: 4px;
54 color: #ccc;
55 font-size: 13px;
56 padding: 10px;
57 resize: none;
58 font-family: inherit;
59 line-height: 1.5;
60 }
61
62 textarea:focus {
63 outline: none;
64 border-color: #333;
65 }
66
67 textarea::placeholder {
68 color: #444;
69 }
70</style>