Add tutorial badges with distinct colors and update HTML to use new badge classes

Author: nikoscham

FEAScript-website.css

@@ -216,6 +216,33 @@ mjx-container {
   vertical-align: middle;
 }
 
+.tutorials-list .badge-basic {
+  background-color: #d4aa00;
+  color: #fff;
+}
+
+.tutorials-list .badge-visual {
+  background-color: #e68224;
+  color: #fff;
+}
+
+.tutorials-list .badge-mt {
+  background-color: #2196f3;
+  color: #fff;
+}
+
+.tutorials-list .badge-gmsh {
+  background-color: #4caf50;
+  color: #fff;
+}
+
+.tutorials-list .badge-basic a,
+.tutorials-list .badge-visual a,
+.tutorials-list .badge-mt a,
+.tutorials-list .badge-gmsh a {
+  color: #fff;
+}
+
 .tutorial-name {
   display: inline-block;
   vertical-align: middle;

index.html

@@ -245,8 +245,13 @@ <h2 id="gettingstarted"><a name="Getting Started"></a>Getting Started</h2>
         <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
+          style="
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+            margin-left: 2px;
+            margin-bottom: 4px;
+          " /></a
       >) or use FEAScript mesh generation tools &#8594; create and run a simulation using the JavaScript API
       (see <a href="#tutorials">tutorials</a> for detailed examples):
     </p>
@@ -433,40 +438,40 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
       <ul class="tutorials-list">
         <li>
           <span class="tutorial-name">Heat Conduction Through a Wall</span>
-          <span class="badge"
+          <span class="badge badge-basic"
             ><a href="https://feascript.com/tutorials/HeatConduction1DWall.html">Basic</a></span
           >
-          <span class="badge"
+          <span class="badge badge-visual"
             ><a href="https://feascript.com/tutorials/HeatConduction1DWallPlatform.html"
               >Visual editor</a
             ></span
           >
         </li>
         <li>
           <span class="tutorial-name">Heat Conduction in a Two-Dimensional Fin</span>
-          <span class="badge"
+          <span class="badge badge-basic"
             ><a href="https://feascript.com/tutorials/HeatConduction2DFin.html">Basic</a></span
           >
-          <span class="badge"
+          <span class="badge badge-mt"
             ><a href="https://feascript.com/tutorials/HeatConduction2DFinWorker.html">Multi-threaded</a></span
           >
-          <span class="badge"
+          <span class="badge badge-gmsh"
             ><a href="https://feascript.com/tutorials/HeatConduction2DFinGmsh.html"
               >Unstructured Gmsh mesh</a
             ></span
           >
-          <span class="badge"
+          <span class="badge badge-visual"
             ><a href="https://feascript.com/tutorials/HeatConduction2DFinPlatform.html"
               >Visual editor</a
             ></span
           >
         </li>
         <li>
           <span class="tutorial-name">Solidification Front Propagation in a 2D Domain</span>
-          <span class="badge"
+          <span class="badge badge-basic"
             ><a href="https://feascript.com/tutorials/SolidificationFront2D.html">Basic</a></span
           >
-          <span class="badge"
+          <span class="badge badge-mt"
             ><a href="https://feascript.com/tutorials/SolidificationFront2DWorker.html"
               >Multi-threaded</a
             ></span