kokkoja-rel/client/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kokkoja</title>
<link rel="stylesheet" href="kokkoja.css">
<script type="module" src="js/main.js"></script>
</head>
<body>

<main id="start" hidden>
  <h1>Kokkoja</h1>
  <label for="name">Your name, as others will see it</label>
  <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>
  <p id="notebook_note" class="note notebook_directory"></p>

  <section>
    <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>
    <h2>Join a session</h2>
    <label for="invitation_entry">Invitation</label>
    <input id="invitation_entry" type="text" autocomplete="off" spellcheck="false">
    <button id="join_session" type="button">Join</button>
    <p class="note"><a id="open_installed" href="#" hidden>Join with the Kokkoja program installed on this computer instead</a></p>
  </section>

  <p id="start_message" class="message" role="alert"></p>
</main>

<div id="session" hidden>
  <header class="toolbar">
    <div class="group" role="radiogroup" aria-label="Tool">
      <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>
      <button type="button" data-tool="eraser" aria-pressed="false"
              data-help="Erase your own strokes and text by moving over them.">Eraser</button>
    </div>
    <div class="group" id="colors" role="radiogroup" aria-label="Color">
      <button id="more_colors" type="button" class="swatch more"
              data-help="Choose another color. It is added here.">+</button>
    </div>
    <div id="color_palette" class="palette" hidden></div>
    <div class="group" id="widths" role="radiogroup" aria-label="Line width"></div>
    <div class="group" id="text_style" hidden>
      <select id="text_font" aria-label="Font" data-help="The font: a sans-serif, a serif or a monospaced one, as this computer has them.">
        <option value="sans-serif" style="font-family: sans-serif">Sans</option>
        <option value="serif" style="font-family: serif">Serif</option>
        <option value="monospace" style="font-family: monospace">Mono</option>
      </select>
      <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>
    <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>
      <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>
  </header>

  <div class="workspace">
    <div id="desk" class="desk">
      <div id="page" class="page"></div>
    </div>

    <aside class="panel">
      <h2>Participants</h2>
      <ul id="participants"></ul>

      <h2>Invitation</h2>
      <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>

<dialog id="notebook_chooser" class="chooser">
  <header>
    <h2>Notebooks</h2>
    <button id="chooser_close" type="button" aria-label="Close">×</button>
  </header>
  <div class="chooser_body">
    <nav id="chooser_notebooks" class="chooser_notebooks"></nav>
    <div id="chooser_pages" class="chooser_pages"></div>
  </div>
  <p id="chooser_message" class="note"></p>
</dialog>

<dialog id="file_chooser" class="chooser">
  <header>
    <h2 id="files_title">Image</h2>
    <button id="files_close" type="button" aria-label="Close">×</button>
  </header>
  <div class="files_place">
    <button id="files_up" type="button">Up</button>
    <input id="files_directory" type="text" spellcheck="false" autocomplete="off"
           aria-label="Directory">
  </div>
  <div class="files_body">
    <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">
    <button id="files_save_here" type="button">Export</button>
  </div>
  <p id="files_message" class="note"></p>
</dialog>

</body>
</html>