Arrumando botões de volume e pan, criação de novos compassos.

creation.html

@@ -67,6 +67,23 @@
           </div>
           <div class="label">ANDAMENTO/BPM</div>
         </div>
+        <div class="info-display">
+          <div class="interactive-input-container">
+            <button class="adjust-btn" data-target="bars" data-step="-1">
+              -</button
+            ><input
+              type="text"
+              class="value-input"
+              id="bars-input"
+              value="1"
+              data-min="1"
+              data-max="64"
+            /><button class="adjust-btn" data-target="bars" data-step="1">
+              +
+            </button>
+          </div>
+          <div class="label">COMPASSOS</div>
+        </div>
         <div class="info-display">
           <div class="interactive-input-container">
             <div class="compasso-group">
@@ -119,10 +136,11 @@
         </div>
         <div class="info-display">
           <div
+            id="timer-display"
             class="interactive-input-container"
             style="font-size: 0.7rem; color: var(--text-dark)"
           >
-            0:00:00
+            00:00:00
           </div>
           <div class="label">MIN:SEC:MSEC</div>
         </div>
@@ -159,7 +177,7 @@
             <i class="fa-solid fa-table-cells"></i
             ><i class="fa-solid fa-bars-staggered"></i
             ><i class="fa-solid fa-wave-square enabled"></i
-            ><i class="fa-solid fa-plus"></i>
+            ><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
           </div>
           <div class="zoom-controls">
             <i class="fa-solid fa-minus" id="remove-instrument-btn"></i
@@ -198,4 +216,4 @@
 
     <script src="assets/js/creations/main.js" type="module" defer></script>
   </body>
-</html>
+</html>