From 5d4c88d3558e0b4b0588e9979dce49c0629de925 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Mon, 2 Oct 2023 20:55:58 +0200
Subject: [PATCH] Add send midi clock checkbox

---
 index.html | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8b43bf0..c0ffdbd 100644
--- a/index.html
+++ b/index.html
@@ -237,19 +237,25 @@
               	</div>
 							</div>
               <!-- Midi settings -->
-              <div class="flex flex-row">
-                <div class="flex items-center mb-4 ml-8">
-                  <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Midi clock:&nbsp;</label>
-                  <select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                    <option value="-1">Internal</option>
-                  </select>
-                </div>
-                <div class="flex items-center mb-4 ml-8">
-                  <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock ppqn:&nbsp;</label>
-                  <select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                    <option value="24">24</option>
-                    <option value="48">48</option>
-                  </select>
+              <div id="midi-settings-container" class="rounded-lg bg-gray-300 pt-4">
+                <div class="flex flex-row">
+                  <div class="flex items-center mb-4 ml-6">
+                    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock:&nbsp;</label>
+                    <select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
+                      <option value="-1">Internal</option>
+                    </select>
+                  </div>
+                  <div class="flex items-center mb-4 ml-6">
+                    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN:&nbsp;</label>
+                    <select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
+                      <option value="24">24</option>
+                      <option value="48">48</option>
+                    </select>
+                  </div>
+              	  <div class="flex items-center mb-4 ml-20">
+              	      <input id="send-midi-clock" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              	      <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
+              	  </div>
                 </div>
               </div>
               <!-- Information card -->