combine speed sections

templates/settings.html

@@ -125,49 +125,6 @@ endblock %}
       Settings
     </h1>
   </div>
-  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
-    <h2
-      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
-    >
-      Application Settings
-    </h2>
-    <div class="px-6 py-5 space-y-6">
-      <label class="flex flex-col gap-1.5">
-        <span class="text-slate-700 text-sm font-medium leading-normal"
-          >Application Name</span
-        >
-        <div class="flex gap-3 items-center">
-          <div class="relative flex-1">
-            <input
-              id="appNameInput"
-              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
-              placeholder="e.g., Dune Weaver"
-              value="Dune Weaver"
-            />
-            <button
-              type="button"
-              onclick="document.getElementById('appNameInput').value='Dune Weaver';"
-              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
-              aria-label="Reset to default"
-              title="Reset to default"
-            >
-              <span class="material-icons">restart_alt</span>
-            </button>
-          </div>
-          <button
-            id="saveAppName"
-            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
-          >
-            <span class="material-icons text-lg">save</span>
-            <span class="truncate">Save Name</span>
-          </button>
-        </div>
-        <p class="text-xs text-slate-500 mt-2">
-          This name will appear in the browser tab and at the top of every page.
-        </p>
-      </label>
-    </div>
-  </section>
   <section class="bg-white rounded-xl shadow-sm overflow-hidden">
     <h2
       class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
@@ -233,14 +190,96 @@ endblock %}
     <h2
       class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
     >
-      Custom Clear Patterns
+      Application Settings
+    </h2>
+    <div class="px-6 py-5 space-y-6">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-slate-700 text-sm font-medium leading-normal"
+          >Application Name</span
+        >
+        <div class="flex gap-3 items-center">
+          <div class="relative flex-1">
+            <input
+              id="appNameInput"
+              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
+              placeholder="e.g., Dune Weaver"
+              value="Dune Weaver"
+            />
+            <button
+              type="button"
+              onclick="document.getElementById('appNameInput').value='Dune Weaver';"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
+              aria-label="Reset to default"
+              title="Reset to default"
+            >
+              <span class="material-icons">restart_alt</span>
+            </button>
+          </div>
+          <button
+            id="saveAppName"
+            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
+          >
+            <span class="material-icons text-lg">save</span>
+            <span class="truncate">Save Name</span>
+          </button>
+        </div>
+        <p class="text-xs text-slate-500 mt-2">
+          This name will appear in the browser tab and at the top of every page.
+        </p>
+      </label>
+    </div>
+  </section>
+  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
+    <h2
+      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
+    >
+      Pattern Clearing
     </h2>
     <div class="px-6 py-5 space-y-6">
       <p class="text-sm text-slate-600">
-        Customize the clear patterns used when transitioning between patterns. The idea here is for you to have some flexibility to choose clear patterns to distribute your sand evenly.
+        Customize the clearing behavior used when transitioning between patterns. Set custom patterns and speed to control how sand is distributed.
       </p>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+      <!-- Clearing Speed Section -->
+      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
+        <h3 class="text-slate-800 text-base font-semibold">Clearing Speed</h3>
+        <p class="text-sm text-slate-600">
+          Set a custom speed for clearing patterns. This allows clearing patterns to run at a different speed than regular patterns.
+        </p>
+        <div class="flex flex-col gap-1.5">
+          <label for="clearPatternSpeedInput" class="text-slate-700 text-sm font-medium leading-normal">
+            Speed (steps per minute)
+          </label>
+          <div class="flex gap-3 items-center">
+            <input
+              id="clearPatternSpeedInput"
+              type="number"
+              min="50"
+              max="2000"
+              step="50"
+              class="form-input flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
+              placeholder="200"
+              value=""
+            />
+            <button
+              id="saveClearSpeed"
+              class="flex items-center justify-center gap-2 min-w-[120px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
+            >
+              <span class="material-icons text-lg">save</span>
+              <span class="truncate">Save Speed</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Patterns Section -->
+      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
+        <h3 class="text-slate-800 text-base font-semibold">Custom Clear Patterns</h3>
+        <p class="text-sm text-slate-600">
+          Choose specific patterns to use when clearing. Leave empty to use the default clearing behavior.
+        </p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div class="flex flex-col gap-1.5">
           <label for="customClearFromInInput" class="text-slate-700 text-sm font-medium leading-normal">Clear From Center Pattern</label>
           <div class="relative">
@@ -294,49 +333,13 @@ endblock %}
         </div>
       </div>
 
-      <div class="flex justify-end">
-        <button
-          id="saveClearPatterns"
-          class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
-        >
-          <span class="material-icons text-lg">save</span>
-          <span class="truncate">Save Clear Patterns</span>
-        </button>
-      </div>
-    </div>
-  </section>
-  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
-    <h2
-      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
-    >
-      Clearing Pattern Speed
-    </h2>
-    <div class="px-6 py-5 space-y-6">
-      <p class="text-sm text-slate-600">
-        Set a custom speed for clearing patterns. This allows you to run clearing patterns at a different speed than regular patterns. If this is set, the speed will be used but won't be updated in the pattern preivew. 
-      </p>
-      
-      <div class="flex flex-col gap-1.5">
-        <label for="clearPatternSpeedInput" class="text-slate-700 text-sm font-medium leading-normal">
-          Clearing Speed (steps per minute)
-        </label>
-        <div class="flex gap-3 items-center">
-          <input
-            id="clearPatternSpeedInput"
-            type="number"
-            min="50"
-            max="2000"
-            step="50"
-            class="form-input flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
-            placeholder="200"
-            value=""
-          />
+        <div class="flex justify-end">
           <button
-            id="saveClearSpeed"
-            class="flex items-center justify-center gap-2 min-w-[120px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
+            id="saveClearPatterns"
+            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
           >
             <span class="material-icons text-lg">save</span>
-            <span class="truncate">Save Speed</span>
+            <span class="truncate">Save Patterns</span>
           </button>
         </div>
       </div>