fix
parent
4fdb5057df
commit
95d8297cdd
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!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">
|
||||||
|
</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 class="">
|
||||||
|
<a href="home.html">HOME</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class="active"><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last "><a href="system.html">SYSTEM</a></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
<div class="form">
|
||||||
|
<div class="border border-black m-6 password-form">
|
||||||
|
<div class=" m-5 mx-auto form" style="width: 700px;">
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-6 col-form-label">Power</label>
|
||||||
|
<div class="col-6 ">
|
||||||
|
<div class="redio-switche float-start" style="display:inline-block;">
|
||||||
|
<input type="radio" class="btn-check" name="power" id="power-on" autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="power-on">ON</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="power" id="power-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="power-off">OFF</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-6 col-form-label">Hibernation</label>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="redio-switche float-start" style="display:inline-block;">
|
||||||
|
<input type="radio" class="btn-check" name="hibernation" id="hibernation-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="hibernation-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="hibernation" id="hibernation-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="hibernation-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-6 col-form-label">Hibernation Timer(min)</label>
|
||||||
|
<div class="col-6">
|
||||||
|
<input type="number" class="form-control float-start" id="inputPassword"
|
||||||
|
style="width: 100px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="inputPassword" class="col-6 col-form-label">Unit Trigger</label>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="redio-switche float-start" style="display:inline-block;">
|
||||||
|
<input type="radio" class="btn-check" name="trigger" id="trigger-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="trigger-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="trigger" id="trigger-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="trigger-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="inputPassword" class="col-6 col-form-label">Analog signal delection</label>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="redio-switche float-start" style="display:inline-block;">
|
||||||
|
<input type="radio" class="btn-check" name="delection" id="delection-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="delection-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="delection" id="delection-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="delection-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="inputPassword" class="col-6 col-form-label">Control Lock</label>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="redio-switche float-start" style="display:inline-block;">
|
||||||
|
<input type="radio" class="btn-check" name="lock" id="lock-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="lock-on">LOCK</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="lock" id="lock-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="lock-off">UNLOCK</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 pb-5">
|
||||||
|
<button type="button" class="btn btn-dark border border-black px-5">Save</button>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
</html>
|
||||||
46
css/app.css
46
css/app.css
|
|
@ -100,6 +100,7 @@ body {
|
||||||
.nav a {
|
.nav a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a:visited，a:active {
|
.nav a:visited，a:active {
|
||||||
|
|
@ -114,6 +115,25 @@ body {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select{
|
||||||
|
border: none;
|
||||||
|
background: #000;
|
||||||
|
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #888888;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select:focus{
|
||||||
|
border: none;
|
||||||
|
background: #000;
|
||||||
|
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
.form input {
|
.form input {
|
||||||
border: none;
|
border: none;
|
||||||
background: #000;
|
background: #000;
|
||||||
|
|
@ -132,7 +152,6 @@ body {
|
||||||
|
|
||||||
.form button {
|
.form button {
|
||||||
border: none;
|
border: none;
|
||||||
background: #191919;
|
|
||||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
@ -346,19 +365,8 @@ body {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme1 {
|
|
||||||
background: linear-gradient(pink, deeppink);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme2 {
|
.roundSlider .rs-handle {
|
||||||
background: linear-gradient(tomato, red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme3 {
|
|
||||||
background: linear-gradient(yellow, orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
#handle1 .rs-handle {
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 8px solid transparent;
|
border: 8px solid transparent;
|
||||||
border-right-color: #1BC8F3;
|
border-right-color: #1BC8F3;
|
||||||
|
|
@ -366,7 +374,7 @@ body {
|
||||||
border-width: 6px 50px 6px 4px;
|
border-width: 6px 50px 6px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-handle:before {
|
.roundSlider .rs-handle:before {
|
||||||
display: block;
|
display: block;
|
||||||
content: " ";
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -379,7 +387,7 @@ body {
|
||||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-tooltip {
|
.roundSlider .rs-tooltip {
|
||||||
top: 57px;
|
top: 57px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -395,7 +403,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#handle1 .rs-tooltip div {
|
.roundSlider .rs-tooltip div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: orange;
|
background: orange;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -404,12 +412,12 @@ body {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-range-color {
|
.roundSlider .rs-range-color {
|
||||||
background-color: #1BC8F3;
|
background-color: #1BC8F3;
|
||||||
/* background: linear-gradient(90deg,#1BC8F3,#2ca8c7) */
|
/* background: linear-gradient(90deg,#1BC8F3,#2ca8c7) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#handle1 .rs-path-color {
|
.roundSlider .rs-path-color {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
|
|
@ -461,7 +469,7 @@ body {
|
||||||
.redio-switche {
|
.redio-switche {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
/* box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15); */
|
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
12
ducking.html
12
ducking.html
|
|
@ -22,16 +22,16 @@
|
||||||
<div class="">
|
<div class="">
|
||||||
<a href="home.html">HOME</a>
|
<a href="home.html">HOME</a>
|
||||||
</div>
|
</div>
|
||||||
<div class=""><a href="">FILTER</a></div>
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
<div class=""><a href="">FS</div>
|
<div class=""><a href="fs.html">FS</div>
|
||||||
<div class=""><a href="">EQ</a></div>
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
<div class="active"><a href="ducking.html">DUCKING</a></div>
|
<div class="active"><a href="ducking.html">DUCKING</a></div>
|
||||||
<div class=""><a href="network.html">NETWORK</a></div>
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<a href="password.html">SECURITY</a>
|
<a href="security.html">SECURITY</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="last"><a href="">CONTROL</a></div>
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
<div class="last"><a href="">SYSTEM</a></div>
|
<div class="last "><a href="system.html">SYSTEM</a></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="px-3 d-flex justify-content-center">
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,622 @@
|
||||||
|
<!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 class="">
|
||||||
|
<a href="home.html">HOME</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class="active"><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last "><a href="system.html">SYSTEM</a></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">Equalizer</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Threshold
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Attack
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Hold
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Release
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ON</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">OFF</label>
|
||||||
|
</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">Equalizer</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Threshold
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Attack
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Hold
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="volume-slider-container mx-3">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="me-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||||
|
style="height: 30px;">
|
||||||
|
Release
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<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-group justify-content-center mt-3">
|
||||||
|
<input class="slider-value" style="width: 55px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ON</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">OFF</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row d-flex">
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,234 @@
|
||||||
|
<!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 class="">
|
||||||
|
<a href="home.html">HOME</a>
|
||||||
|
</div>
|
||||||
|
<div class="active"><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last"><a href="system.html">SYSTEM</a></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">Mic1 Hight Pass Filter</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div style="width: 200px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
|
<div class="d-flex redio-switche">
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||||
|
<select class="select">
|
||||||
|
<option>Bessel</option>
|
||||||
|
<option>Butterworth</option>
|
||||||
|
<option>Linkwitz-riley</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
|
<div class="block mt-4">
|
||||||
|
<div class="cell d-flex justify-content-center">
|
||||||
|
<div style="top: 100px; right: -20; width: 50px; position:relative;color: #888;"
|
||||||
|
class="text-end">20</div>
|
||||||
|
<div id="handle1" class="roundSlider"></div>
|
||||||
|
<div
|
||||||
|
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||||
|
2000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||||
|
</div>
|
||||||
|
<div class="mt-1" style="color: #888;">
|
||||||
|
HPF(Hz)
|
||||||
|
</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">Mic2 Hight Pass Filter</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div style="width: 200px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
|
<div class="d-flex redio-switche">
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||||
|
<select class="select">
|
||||||
|
<option>Bessel</option>
|
||||||
|
<option>Butterworth</option>
|
||||||
|
<option>Linkwitz-riley</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
|
<div class="block mt-4">
|
||||||
|
<div class="cell d-flex justify-content-center">
|
||||||
|
<div id="handle2" class="roundSlider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||||
|
</div>
|
||||||
|
<div class="mt-1" style="color: #888;">
|
||||||
|
HPF(Hz)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row d-flex">
|
||||||
|
</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.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,
|
||||||
|
min:20,
|
||||||
|
max:2000,
|
||||||
|
step:1,
|
||||||
|
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>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#handle2").roundSlider({
|
||||||
|
sliderType: "min-range",
|
||||||
|
editableTooltip: false,
|
||||||
|
radius: 60,
|
||||||
|
width: 10,
|
||||||
|
value: 0,
|
||||||
|
handleSize: 0,
|
||||||
|
handleShape: "square",
|
||||||
|
circleShape: "pie",
|
||||||
|
startAngle: 315,
|
||||||
|
tooltipFormat: "changeTooltip",
|
||||||
|
mouseScrollAction: true
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,218 @@
|
||||||
|
<!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 class="">
|
||||||
|
<a href="home.html">HOME</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class="active"><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last"><a href="system.html">SYSTEM</a></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">Frequency Shift</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div style="width: 200px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
|
<div class="d-flex redio-switche">
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
|
<div class="block mt-5">
|
||||||
|
<div class="cell d-flex justify-content-center">
|
||||||
|
<div id="handle1" class="roundSlider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||||
|
</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">Frequency Shift</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 d-flex justify-content-center">
|
||||||
|
<div style="width: 200px;">
|
||||||
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
|
<div class="d-flex redio-switche">
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||||
|
autocomplete="off">
|
||||||
|
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
|
<div class="block mt-5">
|
||||||
|
<div class="cell d-flex justify-content-center">
|
||||||
|
<div id="handle2" class="roundSlider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<input class="slider-value" id="handle2-value"
|
||||||
|
style="width: 55px; text-align: center;" value="7FS" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row d-flex">
|
||||||
|
</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.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,
|
||||||
|
drag: function (args) {
|
||||||
|
$("#handle1-value").val(`${args.value}FS`);
|
||||||
|
},
|
||||||
|
change: function (args) {
|
||||||
|
$("#handle1-value").val(`${args.value}FS`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#handle2").roundSlider({
|
||||||
|
sliderType: "min-range",
|
||||||
|
editableTooltip: false,
|
||||||
|
radius: 60,
|
||||||
|
width: 10,
|
||||||
|
value: 0,
|
||||||
|
handleSize: 0,
|
||||||
|
handleShape: "square",
|
||||||
|
circleShape: "pie",
|
||||||
|
startAngle: 315,
|
||||||
|
tooltipFormat: "changeTooltip",
|
||||||
|
mouseScrollAction: true,
|
||||||
|
|
||||||
|
drag: function (args) {
|
||||||
|
$("#handle2-value").val(`${args.value}FS`);
|
||||||
|
},
|
||||||
|
change: function (args) {
|
||||||
|
$("#handle2-value").val(`${args.value}FS`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
14
home.html
14
home.html
|
|
@ -20,18 +20,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center fw-bold border-black nav">
|
<div class="d-flex justify-content-center fw-bold border-black nav">
|
||||||
<div class="active">
|
<div class="active">
|
||||||
<a href="home.html">HOME</a>
|
<a href="home.html"><span>HOME</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class=""><a href="">FILTER</a></div>
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
<div class=""><a href="">FS</div>
|
<div class=""><a href="fs.html">FS</div>
|
||||||
<div class=""><a href="">EQ</a></div>
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
<div class=""><a href="ducking.html">DUCKING</a></div>
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
<div class=""><a href="network.html">NETWORK</a></div>
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<a href="password.html">SECURITY</a>
|
<a href="security.html">SECURITY</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="last"><a href="">CONTROL</a></div>
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
<div class="last"><a href="">SYSTEM</a></div>
|
<div class="last"><a href="system.html">SYSTEM</a></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="px-3 d-flex justify-content-center">
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
|
|
||||||
16
network.html
16
network.html
|
|
@ -16,15 +16,19 @@
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center fw-bold border-black nav">
|
<div class="d-flex justify-content-center fw-bold border-black nav">
|
||||||
<div>INPUT</div>
|
<div class="">
|
||||||
<div>EQ</div>
|
<a href="home.html">HOME</a>
|
||||||
<div>VOLUME</div>
|
</div>
|
||||||
<div>RS232</div>
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
<div class="active"><a href="network.html">NETWORK</a></div>
|
<div class="active"><a href="network.html">NETWORK</a></div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<a href="password.html">PASSWORD</a>
|
<a href="security.html">SECURITY</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="last">SYSTEM</div>
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last "><a href="system.html">SYSTEM</a></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,15 +16,19 @@
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center fw-bold border-black nav">
|
<div class="d-flex justify-content-center fw-bold border-black nav">
|
||||||
<div>INPUT</div>
|
<div class="">
|
||||||
<div>EQ</div>
|
<a href="home.html">HOME</a>
|
||||||
<div>VOLUME</div>
|
|
||||||
<div>RS232</div>
|
|
||||||
<div><a href="network.html">NETWORK</a></div>
|
|
||||||
<div class="active">
|
|
||||||
<a href="password.html">PASSWORD</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="last">SYSTEM</div>
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="active">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last "><a href="system.html">SYSTEM</a></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!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">
|
||||||
|
</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 class="">
|
||||||
|
<a href="home.html">HOME</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="filter.html">FILTER</a></div>
|
||||||
|
<div class=""><a href="fs.html">FS</div>
|
||||||
|
<div class=""><a href="eq.html">EQ</a></div>
|
||||||
|
<div class=""><a href="ducking.html">DUCKING</a></div>
|
||||||
|
<div class=""><a href="network.html">NETWORK</a></div>
|
||||||
|
<div class="">
|
||||||
|
<a href="security.html">SECURITY</a>
|
||||||
|
</div>
|
||||||
|
<div class=""><a href="control.html">CONTROL</a></div>
|
||||||
|
<div class="last active"><a href="system.html">SYSTEM</a></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="px-3 d-flex justify-content-center">
|
||||||
|
<div class="form">
|
||||||
|
<div class="border border-black m-6 password-form">
|
||||||
|
<div class=" m-5 mx-auto form" style="width: 700px;">
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-sm-4 col-form-label">GUI verion</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" placeholder="" readonly value="1.0.0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-sm-4 col-form-label">Firmware Version</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" placeholder="" readonly value="1.0.1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="staticEmail" class="col-sm-4 col-form-label">SN</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input type="password" class="form-control" id="inputPassword">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="inputPassword" class="col-sm-4 col-form-label">Host Name</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input type="password" class="form-control" id="inputPassword">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<label for="inputPassword" class="col-sm-4 col-form-label">Factory Reset</label>
|
||||||
|
<div class="col-sm-8 d-flex">
|
||||||
|
<button type="button" class="btn btn-danger">Reset</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="file" class="form-control" id="inputPassword">
|
||||||
|
<button type="button" class="btn button btn-dark border border-black ms-4">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 pb-5">
|
||||||
|
<button type="button" class="btn button btn-dark border border-black px-5">Confirm</button>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue