Further improvements to the template

Author: wangbin579

btree.html

@@ -71,7 +71,7 @@
 
     .key {
       width: 70px;
-      background-color: #90ee90;
+      background-color: white;
       color: #333;
     }
 
@@ -103,7 +103,7 @@
     .leaf-key {
       width: 80px;
       height: 40px;
-      background-color: #90ee90;
+      background-color: white;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -125,11 +125,17 @@
     .leaf-record {
       width: 80px;
       height: 40px;
-      background-color: green;
+      background-color: #006400; /* dark green */
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
+      color: white;
+    }
+
+    .leaf-record.alt {
+      background-color: #90ee90; /* light green */
+      color: black;
     }
   </style>
 </head>
@@ -155,18 +161,18 @@
           </div>
           <div class="leaf-node" id="id-200">
             <div class="leaf-key">200</div>
-            <div class="leaf-record">R2</div>
+            <div class="leaf-record alt">R2</div>
           </div>
         </div>
 
         <div class="leaf-node-group">
-        	<div class="leaf-node" id="id-300">
+          <div class="leaf-node" id="id-300">
             <div class="leaf-key">300</div>
             <div class="leaf-record">R3</div>
           </div>
           <div class="leaf-node" id="id-500">
             <div class="leaf-key">500</div>
-            <div class="leaf-record">R4</div>
+            <div class="leaf-record alt">R4</div>
           </div>
           <div class="leaf-node" id="id-600">
             <div class="leaf-key">600</div>
@@ -196,18 +202,18 @@
           </div>
           <div class="leaf-node" id="k-2">
             <div class="leaf-key">2</div>
-            <div class="leaf-record">200</div>
+            <div class="leaf-record alt">200</div>
           </div>
         </div>
 
         <div class="leaf-node-group">
-        	<div class="leaf-node" id="k-3">
+          <div class="leaf-node" id="k-3">
             <div class="leaf-key">3</div>
             <div class="leaf-record">300</div>
           </div>
           <div class="leaf-node" id="k-5">
             <div class="leaf-key">5</div>
-            <div class="leaf-record">500</div>
+            <div class="leaf-record alt">500</div>
           </div>
           <div class="leaf-node" id="k-6">
             <div class="leaf-key">6</div>
@@ -234,15 +240,13 @@
       );
     }
 
-    // ID tree: only point to 100, 300, 500
+    // ID tree connections
     connect('id-p0', 'id-100');
     connect('id-p1', 'id-300');
 
-
-    // k tree: only point to 1, 3
+    // k tree connections
     connect('k-p0', 'k-1');
     connect('k-p1', 'k-3');
-
   </script>
 </body>
-</html>
+</html>

checkpoint.html

@@ -65,18 +65,18 @@ <h1>MySQL Redo Log with Variable Write Speed</h1>
 <div class="control-panel">
   <div class="slider-container">
     <label for="baseSpeedSlider">Base Write Speed:</label>
-    <input type="range" id="baseSpeedSlider" min="0.001" max="0.1" step="0.001" value="0.03">
-    <span class="value-display" id="baseSpeedValue">0.030</span>
+    <input type="range" id="baseSpeedSlider" min="0.001" max="0.05" step="0.001" value="0.015">
+    <span class="value-display" id="baseSpeedValue">0.015</span>
   </div>
   <div class="slider-container">
     <label for="variationSlider">Speed Variation:</label>
-    <input type="range" id="variationSlider" min="0" max="0.2" step="0.001" value="0.05">
-    <span class="value-display" id="variationValue">0.050</span>
+    <input type="range" id="variationSlider" min="0" max="0.1" step="0.001" value="0.03">
+    <span class="value-display" id="variationValue">0.030</span>
   </div>
   <div class="slider-container">
     <label for="checkpointSlider">Checkpoint Speed:</label>
-    <input type="range" id="checkpointSlider" min="0.001" max="0.1" step="0.001" value="0.02">
-    <span class="value-display" id="checkpointValue">0.020</span>
+    <input type="range" id="checkpointSlider" min="0.001" max="0.05" step="0.001" value="0.01">
+    <span class="value-display" id="checkpointValue">0.010</span>
   </div>
   <div class="checkbox-container">
     <input type="checkbox" id="randomSpeedCheckbox" checked>
@@ -91,15 +91,15 @@ <h1>MySQL Redo Log with Variable Write Speed</h1>
 const centerX = canvas.width / 2;
 const centerY = canvas.height / 2;
 const radius = 180;
-const logFiles = ["ib_logfile0", "ib_logfile1", "ib_logfile2"];
+const logFiles = ["ib_logfile0", "ib_logfile1", "ib_logfile2", "ib_logfile3"];
 const segments = logFiles.length;
 
 // Pointer states
 let writePos = Math.PI * 1.5;
 let checkpoint = Math.PI * 1.0;
-let baseWriteSpeed = 0.02;
+let baseWriteSpeed = 0.015;
 let currentWriteSpeed = baseWriteSpeed;
-let speedVariation = 0.02;
+let speedVariation = 0.03;
 let checkpointSpeed = 0.02;
 const minGap = Math.PI / 20;
 const warningGap = Math.PI / 10;