store toggled on-off state in the fragment allowing #vp-be to turn on the vp and be elements

script.js

@@ -1,4 +1,7 @@
 const el = {};
+const mmc = {
+  current: []
+};
 
 function toggleItem(event) {
   event.preventDefault();
@@ -11,26 +14,75 @@ function toggleItem(event) {
   if (editableChild) {
     editableChild.focus();
   }
+  updateURL()
+}
 
+function updateURL() {
+  const inverseIds = [];
+  for (const element of document.querySelectorAll('.grid-item')) {
+    if (!element.classList.contains('lo')) {
+      inverseIds.push(element.id);
+    }
+  }
+  let fragment = ''
+  if (inverseIds.length > 0 && inverseIds.length < 9  ) {
+    fragment = inverseIds.join('-');
+  }
+  setFragment(fragment);
+}
+
+function setFragment(fragment) {
+  const url = `${window.location.pathname}${window.location.search}#${fragment}`;
+  window.history.replaceState(null, null, url);
 }
 
 function saveContent() {
-  const mmc = {};
+  mmc.current = [];
   for (const element of el.editableElements) {
     const parentWithId = element.closest('[id]');
     if (parentWithId) {
-      mmc[parentWithId.id] = element.innerHTML;
+      mmc.current.push({
+        id: parentWithId.id,
+        content: element.innerHTML
+      });
     }
   }
   localStorage.setItem('mmc', JSON.stringify(mmc));
 }
 
+
 function loadContent() {
-  const mmc = JSON.parse( localStorage.getItem('mmc') ?? "[]" );
-  for (const element of el.editableElements) {
-    const parentWithId = element.closest('[id]');
-    if (parentWithId && mmc.hasOwnProperty(parentWithId.id)) {
-      element.innerHTML = mmc[parentWithId.id];
+  const mmcString = localStorage.getItem('mmc');
+  if (mmcString) {
+    Object.assign(mmc, JSON.parse(mmcString));
+    for (const element of el.editableElements) {
+      const parentWithId = element.closest('[id]');
+      if (parentWithId) {
+        const item = mmc.current.find(item => item.id === parentWithId.id);
+        if (item) {
+          element.innerHTML = item.content;
+        }
+      }
+    }
+  }
+
+  handleFragment();
+}
+
+function handleFragment() {
+  const fragment = window.location.hash.slice(1);
+  if (fragment) {
+    const ids = fragment.split('-');
+    for (const id of ids) {
+      const element = document.getElementById(id);
+      if (element) {
+        element.classList.remove('lo');
+      }
+    }
+    for (const element of document.querySelectorAll('.grid-item')) {
+      if (!ids.includes(element.id)) {
+        element.classList.add('lo');
+      }
     }
   }
 }
@@ -48,6 +100,12 @@ function keyboardHandler(event) {
   } else if (event.key === 'Escape') {
     document.activeElement.blur();
   }
+  const gridItem = event.target.closest('.grid-item');
+  if (gridItem) {
+    if (gridItem.classList.contains('lo')) {
+      gridItem.classList.remove('lo');
+    }
+  }
 }
 
 function prep() {
@@ -56,6 +114,8 @@ function prep() {
 
   loadContent();
 
+  document.addEventListener('keydown', keyboardHandler);
+
   for (const item of el.gridItems) {
     item.addEventListener('click', toggleItem);
   }
@@ -64,8 +124,6 @@ function prep() {
     element.addEventListener('input', saveContent);
   }
   
-  document.addEventListener('keydown', keyboardHandler);
-  
 }
 
 window.addEventListener('load', prep);

styles.css

@@ -1,4 +1,5 @@
 :root {
+    --white: #FFFFFE;
     --grid-template-areas:
     "header header header header header header header header header header"
     "kp kp ka ka vp vp bs bs be be"
@@ -6,7 +7,7 @@
     "mb mb mb mb mb if if if if if"
     "footer footer footer footer footer footer footer footer footer footer";
     --grid-template-columns: repeat(10, 1fr);
-    --grid-template-rows: auto repeat(3, 1fr) auto;
+    --grid-template-rows: min-content auto auto auto min-content;
 }
 
 @media (width < 40em) {
@@ -36,17 +37,14 @@
 }
 
 body {
-    margin: 0;
-    padding: 0;
     font-family: Arial, sans-serif;
-    background-color: #ECECEB;
-
+    background-color: #BBBBBB;
 }
 
 .grid-item {
     display: flex;
     flex-direction: column;
-    background-color: #FFFFFE;
+    background-color: var(--white);
     border: 1px solid #666;
     padding: 1em;
 }
@@ -54,7 +52,7 @@ body {
 .grid-container {
     display: grid;
     margin: 1em;
-    height: 92svh;
+    height: 96svh;
     grid-template-areas: var(--grid-template-areas);
     grid-template-columns: var(--grid-template-columns);
     grid-template-rows: var(--grid-template-rows);
@@ -62,12 +60,32 @@ body {
 
 header {
     grid-area: header;
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+}
+
+header h1 {
     font-size: 2em;
     font-weight: bold;
+    padding-block-end: 0.5em;
 }
 
+header div {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+header label {
+    font-weight: bold;
+    font-size: 0.8em;
+}
+
+
 footer {
     grid-area: footer;
+    padding-block-start: 0.5em;
 }
 
 footer span {