From 866669306120c3dd4d659ea4c01e335124b7d004 Mon Sep 17 00:00:00 2001
From: yxw <17074267@qq.com>
Date: Fri, 10 Nov 2023 11:53:14 +0800
Subject: [PATCH] fix

---
 control.html |  39 +++-
 ducking.html |  65 ++++--
 eq.html      | 118 +++++++---
 filter.html  |  63 +++--
 fs.html      |  43 +++-
 home.html    |  69 ++++--
 login.html   |  20 ++
 network.html |  42 +++-
 system.html  |  45 ++--
 volume.html  | 637 ---------------------------------------------------
 10 files changed, 383 insertions(+), 758 deletions(-)
 delete mode 100644 volume.html

diff --git a/control.html b/control.html
index 9908c09..76519c3 100644
--- a/control.html
+++ b/control.html
@@ -121,13 +121,13 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="mb-3 row">
+                        <!-- <div class="mb-3 row">
                             <label for="inputPassword" class="col-6 col-form-label">Blink</label>
                             <div class="col-6 d-flex">
                                 <button type="button" id="blink"
                                     class="btn btn-dark border border-black px-5">Blink</button>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
 
                 </div>
@@ -147,6 +147,8 @@
 
     <script>
 
+        var data = {}
+
         document.addEventListener("DOMContentLoaded", function () {
             //初始化配置
             loadData()
@@ -178,12 +180,33 @@
         })
 
         function loadData() {
-            $("input[name='power']").val(["on"])
-            $("input[name='hibernation']").val(["enable"])
-            $("#timer").val("1")
-            $("input[name='trigger']").val(["disable"])
-            $("input[name='analog']").val(["enable"])
-            $("input[name='lock']").val(["lock"]);
+            let url = ""
+            $.ajax({
+                type: "GET",
+                url: url,
+                success: function (res) { },
+                error: function () {
+                    data={
+                        power:"on",
+                        hibernation:"enable",
+                        timer:5,
+                        trigger:"enable",
+                        signal:"disable",
+                        lock:"unlock"
+                    }
+                    bindData()
+                }
+            })
+           
+        }
+
+        function bindData(){
+            $("input[name='power']").val([`${data.power}`])
+            $("input[name='hibernation']").val([`${data.hibernation}`])
+            $("#timer").val(`${data.timer}`)
+            $("input[name='trigger']").val([`${data.trigger}`])
+            $("input[name='analog']").val([`${data.signal}`])
+            $("input[name='lock']").val([`${data.lock}`]);
         }
     </script>
 </body>
diff --git a/ducking.html b/ducking.html
index 6e8da57..d19ea16 100644
--- a/ducking.html
+++ b/ducking.html
@@ -317,9 +317,9 @@
                         <div class="mb-3">
                             <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="switch" id="switch-on" value="on">
+                                    <input type="radio" class="btn-check" name="switch" id="switch-on" value="enable">
                                     <label class="btn btn-sm redio-btn on-btn" for="switch-on">ON</label>
-                                    <input type="radio" class="btn-check" name="switch" id="switch-off" value="off">
+                                    <input type="radio" class="btn-check" name="switch" id="switch-off" value="disable">
                                     <label class="btn btn-sm redio-btn off-btn" for="switch-off">OFF</label>
                                 </div>
                             </div>
@@ -341,13 +341,13 @@
 </body>
 
 <script>
+
+    var data = {}
+
     document.addEventListener("DOMContentLoaded", function () {
         //初始化配置
         loadData();
-        attackSlider();
-        thresholdSlider();
-        ducklevelSlider();
-        releaseSlider();
+
     })
 
     $(document).ready(function () {
@@ -374,16 +374,47 @@
     })
 
     function loadData() {
-        $("input[name='switch']").val(['on'])
-        $("#mic1").prop("checked", true)
-        $("#mic2").prop("checked", true)
+        let url = ""
+        $.ajax({
+            type: "GET",
+            url: url,
+            success: function (res) {
+                data = res.content
+                bindData()
+            },
+            error: function () {
+                data = {
+                    parameters: {
+                        threshold: -30,
+                        attack: 200,
+                        ducklevel: -3,
+                        release: 1000,
+                        state: "enable"
+                    },
+                    mic1: "close",
+                    mic2: "open"
+                }
+                bindData()
+            }
+        })
+
 
     }
 
-    function attackSlider() {
+    function bindData() {
+        $("input[name='switch']").val([`${data.parameters.state}`])
+        $("#mic1").prop("checked", data.mic1 == 'open')
+        $("#mic2").prop("checked", data.mic2 == 'open')
+        attackSlider(data.parameters.attack);
+        thresholdSlider(data.parameters.threshold);
+        ducklevelSlider(data.parameters.ducklevel);
+        releaseSlider(data.parameters.release);
+    }
+
+    function attackSlider(number) {
         let element = $('#attack')
         let input = $("#attack .volume-slider input")
-        input.attr('value', (100 - 10) / (490 / 100))
+        input.attr('value', (parseInt(number) - 10) / (490 / 100))
         updateAttackSlider(element);
 
 
@@ -412,10 +443,10 @@
         //调用接口提交数据
     }
 
-    function thresholdSlider() {
+    function thresholdSlider(number) {
         let element = $('#threshold')
         let input = $("#threshold .volume-slider input")
-        input.attr('value', (-40 + 60) / (60 / 100))
+        input.attr('value', (parseInt(number) + 60) / (60 / 100))
         updateThresholdSlider(element);
 
 
@@ -443,10 +474,10 @@
         //调用接口提交数据
     }
 
-    function ducklevelSlider() {
+    function ducklevelSlider(number) {
         let element = $('#ducklevel')
         let input = $("#ducklevel .volume-slider input")
-        input.attr('value', (-20 + 100) / (100 / 100))
+        input.attr('value', (parseInt(number) + 100) / (100 / 100))
         updateDucklevelSlider(element);
 
 
@@ -474,10 +505,10 @@
         //调用接口提交数据
     }
 
-    function releaseSlider() {
+    function releaseSlider(number) {
         let element = $('#release')
         let input = $("#release .volume-slider input")
-        input.attr('value', (1000 - 10) / (2000 / 100))
+        input.attr('value', (parseInt(number) - 10) / (2000 / 100))
         updateReleaseSlider(element);
 
 
diff --git a/eq.html b/eq.html
index 44d787f..2a2b777 100644
--- a/eq.html
+++ b/eq.html
@@ -96,7 +96,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -157,7 +158,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -217,7 +219,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -277,7 +280,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -291,11 +295,11 @@
                             <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="mic1switch" id="mic1switch-on"
-                                        autocomplete="off">
+                                        value="enable">
                                     <label class="btn btn-sm redio-btn on-btn" for="mic1switch-on">ON</label>
 
                                     <input type="radio" class="btn-check" name="mic1switch" id="mic1switch-off"
-                                        autocomplete="off">
+                                        value="disable">
                                     <label class="btn btn-sm redio-btn off-btn" for="mic1switch-off">OFF</label>
                                 </div>
                             </div>
@@ -360,7 +364,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -421,7 +426,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -481,7 +487,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 30px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 30px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -541,7 +548,8 @@
 
                                             <div class="slider-value-box input-group justify-content-center mt-3">
                                                 <div>
-                                                    <input class="slider-value text-center" type="number" style="width: 35px;" />
+                                                    <input class="slider-value text-center" type="number"
+                                                        style="width: 35px;" />
                                                 </div>
                                                 <span
                                                     style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
@@ -555,11 +563,11 @@
                             <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="mic2switch" id="mic2switch-on"
-                                        autocomplete="off">
+                                        value="enable">
                                     <label class="btn btn-sm redio-btn on-btn" for="mic2switch-on">ON</label>
 
                                     <input type="radio" class="btn-check" name="input1" id="mic2switch-off"
-                                        autocomplete="off">
+                                        value="disable">
                                     <label class="btn btn-sm redio-btn off-btn" for="mic2switch-off">OFF</label>
                                 </div>
                             </div>
@@ -581,18 +589,12 @@
 </body>
 
 <script>
+    var data = {}
+
     document.addEventListener("DOMContentLoaded", function () {
         //初始化配置
         loadData();
-        mic1AttackSlider();
-        mic1ThresholdSlider();
-        mic1HoldSlider();
-        mic1ReleaseSlider();
 
-        mic2AttackSlider();
-        mic2ThresholdSlider();
-        mic2HoldSlider();
-        mic2ReleaseSlider();
     })
 
     $(document).ready(function () {
@@ -611,14 +613,54 @@
     })
 
     function loadData() {
-        $("input[name='mic1switch']").val(['on'])
-        $("input[name='mic2switch']").val(['on'])
+        let url = ""
+        $.ajax({
+            type: "GET",
+            url: url,
+            success: function (res) { 
+                data = res.content
+                bindData()
+            },
+            error: function () {
+                data = {
+                    mic1: {
+                        threshold: 9,
+                        attack: -1,
+                        hold: 3,
+                        release: -8,
+                        state: "enable"
+                    },
+                    mic2: {
+                        threshold: -7,
+                        attack: 6,
+                        hold: 0,
+                        release: -2,
+                        state: "disable"
+                    }
+                }
+                bindData()
+            }
+        })
     }
 
-    function mic1AttackSlider() {
+    function bindData() {
+        $("input[name='mic1switch']").val([`${data.mic1.state}`])
+        $("input[name='mic2switch']").val([`${data.mic2.state}`])
+        mic1AttackSlider(data.mic1.attack);
+        mic1ThresholdSlider(data.mic1.threshold);
+        mic1HoldSlider(data.mic1.hold);
+        mic1ReleaseSlider(data.mic1.release);
+
+        mic2AttackSlider(data.mic2.attack);
+        mic2ThresholdSlider(data.mic2.threshold);
+        mic2HoldSlider(data.mic2.hold);
+        mic2ReleaseSlider(data.mic2.release);
+    }
+
+    function mic1AttackSlider(number) {
         let element = $('#mic1attack')
         let input = $("#mic1attack .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic1AttackSlider(element);
 
 
@@ -647,10 +689,10 @@
         //调用接口提交数据
     }
 
-    function mic1ThresholdSlider() {
+    function mic1ThresholdSlider(number) {
         let element = $('#mic1threshold')
         let input = $("#mic1threshold .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic1ThresholdSlider(element);
 
 
@@ -678,10 +720,10 @@
         //调用接口提交数据
     }
 
-    function mic1HoldSlider() {
+    function mic1HoldSlider(number) {
         let element = $('#mic1hold')
         let input = $("#mic1hold .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic1HoldSlider(element);
 
 
@@ -709,10 +751,10 @@
         //调用接口提交数据
     }
 
-    function mic1ReleaseSlider() {
+    function mic1ReleaseSlider(number) {
         let element = $('#mic1release')
         let input = $("#mic1release .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic1ReleaseSlider(element);
 
 
@@ -743,10 +785,10 @@
 
 
 
-    function mic2AttackSlider() {
+    function mic2AttackSlider(number) {
         let element = $('#mic2attack')
         let input = $("#mic2attack .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic2AttackSlider(element);
 
 
@@ -775,10 +817,10 @@
         //调用接口提交数据
     }
 
-    function mic2ThresholdSlider() {
+    function mic2ThresholdSlider(number) {
         let element = $('#mic2threshold')
         let input = $("#mic2threshold .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic2ThresholdSlider(element);
 
 
@@ -806,10 +848,10 @@
         //调用接口提交数据
     }
 
-    function mic2HoldSlider() {
+    function mic2HoldSlider(number) {
         let element = $('#mic2hold')
         let input = $("#mic2hold .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic2HoldSlider(element);
 
 
@@ -837,10 +879,10 @@
         //调用接口提交数据
     }
 
-    function mic2ReleaseSlider() {
+    function mic2ReleaseSlider(number) {
         let element = $('#mic2release')
         let input = $("#mic2release .volume-slider input")
-        input.attr('value', (0 + 10) / (20 / 100))
+        input.attr('value', (parseInt(number) + 10) / (20 / 100))
         updateMic2ReleaseSlider(element);
 
 
diff --git a/filter.html b/filter.html
index 56717c0..5d7cd27 100644
--- a/filter.html
+++ b/filter.html
@@ -46,12 +46,10 @@
                             <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="mic1" id="mic1-on"
-                                            value="enable">
+                                        <input type="radio" class="btn-check" name="mic1" id="mic1-on" value="enable">
                                         <label class="btn btn-sm redio-btn on-btn" for="mic1-on">ENABLE</label>
 
-                                        <input type="radio" class="btn-check" name="mic1" id="mic1-off"
-                                            value="disable">
+                                        <input type="radio" class="btn-check" name="mic1" id="mic1-off" value="disable">
                                         <label class="btn btn-sm redio-btn off-btn" for="mic1-off">DISABLE</label>
                                     </div>
 
@@ -79,7 +77,8 @@
                                 </div>
                                 <div class="slider-value-box input-group justify-content-center mt-3">
                                     <div>
-                                        <input  class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="200" />
+                                        <input class="slider-value text-center" id="handle1-value" type="number"
+                                            style="width: 40px;" value="200" />
                                     </div>
                                     <span
                                         style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
@@ -99,12 +98,10 @@
                             <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="mic2" id="mic2-on"
-                                            value="enable">
+                                        <input type="radio" class="btn-check" name="mic2" id="mic2-on" value="enable">
                                         <label class="btn btn-sm redio-btn on-btn" for="mic2-on">ENABLE</label>
 
-                                        <input type="radio" class="btn-check" name="mic2" id="mic2-off"
-                                            value="disable">
+                                        <input type="radio" class="btn-check" name="mic2" id="mic2-off" value="disable">
                                         <label class="btn btn-sm redio-btn off-btn" for="mic2-off">DISABLE</label>
                                     </div>
                                 </div>
@@ -131,7 +128,8 @@
                                 </div>
                                 <div class="slider-value-box input-group justify-content-center mt-3">
                                     <div>
-                                        <input  class="slider-value text-center" id="handle2-value" type="number" style="width: 40px;" value="200" />
+                                        <input class="slider-value text-center" id="handle2-value" type="number"
+                                            style="width: 40px;" value="200" />
                                     </div>
                                     <span
                                         style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
@@ -158,6 +156,8 @@
 </body>
 
 <script>
+    var data = {}
+
     document.addEventListener("DOMContentLoaded", function () {
         //初始化配置
         loadData()
@@ -174,20 +174,49 @@
             alert($value)
         })
 
-        $("#mic1-type").on('change',function(){
+        $("#mic1-type").on('change', function () {
             alert($("#mic1-type").val())
         })
 
-        $("#mic2-type").on('change',function(){
+        $("#mic2-type").on('change', function () {
             alert($("#mic2-type").val())
         })
     })
 
-    function loadData(){
-        $("input[name='mic1']").val(['enable'])
-        $("input[name='mic2']").val(['enable'])
-        $("#mic1-type").val(["Butterworth"])
-        $("#mic2-type").val(["Bessel"])
+    function loadData() {
+        let url = ""
+        $.ajax({
+            type: "GET",
+            url: url,
+            success: function (res) { },
+            error: function () {
+                data = {
+                    mic1: {
+                        type: "Bessel",
+                        value: 600,
+                        state: "enable"
+                    },
+                    mic2: {
+                        type: "Linkwitz-riley",
+                        value: 200,
+                        state: "enable"
+                    }
+                }
+                bindData()
+            }
+        })
+
+    }
+
+    function bindData() {
+        $("input[name='mic1']").val([`${data.mic1.state}`])
+        $("input[name='mic2']").val([`${data.mic2.state}`])
+        $("#mic1-type").val([`${data.mic1.type}`])
+        $("#mic2-type").val([`${data.mic2.type}`])
+        $("#handle1").roundSlider("option","value",`${data.mic1.value}`);
+        $("#handle1-value").val(`${data.mic1.value}`);
+        $("#handle2").roundSlider("option","value",`${data.mic2.value}`);
+        $("#handle2-value").val(`${data.mic2.value}`);
     }
 
     $("#handle1").roundSlider({
diff --git a/fs.html b/fs.html
index 357507a..8820817 100644
--- a/fs.html
+++ b/fs.html
@@ -70,7 +70,8 @@
                                 </div>
                                 <div class="slider-value-box input-group justify-content-center mt-3">
                                     <div>
-                                        <input  class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="7" />
+                                        <input class="slider-value text-center" id="handle1-value" type="number"
+                                            style="width: 40px;" value="7" />
                                     </div>
                                     <span
                                         style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
@@ -111,7 +112,8 @@
                                 </div>
                                 <div class="slider-value-box input-group justify-content-center mt-3">
                                     <div>
-                                        <input  class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="7" />
+                                        <input class="slider-value text-center" id="handle2-value" type="number"
+                                            style="width: 40px;" value="7" />
                                     </div>
                                     <span
                                         style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
@@ -135,6 +137,7 @@
 </body>
 
 <script>
+    var data = {}
 
     document.addEventListener("DOMContentLoaded", function () {
         //初始化配置
@@ -154,8 +157,34 @@
     })
 
     function loadData() {
-        $("input[name='mic1switch']").val(['enable'])
-        $("input[name='mic2switch']").val(['enable'])
+        let url = ""
+        $.ajax({
+            type: "GET",
+            url: url,
+            success: function (res) { },
+            error: function () {
+                data = {
+                    mic1: {
+                        value: 7,
+                        state: "enable"
+                    },
+                    mic2: {
+                        value: 3,
+                        state: "disable"
+                    }
+                }
+                bindData()
+            }
+        })
+    }
+
+    function bindData(){
+        $("input[name='mic1switch']").val([`${data.mic1.state}`])
+        $("input[name='mic2switch']").val([`${data.mic2.state}`])
+        $("#handle1").roundSlider("option","value",`${data.mic1.value}`);
+        $("#handle1-value").val(`${data.mic1.value}`);
+        $("#handle2").roundSlider("option","value",`${data.mic2.value}`);
+        $("#handle2-value").val(`${data.mic2.value}`);
     }
 
     $("#handle1").roundSlider({
@@ -166,13 +195,13 @@
         value: 7.0,
         min: 1.0,
         max: 10.0,
-        step:0.1,
+        step: 0.1,
         handleSize: 0,
         handleShape: "square",
         circleShape: "pie",
         startAngle: 315,
         mouseScrollAction: true,
-        
+
         drag: function (args) {
             $("#handle1-value").val(`${args.value}`);
         },
@@ -189,7 +218,7 @@
         value: 7.0,
         min: 1.0,
         max: 10.0,
-        step:0.1,
+        step: 0.1,
         handleSize: 0,
         handleShape: "square",
         circleShape: "pie",
diff --git a/home.html b/home.html
index d415cf1..d4a28c8 100644
--- a/home.html
+++ b/home.html
@@ -941,14 +941,12 @@
 </body>
 
 <script>
+
+    var data = {}
+
     document.addEventListener("DOMContentLoaded", function () {
         loadData()
-        LineInputSlider(-29)
-        Microphone1Slider(5)
-        Microphone2Slider(2)
-        OutputVolumeSlider(4)
-        LineInputLeftRandomBar(0)
-        LineInputRightRandomBar(0)
+       
     })
 
     $(document).ready(function () {
@@ -1005,13 +1003,58 @@
     })
 
     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)
+        let url = ""
+        $.ajax({
+            type: "GET",
+            url: url,
+            success: function (res) {
+                data = res.content
+                bindData()
+            },
+            error: function () {
+                data = {
+                    lineinput: {
+                        signal: "analog",
+                        audio: -30,
+                        state: "open"
+                    },
+                    mic1: {
+                        signal: "open",
+                        audio: -5,
+                        state: "open"
+                    },
+                    mic2: {
+                        signal: "open",
+                        audio: 5,
+                        state: "open"
+                    },
+                    output: {
+                        signal: "open",
+                        audio: 3,
+                        state: "open"
+                    }
+                }
+                bindData()
+            }
+        })
+
+
+
+    }
+
+    function bindData() {
+        $("input[name='lineinput']").val([`${data.lineinput.signal}`])
+        $("input[name='mic1']").attr('checked', data.mic1.signal == 'open')
+        $("input[name='mic2']").attr('checked', data.mic2.signal == 'open')
+        $("input[name='outputvolume-voice-close']").attr('checked', data.output.state == 'close')
+        $("input[name='microphone2-voice-close']").attr('checked', data.mic2.state == 'close')
+        $("input[name='microphone1-voice-close']").attr('checked', data.mic1.state == 'close')
+        $("input[name='lineinput-voice-close']").attr('checked', data.lineinput.state == 'close')
+
+        LineInputSlider(data.lineinput.audio)
+        Microphone1Slider(data.mic1.audio)
+        Microphone2Slider(data.mic2.audio)
+        OutputVolumeSlider(data.output.audio)
     }
 
 
diff --git a/login.html b/login.html
index 59a3688..50c2f28 100644
--- a/login.html
+++ b/login.html
@@ -68,6 +68,26 @@
             $("#submit").on("click", function () {
                 let name = $("#name").val()
                 let password = $("#password").val()
+                if (name.length == 0) {
+                    alert('Please enter your username')
+                    return
+                }
+                if (password.length == 0) {
+                    alert('Please enter the account login password')
+                    return
+                }
+
+                let url = 'http://localhost/login';
+                $.ajax({
+                    type: 'POST',
+                    url: url,
+                    data: { name: name, password: password },
+                    dataType: "json",
+                    success: function (res) {
+                    },
+                    error:function(res){
+                    }
+                })
             })
         })
     </script>
diff --git a/network.html b/network.html
index 749ccd0..a1bdc15 100644
--- a/network.html
+++ b/network.html
@@ -100,10 +100,11 @@
     </div>
 
     <script>
+        var data = {}
+
         document.addEventListener("DOMContentLoaded", function () {
             //初始化配置
             loadData()
-            checkDisable();
         })
 
         $(document).ready(function () {
@@ -143,7 +144,7 @@
                 $('#subnet').attr('disabled', "disabled");
                 $('#gateway').attr('disabled', "disabled");
             }
-            else{
+            else {
                 $("#ipaddress").removeAttr("disabled");
                 $('#subnet').removeAttr("disabled");
                 $('#gateway').removeAttr("disabled");
@@ -151,11 +152,38 @@
         }
 
         function loadData() {
-            $('#mac').text("20-A6-56-EF-23-D6")
-            $("#ipaddress").val('127.0.0.10')
-            $('#subnet').val('255.255.255.0')
-            $('#gateway').val('127.0.0.1')
-            $('#hostName').val('host-name')
+
+            let url = ""
+            $.ajax({
+                type: "GET",
+                url: url,
+                success: function (res) {
+                    data = res.content
+                    bindData()
+                },
+                error: function () {
+                    data = {
+                        config: "dhcp",
+                        mac: '00-2F-33-7X-3B',
+                        address: '127.0.0.10',
+                        subnet: '255.255.255.0',
+                        gateway: '127.0.0.1',
+                        hostname: 'test-name'
+                    }
+                    bindData()
+                }
+            })
+        }
+
+        function bindData() {
+            console.log(data)
+            $('#mac').text(`${data.mac}`)
+            $("#ipaddress").val(`${data.address}`)
+            $('#subnet').val(`${data.subnet}`)
+            $('#gateway').val(`${data.gateway}`)
+            $('#hostName').val(`${data.hostname}`)
+
+            checkDisable();
         }
 
         function isValidIP(ip) {
diff --git a/system.html b/system.html
index 7b406b4..c12fab8 100644
--- a/system.html
+++ b/system.html
@@ -71,7 +71,7 @@
                             </div>
                         </div>
                         <div class="mb-3 row">
-                            <hr style="color: #555;"/>
+                            <hr style="color: #555;" />
                         </div>
                         <div class="mb-3 row">
                             <label for="inputPassword" class="col-sm-4 col-form-label">Factory Reset</label>
@@ -82,7 +82,7 @@
                         <div class="mb-3 row">
                             <label for="inputPassword" class="col-sm-4 col-form-label">Fimware Upgrade</label>
                             <div class="col-sm-8 d-flex">
-                               
+
                                 <input type="text" id="fileName" class="form-control" />
                                 <input type="file" id="uploadFile" style="display: none;">
                                 <button id="selectFile" class="btn button btn-dark border border-black">Browser</button>
@@ -105,6 +105,8 @@
         </footer>
     </div>
     <script>
+        var data = {}
+
         $(document).ready(function () {
             $('#reset').on('click', function (event) {
                 alert('a')
@@ -118,7 +120,7 @@
                 $('#fileName')[0].value = file
             });
 
-            $("#upgrade").on("click",function(){
+            $("#upgrade").on("click", function () {
                 alert('aaa')
             })
         })
@@ -129,19 +131,34 @@
         })
 
         function loadData() {
-            $("#guiv").text("v1.0.1")
-            $("#firmwarev").text("v1.0.0")
-            $("#sn").text("SN-2343-123-NNDD")
-            $("#hostName").text("Test.Hostname")
-
-            // $.ajax({
-            //     url: '', success: function (res) {
-            //         console.log('a')
-            //     }
-            // });
+            let url = ""
+            $.ajax({
+                type: "GET",
+                url: url,
+                success: function (res) {
+                    data = res.content
+                    bindData()
+                },
+                error: function () {
+                    data = {
+                        gui: "v1.0.2",
+                        firmware: "v1.0.0",
+                        sn: "SN-2343-123-NNDD",
+                        hostname: "Test.Hostname"
+                    }
+                    bindData()
+                }
+            })
         }
 
-        
+        function bindData() {
+            $("#guiv").text(`${data.gui}`)
+            $("#firmwarev").text(`${data.firmware}`)
+            $("#sn").text(`${data.sn}`)
+            $("#hostName").text(`${data.hostname}`)
+        }
+
+
     </script>
 </body>
 
diff --git a/volume.html b/volume.html
deleted file mode 100644
index 6450486..0000000
--- a/volume.html
+++ /dev/null
@@ -1,637 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <title></title>
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-    <link href="css/app.css" rel="stylesheet">
-    <link href="css/roundslider.min.css" rel="stylesheet">
-    <script src="js/jquery-3.7.1.js"></script>
-    <script src="js/roundslider.min.js"></script>
-</head>
-
-<body class="h-100 text-center text-bg-dark content-warp">
-    <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">GEAZAN</div>
-                <div></div>
-            </div>
-            <div class="d-flex justify-content-center fw-bold border-black nav">
-                <div>INPUT</div>
-                <div>EQ</div>
-                <div>VOLUME</div>
-                <div>RS232</div>
-                <div class="active"><a href="network.html">NETWORK</a></div>
-                <div class="">
-                    <a href="password.html">PASSWORD</a>
-                </div>
-                <div class="last">SYSTEM</div>
-            </div>
-        </header>
-
-        <main class="px-3 d-flex justify-content-center">
-            <div class="content-container">
-                <div class="d-flex">
-                    <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">MIC 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="me-3" style="font-size: 12px;">48V Phantom</div>
-                                    <div class="d-flex redio-switche">
-                                        <input type="radio" class="btn-check" name="mic1" id="mic1-on"
-                                            autocomplete="off" checked>
-                                        <label class="btn btn-sm redio-btn on-btn" for="mic1-on">ON</label>
-
-                                        <input type="radio" class="btn-check" name="mic1" id="mic1-off"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn off-btn" for="mic1-off">OFF</label>
-                                    </div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </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">
-                                                    <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>
-                            </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">MIC 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="me-3" style="font-size: 12px;">48V Phantom</div>
-                                    <div class="d-flex redio-switche">
-                                        <input type="radio" class="btn-check" name="mic2" id="mic2-on"
-                                            autocomplete="off" checked>
-                                        <label class="btn btn-sm redio-btn on-btn" for="mic2-on">ON</label>
-
-                                        <input type="radio" class="btn-check" name="mic2" id="mic2-off"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn off-btn" for="mic2-off">OFF</label>
-                                    </div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </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">
-                                                    <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="mic2-volume" class="btn-check" id="btn-check2"
-                                                    autocomplete="off">
-                                                <label class="btn btn-sm state-btn" for="btn-check2">
-                                                    <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="mic2-volume" class="btn-check" 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>
-                            </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">Equalization</span></div>
-                        </div>
-                        <div class="p-3 d-flex justify-content-center">
-                            <div style="width: 100px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="me-3" style="font-size: 12px;">40Hz</div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style="width: 100px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="me-3" style="font-size: 12px;">150Hz</div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style="width: 100px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="me-3" style="font-size: 12px;">500Hz</div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style="width: 100px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="me-3" style="font-size: 12px;">2kHz</div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style="width: 100px;">
-                                <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
-                                    <div class="me-3" style="font-size: 12px;">10KHz</div>
-                                </div>
-                                <div class="volume-slider-container">
-                                    <div class="d-flex justify-content-center mt-3">
-                                        <div>
-                                            <div class="d-flex">
-                                                <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 class="slider-value-box">
-                                                <input class="slider-value" style="width: 55px;" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row d-flex">
-
-                    
-                    <div>
-                        <div class="box-inner">
-                            <div>
-                                <div class="row _slider_customizations cus_handle">
-                                    <div class="block">
-                                        <div class="cell">
-                                            <div id="handle1"></div>
-
-                                        </div>
-
-
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-
-        <footer class="mt-auto text-white-50">
-            <div class="dotblock d-flex justify-content-between px-5 py-4">
-                <div class="">Geazan</div>
-                <div>www.geazan.com</div>
-            </div>
-        </footer>
-    </div>
-</body>
-
-<script>
-
-    let app = (() => {
-
-        function updateSlider(element) {
-            if (element) {
-
-                let parent = element.parentElement,
-                    lastValue = parent.getAttribute('data-slider-value');
-                let container = parent.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);
-
-
-
-                $thumb.style.bottom = `${pct}%`;
-                $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
-                $value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
-            }
-        }
-        return {
-            updateSlider: updateSlider
-        };
-
-    })();
-
-    (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)));
-    })();
-
-    $("#handle1").roundSlider({
-        sliderType: "min-range",
-        editableTooltip: false,
-        radius: 60,
-        width: 10,
-        value: 0,
-        handleSize: 0,
-        handleShape: "square",
-        circleShape: "pie",
-        startAngle: 315,
-        tooltipFormat: "changeTooltip",
-        mouseScrollAction: true
-    });
-
-    function changeTooltip(e) {
-        var val = e.value, speed;
-        // if (val < 20) speed = "Slow";
-        // else if (val < 40) speed = "Normal";
-        // else if (val < 70) speed = "Speed";
-        // else speed = "Very Speed";
-
-        // return val + " km/h" + "<div>" + speed + "<div>";
-    }
-</script>
-
-</html>
\ No newline at end of file