更新 volume.html
parent
120f4e73ea
commit
bc3a717218
594
volume.html
594
volume.html
|
|
@ -32,7 +32,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="px-3 d-flex justify-content-center">
|
<main class="px-3 d-flex justify-content-center">
|
||||||
<div>
|
<div class="content-container">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="me-3"
|
<div class="me-3"
|
||||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||||
|
|
@ -40,26 +40,27 @@
|
||||||
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 d-flex justify-content-center">
|
<div class="p-3 d-flex justify-content-center">
|
||||||
<div style="width: 250px;">
|
<div style="width: 200px;">
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
<div class="me-3">48V Phantom</div>
|
<div class="me-3" style="font-size: 12px;">48V Phantom</div>
|
||||||
<div class="d-flex redio-switche">
|
<div class="d-flex redio-switche">
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option5"
|
<input type="radio" class="btn-check" name="mic1" id="mic1-on"
|
||||||
autocomplete="off" checked>
|
autocomplete="off" checked>
|
||||||
<label class="btn" for="option5">ON</label>
|
<label class="btn btn-sm redio-btn on-btn" for="mic1-on">ON</label>
|
||||||
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option6"
|
<input type="radio" class="btn-check" name="mic1" id="mic1-off"
|
||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
<label class="btn" for="option6">OFF</label>
|
<label class="btn btn-sm redio-btn off-btn" for="mic1-off">OFF</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="volume-slider-container">
|
<div class="volume-slider-container">
|
||||||
<div class="d-flex justify-content-center mt-3">
|
<div class="d-flex justify-content-center mt-3">
|
||||||
|
<div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="volume-slider-box">
|
<div class="volume-slider-box">
|
||||||
<div class="volume-slider" data-slider-value="50">
|
<div class="volume-slider" data-slider-value="50">
|
||||||
<input type="range" orient="vertical" min="0" max="100" step="0.1"
|
<input type="range" orient="vertical" min="0" max="100"
|
||||||
value="30">
|
step="0.1" value="30">
|
||||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||||
</div>
|
</div>
|
||||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||||
|
|
@ -97,53 +98,59 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ms-5" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
|
|
||||||
<div>
|
|
||||||
按钮1
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
按钮2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
按钮3
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="slider-value-box">
|
<div class="slider-value-box">
|
||||||
<input class="slider-value" style="width: 50px;" />
|
<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="checkbox" class="btn-check" id="btn-max-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-max-check">xx</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" class="btn-check" id="btn-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-check">xx</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" class="btn-check" id="btn-close-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-close-check">xx</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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;">
|
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||||
<div class="divider">
|
<div class="divider">
|
||||||
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
<div class="divider-text"><span class="fw-bold">MIC 1</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 d-flex justify-content-center">
|
<div class="p-3 d-flex justify-content-center">
|
||||||
<div style="width: 320px;">
|
<div style="width: 200px;">
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
<div class="me-3">48V Phantom</div>
|
<div class="me-3" style="font-size: 12px;">48V Phantom</div>
|
||||||
<div class="d-flex redio-switche">
|
<div class="d-flex redio-switche">
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option5"
|
<input type="radio" class="btn-check" name="mic2" id="mic2-on"
|
||||||
autocomplete="off" checked>
|
autocomplete="off" checked>
|
||||||
<label class="btn" for="option5">ON</label>
|
<label class="btn btn-sm redio-btn on-btn" for="mic2-on">ON</label>
|
||||||
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option6"
|
<input type="radio" class="btn-check" name="mic2" id="mic2-off"
|
||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
<label class="btn" for="option6">OFF</label>
|
<label class="btn btn-sm redio-btn off-btn" for="mic2-off">OFF</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="volume-slider-container">
|
<div class="volume-slider-container">
|
||||||
<div class="d-flex justify-content-center mt-3">
|
<div class="d-flex justify-content-center mt-3">
|
||||||
|
<div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="volume-slider-box">
|
<div class="volume-slider-box">
|
||||||
<div class="volume-slider" data-slider-value="50">
|
<div class="volume-slider" data-slider-value="50">
|
||||||
<input type="range" orient="vertical" min="0" max="100" step="0.1"
|
<input type="range" orient="vertical" min="0" max="100"
|
||||||
value="30">
|
step="0.1" value="30">
|
||||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||||
</div>
|
</div>
|
||||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||||
|
|
@ -181,12 +188,314 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="slider-value-box">
|
<div class="slider-value-box">
|
||||||
<input class="slider-value" style="width: 60px;" />
|
<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="checkbox" class="btn-check" id="btn-max-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-max-check">xx</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" class="btn-check" id="btn-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-check">xx</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" class="btn-check" id="btn-close-check"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm state-btn" for="btn-close-check">xx</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>
|
||||||
|
|
@ -195,19 +504,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row d-flex">
|
<div class="row d-flex">
|
||||||
<div class="col-12">
|
|
||||||
<!-- <div class="music">
|
|
||||||
<div class="item one"></div>
|
<div>
|
||||||
<div class="item two"></div>
|
|
||||||
<div class="item three"></div>
|
|
||||||
<div class="item four"></div>
|
|
||||||
<div class="item five"></div>
|
|
||||||
<div class="item six"></div>
|
|
||||||
<div class="item seven"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div class="pb-5">
|
|
||||||
<!-- <div class="progress-4"></div> -->
|
|
||||||
<div class="box-inner">
|
<div class="box-inner">
|
||||||
<div>
|
<div>
|
||||||
<div class="row _slider_customizations cus_handle">
|
<div class="row _slider_customizations cus_handle">
|
||||||
|
|
@ -225,197 +524,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="d-flex justify-content-center">
|
|
||||||
<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: 250px;">
|
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
|
||||||
<div class="me-3">48V Phantom</div>
|
|
||||||
<div class="d-flex redio-switche">
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option5"
|
|
||||||
autocomplete="off" checked>
|
|
||||||
<label class="btn" for="option5">ON</label>
|
|
||||||
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option6"
|
|
||||||
autocomplete="off">
|
|
||||||
<label class="btn" for="option6">OFF</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="volume-slider-container">
|
|
||||||
<div class="d-flex justify-content-center mt-3">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="slider-value-box">
|
|
||||||
<input class="slider-value" style="width: 50px;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div 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: 320px;">
|
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
|
||||||
<div class="me-3">48V Phantom</div>
|
|
||||||
<div class="d-flex redio-switche">
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option5"
|
|
||||||
autocomplete="off" checked>
|
|
||||||
<label class="btn" for="option5">ON</label>
|
|
||||||
|
|
||||||
<input type="radio" class="btn-check" name="options-base" id="option6"
|
|
||||||
autocomplete="off">
|
|
||||||
<label class="btn" for="option6">OFF</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="volume-slider-container">
|
|
||||||
<div class="d-flex justify-content-center mt-3">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="slider-value-box">
|
|
||||||
<input class="slider-value" style="width: 60px;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="music">
|
|
||||||
<div class="item one"></div>
|
|
||||||
<div class="item two"></div>
|
|
||||||
<div class="item three"></div>
|
|
||||||
<div class="item four"></div>
|
|
||||||
<div class="item five"></div>
|
|
||||||
<div class="item six"></div>
|
|
||||||
<div class="item seven"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="progress-4"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
</div>
|
|
||||||
<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 class="mt-5 pb-5">
|
|
||||||
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="mt-auto text-white-50">
|
<footer class="mt-auto text-white-50">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue