Split palette range into its own section and other UX improvements

Author: rosslh

client/blog/how-mandelbrot-site-was-built.md

@@ -26,7 +26,7 @@ The viewer is equipped with a range of interactive features:
 - **Dynamic Zoom:** Users can zoom into any region of the set using mouse scroll or by selecting a specific area, facilitating deep exploration.
 - **Iteration Adjustment:** This feature allows users to adjust the number of iterations used in the calculations, affecting the detail and rendering time of the fractal.
 - **Multibrot Sets:** Beyond the traditional Mandelbrot set, users can explore multibrot sets by adjusting the exponent in the generating formula.
-- **Customizable Color Schemes:** Users can personalize their visual experience by choosing different color schemes.
+- **Customizable Color Palettes:** Users can personalize their visual experience by choosing different color palettes.
 - **Viewport Coordinates:** Display and update the coordinates of the current viewport on the complex plane.
 - **Image Export:** High-resolution images of the fractal can be saved as PNG files.
 - **Shareable Views:** Users can generate URLs that encapsulate their current view, allowing them to share their fractal explorations with others.

client/html/index.html

@@ -118,7 +118,7 @@ <h1 class="nav-heading">
           </div>
         </div>
       </details>
-      <details open>
+      <details open id="renderSettings">
         <summary class="mobile-hidden">
           <span>Render settings</span>
           <button
@@ -158,14 +158,14 @@ <h1 class="nav-heading">
           </div>
         </div>
       </details>
-      <details class="mobile-hidden">
+      <details class="mobile-hidden" id="colorPalette">
         <summary>
-          <label for="colorScheme">Color scheme</label>
+          <label for="colorScheme">Color palette</label>
           <button
             type="button"
             class="reset-button"
             id="resetColorScheme"
-            title="Reset color scheme"
+            title="Reset color palette"
           >
             ↺
           </button>
@@ -230,11 +230,23 @@ <h1 class="nav-heading">
             <input type="checkbox" id="smoothColoring" name="smoothColoring" />
             <label for="smoothColoring">Smooth coloring</label>
           </div>
+        </div>
+      </details>
+      <details class="mobile-hidden" id="paletteRange">
+        <summary>
+          <span>Palette range</span>
+          <button
+            type="button"
+            class="reset-button"
+            id="resetPaletteRange"
+            title="Reset palette range"
+          >
+            ↺
+          </button>
+        </summary>
+        <div class="details-content">
           <div class="input-wrapper">
-            <label for="paletteMinIter" class="label-with-subtitle">
-              <span>Min iterations</span>
-              <span class="secondary">Color palette start</span>
-            </label>
+            <label for="paletteMinIter">Min iterations</label>
             <input
               type="number"
               id="paletteMinIter"
@@ -243,10 +255,7 @@ <h1 class="nav-heading">
             />
           </div>
           <div class="input-wrapper">
-            <label for="paletteMaxIter" class="label-with-subtitle">
-              <span>Max iterations</span>
-              <span class="secondary">Color palette end</span>
-            </label>
+            <label for="paletteMaxIter">Max iterations</label>
             <input
               type="number"
               id="paletteMaxIter"
@@ -265,7 +274,7 @@ <h1 class="nav-heading">
           </div>
         </div>
       </details>
-      <details class="mobile-hidden">
+      <details class="mobile-hidden" id="adjustColors">
         <summary>
           <span>Adjust colors</span>
           <button
@@ -327,7 +336,7 @@ <h1 class="nav-heading">
           </div>
         </div>
       </details>
-      <details class="mobile-hidden">
+      <details class="mobile-hidden" id="coordinates">
         <summary>
           <span>Coordinates</span>
           <button