From 3bb817e15f8a4351b43b8958148126c0cd31c5ad Mon Sep 17 00:00:00 2001
From: Mandic <02mami1mma@hft-stuttgart.de>
Date: Sun, 1 May 2022 15:47:25 +0000
Subject: [PATCH] Update colorbrewer2.html

---
 public/X3DOMTutorial/colorbrewer2.html | 95 +++++++++++++++-----------
 1 file changed, 54 insertions(+), 41 deletions(-)

diff --git a/public/X3DOMTutorial/colorbrewer2.html b/public/X3DOMTutorial/colorbrewer2.html
index a198fb1..e8a39b5 100644
--- a/public/X3DOMTutorial/colorbrewer2.html
+++ b/public/X3DOMTutorial/colorbrewer2.html
@@ -10,6 +10,9 @@
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   </link>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
   <style>
     #red,
     #green,
@@ -62,30 +65,41 @@
         </X3D>
       </td>
       <td width="50%" align="left" valign="top" scope="col">
-        <p>The following example will show you haw to interactively modify the 3D scene.</p>
+        <p>The following example will show you how to interactively modify the 3D scene.</p>
         <div id="red"></div>
         <div id="green"></div>
         <div id="blue"></div>
         <p>
           <br><br><br><br><br><br><br><br><br><br>
           The diffuse color of a material will be interactively changed.
-          A JavaScript <a href="https://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
+          A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
           and modified.
           If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
           get the Material node first.
           This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
-        <pre>
-	&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
-	  &lt;Scene&gt;
-	    &lt;Shape&gt; 
-   	      &lt;Appearance&gt;
-     	        &lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
-   	      &lt;/Appearance&gt;
-	      &lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
- 	    &lt;/Shape&gt;
-	  &lt;/Scene&gt;
-	&lt;/X3D&gt;
-    </pre>
+          <pre>
+          <code class="language-html">
+&lt;html&gt; 
+&lt;head&gt; 
+    &lt;title&gt;colorbrewer&lt;/title&gt; 			
+    &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt; 
+    &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt; 
+&lt;/head&gt; 
+&lt;body&gt;
+  &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
+    &lt;Scene&gt;
+      &lt;Shape&gt; 
+            &lt;Appearance&gt;
+                &lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
+            &lt;/Appearance&gt;
+        &lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
+        &lt;/Shape&gt;
+    &lt;/Scene&gt;
+  &lt;/X3D&gt;
+&lt;/body&gt; 
+&lt;/html&gt; 
+</code>
+</pre>    
         <br>
         For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
         attribute diffuseColor is set to
@@ -102,33 +116,32 @@
       rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
       mat.setAttribute("diffuseColor", rgbstring);
     </pre>
+        </p>
       </td>
-    </tr>
-  </table>
-  <script type="text/javascript" src="x3dom.js"></script>
-  <script>
-    function refreshDiffuseMaterial() {
-      var red = $("#red").slider("value"),
-        green = $("#green").slider("value"),
-        blue = $("#blue").slider("value");
-      var mat = document.getElementById("material");
-      rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255;
-      mat.setAttribute("diffuseColor", rgbstring);
-    }
-    $(function () {
-      $("#red, #green, #blue").slider({
-        orientation: "horizontal",
-        range: "min",
-        max: 255,
-        value: 127,
-        slide: refreshDiffuseMaterial,
-        change: refreshDiffuseMaterial
-      });
-      $("#red").slider("value", 255);
-      $("#green").slider("value", 140);
-      $("#blue").slider("value", 60);
-    });
-  </script>
+      <script type="text/javascript" src="x3dom.js"></script>
+      <script>
+        function refreshDiffuseMaterial() {
+          var red = $("#red").slider("value"),
+            green = $("#green").slider("value"),
+            blue = $("#blue").slider("value");
+          var mat = document.getElementById("material");
+          rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255;
+          mat.setAttribute("diffuseColor", rgbstring);
+        }
+        $(function () {
+          $("#red, #green, #blue").slider({
+            orientation: "horizontal",
+            range: "min",
+            max: 255,
+            value: 127,
+            slide: refreshDiffuseMaterial,
+            change: refreshDiffuseMaterial
+          });
+          $("#red").slider("value", 255);
+          $("#green").slider("value", 140);
+          $("#blue").slider("value", 60);
+        });
+      </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
-- 
GitLab