Added contextual content to the web app, some aesthetic improvements

bicorder-app/src/App.svelte

@@ -5,6 +5,7 @@
   import MetadataFields from './components/MetadataFields.svelte';
   import AnalysisDisplay from './components/AnalysisDisplay.svelte';
   import ExportControls from './components/ExportControls.svelte';
+  import HelpModal from './components/HelpModal.svelte';
 
   // Load bicorder data from build-time constant
   let data: BicorderState = JSON.parse(JSON.stringify(__BICORDER_DATA__));
@@ -19,6 +20,7 @@
   let viewMode: ViewMode = 'focused'; // Focused is default
   let currentScreen = 0;
   let refreshKey = 0; // Used to force component refresh in focused mode
+  let isHelpOpen = false;
 
   // Screen types
   type Screen =
@@ -212,10 +214,17 @@
       location.reload();
     }
   }
+
+  function openHelp() {
+    isHelpOpen = true;
+  }
 </script>
 
+<HelpModal bind:isOpen={isHelpOpen} />
+
 <main>
   <div class="header">
+    <button class="help-btn" on:click={openHelp} aria-label="About the Bicorder">?</button>
     <div class="title">Protocol</div>
     <div class="title">BICORDER</div>
     <button class="mode-toggle" on:click={toggleViewMode} aria-label="Toggle view mode">
@@ -225,6 +234,10 @@
 
   {#if viewMode === 'list'}
     <!-- LIST MODE: Show all sections -->
+    <div class="description">
+      <p>A diagnostic tool for the study of protocols</p>
+    </div>
+
     <MetadataFields
       metadata={data.metadata}
       on:update={handleMetadataUpdate}
@@ -277,6 +290,12 @@
 
   {:else}
     <!-- FOCUSED MODE: Show one screen at a time -->
+    {#if currentScreen === 0}
+      <div class="description">
+        <p>A diagnostic tool for the study of protocols</p>
+      </div>
+    {/if}
+
     <div class="focused-container">
       {#if currentScreenData.type === 'metadata'}
         <div class="focused-screen">
@@ -393,6 +412,10 @@
       </div>
     </div>
   {/if}
+
+  <footer class="footer">
+    <p>Initiated by <a href="https://nathanschneider.info" rel="nofollow">Nathan Schneider</a>; <a href="https://git.medlab.host/ntnsndr/protocol-bicorder/src/branch/main/bicorder-app" rel="nofollow">source code</a> licensed under the <a href="https://firstdonoharm.dev/" rel="nofollow">Hippocratic License</a> (do no harm!).</p>
+  </footer>
 </main>
 
 <style>
@@ -407,7 +430,7 @@
 
   .header {
     text-align: center;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     border-bottom: 2px solid var(--border-color);
     padding-bottom: 1rem;
     position: relative;
@@ -419,6 +442,32 @@
     letter-spacing: 0.2rem;
   }
 
+  .help-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+    background: var(--bg-color);
+    color: var(--fg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.4;
+    transition: opacity 0.2s, background-color 0.2s;
+  }
+
+  .help-btn:hover {
+    opacity: 0.8;
+    background-color: var(--input-bg);
+  }
+
   .mode-toggle {
     position: absolute;
     top: 0;
@@ -440,6 +489,33 @@
     border-color: var(--border-color);
   }
 
+  .description {
+    text-align: center;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    border: 1px solid var(--border-color);
+    background-color: var(--input-bg);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+
+  .description p {
+    margin: 0;
+  }
+
+  .footer {
+    margin-top: auto;
+    padding: 2rem 1rem 1rem;
+    border-top: 2px solid var(--border-color);
+    text-align: center;
+    font-size: 0.85rem;
+    opacity: 0.7;
+  }
+
+  .footer p {
+    margin: 0.5rem 0;
+  }
+
   .diagnostic-set, .analysis-section {
     margin: 2rem 0;
     padding: 1rem 0;
@@ -502,9 +578,7 @@
   }
 
   .gradient-focused {
-    padding: 2rem;
-    border: 2px solid var(--border-color);
-    background-color: var(--bg-color);
+    padding: 0;
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -603,11 +677,28 @@
       font-size: 1rem;
     }
 
+    .help-btn {
+      width: 1.75rem;
+      height: 1.75rem;
+      font-size: 1rem;
+    }
+
     .mode-toggle {
       font-size: 0.85rem;
       padding: 0.25rem 0.5rem;
     }
 
+    .description {
+      padding: 0.75rem;
+      font-size: 0.85rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .footer {
+      padding: 1.5rem 0.5rem 0.5rem;
+      font-size: 0.8rem;
+    }
+
     .progress-bar {
       font-size: 0.85rem;
       letter-spacing: 0.05rem;
@@ -622,7 +713,7 @@
     }
 
     .gradient-focused {
-      padding: 1rem;
+      padding: 0;
       gap: 1.5rem;
     }