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">
<script src="js/config.js"></script>
<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">
@ -91,13 +90,13 @@
<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"
<input type="radio" class="btn-check" name="analog" id="analog-on"
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">
<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>
@ -139,21 +138,38 @@
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
loadData()
})
$(document).ready(function(){
$("#submit").on('click',function(){
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(){
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>
</body>

View File

@ -6,6 +6,8 @@
<title></title>
<link href="css/bootstrap.min.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>
<body class="d-flex h-100 text-center text-bg-dark">
@ -56,6 +58,22 @@
</div>
</footer>
</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>
</html>

View File

@ -6,6 +6,8 @@
<title></title>
<link href="css/bootstrap.min.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>
<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>
<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">
<input class="form-check-input" checked type="radio" name="type" id="type-dhcp" value="dhcp">
<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">
<input class="form-check-input" type="radio" name="type" id="type-static" value="static">
<label class="form-check-label" for="inlineRadio2">Static IP</label>
</div>
</div>
@ -56,27 +58,27 @@
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="text" class="form-control" id="ipaddress">
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="text" class="form-control" id="Subnet">
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="text" class="form-control" id="gateway">
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="password" class="form-control" id="hostName">
</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>
<link href="css/bootstrap.min.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>
<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=" 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>
<label for="oldname" class="col-sm-5 col-form-label">Old Username</label>
<div class="col-sm-7">
<input class="form-control" placeholder="" />
<input class="form-control" id="oldname" placeholder="" />
</div>
</div>
<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">
<input class="form-control" placeholder="" />
<input class="form-control" id="newname" placeholder="" />
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="password" class="form-control" id="oldpassword">
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="password" class="form-control" id="newpassword">
</div>
</div>
<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">
<input type="password" class="form-control" id="inputPassword">
<input type="password" class="form-control" id="confirmpassword">
</div>
</div>
</div>
</div>
<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>
</main>
@ -81,6 +83,22 @@
</div>
</footer>
</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>
</html>

View File

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