diff --git a/eq.html b/eq.html
index 21f7af4..20dadba 100644
--- a/eq.html
+++ b/eq.html
@@ -98,7 +98,7 @@
                                                 <input class="slider-value" style="width: 55px;" />
                                             </div>
                                         </div>
-                                        
+
                                     </div>
                                 </div>
                                 <div class="volume-slider-container mx-3">
@@ -346,7 +346,7 @@
                                                 <input class="slider-value" style="width: 55px;" />
                                             </div>
                                         </div>
-                                        
+
                                     </div>
                                 </div>
                                 <div class="volume-slider-container mx-3">
@@ -549,7 +549,7 @@
 </body>
 
 <script>
-document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", function () {
         //初始化配置
         loadData();
         mic1AttackSlider();
diff --git a/home.html b/home.html
index 72fbee0..b22b980 100644
--- a/home.html
+++ b/home.html
@@ -16,7 +16,9 @@
     <div class="d-flex w-100 h-100 mx-auto flex-column">
         <header class="mb-auto pb-5">
             <div class="dotblock d-flex justify-content-between px-5 py-4">
-                <div class="fs-3"><script>document.write(siteName)</script></div>
+                <div class="fs-3">
+                    <script>document.write(siteName)</script>
+                </div>
                 <div></div>
             </div>
             <div class="d-flex justify-content-center fw-bold border-black nav">
@@ -38,7 +40,7 @@
         <main class="px-3 d-flex justify-content-center">
             <div class="content-container">
                 <div class="d-flex">
-                    <div class="me-3"
+                    <div class="me-3" id="lineinput"
                         style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
                         <div class="divider">
                             <div class="divider-text"><span class="fw-bold">Line Input</span></div>
@@ -47,13 +49,211 @@
                             <div style="width: 200px;">
                                 <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
                                     <div class="d-flex redio-switche">
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-on"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn on-btn" for="inline1-on">ANALOG</label>
+                                        <input type="radio" class="btn-check" name="lineinput" id="lineinput-on"
+                                            value="analog">
+                                        <label class="btn btn-sm redio-btn on-btn" for="lineinput-on">ANALOG</label>
 
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-off"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn off-btn" for="inline1-off">DIGITAL</label>
+                                        <input type="radio" class="btn-check" name="lineinput" id="lineinput-off"
+                                            value="digital">
+                                        <label class="btn btn-sm redio-btn off-btn" for="lineinput-off">DIGITAL</label>
+                                    </div>
+                                </div>
+                                <div class="volume-slider-container">
+                                    <div class="d-flex justify-content-center mt-3">
+                                        <div>
+                                            <div class="d-flex">
+                                                <div class="pinpu-box pe-4">
+                                                    <div class="equalizer-bar equalizer-bar-left">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                    </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
+                                                    </div>
+                                                </div>
+                                                <div class="pinpu-box pe-4">
+                                                    <div class="equalizer-bar equalizer-bar-right">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                    </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
+                                                    </div>
+                                                </div>
+                                                <div class="ps-1">
+                                                    <section class="volume-ruler left-ruler">
+                                                        <section class="cm">
+                                                            <!-- <span>0</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-10</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-20</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-30</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-40</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-50</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-60</span> -->
+                                                        </section>
+                                                    </section>
+                                                </div>
+                                                <div class="volume-slider-box">
+                                                    <div class="volume-slider">
+                                                        <input type="range" orient="vertical" min="0" max="100"
+                                                            step="0.01">
+                                                        <div class="range-slider-bar" style="height: calc(45% + 15px);">
+                                                        </div>
+                                                        <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <section class="volume-ruler">
+                                                        <section class="cm">
+                                                            <span>12</span>
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-10</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-20</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <span>-30</span>
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-40</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-50</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <span>-72</span>
+                                                        </section>
+                                                    </section>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                        <div class="ms-4" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
+                                            <div>
+                                                <button class="btn btn-sm state-btn" id="lineinput-voice-add">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        fill="currentColor" class="bi bi-volume-up-fill"
+                                                        viewBox="0 0 16 16">
+                                                        <path
+                                                            d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
+                                                        <path
+                                                            d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
+                                                        <path
+                                                            d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                            <div>
+                                                <button class="btn btn-sm state-btn" id="lineinput-voice-low">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        fill="currentColor" class="bi bi-volume-down-fill"
+                                                        viewBox="0 0 16 16">
+                                                        <path
+                                                            d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                            <div>
+                                                <input type="checkbox" name="lineinput-voice-close"
+                                                    class="btn-check btn-close" id="lineinput-voice-close">
+                                                <label class="btn btn-sm state-btn" for="lineinput-voice-close">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                        fill="currentColor" class="bi bi-volume-mute-fill"
+                                                        viewBox="0 0 16 16">
+                                                        <path
+                                                            d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
+                                                    </svg>
+                                                </label>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                    <div class="slider-value-box input-group justify-content-center mt-3">
+                                        <input class="slider-value" style="width: 55px;" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="me-3" id="microphone1"
+                        style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
+                        <div class="divider">
+                            <div class="divider-text"><span class="fw-bold">Microphone 1</span></div>
+                        </div>
+                        <div class="p-3 d-flex justify-content-center">
+                            <div style="width: 200px;">
+                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
+                                    <div class="d-flex redio-switche">
+                                        <input type="checkbox" class="btn-check" name="mic1" id="mic1-on">
+                                        <label class="btn btn-sm redio-btn on-btn" for="mic1-on">PHANTOM (48V)</label>
                                     </div>
                                 </div>
                                 <div class="volume-slider-container">
@@ -85,7 +285,8 @@
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                     </div>
-                                                    <div>L</div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
+                                                    </div>
                                                 </div>
                                                 <div class="pinpu-box pe-4">
                                                     <div class="equalizer-bar">
@@ -112,7 +313,8 @@
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                     </div>
-                                                    <div>R</div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
+                                                    </div>
                                                 </div>
                                                 <div class="ps-1">
                                                     <section class="volume-ruler left-ruler">
@@ -190,9 +392,7 @@
                                         </div>
                                         <div class="ms-4" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
                                             <div>
-                                                <input type="button" name="mic2-volume" class="btn-check"
-                                                    id="btn-max-check2" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-max-check2">
+                                                <button class="btn btn-sm state-btn" id="microphone1-voice-add">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-up-fill"
                                                         viewBox="0 0 16 16">
@@ -203,164 +403,22 @@
                                                         <path
                                                             d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="button" name="mic2-volume" class="btn-check"
-                                                    id="btn-check2" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-check2">
+                                                <button class="btn btn-sm state-btn" id="microphone1-voice-low">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-down-fill"
                                                         viewBox="0 0 16 16">
                                                         <path
                                                             d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="checkbox" name="mic2-volume" class="btn-check btn-close"
-                                                    id="btn-close-check2" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-close-check2">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                                        fill="currentColor" class="bi bi-volume-mute-fill"
-                                                        viewBox="0 0 16 16">
-                                                        <path
-                                                            d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
-                                                    </svg>
-                                                </label>
-                                            </div>
-                                        </div>
-
-                                    </div>
-                                    <div class="slider-value-box input-group justify-content-center mt-3">
-                                        <input class="slider-value" style="width: 55px;" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="me-3"
-                        style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
-                        <div class="divider">
-                            <div class="divider-text"><span class="fw-bold">Microphone 1</span></div>
-                        </div>
-                        <div class="p-3 d-flex justify-content-center">
-                            <div style="width: 200px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="d-flex redio-switche">
-                                        <input type="checkbox" class="btn-check" name="mic1" id="mic1-on"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn on-btn" for="mic1-on">PHANTOM (48V)</label>
-                                    </div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                    </div>
-                                                </div>
-                                                <div class="volume-slider-box">
-                                                    <div class="volume-slider" data-slider-value="50">
-                                                        <input type="range" orient="vertical" min="0" max="100"
-                                                            step="0.1" value="30">
-                                                        <div class="range-slider-bar" style="height: calc(45% + 15px);">
-                                                        </div>
-                                                        <div class="range-slider-thumb" style="bottom: 45%;"></div>
-                                                    </div>
-                                                </div>
-                                                <div>
-                                                    <section class="volume-ruler">
-                                                        <section class="cm">
-                                                            <span>0</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-10</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-20</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-30</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-40</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-50</span>
-                                                            <section class="mm"></section>
-                                                        </section>
-                                                        <section class="cm">
-                                                            <span>-60</span>
-                                                        </section>
-                                                    </section>
-                                                </div>
-                                            </div>
-
-                                        </div>
-                                        <div class="ms-4" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
-                                            <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check"
-                                                    id="btn-max-check" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-max-check">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                                        fill="currentColor" class="bi bi-volume-up-fill"
-                                                        viewBox="0 0 16 16">
-                                                        <path
-                                                            d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
-                                                        <path
-                                                            d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
-                                                        <path
-                                                            d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
-                                                    </svg>
-                                                </label>
-                                            </div>
-                                            <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check" id="btn-check"
-                                                    autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-check">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                                                        fill="currentColor" class="bi bi-volume-down-fill"
-                                                        viewBox="0 0 16 16">
-                                                        <path
-                                                            d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
-                                                    </svg>
-                                                </label>
-                                            </div>
-                                            <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check"
-                                                    id="btn-close-check" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-close-check">
+                                                <input type="checkbox" name="microphone1-voice-close"
+                                                    class="btn-check btn-close" id="microphone1-voice-close">
+                                                <label class="btn btn-sm state-btn" for="microphone1-voice-close">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-mute-fill"
                                                         viewBox="0 0 16 16">
@@ -378,7 +436,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="me-3"
+                    <div class="me-3" id="microphone2"
                         style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
                         <div class="divider">
                             <div class="divider-text"><span class="fw-bold">Microphone 2</span></div>
@@ -387,8 +445,7 @@
                             <div style="width: 200px;">
                                 <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
                                     <div class="d-flex redio-switche">
-                                        <input type="checkbox" class="btn-check" name="mic2" id="mic2-on"
-                                            autocomplete="off">
+                                        <input type="checkbox" class="btn-check" name="mic2" id="mic2-on">
                                         <label class="btn btn-sm redio-btn on-btn" for="mic2-on">PHANTOM (48V)</label>
                                     </div>
                                 </div>
@@ -407,22 +464,81 @@
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                     </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
+                                                    </div>
+                                                </div>
+                                                <div class="pinpu-box pe-4">
+                                                    <div class="equalizer-bar">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                    </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
+                                                    </div>
+                                                </div>
+                                                <div class="ps-1">
+                                                    <section class="volume-ruler left-ruler">
+                                                        <section class="cm">
+                                                            <!-- <span>0</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-10</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-20</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-30</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-40</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-50</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-60</span> -->
+                                                        </section>
+                                                    </section>
                                                 </div>
                                                 <div class="volume-slider-box">
                                                     <div class="volume-slider" data-slider-value="50">
@@ -468,9 +584,7 @@
                                         </div>
                                         <div class="ms-4" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
                                             <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check"
-                                                    id="btn-max-check" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-max-check">
+                                                <button class="btn btn-sm state-btn" id="microphone2-voice-add">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-up-fill"
                                                         viewBox="0 0 16 16">
@@ -481,24 +595,22 @@
                                                         <path
                                                             d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check" id="btn-check"
-                                                    autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-check">
+                                                <button class="btn btn-sm state-btn" id="microphone2-voice-low">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-down-fill"
                                                         viewBox="0 0 16 16">
                                                         <path
                                                             d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="radio" name="mic1-volume" class="btn-check"
-                                                    id="btn-close-check" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-close-check">
+                                                <input type="checkbox" name="microphone2-voice-close"
+                                                    class="btn-check btn-close" id="microphone2-voice-close">
+                                                <label class="btn btn-sm state-btn" for="microphone2-voice-close">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-mute-fill"
                                                         viewBox="0 0 16 16">
@@ -516,7 +628,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="me-3"
+                    <div class="me-3" id="outputvolume"
                         style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
                         <div class="divider">
                             <div class="divider-text"><span class="fw-bold">Output Volume</span></div>
@@ -545,18 +657,77 @@
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
-                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                         <span style="opacity: 0;"></span>
                                                     </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
+                                                    </div>
+                                                </div>
+                                                <div class="pinpu-box pe-4">
+                                                    <div class="equalizer-bar">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                        <span style="opacity: 0;"></span>
+                                                    </div>
+                                                    <div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
+                                                    </div>
+                                                </div>
+                                                <div class="ps-1">
+                                                    <section class="volume-ruler left-ruler">
+                                                        <section class="cm">
+                                                            <!-- <span>0</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-10</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-20</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-30</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-40</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-50</span> -->
+                                                            <section class="mm"></section>
+                                                        </section>
+                                                        <section class="cm">
+                                                            <!-- <span>-60</span> -->
+                                                        </section>
+                                                    </section>
                                                 </div>
                                                 <div class="volume-slider-box">
                                                     <div class="volume-slider" data-slider-value="50">
@@ -602,9 +773,7 @@
                                         </div>
                                         <div class="ms-4" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
                                             <div>
-                                                <input type="radio" name="mic2-volume" class="btn-check"
-                                                    id="btn-max-check2" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-max-check2">
+                                                <button class="btn btn-sm state-btn" id="outputvolume-voice-add">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-up-fill"
                                                         viewBox="0 0 16 16">
@@ -615,24 +784,22 @@
                                                         <path
                                                             d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="radio" name="mic2-volume" class="btn-check" id="btn-check2"
-                                                    autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-check2">
+                                                <button class="btn btn-sm state-btn" id="outputvolume-voice-low">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-down-fill"
                                                         viewBox="0 0 16 16">
                                                         <path
                                                             d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zm3.025 4a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
                                                     </svg>
-                                                </label>
+                                                </button>
                                             </div>
                                             <div>
-                                                <input type="radio" name="mic2-volume" class="btn-check"
-                                                    id="btn-close-check2" autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-close-check2">
+                                                <input type="checkbox" name="outputvolume-voice-close"
+                                                    class="btn-check btn-close" id="outputvolume-voice-close">
+                                                <label class="btn btn-sm state-btn" for="outputvolume-voice-close">
                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                         fill="currentColor" class="bi bi-volume-mute-fill"
                                                         viewBox="0 0 16 16">
@@ -658,58 +825,262 @@
 
         <footer class="mt-auto text-white-50">
             <div class="dotblock d-flex justify-content-between px-5 py-4">
-                <div class=""><script>document.write(siteName)</script></div>
-                <div><script>document.write(siteUrl)</script></div>
+                <div class="">
+                    <script>document.write(siteName)</script>
+                </div>
+                <div>
+                    <script>document.write(siteUrl)</script>
+                </div>
             </div>
         </footer>
     </div>
 </body>
 
 <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        loadData()
+        LineInputSlider()
+        Microphone1Slider()
+        Microphone2Slider()
+        OutputVolumeSlider()
+        LineInputLeftRandomBar(10, 5)
+        LineInputRightRandomBar(10,5)
+    })
 
-    let app = (() => {
+    $(document).ready(function () {
 
-        function updateSlider(element) {
-            if (element) {
+        $('#lineinput-voice-add').on('click', function () {
+            alert('lineinput add')
+        })
 
-                let parent = element.parentElement,
-                    lastValue = parent.getAttribute('data-slider-value');
-                let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement;
-
-                console.log(`${lastValue}===${element.value}}`)
-                // if (lastValue === element.value) {
-                //     return; // No value change, no need to update then
-                // }
-
-                parent.setAttribute('data-slider-value', element.value);
-                let $thumb = parent.querySelector('.range-slider-thumb'),
-                    $bar = parent.querySelector('.range-slider-bar'),
-                    $value = container.querySelector('.slider-value')
-                console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
-                console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
-                pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
+        $('#lineinput-voice-low').on('click', function () {
+            alert('lineinput low')
+        })
 
 
+        $('#microphone1-voice-add').on('click', function () {
+            alert('microphone1 add')
+        })
 
-                $thumb.style.bottom = `${pct}%`;
-                $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
-                $value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
+        $('#microphone1-voice-low').on('click', function () {
+            alert('microphone1 low')
+        })
+
+
+        $('#microphone2-voice-add').on('click', function () {
+            alert('microphone2 add')
+        })
+
+        $('#microphone2-voice-low').on('click', function () {
+            alert('microphone2 low')
+        })
+
+        $('#outputvolume-voice-add').on('click', function () {
+            alert('add')
+        })
+
+        $('#outputvolume-voice-low').on('click', function () {
+            alert('low')
+        })
+    })
+
+    function loadData() {
+        $("input[name='lineinput']").val(['digital'])
+        $("input[name='mic1']").attr('checked', true)
+        $("input[name='mic2']").attr('checked', true)
+        $("input[name='outputvolume-voice-close']").attr('checked', true)
+        $("input[name='microphone2-voice-close']").attr('checked', true)
+        $("input[name='microphone1-voice-close']").attr('checked', false)
+        $("input[name='lineinput-voice-close']").attr('checked', false)
+    }
+
+
+    function LineInputSlider() {
+        let element = $('#lineinput')
+        let input = $("#lineinput .volume-slider input")
+        input.attr('value', (5 + 72) / (84 / 100))
+        updateLineInputSlider(element);
+
+
+        input.on('input', function () {
+            updateLineInputSlider(element);
+        })
+        input.on('change', function () {
+            updateLineInputSlider(element);
+        })
+    }
+
+    function updateLineInputSlider(element) {
+
+        let box = element.children().find(".volume-slider")
+        let input = element.children().find(".volume-slider input")
+        let $thumb = element.children().find(".range-slider-thumb")
+        let $bar = element.children().find(".range-slider-bar")
+        let $value = element.children().find(".slider-value")
+        pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
+
+        $thumb.attr('style', `bottom:${pct}%`)
+
+        let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
+        $bar.attr('style', `height:${barHeight}`)
+        $value.val(`${((input.val() * (84 / 100)) - 72).toFixed(1)}dB`);
+        //调用接口提交数据
+    }
+
+    function Microphone1Slider() {
+        let element = $("#microphone1")
+        let input = $("#microphone1 .volume-slider input")
+        input.attr('value', (-5 + 10) / (20 / 100))
+        updateMicrophone1Slider(element);
+
+
+        input.on('input', function () {
+            updateMicrophone1Slider(element);
+        })
+        input.on('change', function () {
+            updateMicrophone1Slider(element);
+        })
+    }
+
+    function updateMicrophone1Slider(element) {
+        let box = element.children().find(".volume-slider")
+        let input = element.children().find(".volume-slider input")
+        let $thumb = element.children().find(".range-slider-thumb")
+        let $bar = element.children().find(".range-slider-bar")
+        let $value = element.children().find(".slider-value")
+        pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
+
+        $thumb.attr('style', `bottom:${pct}%`)
+
+        let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
+        $bar.attr('style', `height:${barHeight}`)
+        $value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
+        //调用接口提交数据
+    }
+
+    function Microphone2Slider() {
+        let element = $('#microphone2')
+        let input = $("#microphone2 .volume-slider input")
+        input.attr('value', (1 + 10) / (20 / 100))
+        updateMicrophone2Slider(element);
+
+
+        input.on('input', function () {
+            updateMicrophone2Slider(element);
+        })
+        input.on('change', function () {
+            updateMicrophone2Slider(element);
+        })
+    }
+
+    function updateMicrophone2Slider(element) {
+
+        let box = element.children().find(".volume-slider")
+        let input = element.children().find(".volume-slider input")
+        let $thumb = element.children().find(".range-slider-thumb")
+        let $bar = element.children().find(".range-slider-bar")
+        let $value = element.children().find(".slider-value")
+        pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
+
+        $thumb.attr('style', `bottom:${pct}%`)
+
+        let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
+        $bar.attr('style', `height:${barHeight}`)
+        $value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
+        //调用接口提交数据
+    }
+
+
+    function OutputVolumeSlider() {
+        let element = $('#outputvolume')
+        let input = $("#outputvolume .volume-slider input")
+        input.attr('value', (1 + 10) / (20 / 100))
+        updateOutputVolumeSlider(element);
+
+
+        input.on('input', function () {
+            updateOutputVolumeSlider(element);
+        })
+        input.on('change', function () {
+            updateOutputVolumeSlider(element);
+        })
+    }
+
+    function updateOutputVolumeSlider(element) {
+
+        let box = element.children().find(".volume-slider")
+        let input = element.children().find(".volume-slider input")
+        let $thumb = element.children().find(".range-slider-thumb")
+        let $bar = element.children().find(".range-slider-bar")
+        let $value = element.children().find(".slider-value")
+        pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
+
+        $thumb.attr('style', `bottom:${pct}%`)
+
+        let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
+        $bar.attr('style', `height:${barHeight}`)
+        $value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
+        //调用接口提交数据
+    }
+
+    function LineInputLeftRandomBar(max, value) {
+        const bars = $("#lineinput .equalizer-bar-left")
+        for (let i = 0; i < bars.length; i++) {
+            let spans = bars[i].getElementsByTagName('span');
+            console.log(spans)
+
+            for (let j = 0; j < spans.length; j++) {
+                if (j >= 10 && j < 12) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#ff0000"
+                }
+                else if (j < 10 && j >= 7) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#ff6600"
+                }
+                else if (j < 7) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#a7dce9"
+                }
+
+                else {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#333"
+                }
             }
         }
-        return {
-            updateSlider: updateSlider
-        };
+    }
 
-    })();
+    function LineInputRightRandomBar(max, value) {
+        const bars = $("#lineinput .equalizer-bar-right")
+        let num = 68;
+        let row = 68/3;
 
-    (function initAndSetupTheSliders() {
-        const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-slider input'));
-        inputs.forEach(input => input.setAttribute('value', '50'));
-        inputs.forEach(input => app.updateSlider(input));
-        // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
-        inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
-        inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
-    })();
+        for (let i = 0; i < bars.length; i++) {
+            let spans = bars[i].getElementsByTagName('span');
+            console.log(spans)
+
+            for (let j = 0; j < spans.length; j++) {
+                if (j >= 15 && j < 18 && row > j) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#ff0000"
+                }
+                else if (j < 15 && j >= 10) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#ff6600"
+                }
+                else if (j < 10) {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#a7dce9"
+                }
+
+                else {
+                    spans[j].style.opacity = "1"
+                    spans[j].style.backgroundColor = "#333"
+                }
+            }
+        }
+    }
 </script>
 
 </html>
\ No newline at end of file