Kokkoja as of 2026-10-10: the teacher's requests, the Session window, notices, the QR code, the license

client/index.html

@@ -15,17 +15,19 @@
   <input id="name" type="text" maxlength="40" autocomplete="off">
 
   <label for="notebook">Notebook for the pages of this session</label>
-  <input id="notebook" type="text" maxlength="100" autocomplete="off" list="notebook_choices">
-  <datalist id="notebook_choices"></datalist>
+  <select id="notebook" class="notebook_pick"
+          data-help="The notebook this session’s pages are saved in. The last entry makes a new notebook."></select>
+  <input id="notebook_name" type="text" maxlength="100" autocomplete="off" spellcheck="false"
+         placeholder="Name of the new notebook" aria-label="Name of the new notebook" hidden>
   <p id="notebook_note" class="note notebook_directory"></p>
 
-  <section>
+  <section id="start_choice">
     <h2>Start a session</h2>
     <p>You will be given an invitation to send to the others.</p>
     <button id="start_session" type="button">Start a session</button>
   </section>
 
-  <section>
+  <section id="join_choice">
     <h2>Join a session</h2>
     <label for="invitation_entry">Invitation</label>
     <input id="invitation_entry" type="text" autocomplete="off" spellcheck="false">
@@ -42,9 +44,11 @@
       <button type="button" data-tool="pen" aria-pressed="true"
               data-help="Write on the page. Only your own writing can be erased.">Pen</button>
       <button type="button" data-tool="text" aria-pressed="false"
-              data-help="Type on the page. Tap where the text should begin, or drag along its top edge to set the width at which it wraps. Tap your own text to change or move it.">Text</button>
+              data-help="Type on the page. Tap where the text should begin, or drag open a rectangle: a red box, white inside, in which the text wraps and which grows downward as you type. Tap your own text to change it; rest the pen on it to move it, or near a corner of a box to resize it.">Text</button>
       <button type="button" data-tool="eraser" aria-pressed="false"
-              data-help="Erase your own strokes and text by moving over them.">Eraser</button>
+              data-help="Erase your own strokes and text by moving over them. A tap on an image, or on a Hide rectangle, removes it, if you are the host or a co-host (or added the image yourself).">Eraser</button>
+      <button type="button" data-tool="hide" aria-pressed="false" hidden
+              data-help="Hide part of the page for everyone: drag open a rectangle, and what lies under it is covered in white, marked by blue corners. Rest the pen on it to move it, or near a corner to resize it; a tap of the eraser removes it.">Hide</button>
     </div>
     <div class="group" id="colors" role="radiogroup" aria-label="Color">
       <button id="more_colors" type="button" class="swatch more"
@@ -61,54 +65,81 @@
       <input id="text_size" type="number" min="6" max="100" step="1" value="14"
              aria-label="Text size in points" data-help="Text size in points.">
     </div>
-    <div class="toolbar_right">
-    <div class="group" role="radiogroup" aria-label="Zoom">
-      <button id="zoom_fit" type="button" aria-pressed="true"
-              data-help="Show the whole page in the window. Ctrl and the scroll wheel zoom in and out.">Fit</button>
-      <button id="zoom_in" type="button" data-help="Zoom in by a step. Ctrl and the scroll wheel do the same about the pointer.">+</button>
-      <button id="zoom_out" type="button" data-help="Zoom out by a step.">−</button>
+    <div class="group" aria-label="View">
+      <button id="zoom_fit" type="button"
+              data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit</button>
+      <button id="zoom_sheet" type="button"
+              data-help="Show the page at the scale a new page has: one A4 sheet filling the window. A shrunk page is then seen at its size on the sheet. Pressed by the host, it does so on every screen.">A4</button>
+      <button id="zoom_widen" type="button" hidden
+              data-help="Make the page wider, for everyone, until it fills the window at this zoom. Nothing on it moves.">Widen</button>
+      <button id="zoom_shrink" type="button" hidden
+              data-help="Make the page, for everyone, just large enough for what is on it, with the margin around. Nothing on it moves.">Shrink</button>
+      <label class="toggle" data-help="Let the page grow when your writing reaches an edge. Off, your writing stops at the edge. Images always get the room they need.">
+        Extend <input id="extend" type="checkbox" checked>
+      </label>
     </div>
+    <div class="toolbar_right">
     <div class="group" id="host_tools" hidden>
       <button id="new_page" type="button"
               data-help="Start a new blank page for everyone. The current page is kept in each notebook.">New</button>
       <button id="load_image" type="button"
-              data-help="Put an image file, such as a scanned exercise, on the page for everyone. It goes below the images already there. The view keeps its scale; scroll down to a new image. For a page of its own, press New first. An image you have just added can be taken back with a tap of the eraser, until anything else is done on the page.">Image</button>
+              data-help="Put an image file, such as a scanned exercise, on the page for everyone: below the images already there, centred, at its own size. Rest the pen on an image to move it, or near a corner to scale it; it comes to the front. A tap of the eraser on an image removes it; writing on it stays.">Image</button>
       <button id="load_notebook_page" type="button"
               data-help="Start a new page for everyone from a page kept in a notebook, with everything on it. The current page is kept in each notebook.">Notebook</button>
     </div>
-    <span id="page_number" class="page_number"></span>
-    <span id="status" class="status"></span>
+    <div class="group" aria-label="Notebook">
+      <select id="session_notebook" class="notebook_pick" aria-label="Current notebook"
+              data-help="The notebook the page is saved in. Choosing another continues the page there; the last entry makes a new notebook."></select>
+      <input id="session_notebook_name" type="text" maxlength="100" autocomplete="off" spellcheck="false"
+             placeholder="Name of the new notebook" aria-label="Name of the new notebook" hidden>
+      <button id="keep_page" type="button"
+              data-help="Keep a dated copy of the page as it is now. The page is also kept by itself whenever it is about to be replaced.">Keep</button>
+      <button id="export_page" type="button"
+              data-help="Save a picture of the page, as it is shown here, in a PNG file at a place you choose.">Export</button>
+    </div>
+    <button id="session_button" type="button"
+            data-help="Who is here, and the invitation to send to others.">Session</button>
     </div>
   </header>
+  <div id="notice" class="notice" hidden></div>
 
   <div class="workspace">
     <div id="desk" class="desk">
       <div id="page" class="page"></div>
     </div>
+  </div>
+</div>
 
-    <aside class="panel">
-      <h2>Participants</h2>
-      <ul id="participants"></ul>
-
-      <h2>Invitation</h2>
+<dialog id="session_dialog" class="chooser session">
+  <header>
+    <h2>Session</h2>
+    <button id="session_close" type="button" aria-label="Close">×</button>
+  </header>
+  <div class="session_body">
+    <h3>Participants</h3>
+    <ul id="participants"></ul>
+    <h3>Invitation</h3>
+    <div class="invitation_line">
       <input id="invitation" type="text" readonly spellcheck="false">
       <button id="copy_invitation" type="button"
               data-help="Copy the invitation, to send to the others by any means.">Copy</button>
-
-      <h2><label for="session_notebook">Current notebook</label></h2>
-      <input id="session_notebook" type="text" maxlength="100" autocomplete="off"
-             list="notebook_choices">
-      <button id="keep_page" type="button"
-              data-help="Keep a dated copy of the page as it is now. The page is also kept by itself whenever it is about to be replaced.">Keep page</button>
-      <button id="export_page" type="button"
-              data-help="Save a picture of the page, as it is shown here, in a PNG file at a place you choose.">Export</button>
-      <p id="save_status" class="note"></p>
-      <p class="note notebook_directory"></p>
-
-      <p id="pen_report" class="report"></p>
-    </aside>
+    </div>
+    <div id="invitation_code" class="invitation_code" hidden
+         data-help="The invitation as a QR code. Point the camera of a phone or a tablet at it, and the link opens there."></div>
+    <p class="note session_state">
+      <span id="page_number" class="page_number"></span>
+      <span id="status" class="status"></span>
+      <span id="save_status" class="save_status"></span>
+    </p>
+    <p class="note notebook_directory"></p>
+    <h3>Log</h3>
+    <div class="log_line">
+      <pre id="event_log" class="event_log"></pre>
+      <button id="copy_log" type="button"
+              data-help="Copy the log: what happened in this session and every press and release of the pen, for finding a fault.">Copy</button>
+    </div>
   </div>
-</div>
+</dialog>
 
 <dialog id="notebook_chooser" class="chooser">
   <header>
@@ -136,9 +167,6 @@
     <nav id="files_directories" class="files_directories"></nav>
     <div id="files_entries" class="files_entries"></div>
   </div>
-  <label id="files_shrink_line" class="files_shrink">
-    <input id="files_shrink" type="checkbox" checked> Shrink an image wider than the page to fit it
-  </label>
   <div id="files_save" class="files_save" hidden>
     <input id="files_name" type="text" spellcheck="false" autocomplete="off"
            aria-label="File name">