Update tutorial links and badges

Author: nikoscham

index.html

@@ -205,7 +205,15 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
         JavaScript API provides full programmatic control. It runs in three environments: in the browser with
         a simple HTML page, via Node.js for server-side applications, or with online interactive notebooks
         (e.g.
-        <a href="https://hub.scribbler.live/portfolio/#!nikoscham/FEAScript-Scribbler-examples"
+        <a href="https://codepen.io/"
+          >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
+        <a href="https://scribbler.live/"
           >Scribbler
           <img
             src="https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg"
@@ -497,6 +505,20 @@ <h2 id="features"><a name="Features"></a>Features</h2>
           </li>
           <li>
             Online notebooks integration (e.g.
+            <a href="https://codepen.io/"
+              >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
             <a href="https://hub.scribbler.live/portfolio/#!nikoscham/FEAScript-Scribbler-examples"
               >Scribbler
               <img
@@ -542,7 +564,7 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
       <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"
-          >Basic</a
+          >Browser (basic)</a
         >
         <!-- <a href="https://feascript.com/tutorials/heat-conduction-1d-wall-platform.html" class="badge badge-visual"
           >Visual Editor</a
@@ -555,40 +577,42 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
       </li>
       <li>
         <span class="tutorial-name">Heat Conduction in a 2D Fin</span>
-        <a href="https://feascript.com/tutorials/heat-conduction-2d-fin.html" class="badge badge-basic">Basic</a>
-        <a
-          href="https://app.scribbler.live/?jsnb=github:nikoscham/FEAScript-Scribbler-examples/heatConductionScript/heat-conduction-2d-fin.jsnb"
-          class="badge badge-scribbler"
-          >Scribbler</a
+        <a href="https://feascript.com/tutorials/heat-conduction-2d-fin.html" class="badge badge-basic"
+          >Browser (basic)</a
         >
         <a href="https://feascript.com/tutorials/heat-conduction-2d-fin-worker.html" class="badge badge-mt"
-          >Multi-threaded</a
+          >Browser (multi-threaded)</a
         >
         <a href="https://feascript.com/tutorials/heat-conduction-2d-fin-gmsh.html" class="badge badge-gmsh"
-          >Gmsh mesh</a
+          >Browser (Gmsh mesh)</a
         >
         <!-- <a
           href="https://feascript.com/tutorials/heat-conduction-2d-fin-performance-test.html"
           class="badge badge-performance"
-          >Performance Test</a
+          >Browser (performance Test)</a
         >
         <a href="https://feascript.com/tutorials/heat-conduction-2d-fin-platform.html" class="badge badge-visual"
           >Visual Editor</a
         > -->
+        <a
+          href="https://app.scribbler.live/?jsnb=github:nikoscham/FEAScript-Scribbler-examples/heatConductionScript/heat-conduction-2d-fin.jsnb"
+          class="badge badge-scribbler"
+          >Scribbler</a
+        >
       </li>
       <li>
         <span class="tutorial-name">Solidification Front Propagation in a 2D Domain</span>
         <a href="https://feascript.com/tutorials/solidification-front-2d.html" class="badge badge-basic"
-          >Basic</a
+          >Browser (basic)</a
         >
         <a href="https://feascript.com/tutorials/solidification-front-2d-worker.html" class="badge badge-mt"
-          >Multi-threaded</a
+          >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"
-          >Basic</a
+          >Browser (basic)</a
         >
       </li>
     </ul>