初始化
commit
15a3999378
|
@ -0,0 +1,356 @@
|
|||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1B1D1E;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-warp {
|
||||
background-color: #1E1F21 !important;
|
||||
}
|
||||
|
||||
.dotblock {
|
||||
background-image: url(../images/dotline.png);
|
||||
max-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 600px;
|
||||
background-color: #1E1E1E;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.login input {
|
||||
/* background-color: #000; */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login input::placeholder {
|
||||
color: #888888;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.login input {
|
||||
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;
|
||||
}
|
||||
|
||||
.login button {
|
||||
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);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav {
|
||||
border-top: 2px solid black;
|
||||
border-bottom: 2px solid black;
|
||||
background-color: #282828;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav>div {
|
||||
border-left: 2px solid black;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
.nav>div.last {
|
||||
border-right: 2px solid black;
|
||||
}
|
||||
|
||||
.nav>div.active {
|
||||
background-color: #000;
|
||||
/*设置发光效果*/
|
||||
box-shadow: #1BC8F2 0px 0px 14px inset;
|
||||
color: #1BC8F2;
|
||||
background: linear-gradient(to bottom, #000, #353535, #000);
|
||||
}
|
||||
|
||||
|
||||
.nav>div:hover {
|
||||
background-color: #000;
|
||||
/*设置发光效果*/
|
||||
/* box-shadow: #1BC8F2 0px 0px 14px inset; */
|
||||
color: #1BC8F2;
|
||||
background: linear-gradient(to bottom, #000, #353535, #000);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.form input {
|
||||
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;
|
||||
}
|
||||
|
||||
.form input::placeholder {
|
||||
color: #888888;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.form button {
|
||||
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);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ruleraxisy {
|
||||
/* position: absolute; */
|
||||
background-color: #303030;
|
||||
background-size: 20px 50px;
|
||||
background-image: linear-gradient(0deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(90deg, #303030 50%, transparent 50%), linear-gradient(0deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(90deg, #303030 70%, transparent 70%), linear-gradient(0deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
|
||||
background-repeat: repeat-y;
|
||||
width: 20px;
|
||||
height: 300px;
|
||||
/* left: 30px; */
|
||||
/* top: 50px; */
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.scaley {
|
||||
list-style-type: none;
|
||||
/* position: absolute; */
|
||||
left: 0px;
|
||||
top: -25px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #b1b4b4;
|
||||
font-size: 0;
|
||||
text-shadow: 0px 1px 1px #000;
|
||||
-moz-user-select: none;
|
||||
/*火狐*/
|
||||
-webkit-user-select: none;
|
||||
/*webkit浏览器*/
|
||||
-ms-user-select: none;
|
||||
/*IE10*/
|
||||
-khtml-user-select: none;
|
||||
/*早期浏览器*/
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scaley li {
|
||||
writing-mode: vertical-lr;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@media (min-height: 500px) {
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
max-height: 100%;
|
||||
}
|
||||
.range-slider:before {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 0.5em;
|
||||
content: attr(data-slider-value) "%";
|
||||
color: white;
|
||||
font-size: 90%;
|
||||
}
|
||||
.range-slider__thumb {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: white;
|
||||
color: #777;
|
||||
font-size: 50%;
|
||||
box-shadow: 0 0 0 4px #3d3d4a;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.range-slider__bar {
|
||||
left: 16px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: linear-gradient(dodgerblue, blue);
|
||||
pointer-events: none;
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical] {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
writing-mode: bt-lr;
|
||||
-webkit-appearance: slider-vertical;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
||||
border: none;
|
||||
background: #343440;
|
||||
width: 8px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px #3d3d4a;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-moz-range-track {
|
||||
border: none;
|
||||
background: #343440;
|
||||
width: 8px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px #3d3d4a;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-ms-track {
|
||||
border: none;
|
||||
background: #343440;
|
||||
width: 8px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 2px #3d3d4a;
|
||||
color: transparent;
|
||||
height: 100%;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
.range-slider input[type=range][orient=vertical]::-ms-thumb {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.theme1 {
|
||||
background: linear-gradient(pink, deeppink);
|
||||
}
|
||||
|
||||
.theme2 {
|
||||
background: linear-gradient(tomato, red);
|
||||
}
|
||||
|
||||
.theme3 {
|
||||
background: linear-gradient(yellow, orange);
|
||||
}
|
||||
|
||||
#handle1 .rs-handle {
|
||||
background-color: transparent;
|
||||
border: 8px solid transparent;
|
||||
border-right-color: black;
|
||||
margin: -6px 0px 0px 14px !important;
|
||||
border-width: 6px 104px 6px 4px;
|
||||
}
|
||||
#handle1 .rs-handle:before {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background: black;
|
||||
right: -11px;
|
||||
bottom: -11px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
#handle1 .rs-tooltip {
|
||||
top: 75%;
|
||||
font-size: 11px;
|
||||
}
|
||||
#handle1 .rs-tooltip div {
|
||||
text-align: center;
|
||||
background: orange;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#handle1 .rs-range-color {
|
||||
background-color: #DB5959;
|
||||
}
|
||||
#handle1 .rs-path-color {
|
||||
background-color: #F0C5C5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.progress-4 {
|
||||
width:120px;
|
||||
height:20px;
|
||||
-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
|
||||
background:
|
||||
linear-gradient(#000 0 0) 0/0% no-repeat
|
||||
#ddd;
|
||||
animation:p4 2s infinite steps(6);
|
||||
}
|
||||
@keyframes p4 {
|
||||
100% {background-size:120%}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,2 @@
|
|||
/*! roundSlider v1.6.1 | (c) 2015-2020, Soundar | MIT license | http://roundsliderui.com/licence.html */
|
||||
.rs-ie,.rs-edge,.rs-handle{-ms-touch-action:none;touch-action:none}.rs-control{position:relative;outline:0 none}.rs-container{position:relative}.rs-control *,.rs-control *:before,.rs-control *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.rs-animation .rs-transition{transition:all 0.5s linear 0s}.rs-bar{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.rs-control .rs-split .rs-path,.rs-control .rs-overlay1,.rs-control .rs-overlay2{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.rs-control .rs-overlay{-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.rs-rounded .rs-seperator,.rs-split .rs-path{-webkit-background-clip:padding-box;background-clip:padding-box}.rs-disabled{opacity:.35}.rs-inner-container{height:100%;width:100%;position:absolute;top:0;overflow:hidden}.rs-control .rs-quarter div.rs-block{height:200%;width:200%}.rs-control .rs-half.rs-top div.rs-block,.rs-control .rs-half.rs-bottom div.rs-block{height:200%;width:100%}.rs-control .rs-half.rs-left div.rs-block,.rs-control .rs-half.rs-right div.rs-block{height:100%;width:200%}.rs-control .rs-bottom .rs-block{top:auto;bottom:0}.rs-control .rs-right .rs-block{right:0}.rs-block.rs-outer{border-radius:1000px}.rs-block{height:100%;width:100%;display:block;position:absolute;top:0;overflow:hidden;z-index:3}.rs-block .rs-inner{border-radius:1000px;display:block;height:100%;width:100%;position:relative}.rs-overlay{width:50%}.rs-overlay1,.rs-overlay2{width:100%}.rs-overlay,.rs-overlay1,.rs-overlay2{position:absolute;background-color:#fff;z-index:3;top:0;height:50%}.rs-bar{display:block;position:absolute;bottom:0;height:0;z-index:10}.rs-bar.rs-rounded{z-index:5}.rs-bar .rs-seperator{height:0;display:block;float:left}.rs-bar:not(.rs-rounded) .rs-seperator{border-left:none;border-right:none}.rs-bar.rs-start .rs-seperator{border-top:none}.rs-bar.rs-end .rs-seperator{border-bottom:none}.rs-bar.rs-start.rs-rounded .rs-seperator{border-radius:0 0 1000px 1000px}.rs-bar.rs-end.rs-rounded .rs-seperator{border-radius:1000px 1000px 0 0}.rs-full .rs-bar,.rs-half .rs-bar{width:50%}.rs-half.rs-left .rs-bar,.rs-half.rs-right .rs-bar,.rs-quarter .rs-bar{width:100%}.rs-full .rs-bar,.rs-half.rs-left .rs-bar,.rs-half.rs-right .rs-bar{top:50%}.rs-bottom .rs-bar{top:0}.rs-half.rs-right .rs-bar,.rs-quarter.rs-right .rs-bar{right:100%}.rs-handle.rs-move{cursor:move}.rs-readonly .rs-handle.rs-move{cursor:default}.rs-classic-mode .rs-path{display:block;height:100%;width:100%}.rs-split .rs-path{border-radius:1000px 1000px 0 0;overflow:hidden;height:50%;position:absolute;top:0;z-index:2}.rs-control .rs-svg-container{display:block;position:absolute;top:0}.rs-control .rs-bottom .rs-svg-container{top:auto;bottom:0}.rs-control .rs-right .rs-svg-container{right:0}.rs-tooltip{position:absolute;cursor:default;border:1px solid transparent;z-index:10}.rs-full .rs-tooltip{top:50%;left:50%}.rs-bottom .rs-tooltip{top:0}.rs-top .rs-tooltip{bottom:0}.rs-right .rs-tooltip{left:0}.rs-left .rs-tooltip{right:0}.rs-half.rs-top .rs-tooltip,.rs-half.rs-bottom .rs-tooltip{left:50%}.rs-half.rs-left .rs-tooltip,.rs-half.rs-right .rs-tooltip{top:50%}.rs-tooltip .rs-input{outline:0 none;border:none;background:transparent}.rs-tooltip-text{font-family:verdana;font-size:13px;border-radius:7px;text-align:center;color:inherit}.rs-tooltip.rs-edit{padding:5px 8px}.rs-tooltip.rs-hover,.rs-tooltip.rs-edit:hover{border:1px solid #AAA;cursor:pointer}.rs-readonly .rs-tooltip.rs-edit:hover{border-color:transparent;cursor:default}.rs-tooltip.rs-center{margin:0px!important}.rs-half.rs-top .rs-tooltip.rs-center,.rs-half.rs-bottom .rs-tooltip.rs-center{transform:translate(-50%,0)}.rs-half.rs-left .rs-tooltip.rs-center,.rs-half.rs-right .rs-tooltip.rs-center{transform:translate(0,-50%)}.rs-full .rs-tooltip.rs-center{transform:translate(-50%,-50%)}.rs-tooltip.rs-reset{margin:0px!important;top:0px!important;left:0px!important}.rs-handle{border-radius:1000px;outline:0 none;float:left}.rs-handle.rs-handle-square{border-radius:0}.rs-handle-dot{border:1px solid #AAA;padding:6px}.rs-handle-dot:after{display:block;content:"";border:1px solid #AAA;height:100%;width:100%;border-radius:1000px}.rs-seperator{border:1px solid #AAA}.rs-border{border:1px solid #AAA}.rs-path-color{background-color:#FFF}.rs-range-color{background-color:#54BBE0}.rs-bg-color{background-color:#FFF}.rs-handle{background-color:#838383}.rs-handle-dot{background-color:#FFF}.rs-handle-dot:after{background-color:#838383}.rs-path-inherited .rs-path{opacity:.2}.rs-svg-mode .rs-path{stroke:#FFF}.rs-svg-mode .rs-range{stroke:#54BBE0}.rs-svg-mode .rs-border{stroke:#AAA}
|
Binary file not shown.
After Width: | Height: | Size: 197 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,61 @@
|
|||
<!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="d-flex h-100 text-center text-bg-dark">
|
||||
<div class="d-flex w-100 h-100 mx-auto flex-column">
|
||||
<header class="mb-auto">
|
||||
<!-- <div>
|
||||
<h3 class="float-md-start mb-0">Cover</h3>
|
||||
<nav class="nav nav-masthead justify-content-center float-md-end">
|
||||
<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
|
||||
</nav>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<main class="px-3 d-flex justify-content-center">
|
||||
<div class="border border-black login">
|
||||
<div class="dotblock py-3 login-title">GEAZAN</div>
|
||||
<div class="login-form pt-5 mx-auto">
|
||||
<div class="mb-4 input-group input-group-lg">
|
||||
<input class="form-control" placeholder="Username" />
|
||||
</div>
|
||||
<div class="mb-5 input-group input-group-lg">
|
||||
<input class="form-control" placeholder="Password" />
|
||||
</div>
|
||||
<div class="mt-5 pb-5 d-grid">
|
||||
<button type="button" class="btn btn-lg btn-dark border border-black">LOGIN</button>
|
||||
</div>
|
||||
<div class="mt-5 mb-3" style="color: #888888;">
|
||||
<div>GUI V1.0.0
|
||||
</div>
|
||||
<div>FIRMWARE V1.0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h1>Cover your page.</h1>
|
||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit
|
||||
the text, and add your own fullscreen background photo to make it your own.</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
|
||||
</p> -->
|
||||
</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>
|
|
@ -0,0 +1,95 @@
|
|||
<!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>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="form">
|
||||
<div class="border border-black m-6 password-form">
|
||||
<div class=" m-5 mx-auto form" style="width: 500px;">
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">IP Configuration</label>
|
||||
<div class="col-sm-7 text-start py-2">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" checked type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
|
||||
<label class="form-check-label" for="inlineRadio1">DHCP</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
|
||||
<label class="form-check-label" for="inlineRadio2">Static IP</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Mac Address</label>
|
||||
<div class="col-sm-7 text-start py-2">
|
||||
10-A6-56-EF-23-D6
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">IP Address</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Subnet Mask</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Gateway</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Host Name</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</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>
|
||||
</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>
|
|
@ -0,0 +1,82 @@
|
|||
<!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>INPUT</div>
|
||||
<div>EQ</div>
|
||||
<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 class="last">SYSTEM</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: 500px;">
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Old Username</label>
|
||||
<div class="col-sm-7">
|
||||
<input class="form-control" placeholder="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">New Username</label>
|
||||
<div class="col-sm-7">
|
||||
<input class="form-control" placeholder="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-5 col-form-label">Old Password</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-sm-5 col-form-label">New Password</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-sm-5 col-form-label">Confirm New Password</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</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>
|
||||
</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>
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
#box {
|
||||
width: 40px;
|
||||
height: 430px;
|
||||
border: 1px solid #000;
|
||||
margin: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#box1 {
|
||||
width: 40px;
|
||||
height: 00px;
|
||||
background: green;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#span1 {
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
background: green;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
top: 50px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track{
|
||||
|
||||
-webkit-appearance: none;/*清除系统默认样式*/
|
||||
|
||||
width: 16px;/*拖动块宽度*/
|
||||
|
||||
background: #cccccc;/*拖动块背景*/
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
input[type=range]{
|
||||
writing-mode: bt-lr; /*for IE */
|
||||
-webkit-appearance: slider-vertical; /* for chrome */
|
||||
width: 10px;
|
||||
height: 200px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="range" orient="vertical" min="0" max="100" />
|
||||
<div id="box">
|
||||
<div id="box1">
|
||||
<span id="span1">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p id="p1"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var Span = document.getElementById("span1");
|
||||
var Box = document.getElementById("box");
|
||||
var Box1 = document.getElementById("box1");
|
||||
var P1 = document.getElementById("p1");
|
||||
Span.onmousedown = function (e) {
|
||||
var evt = e || event;
|
||||
var x = evt.offsetX;
|
||||
var y = evt.offsetY;
|
||||
console.log(x)
|
||||
console.log(y)
|
||||
//console.log("Aa")
|
||||
Box.onmousemove = function (e) {
|
||||
var evt = e || event;
|
||||
Span.style.top = evt.clientY - Box.offsetTop - x + "px";
|
||||
if (evt.clientY - Box.offsetTop - x <= 0) {
|
||||
Span.style.top = "0px";
|
||||
}
|
||||
if (evt.clientY - Box.offsetTop - x >= 400) {
|
||||
Span.style.top = "400px";
|
||||
}
|
||||
//console.log(Span.offsetLeft);
|
||||
P1.innerHTML = "音量:" + Math.floor(Span.offsetTop / 4);
|
||||
Box1.style.height = Span.offsetTop + "px";
|
||||
|
||||
}
|
||||
document.onmouseup = function () {
|
||||
//Box1.style.width=evt.offsetX+"px";
|
||||
Box.onmousemove = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,178 @@
|
|||
<!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="form">
|
||||
<div class="border border-black m-6 password-form">
|
||||
<div class=" m-5 mx-auto form" style="width: 500px;">
|
||||
<div>
|
||||
<div class="container">
|
||||
|
||||
<div class="range-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||
<div class="range-slider__bar" style="height: calc(45% + 15px);"></div>
|
||||
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||
</div>
|
||||
|
||||
<div class="range-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||
<div class="range-slider__bar theme1" style="height: calc(45% + 15px);"></div>
|
||||
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||
</div>
|
||||
|
||||
<div class="range-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||
<div class="range-slider__bar theme2" style="height: calc(45% + 15px);"></div>
|
||||
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||
</div>
|
||||
|
||||
<div class="range-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100" value="50">
|
||||
<div class="range-slider__bar theme3" style="height: calc(45% + 15px);"></div>
|
||||
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="ruleraxisy">
|
||||
<ul class="scaley">
|
||||
<li></li>
|
||||
<li>50</li>
|
||||
<li>100</li>
|
||||
<li>150</li>
|
||||
<li>200</li>
|
||||
<li>250</li>
|
||||
<li>300</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="progress-4"></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>
|
||||
</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');
|
||||
|
||||
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'),
|
||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||
|
||||
$thumb.style.bottom = `${pct}%`;
|
||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||
$thumb.textContent = `${element.value}%`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateSlider: updateSlider
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
(function initAndSetupTheSliders() {
|
||||
const inputs = [].slice.call(document.querySelectorAll('.range-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: 105,
|
||||
width: 16,
|
||||
value: 38,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "custom-half",
|
||||
startAngle:0,
|
||||
endAgle:359.9
|
||||
// startAngle: 315,
|
||||
// tooltipFormat: "changeTooltip"
|
||||
});
|
||||
|
||||
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>
|
Loading…
Reference in New Issue