Add new badge styles and update tutorial links in HTML

nikoscham · nikoscham · commit 263fa34bd826 · 2025-10-21T21:48:53.000+03:00
diff --git a/feascript-website.css b/feascript-website.css
@@ -259,6 +259,10 @@ mjx-container {
   color: #f7e7b7;
 }
 
+.tutorials-list .badge-codepen {
+  background-color: #47cf73;
+}
+
 .tutorial-name {
   display: inline-block;
   vertical-align: middle;
@@ -389,3 +393,10 @@ footer {
   cursor: default;
   transition: transform 0.2s;
 }
+
+/* Orange vertical bar */
+.notice-dev {
+  border-left: 4px solid #f39c12;
+  padding-left: 10px;
+  margin: 1em 0;
+}
diff --git a/index.html b/index.html
@@ -57,12 +57,12 @@ <h1 class="top">
 
     <div id="banner">
       <img
-        src="./assets/heat-conduction-1d-wall-results.png"
-        alt="Results of heat conduction through a wall tutorial"
+        src="./assets/advection-diffusion-1d-results.png"
+        alt="Results of advection-diffusion with Gaussian source tutorial"
       />
       <p class="image-caption">
-        Heat conduction through a wall
-        <a href="https://feascript.com/tutorials/heat-conduction-1d-wall.html">tutorial</a>
+        Advection–diffusion with Gaussian source
+        <a href="https://feascript.com/tutorials/advection-diffusion-1d.html">tutorial</a>
       </p>
       <img
         src="./assets/heat-conduction-2d-fin-results.png"
@@ -73,20 +73,20 @@ <h1 class="top">
         <a href="https://feascript.com/tutorials/heat-conduction-2d-fin.html">tutorial</a>
       </p>
       <img
-        src="./assets/solidification-front-2d-results.png"
-        alt="Results of solidification front propagation in a 2D domain tutorial"
+        src="./assets/heat-conduction-1d-wall-results.png"
+        alt="Results of heat conduction through a wall tutorial"
       />
       <p class="image-caption">
-        Solidification front propagation in a 2D domain
-        <a href="https://feascript.com/tutorials/solidification-front-2d.html">tutorial</a>
+        Heat conduction through a wall
+        <a href="https://feascript.com/tutorials/heat-conduction-1d-wall.html">tutorial</a>
       </p>
       <img
-        src="./assets/advection-diffusion-1d-results.png"
-        alt="Results of advection-diffusion with Gaussian source tutorial"
+        src="./assets/solidification-front-2d-results.png"
+        alt="Results of solidification front propagation in a 2D domain tutorial"
       />
       <p class="image-caption">
-        Advection–diffusion with Gaussian source
-        <a href="https://feascript.com/tutorials/advection-diffusion-1d.html">tutorial</a>
+        Solidification front propagation in a 2D domain
+        <a href="https://feascript.com/tutorials/solidification-front-2d.html">tutorial</a>
       </p>
     </div>
 
@@ -100,7 +100,13 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
       <li><a href="#documentation">Documentation</a></li>
       <li><a href="#licensing">Licensing</a></li>
       <li class="external-link-start" style="border: 2px solid #e0e0e0; padding: 5px; border-radius: 4px">
-        <a href="https://platform.feascript.com/" style="color: #555"> FEAScript Platform</a>
+        <a href="https://platform.feascript.com/" style="color: #555"
+          ><img
+            src="./assets/favicon.ico"
+            alt="FEAScript Icon"
+            style="vertical-align: middle; margin-right: 5px; height: 1em; width: auto"
+          />FEAScript Platform</a
+        >
       </li>
       <br />
       <li class="icon-link-start">
@@ -165,7 +171,11 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
     <div class="highlight-container">
       <p>
         <strong
-          >FEAScript is a lightweight, open-source finite element simulation library developed in
+          ><img
+            src="./assets/favicon.ico"
+            alt="FEAScript Icon"
+            style="vertical-align: middle; margin-right: 5px; height: 1em; width: auto"
+          />FEAScript is a lightweight, open-source finite element simulation library developed in
           JavaScript</strong
         >. <br />It empowers users to perform simulations for physics and engineering problems in both
         browser-based and server-side environments. FEAScript serves as an excellent tool for building
@@ -206,16 +216,14 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
         a simple HTML page, via Node.js for server-side applications, or with online interactive notebooks
         (e.g.
         <a href="https://codepen.io/"
-          >CodePen
-          <img
+          >CodePen<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>
-        or
+        and
         <a href="https://scribbler.live/"
-          >Scribbler
-          <img
+          >Scribbler<img
             src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
             alt="External Link Icon"
             style="
@@ -232,8 +240,7 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
         <a href="https://platform.feascript.com">FEAScript Platform</a>
         provides a no-code, block-based interface (based on
         <a href="https://developers.google.com/blockly/">
-          Blockly
-          <img
+          Blockly<img
             src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
             alt="External Link Icon"
             style="
@@ -255,8 +262,7 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
         <strong>FEAScript latest stable release:</strong>
         <a href="https://github.com/FEAScript/FEAScript-core/releases">0.1.3</a>
         (<a href="https://www.npmjs.com/package/feascript"
-          >npm
-          <img
+          >npm<img
             src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
             alt="External Link Icon"
             style="
@@ -310,8 +316,7 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
       canvas (e.g., <code>&lt;div id="resultsCanvas">&lt;/div&gt;</code>) &#8594; add a mesh file (e.g.,
       <code>your.msh</code> from
       <a href="https://gmsh.info/">
-        Gmsh
-        <img
+        Gmsh<img
           src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
           alt="External Link Icon"
           style="
@@ -362,7 +367,8 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
         boundary conditions to your specific problem.
       </em>
     </p>
-    <p>
+
+    <p class="notice-dev">
       🚧
       <strong>FEAScript is currently under heavy development with new features being added regularly</strong>.
       Interested in contributing? Check out our
@@ -390,8 +396,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           <li>
             Unstructured mesh import from
             <a href="https://gmsh.info/"
-              >Gmsh
-              <img
+              >Gmsh<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -418,8 +423,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
               <li>
                 LU (via
                 <a href="https://mathjs.org/"
-                  >math.js
-                  <img
+                  >math.js<img
                     src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                     alt="External Link Icon"
                     style="
@@ -448,8 +452,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           <li>
             Interactive line and surface visualization with
             <a href="https://plotly.com/javascript/">
-              Plotly
-              <img
+              Plotly<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -470,8 +473,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           <li>
             Browser runtime (<a href="https://core.feascript.com/dist/feascript.esm.js">hosted ESM build</a> /
             <a href="https://cdn.jsdelivr.net/gh/FEAScript/FEAScript-core/dist/feascript.esm.js"
-              >JSDelivr CDN
-              <img
+              >JSDelivr CDN<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -490,8 +492,7 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           </li>
           <li>
             Node.js runtime (<a href="https://www.npmjs.com/package/feascript"
-              >npm
-              <img
+              >npm<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -505,9 +506,8 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           </li>
           <li>
             Online notebooks integration (e.g.
-            <a href="https://codepen.io/"
-              >CodePen
-              <img
+            <a href="https://codepen.io/FEAScript"
+              >CodePen<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -518,10 +518,9 @@ <h2 id="features"><a name="Features"></a>Features</h2>
                   margin-bottom: 4px;
                 "
             /></a>
-            or
+            and
             <a href="https://hub.scribbler.live/portfolio/#!nikoscham/FEAScript-Scribbler-examples"
-              >Scribbler
-              <img
+              >Scribbler<img
                 src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
                 alt="External Link Icon"
                 style="
@@ -541,11 +540,17 @@ <h2 id="features"><a name="Features"></a>Features</h2>
     <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
     <p>
       Below you can explore tutorials that provide a step-by-step introduction to FEAScript. These tutorials
-      show you how to use FEAScript’s JavaScript API directly, integrating finite element simulations into
-      your own websites and applications, or how to use it in an interactive notebook such as
+      show you how to use FEAScript's JavaScript API directly, integrating finite element simulations into
+      your own websites and applications, or how to use it in interactive online environments such as
+      <a href="https://codepen.io/FEAScript"
+        >CodePen<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>
+      and
       <a href="https://hub.scribbler.live/portfolio/#!nikoscham/FEAScript-Scribbler-examples"
-        >Scribbler
-        <img
+        >Scribbler<img
           src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
           alt="External Link Icon"
           style="
@@ -555,25 +560,17 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
             margin-left: 2px;
             margin-bottom: 4px;
           " /></a
-      >. Each tutorial may include different variations that demonstrate the same physical problem under
-      different configurations, ranging from simple examples to advanced setups using external meshes or
-      multiple threads.
+      >. Each tutorial include different variations that demonstrate the same physical problem under different
+      configurations, ranging from simple examples to advanced setups using external meshes or multiple
+      threads.
     </p>
 
     <ul class="tutorials-list">
       <li>
-        <span class="tutorial-name">Heat Conduction Through a Wall</span>
-        <a href="https://feascript.com/tutorials/heat-conduction-1d-wall.html" class="badge badge-basic"
+        <span class="tutorial-name">Advection-Diffusion with Gaussian Source</span>
+        <a href="https://feascript.com/tutorials/advection-diffusion-1d.html" class="badge badge-basic"
           >Browser (basic)</a
         >
-        <!-- <a href="https://feascript.com/tutorials/heat-conduction-1d-wall-platform.html" class="badge badge-visual"
-          >Visual Editor</a
-        > -->
-        <a
-          href="https://app.scribbler.live/?jsnb=github:nikoscham/FEAScript-Scribbler-examples/heatConductionScript/heat-conduction-1d-wall.jsnb"
-          class="badge badge-scribbler"
-          >Scribbler</a
-        >
       </li>
       <li>
         <span class="tutorial-name">Heat Conduction in a 2D Fin</span>
@@ -597,8 +594,34 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
         <a
           href="https://app.scribbler.live/?jsnb=github:nikoscham/FEAScript-Scribbler-examples/heatConductionScript/heat-conduction-2d-fin.jsnb"
           class="badge badge-scribbler"
-          >Scribbler</a
+          >Scribbler<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>
+      </li>
+      <li>
+        <span class="tutorial-name">Heat Conduction Through a Wall</span>
+        <a href="https://feascript.com/tutorials/heat-conduction-1d-wall.html" class="badge badge-basic"
+          >Browser (basic)</a
         >
+        <!-- <a href="https://feascript.com/tutorials/heat-conduction-1d-wall-platform.html" class="badge badge-visual"
+          >Visual Editor</a
+        > -->
+        <a href="https://codepen.io/FEAScript/pen/ZYQrqJK" class="badge badge-codepen"
+          >CodePen<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>
+        <a
+          href="https://app.scribbler.live/?jsnb=github:nikoscham/FEAScript-Scribbler-examples/heatConductionScript/heat-conduction-1d-wall.jsnb"
+          class="badge badge-scribbler"
+          >Scribbler<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>
       </li>
       <li>
         <span class="tutorial-name">Solidification Front Propagation in a 2D Domain</span>
@@ -609,12 +632,6 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
           >Browser (multi-threaded)</a
         >
       </li>
-      <li>
-        <span class="tutorial-name">Advection-Diffusion with Gaussian Source</span>
-        <a href="https://feascript.com/tutorials/advection-diffusion-1d.html" class="badge badge-basic"
-          >Browser (basic)</a
-        >
-      </li>
     </ul>
 
     <p>
