Seany 2023-11-08 00:29:39 +08:00
parent be1429c028
commit e7fc1edab7
6 changed files with 108 additions and 515 deletions

View File

@ -8,7 +8,6 @@
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<script src="js/config.js"></script> <script src="js/config.js"></script>
<script src="js/jquery-3.7.1.js"></script> <script src="js/jquery-3.7.1.js"></script>
<script src="js/roundslider.min.js"></script>
</head> </head>
<body class="h-100 text-center text-bg-dark content-warp"> <body class="h-100 text-center text-bg-dark content-warp">
@ -91,13 +90,13 @@
<label for="inputPassword" class="col-6 col-form-label">Analog signal delection</label> <label for="inputPassword" class="col-6 col-form-label">Analog signal delection</label>
<div class="col-6"> <div class="col-6">
<div class="redio-switche float-start" style="display:inline-block;"> <div class="redio-switche float-start" style="display:inline-block;">
<input type="radio" class="btn-check" name="delection" id="delection-on" <input type="radio" class="btn-check" name="analog" id="analog-on"
value="enable"> value="enable">
<label class="btn btn-sm redio-btn on-btn" for="delection-on">ENABLE</label> <label class="btn btn-sm redio-btn on-btn" for="analog-on">ENABLE</label>
<input type="radio" class="btn-check" name="delection" id="delection-off" <input type="radio" class="btn-check" name="analog" id="analog-off"
value="disable"> value="disable">
<label class="btn btn-sm redio-btn off-btn" for="delection-off">DISABLE</label> <label class="btn btn-sm redio-btn off-btn" for="analog-off">DISABLE</label>
</div> </div>
</div> </div>
</div> </div>
@ -139,21 +138,38 @@
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
//初始化配置 //初始化配置
loadData()
}) })
$(document).ready(function(){ $(document).ready(function(){
$("#submit").on('click',function(){ $("#submit").on('click',function(){
var power = $("input[name='power']:checked").val(); var power = $("input[name='power']:checked").val();
alert(power) var hibernation = $("input[name='hibernation']:checked").val();
var timer = $("#timer").val();
var trigger = $("input[name='trigger']:checked").val();
var delection =$("input[name='analog']:checked").val();
var lock = $("input[name='lock']:checked").val();
}) })
$("#blink").on('click',function(){ $("#blink").on('click',function(){
alert('blink click') alert('blink click')
}) })
$("#submit").on('click',function(){
alert('on submit')
}) })
})
function loadData(){
$("input[name='power']").val(["on"])
$("input[name='hibernation']").val(["enable"])
$("#timer").val("1")
$("input[name='trigger']").val(["disable"])
$("input[name='analog']").val(["enable"])
$("input[name='lock']").val(["lock"]);
}
</script> </script>
</body> </body>

View File

@ -6,6 +6,8 @@
<title></title> <title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<script src="js/config.js"></script>
<script src="js/jquery-3.7.1.js"></script>
</head> </head>
<body class="d-flex h-100 text-center text-bg-dark"> <body class="d-flex h-100 text-center text-bg-dark">
@ -56,6 +58,22 @@
</div> </div>
</footer> </footer>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
})
$(document).ready(function () {
$("#submit").on("click", function () {
// let oldname = $("#oldname").val()
// let newname = $("#newname").val()
// let oldpassword = $("#oldpassword").val()
// let newpassword = $("#newpassword").val()
// let confirmpassword = $("#confirmpassword").val()
})
})
</script>
</body> </body>
</html> </html>

View File

@ -6,6 +6,8 @@
<title></title> <title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<script src="js/config.js"></script>
<script src="js/jquery-3.7.1.js"></script>
</head> </head>
<body class="h-100 text-center text-bg-dark content-warp"> <body class="h-100 text-center text-bg-dark content-warp">
@ -40,11 +42,11 @@
<label for="staticEmail" class="col-sm-5 col-form-label">IP Configuration</label> <label for="staticEmail" class="col-sm-5 col-form-label">IP Configuration</label>
<div class="col-sm-7 text-start py-2"> <div class="col-sm-7 text-start py-2">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" checked type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <input class="form-check-input" checked type="radio" name="type" id="type-dhcp" value="dhcp">
<label class="form-check-label" for="inlineRadio1">DHCP</label> <label class="form-check-label" for="inlineRadio1">DHCP</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <input class="form-check-input" type="radio" name="type" id="type-static" value="static">
<label class="form-check-label" for="inlineRadio2">Static IP</label> <label class="form-check-label" for="inlineRadio2">Static IP</label>
</div> </div>
</div> </div>
@ -56,27 +58,27 @@
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">IP Address</label> <label for="ipaddress" class="col-sm-5 col-form-label">IP Address</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="text" class="form-control" id="ipaddress">
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Subnet Mask</label> <label for="Subnet" class="col-sm-5 col-form-label">Subnet Mask</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="text" class="form-control" id="Subnet">
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Gateway</label> <label for="gateway" class="col-sm-5 col-form-label">Gateway</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="text" class="form-control" id="gateway">
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Host Name</label> <label for="hostName" class="col-sm-5 col-form-label">Host Name</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="password" class="form-control" id="hostName">
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,472 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>刻度尺</title>
<style type="text/css">
.ruler {
position: relative;
width: 70%;
margin: 20px auto;
height: 14px;
}
.ruler .cm,
.ruler .mm {
position: absolute;
border-left: 1px solid #555;
height: 14px;
width: 10%;
}
.ruler .cm:after {
position: absolute;
bottom: -15px;
font: 11px/1 sans-serif;
}
.ruler .mm {
height: 5px;
}
.ruler .mm:nth-of-type(5) {
height: 10px;
}
.ruler .cm:nth-of-type(1) {
left: 0%;
}
.ruler .cm:nth-of-type(1):after {
content: "0";
}
.ruler .cm:nth-of-type(2) {
left: 10%;
}
.ruler .cm:nth-of-type(2):after {
content: "1";
}
.ruler .cm:nth-of-type(3) {
left: 20%;
}
.ruler .cm:nth-of-type(3):after {
content: "2";
}
.ruler .cm:nth-of-type(4) {
left: 30%;
}
.ruler .cm:nth-of-type(4):after {
content: "3";
}
.ruler .cm:nth-of-type(5) {
left: 40%;
}
.ruler .cm:nth-of-type(5):after {
content: "4";
}
.ruler .cm:nth-of-type(6) {
left: 50%;
}
.ruler .cm:nth-of-type(6):after {
content: "5";
}
.ruler .cm:nth-of-type(7) {
left: 60%;
}
.ruler .cm:nth-of-type(7):after {
content: "6";
}
.ruler .cm:nth-of-type(8) {
left: 70%;
}
.ruler .cm:nth-of-type(8):after {
content: "7";
}
.ruler .cm:nth-of-type(9) {
left: 80%;
}
.ruler .cm:nth-of-type(9):after {
content: "8";
}
.ruler .cm:nth-of-type(10) {
left: 90%;
}
.ruler .cm:nth-of-type(10):after {
content: "9";
}
.ruler .cm:nth-of-type(11) {
left: 100%;
}
.ruler .cm:nth-of-type(11):after {
content: "10";
}
.ruler .mm:nth-of-type(1) {
left: 10%;
}
.ruler .mm:nth-of-type(2) {
left: 20%;
}
.ruler .mm:nth-of-type(3) {
left: 30%;
}
.ruler .mm:nth-of-type(4) {
left: 40%;
}
.ruler .mm:nth-of-type(5) {
left: 50%;
}
.ruler .mm:nth-of-type(6) {
left: 60%;
}
.ruler .mm:nth-of-type(7) {
left: 70%;
}
.ruler .mm:nth-of-type(8) {
left: 80%;
}
.ruler .mm:nth-of-type(9) {
left: 90%;
}
.ruler .mm:nth-of-type(10) {
left: 100%;
}
.ruler2 {
position: relative;
width: 14px;
margin: 20px auto;
height: 500px;
}
.ruler2 .cm,
.ruler2 .mm {
position: absolute;
border-top: 1px solid #555;
height: 10%;
width: 14px;
}
.ruler2 .cm:after {
position: absolute;
right: -15px;
font: 11px/1 sans-serif;
}
.ruler2 .mm {
width: 5px;
}
.ruler2 .mm:nth-of-type(5) {
width: 10px;
}
.ruler2 .cm:nth-of-type(1) {
top: 0%;
}
.ruler2 .cm:nth-of-type(1):after {
content: "0";
}
.ruler2 .cm:nth-of-type(2) {
top: 10%;
}
.ruler2 .cm:nth-of-type(2):after {
content: "1";
}
.ruler2 .cm:nth-of-type(3) {
top: 20%;
}
.ruler2 .cm:nth-of-type(3):after {
content: "2";
}
.ruler2 .cm:nth-of-type(4) {
top: 30%;
}
.ruler2 .cm:nth-of-type(4):after {
content: "3";
}
.ruler2 .cm:nth-of-type(5) {
top: 40%;
}
.ruler2 .cm:nth-of-type(5):after {
content: "4";
}
.ruler2 .cm:nth-of-type(6) {
top: 50%;
}
.ruler2 .cm:nth-of-type(6):after {
content: "5";
}
.ruler2 .cm:nth-of-type(7) {
top: 60%;
}
.ruler2 .cm:nth-of-type(7):after {
content: "6";
}
.ruler2 .cm:nth-of-type(8) {
top: 70%;
}
.ruler2 .cm:nth-of-type(8):after {
content: "7";
}
.ruler2 .cm:nth-of-type(9) {
top: 80%;
}
.ruler2 .cm:nth-of-type(9):after {
content: "8";
}
.ruler2 .cm:nth-of-type(10) {
top: 90%;
}
.ruler2 .cm:nth-of-type(10):after {
content: "9";
}
.ruler2 .cm:nth-of-type(11) {
top: 100%;
}
.ruler2 .cm:nth-of-type(11):after {
content: "10";
}
.ruler2 .mm:nth-of-type(1) {
top: 10%;
}
.ruler2 .mm:nth-of-type(2) {
top: 20%;
}
.ruler2 .mm:nth-of-type(3) {
top: 30%;
}
.ruler2 .mm:nth-of-type(4) {
top: 40%;
}
.ruler2 .mm:nth-of-type(5) {
top: 50%;
}
.ruler2 .mm:nth-of-type(6) {
top: 60%;
}
.ruler2 .mm:nth-of-type(7) {
top: 70%;
}
.ruler2 .mm:nth-of-type(8) {
top: 80%;
}
.ruler2 .mm:nth-of-type(9) {
top: 90%;
}
.ruler2 .mm:nth-of-type(10) {
top: 100%;
}
</style>
</head>
<body>
<section class="ruler">
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm"></section>
</section>
<section class="ruler2">
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
<section class="mm"></section>
</section>
</section>
</body>
</html>

View File

@ -6,6 +6,8 @@
<title></title> <title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<script src="js/config.js"></script>
<script src="js/jquery-3.7.1.js"></script>
</head> </head>
<body class="h-100 text-center text-bg-dark content-warp"> <body class="h-100 text-center text-bg-dark content-warp">
@ -37,39 +39,39 @@
<div class="border border-black m-6 password-form"> <div class="border border-black m-6 password-form">
<div class=" m-5 mx-auto form" style="width: 500px;"> <div class=" m-5 mx-auto form" style="width: 500px;">
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Old Username</label> <label for="oldname" class="col-sm-5 col-form-label">Old Username</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input class="form-control" placeholder="" /> <input class="form-control" id="oldname" placeholder="" />
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">New Username</label> <label for="newname" class="col-sm-5 col-form-label">New Username</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input class="form-control" placeholder="" /> <input class="form-control" id="newname" placeholder="" />
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Old Password</label> <label for="oldpassword" class="col-sm-5 col-form-label">Old Password</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="password" class="form-control" id="oldpassword">
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="inputPassword" class="col-sm-5 col-form-label">New Password</label> <label for="newpassword" class="col-sm-5 col-form-label">New Password</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="password" class="form-control" id="newpassword">
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="inputPassword" class="col-sm-5 col-form-label">Confirm New Password</label> <label for="confirmpassword" class="col-sm-5 col-form-label">Confirm New Password</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword"> <input type="password" class="form-control" id="confirmpassword">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-5 pb-5"> <div class="mt-5 pb-5">
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button> <button type="button" id="submit" class="btn btn-dark border border-black px-5">Confirm</button>
</div> </div>
</div> </div>
</main> </main>
@ -81,6 +83,22 @@
</div> </div>
</footer> </footer>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
})
$(document).ready(function () {
$("#submit").on("click", function () {
let oldname = $("#oldname").val()
let newname = $("#newname").val()
let oldpassword = $("#oldpassword").val()
let newpassword = $("#newpassword").val()
let confirmpassword = $("#confirmpassword").val()
})
})
</script>
</body> </body>
</html> </html>

View File

@ -8,7 +8,6 @@
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<script src="js/config.js"></script> <script src="js/config.js"></script>
<script src="js/jquery-3.7.1.js"></script> <script src="js/jquery-3.7.1.js"></script>
<script src="js/roundslider.min.js"></script>
</head> </head>
<body class="h-100 text-center text-bg-dark content-warp"> <body class="h-100 text-center text-bg-dark content-warp">
@ -81,9 +80,9 @@
<label for="inputPassword" class="col-sm-4 col-form-label">Fimware Upgrade</label> <label for="inputPassword" class="col-sm-4 col-form-label">Fimware Upgrade</label>
<div class="col-sm-8 d-flex"> <div class="col-sm-8 d-flex">
<button id="selectFile" class="btn button btn-dark border border-black">Select</button> <button id="selectFile" class="btn button btn-dark border border-black">Select</button>
<input type="text" id="fileName" class="form-control"/> <input type="text" id="fileName" class="form-control" />
<input type="file" id="uploadFile" style="display: none;"> <input type="file" id="uploadFile" style="display: none;">
<button type="button" <button type="button" id="upgrade"
class="btn button btn-dark border border-black ms-4">Confirm</button> class="btn button btn-dark border border-black ms-4">Confirm</button>
</div> </div>
</div> </div>
@ -107,26 +106,38 @@
alert('a') alert('a')
}); });
$('#selectFile').on('click',function(){ $('#selectFile').on('click', function () {
$('#uploadFile').click() $('#uploadFile').click()
}) })
$('#uploadFile').on("change", function(){ $('#uploadFile').on("change", function () {
let file = $('#uploadFile')[0].value let file = $('#uploadFile')[0].value
$('#fileName')[0].value=file $('#fileName')[0].value = file
}); });
// $('#uploadFile').on('onchange',function(){ $("#upgrade").on("click",function(){
// $('#fileName').val = $('#uploadFile')[0].name alert('aaa')
// }) })
})
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
loadData();
}) })
function loadData() { function loadData() {
$.ajax({ $("#guiv").text("v1.0.1")
url: '', success: function (res) { $("#firmwarev").text("v1.0.0")
console.log('a') $("#sn").text("SN-2343-123-NNDD")
} $("#hostName").text("Test.Hostname")
});
// $.ajax({
// url: '', success: function (res) {
// console.log('a')
// }
// });
} }
</script> </script>
</body> </body>