yxw 2023-11-07 18:51:37 +08:00
parent 21eb2e4b73
commit be1429c028
4 changed files with 93 additions and 23 deletions

View File

@ -6,6 +6,9 @@
<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>
<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">
@ -40,11 +43,11 @@
<label for="staticEmail" class="col-6 col-form-label">Power</label> <label for="staticEmail" class="col-6 col-form-label">Power</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="power" id="power-on" autocomplete="off"> <input type="radio" class="btn-check" name="power" id="power-on" value="on">
<label class="btn btn-sm redio-btn on-btn" for="power-on">ON</label> <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" <input type="radio" class="btn-check" name="power" id="power-off"
autocomplete="off"> value="off">
<label class="btn btn-sm redio-btn off-btn" for="power-off">OFF</label> <label class="btn btn-sm redio-btn off-btn" for="power-off">OFF</label>
</div> </div>
</div> </div>
@ -54,11 +57,11 @@
<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="hibernation" id="hibernation-on" <input type="radio" class="btn-check" name="hibernation" id="hibernation-on"
autocomplete="off"> value="enable">
<label class="btn btn-sm redio-btn on-btn" for="hibernation-on">ENABLE</label> <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" <input type="radio" class="btn-check" name="hibernation" id="hibernation-off"
autocomplete="off"> value="disable">
<label class="btn btn-sm redio-btn off-btn" for="hibernation-off">DISABLE</label> <label class="btn btn-sm redio-btn off-btn" for="hibernation-off">DISABLE</label>
</div> </div>
</div> </div>
@ -66,7 +69,7 @@
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-6 col-form-label">Hibernation Timer(min)</label> <label for="staticEmail" class="col-6 col-form-label">Hibernation Timer(min)</label>
<div class="col-6"> <div class="col-6">
<input type="number" class="form-control float-start" id="inputPassword" <input type="number" class="form-control float-start" id="timer"
style="width: 100px;"> style="width: 100px;">
</div> </div>
</div> </div>
@ -75,11 +78,11 @@
<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="trigger" id="trigger-on" <input type="radio" class="btn-check" name="trigger" id="trigger-on"
autocomplete="off"> value="enable">
<label class="btn btn-sm redio-btn on-btn" for="trigger-on">ENABLE</label> <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" <input type="radio" class="btn-check" name="trigger" id="trigger-off"
autocomplete="off"> value="disable">
<label class="btn btn-sm redio-btn off-btn" for="trigger-off">DISABLE</label> <label class="btn btn-sm redio-btn off-btn" for="trigger-off">DISABLE</label>
</div> </div>
</div> </div>
@ -89,11 +92,11 @@
<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="delection" id="delection-on"
autocomplete="off"> 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="delection-on">ENABLE</label>
<input type="radio" class="btn-check" name="delection" id="delection-off" <input type="radio" class="btn-check" name="delection" id="delection-off"
autocomplete="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="delection-off">DISABLE</label>
</div> </div>
</div> </div>
@ -103,20 +106,26 @@
<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="lock" id="lock-on" <input type="radio" class="btn-check" name="lock" id="lock-on"
autocomplete="off"> value="lock">
<label class="btn btn-sm redio-btn on-btn" for="lock-on">LOCK</label> <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" <input type="radio" class="btn-check" name="lock" id="lock-off"
autocomplete="off"> value="unlock">
<label class="btn btn-sm redio-btn off-btn" for="lock-off">UNLOCK</label> <label class="btn btn-sm redio-btn off-btn" for="lock-off">UNLOCK</label>
</div> </div>
</div> </div>
</div> </div>
<div class="mb-3 row">
<label for="inputPassword" class="col-6 col-form-label">Blink</label>
<div class="col-6 d-flex">
<button type="button" id="blink" class="btn btn-dark border border-black px-5">Blink</button>
</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">Save</button> <button type="button" id="submit" class="btn btn-dark border border-black px-5">Save</button>
</div> </div>
</div> </div>
</main> </main>
@ -128,6 +137,24 @@
</div> </div>
</footer> </footer>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
})
$(document).ready(function(){
$("#submit").on('click',function(){
var power = $("input[name='power']:checked").val();
alert(power)
})
$("#blink").on('click',function(){
alert('blink click')
})
})
</script>
</body> </body>
</html> </html>

View File

@ -7,6 +7,7 @@
<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">
<link href="css/roundslider.min.css" rel="stylesheet"> <link href="css/roundslider.min.css" rel="stylesheet">
<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> <script src="js/roundslider.min.js"></script>
</head> </head>
@ -15,7 +16,7 @@
<div class="d-flex w-100 h-100 mx-auto flex-column"> <div class="d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto pb-5"> <header class="mb-auto pb-5">
<div class="dotblock d-flex justify-content-between px-5 py-4"> <div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="fs-3">GEAZAN</div> <div class="fs-3"><script>document.write(siteName)</script></div>
<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">
@ -600,8 +601,8 @@
<footer class="mt-auto text-white-50"> <footer class="mt-auto text-white-50">
<div class="dotblock d-flex justify-content-between px-5 py-4"> <div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="">Geazan</div> <div class=""><script>document.write(siteName)</script></div>
<div>www.geazan.com</div> <div><script>document.write(siteUrl)</script></div>
</div> </div>
</footer> </footer>
</div> </div>

2
js/config.js Normal file
View File

@ -0,0 +1,2 @@
var siteName="GEAZAN"
var siteUrl="www.geazan.com"

View File

@ -6,6 +6,9 @@
<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>
<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">
@ -39,44 +42,54 @@
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-4 col-form-label">GUI verion</label> <label for="staticEmail" class="col-sm-4 col-form-label">GUI verion</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input class="form-control" placeholder="" readonly value="1.0.0" /> <div class="d-flex mt-2" id="guiv">
v1.0.0
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-4 col-form-label">Firmware Version</label> <label for="staticEmail" class="col-sm-4 col-form-label">Firmware Version</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input class="form-control" placeholder="" readonly value="1.0.1" /> <div class="d-flex mt-2" id="firmwarev">
v1.0.1
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="staticEmail" class="col-sm-4 col-form-label">SN</label> <label for="staticEmail" class="col-sm-4 col-form-label">SN</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword"> <div class="d-flex mt-2" id="sn">
SN-2343-123-NNDD
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="inputPassword" class="col-sm-4 col-form-label">Host Name</label> <label for="inputPassword" class="col-sm-4 col-form-label">Host Name</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword"> <div class="d-flex mt-2" id="hostName">
HostName
</div>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<label for="inputPassword" class="col-sm-4 col-form-label">Factory Reset</label> <label for="inputPassword" class="col-sm-4 col-form-label">Factory Reset</label>
<div class="col-sm-8 d-flex"> <div class="col-sm-8 d-flex">
<button type="button" class="btn btn-danger">Reset</button> <button id="reset" type="button" class="btn btn-danger">Reset</button>
</div> </div>
</div> </div>
<div class="mb-3 row"> <div class="mb-3 row">
<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">
<input type="file" class="form-control" id="inputPassword"> <button id="selectFile" class="btn button btn-dark border border-black">Select</button>
<button type="button" class="btn button btn-dark border border-black ms-4">Confirm</button> <input type="text" id="fileName" class="form-control"/>
<input type="file" id="uploadFile" style="display: none;">
<button type="button"
class="btn button btn-dark border border-black ms-4">Confirm</button>
</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 button btn-dark border border-black px-5">Confirm</button>
</div> </div>
</div> </div>
</main> </main>
@ -88,6 +101,33 @@
</div> </div>
</footer> </footer>
</div> </div>
<script>
$(document).ready(function () {
$('#reset').on('click', function (event) {
alert('a')
});
$('#selectFile').on('click',function(){
$('#uploadFile').click()
})
$('#uploadFile').on("change", function(){
let file = $('#uploadFile')[0].value
$('#fileName')[0].value=file
});
// $('#uploadFile').on('onchange',function(){
// $('#fileName').val = $('#uploadFile')[0].name
// })
})
function loadData() {
$.ajax({
url: '', success: function (res) {
console.log('a')
}
});
}
</script>
</body> </body>
</html> </html>