help button and modal dialog

i/help.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="none">
+    <title>Help</title>
+    <circle id="Oval" fill="#669AE0" cx="500" cy="500" r="500"></circle>
+    <path d="M500,150 C610.5,150 700,239.5 700,350 C700,426.1 657.5,492.2 595,526 L595,526.1 C561.9,547.5 540,584.7 540,627 C540,628 540,629 540,630 L460,630 C460,629 460,628 460,627 C460,551 502.1,485.3 564.2,451.38 C597.75,430.1 620,392.6 620,350 C620,283.7 566.3,230 500,230 C433.7,230 380,283.7 380,350 L300,350 C300,239.5 389.54305,150 500,150 Z" id="Path" stroke="#FFFFFF" stroke-width="21" fill="#FFFFFF"></path>
+    <circle id="Oval" stroke="#FFFFFF" stroke-width="21" fill="#FFFFFF" cx="500" cy="770" r="80"></circle>
+</svg>

index.html

@@ -16,9 +16,10 @@
             <p id="mmd" contenteditable>edit</p>
         </div>
         <div>
-            <label for="mmd">Designed by</label>
+            <label for="by">Designed by</label>
             <p id="by" contenteditable>edit</p>
         </div>
+        <img id="help" src="i/help.svg" alt="help">
     </header>
 
     <div class="grid-item" id="kp"><h2 id="hkp">Key Partners <img aria-labelledby="hkp" src="i/kp.svg"></h2><section id="ekp" class="e" contenteditable="true"></section></div>
@@ -35,3 +36,17 @@
         <p><span>Designed by:</span> Strategyzer AG & Steve Blank.  Built for the web at Uni. of Portsmouth.
     </footer>
 </div>
+
+<dialog id="usage">
+    <h1>Using the Mission Model Canvas.</h1>
+    <p>The MMC comprises nine sections ("Key Partners", "Key Activities", etc).
+    <h2>Editing</h2>
+    <p><strong>Click</strong> a section to begin editing it: a highlight will appear and you'll see a flashing caret where you can enter text.
+    <p><strong>Click outside</strong> a section or press <span class="key">Escape</span> to stop editing.
+    <h2>Defocusing</h2>
+    <p><strong><span class="key">Shift</span>-click</strong> a section to defocus it (it will blend more into the background).
+    <p><strong>Type</strong> in any defocused area will automatically refocus it.
+    <h2>Reset</h2>
+    <p><span class="key">Ctrl</span>+<span class="key">Escape</span> opens a dialog that will allow you to remove all your text from the page.</p>
+    <button id="usage-close">OK</button>
+</dialog>

script.js

@@ -89,7 +89,7 @@ function handleFragment() {
 
 function keyboardHandler(event) {
   if (event.ctrlKey && event.key === 'Escape') {
-    const confirmed = confirm('Are you sure you want to reset the page?');
+    const confirmed = confirm('Are you sure you want to remove all text from this page?');
     if (confirmed) {
       for (const element of el.editableElements) {
         element.innerHTML = '';
@@ -111,6 +111,7 @@ function keyboardHandler(event) {
 function prep() {
   el.gridItems = document.querySelectorAll('.grid-item');
   el.editableElements = document.querySelectorAll('[contenteditable]');
+  el.help = document.querySelector('#help');
 
   loadContent();
 
@@ -123,7 +124,18 @@ function prep() {
   for (const element of el.editableElements) {
     element.addEventListener('input', saveContent);
   }
-  
+
+  el.help.addEventListener('click', openUsageDialog);
+
+
+}
+
+function openUsageDialog() {
+  const dialog = document.querySelector('#usage');
+  dialog.showModal();
+  dialog.addEventListener('click', () => {
+    dialog.remove();
+  });
 }
 
 window.addEventListener('load', prep);

styles.css

@@ -155,4 +155,52 @@ h2 img {
 
 .grid-item:has(*:focus) {
     box-shadow: inset 0 0 1em #F0F7;
+}
+
+dialog {
+    margin: auto;
+    padding: 2em;
+    display: flex;
+    flex-direction: column;
+}
+
+dialog p {
+    padding-block-start: 0.3em;
+}
+
+dialog h2 {
+    padding-block-start: 2em;
+}
+
+
+dialog::backdrop {
+    background: repeating-linear-gradient(
+      45deg,
+      #009EE277,
+      #62136077,
+      #0076A677,
+      #3C023877
+    );
+  }
+  
+dialog button {
+    align-self: flex-end;
+    padding: 0.5em;
+}
+
+#help {
+    transition: all 0.2s linear;
+    align-self: flex-start;
+}
+
+#help:hover {
+    transform: scale(1.2);
+}
+
+.key {
+    background: #00000022;
+    padding: 0.2em;
+    border: thin dashed #000;
+    border-radius: 0.2em;
+    font-weight: bold;
 }