Refactor tutorial HTML files to improve image presentation and add orientation message for better user experience on mobile devices.

Author: nikoscham

tutorials/HeatConduction1DWall.html

@@ -40,13 +40,6 @@
     ></script>
     <!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <style>
-      #orientation-message {
-        display: none;
-        color: red;
-        font-weight: bold;
-      }
-    </style>
   </head>
 
   <!-- Google tag (gtag.js) -->
@@ -95,7 +88,12 @@ <h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathemat
       within common engineering components like house walls.
     </p>
 
-    <img src="../assets/HeatConduction1DWall.png" alt="1D heat conduction schematic" width="100" />
+    <div class="center-image">
+      <img src="../assets/HeatConduction1DWall.png" alt="1D heat conduction schematic" width="100" />
+      <p class="image-caption">
+        Schematic of the 1D wall showing convection at x = 0 and prescribed temperature at x = W
+      </p>
+    </div>
 
     <p>
       The above schematic illustrates the problem domain and outlines the associated boundary conditions. The

tutorials/HeatConduction2DFin.html

@@ -40,13 +40,6 @@
     ></script>
     <!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <style>
-      #orientation-message {
-        display: none;
-        color: red;
-        font-weight: bold;
-      }
-    </style>
   </head>
 
   <!-- Google tag (gtag.js) -->
@@ -93,7 +86,16 @@ <h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathemat
       Steady heat conduction is described by the Laplace equation: \(\nabla^{2}T(x,y) = 0\), where \(T\)
       denotes the temperature.
     </p>
-    <img src="../assets/HeatConduction2DFin.png" width="300" />
+
+    <div class="center-image">
+      <img src="../assets/HeatConduction2DFin.png" alt="2D fin heat conduction schematic" width="300" />
+      <p class="image-caption">
+        Schematic of the 2D cooling fin: constant temperature (200&nbsp;°C) at bottom and right edges,
+        symmetry (zero flux) at the left edge, and convection at the top edge (h/k = 1&nbsp;m⁻¹, external
+        temperature 20&nbsp;°C)
+      </p>
+    </div>
+
     <p>
       The above schematic illustrates the problem domain and outlines the associated boundary conditions. The
       constant temperature boundary conditions are implemented as Dirichlet-type conditions in the finite

tutorials/HeatConduction2DFinGmsh.html

@@ -299,6 +299,10 @@ <h2 id="results"><a name="results"></a>Results</h2>
       applications, but may be noticeable in regions with steep temperature gradients.
     </p>
 
+    <div id="orientation-message">
+      Cannot draw the results. Please rotate your phone to landscape orientation and refresh the page to see
+      the results.
+    </div>
     <div id="resultsCanvas"></div>
 
     <ul id="menu">
@@ -324,6 +328,14 @@ <h2 id="results"><a name="results"></a>Results</h2>
       // } from "../../FEAScript-core/src/index.js";
 
       window.addEventListener("DOMContentLoaded", async () => {
+        if (window.innerHeight > window.innerWidth) {
+          document.getElementById("orientation-message").style.display = "block";
+          document.getElementById("resultsCanvas").style.display = "none";
+        } else {
+          document.getElementById("orientation-message").style.display = "none";
+          document.getElementById("resultsCanvas").style.display = "block";
+        }
+
         // Enable debug logging mode
         //logSystem("debug");
 
@@ -381,6 +393,16 @@ <h2 id="results"><a name="results"></a>Results</h2>
           "unstructured"
         );
       });
+
+      window.addEventListener("resize", () => {
+        if (window.innerHeight > window.innerWidth) {
+          document.getElementById("orientation-message").style.display = "block";
+          document.getElementById("resultsCanvas").style.display = "none";
+        } else {
+          document.getElementById("orientation-message").style.display = "none";
+          document.getElementById("resultsCanvas").style.display = "block";
+        }
+      });
     </script>
 
     <footer>

tutorials/HeatConduction2DFinWorker.html

@@ -40,13 +40,6 @@
     ></script>
     <!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <style>
-      #orientation-message {
-        display: none;
-        color: red;
-        font-weight: bold;
-      }
-    </style>
   </head>
 
   <!-- Google tag (gtag.js) -->
@@ -94,9 +87,9 @@ <h1>Heat Conduction in a Two-Dimensional Fin Tutorial (Multi-threaded)</h1>
 start chrome --disable-web-security --user-data-dir="C:\tmp\chrome-cors" --disable-site-isolation-trials</pre
       >
       <p>
-        These flags disable CORS restrictions which are normally required when working with web workers in a
-        local environment. For production applications, proper CORS headers should be configured on your
-        server.
+        These flags temporarily disable CORS restrictions that normally block a web worker from loading
+        scripts or data when running from local files. For production applications, proper CORS headers should
+        be configured on your server.
       </p>
     </div>
 

tutorials/SolidificationFront2D.html

@@ -40,13 +40,6 @@
     ></script>
     <!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <style>
-      #orientation-message {
-        display: none;
-        color: red;
-        font-weight: bold;
-      }
-    </style>
   </head>
 
   <!-- Google tag (gtag.js) -->

tutorials/SolidificationFront2DWorker.html

@@ -40,13 +40,6 @@
     ></script>
     <!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <style>
-      #orientation-message {
-        display: none;
-        color: red;
-        font-weight: bold;
-      }
-    </style>
   </head>
 
   <!-- Google tag (gtag.js) -->
@@ -94,9 +87,9 @@ <h1>Solidification Front Propagation in a Two-Dimensional Domain (Multi-threaded
 start chrome --disable-web-security --user-data-dir="C:\tmp\chrome-cors" --disable-site-isolation-trials</pre
       >
       <p>
-        These flags disable CORS restrictions which are normally required when working with web workers in a
-        local environment. For production applications, proper CORS headers should be configured on your
-        server.
+        These flags temporarily disable CORS restrictions that normally block a web worker from loading
+        scripts or data when running from local files. For production applications, proper CORS headers should
+        be configured on your server.
       </p>
     </div>