Enhance tutorials and documentation: Add max-width to list items, improve descriptions, and include loading indicators for better user experience

Author: nikoscham

FEAScript-website.css

@@ -26,6 +26,11 @@ ul {
   padding-left: 1.5em;
 }
 
+/* Add max-width to list items to match paragraph constraints */
+li {
+  max-width: 1000px;
+}
+
 /* Headings */
 h1,
 h2,
@@ -192,6 +197,10 @@ mjx-container {
   .highlight-container {
     max-width: 90%;
   }
+
+  li {
+    max-width: 90%;
+  }
 }
 
 /* Medium screens: 500px to 1000px */
@@ -234,6 +243,10 @@ mjx-container {
   .highlight-container {
     max-width: 80%;
   }
+
+  li {
+    max-width: 900px;
+  }
 }
 
 /* Large screens: 1000px and above */
@@ -270,4 +283,8 @@ mjx-container {
   .highlight-container {
     max-width: 70%;
   }
+
+  li {
+    max-width: 1000px;
+  }
 }

index.html

@@ -75,6 +75,7 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
       <li><a href="#features">Features</a></li>
       <li><a href="#documentation">Documentation</a></li>
       <li><a href="#tutorials">Tutorials</a></li>
+      <li><a href="#platform">Platform</a></li>
       <li><a href="#licensing">Licensing</a></li>
       <li class="menu-separator">|</li>
       <li>
@@ -101,7 +102,7 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
 
     <div class="highlight-container">
       <p>
-        FEAScript is a lightweight finite element simulation library developed in JavaScript. It allows users
+        <strong>FEAScript is a lightweight finite element simulation library developed in JavaScript</strong>. It allows users
         to create and run client-side, browser-based simulations for physics and engineering problems without
         requiring additional installations. FEAScript serves as an excellent tool for building interactive web
         applications and facilitates hands-on learning of computational mechanics by providing a versatile
@@ -114,12 +115,17 @@ <h2 id="gettingstarted"><a name="Getting Started"></a>Getting Started</h2>
     <p>
       FEAScript requires only a simple HTML page to operate. All simulations are executed locally in your
       browser, without the need for any cloud services. The entire workflow is performed using JavaScript
-      objects directly in the HTML file. 
-      <!-- Below is a live example demonstrating FEAScript in action: -->
-      <!-- JSFiddle embed temporarily disabled as it is not working 
-      <script async src="//jsfiddle.net/nikoscham/prhezsgv/24/embed/js,html,result/"></script>
-      -->
+      objects directly in the HTML file.
     </p>
+    <p>
+      There are two ways to create simulations with FEAScript:
+    </p>
+    <ul>
+      <li><b>JavaScript API:</b> For developers comfortable with coding, the JavaScript API provides full programmatic 
+      control, allowing direct integration into websites or web applications.</li>
+      <li><b>Visual Editor:</b> The <a href="https://platform.feascript.com" target="_blank">FEAScript-platform</a> 
+      provides a no-code, block-based interface for creating simulations without writing any JavaScript code.</li>
+    </ul>
 
     <h2 id="features"><a name="Features"></a>Features</h2>
     <p>The following lists contain some, but not all, of the available features in FEAScript:</p>
@@ -185,7 +191,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
     </ul>
 
     <p>
-      FEAScript is currently under heavy development with new features being added regularly. Interested in
+      🚧 <strong>FEAScript is currently under heavy development with new features being added regularly</strong>. Interested in
       contributing? Please check out our
       <a href="https://github.com/FEAScript/FEAScript-core/blob/main/CONTRIBUTING.md" target="_blank"
         >contribution guidelines</a
@@ -201,7 +207,11 @@ <h2 id="documentation"><a name="Documentation"></a>Documentation</h2>
     </p>
 
     <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
-    <p>Below you can explore tutorials which serve as a step-by-step introduction to FEAScript:</p>
+    <p>
+      Below you can explore tutorials which serve as a step-by-step introduction to FEAScript. These tutorials
+      demonstrate how to use FEAScript's JavaScript API directly, allowing you to integrate finite element
+      simulations into your own websites and applications.
+    </p>
     <ul>
       <li>
         Heat conduction through wall
@@ -212,9 +222,14 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
         >
       </li>
       <li>
-        Heat conduction in a two-dimensional fin: 
-        <a href="https://feascript.com/tutorials/HeatConduction2DFin.html" target="_blank">Standard version</a> | 
-        <a href="https://feascript.com/tutorials/HeatConduction2DFinWorker.html" target="_blank">Web Worker version</a>
+        Heat conduction in a two-dimensional fin:
+        <a href="https://feascript.com/tutorials/HeatConduction2DFin.html" target="_blank"
+          >Standard version</a
+        >
+        |
+        <a href="https://feascript.com/tutorials/HeatConduction2DFinWorker.html" target="_blank"
+          >Web Worker version</a
+        >
       </li>
     </ul>
     <p>
@@ -223,6 +238,29 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
       <a href="https://github.com/FEAScript/FEAScript-core/issues" target="_blank">issues</a>.
     </p>
 
+    <h2 id="platform"><a name="Platform"></a>Platform</h2>
+    <p>
+      For a visual approach to creating simulations, we are developing the
+      <a href="https://platform.feascript.com" target="_blank">FEAScript-platform</a> - a browser-based visual
+      editor built on the
+      <a href="https://developers.google.com/blockly/" target="_blank"
+        >Blockly
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
+          alt="External Link Icon"
+          style="width: 16px; height: 16px; vertical-align: middle; margin-left: 2px; margin-bottom: 4px"
+      /></a>
+      library. This no-code interface allows users to build and run finite element simulations directly in
+      their browser by connecting visual blocks. While FEAScript's JavaScript API offers full programmatic
+      control for advanced customization, the Platform provides an accessible entry point for users without
+      coding experience. FEAScript-platform also provides the ability to save and load projects in XML format,
+      enabling easy sharing and reuse of simulation configurations. You can find example tutorials (as XML
+      files) in the
+      <a href="https://github.com/FEAScript/FEAScript-platform/tree/main/examples" target="_blank"
+        >examples repository</a
+      >.
+    </p>
+
     <h2 id="licensing"><a name="Licensing"></a>Licensing</h2>
     <p>
       The core library of FEAScript is distributed under the terms of the

tutorials/HeatConduction1DWall.html

@@ -198,11 +198,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
 
     <script type="module">
       //Import FEAScript library from GitHub
-      import {
-        FEAScriptModel,
-        plotSolution,
-        printVersion,
-      } from "https://core.feascript.com/src/index.js";
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
       //Import FEAScript library from a local directory
       //import { FEAScriptModel, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
 

tutorials/HeatConduction2DFin.html

@@ -17,7 +17,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
       name="description"
-      content="FEAScript is a lightweight JavaScript library for browser-based finite element simulations in physics, engineering, and computational mechanics."
+      content="This example demonstrates solving a steady-state heat transfer problem in a 2D rectangular domain using the FEAScript library. The problem represents a typical cooling fin scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
     />
     <meta
       name="keywords"
@@ -229,7 +229,10 @@ <h2 id="results"><a name="Results"></a>Results</h2>
     <!-- Link to worker-based implementation -->
     <div class="highlight-container">
       <p>
-        See also the <a href="HeatConduction2DFinWorker.html">Heat Conduction in a Two-Dimensional Fin (Web Worker version)</a>
+        See also the
+        <a href="HeatConduction2DFinWorker.html"
+          >Heat Conduction in a Two-Dimensional Fin (Web Worker version)</a
+        >
         for an example using FEAScript in a separate thread for improved responsiveness.
       </p>
     </div>
@@ -242,11 +245,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
 
     <script type="module">
       //Import FEAScript library from GitHub
-      import {
-        FEAScriptModel,
-        plotSolution,
-        printVersion,
-      } from "https://core.feascript.com/src/index.js";
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
       //Import FEAScript library from a local directory
       //import { FEAScriptModel, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
 

tutorials/HeatConduction2DFinWorker.html

@@ -17,7 +17,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
       name="description"
-      content="FEAScript is a lightweight finite element simulation library built in JavaScript for creating client-side, browser-based simulations for physics and engineering problems."
+      content="This example demonstrates solving a steady-state heat transfer problem in a 2D rectangular domain using the FEAScript library. The problem represents a typical cooling fin scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
     />
     <meta
       name="keywords"
@@ -87,14 +87,23 @@ <h1>Heat Conduction in a Two-Dimensional Fin (Web Worker)</h1>
 
     <div class="highlight-container">
       <p>
-        This page demonstrates solving the 2D heat conduction fin problem using FEAScript in a Web Worker for improved browser responsiveness.
-        For the mathematical formulation and theory, see the <a href="HeatConduction2DFin.html">main (standard) tutorial</a>.
+        This page demonstrates solving the 2D heat conduction fin problem using FEAScript in a Web Worker for
+        improved browser responsiveness. For the mathematical formulation and theory, see the
+        <a href="HeatConduction2DFin.html">main (standard) tutorial</a>.
+      </p>
+
+      <p>
+        <strong>⚠️ Important:</strong> Due to security restrictions, this example requires launching the
+        browser with reduced security settings, e.g.:
+      </p>
+      <pre style="background-color: #f8f9fa; padding: 8px; border-radius: 4px; overflow-x: auto">
+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.
       </p>
-      
-      <p><strong>⚠️ Important:</strong> Due to security restrictions, this example requires launching the browser with reduced security settings, e.g.:</p>
-      <pre style="background-color: #f8f9fa; padding: 8px; border-radius: 4px; overflow-x: auto;">
-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.</p>
     </div>
 
     <h2>Web Worker Implementation</h2>
@@ -158,14 +167,18 @@ <h2>Web Worker Implementation</h2>
 
     <h2>Results</h2>
     <div id="orientation-message">
-      Cannot draw the results. Please turn your phone to horizontal position to see the results. You can find a minimal example of this tutorial in the
+      Cannot draw the results. Please turn your phone to horizontal position to see the results. You can find
+      a minimal example of this tutorial in the
       <a
         href="https://github.com/FEAScript/FEAScript-core/tree/main/examples/solidHeatTransferScript/HeatConduction2DFin"
         target="_blank"
         >example directory</a
       >.
     </div>
-    <div id="loading"><div class="spinner"></div>Solving...</div>
+    <div id="loading">
+      <div class="spinner"></div>
+      Solving...
+    </div>
     <div id="solutionPlot"></div>
 
     <ul id="menu">
@@ -176,11 +189,7 @@ <h2>Results</h2>
 
     <script type="module">
       //Import FEAScript library from GitHub
-      import {
-        FEAScriptWorker,
-        plotSolution,
-        printVersion,
-      } from "https://core.feascript.com/src/index.js";
+      import { FEAScriptWorker, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
       //Import FEAScript library from a local directory
       //import { FEAScriptWorker, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
       window.addEventListener("DOMContentLoaded", async () => {
@@ -191,7 +200,7 @@ <h2>Results</h2>
         } else {
           document.getElementById("orientation-message").style.display = "none";
           document.getElementById("solutionPlot").style.display = "block";
-          
+
           // Show loading indicator
           document.getElementById("loading").style.display = "block";
 
@@ -228,7 +237,7 @@ <h2>Results</h2>
 
           // Solve the problem and get the solution
           const { solutionVector, nodesCoordinates } = await model.solve();
-          
+
           // Hide loading indicator
           document.getElementById("loading").style.display = "none";
 
@@ -255,7 +264,7 @@ <h2>Results</h2>
         } else {
           document.getElementById("orientation-message").style.display = "none";
           document.getElementById("solutionPlot").style.display = "block";
-          
+
           // Show loading indicator
           document.getElementById("loading").style.display = "block";
 
@@ -292,7 +301,7 @@ <h2>Results</h2>
 
           // Solve the problem and get the solution
           const { solutionVector, nodesCoordinates } = await model.solve();
-          
+
           // Hide loading indicator
           document.getElementById("loading").style.display = "none";