205 lines
4.9 KiB
HTML
205 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Wi-Fi 设置</title>
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
</head>
|
|
<body>
|
|
<div class="pageTitle">配置</div>
|
|
<div class="inputLabel">WIFI 名称</div>
|
|
<div class="inputDiv">
|
|
<div class="select-menu">
|
|
<div class="select">
|
|
<span id="ssid" class="ssid">请选择Wifi</span>
|
|
</div>
|
|
<div class="options-list">
|
|
{% for wifi in wifi_list %}
|
|
<div class="option">{{wifi.ssid}}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inputLabel">WIFI 密码</div>
|
|
<div class="inputDiv">
|
|
<input id="wifiPassword" type="password" placeholder="请输入密码">
|
|
</div>
|
|
<div class="btnDiv" style="margin-top: 14vh;">
|
|
<button class="btnSave" onclick="submitForm()">连接</button>
|
|
</div>
|
|
|
|
<div class="powerDiv">
|
|
<span style="margin-right: 2%">Powered by</span>
|
|
<span style="color: #3498ff;">Takway.ai</span>
|
|
</div>
|
|
|
|
<script>
|
|
const select = document.querySelector(".select");
|
|
const options_list = document.querySelector(".options-list");
|
|
const ssid_span = document.querySelector(".ssid");
|
|
const options = document.querySelectorAll(".option");
|
|
let ssid = ""
|
|
let isSelectSSid = false
|
|
|
|
select.addEventListener("click", () => {
|
|
options_list.classList.toggle("active");
|
|
});
|
|
|
|
//select option
|
|
options.forEach((option) => {
|
|
option.addEventListener("click", () => {
|
|
options.forEach((option) => {option.classList.remove('selected')});
|
|
select.querySelector("span").innerHTML = option.innerHTML;
|
|
ssid = option.innerHTML;
|
|
option.classList.add("selected");
|
|
if(!isSelectSSid){
|
|
ssid_span.classList.toggle("active");
|
|
}
|
|
options_list.classList.toggle("active");
|
|
isSelectSSid = true
|
|
});
|
|
});
|
|
|
|
function submitForm() {
|
|
const password = document.getElementById('wifiPassword').value;
|
|
fetch('/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `ssid=${encodeURIComponent(ssid)}&password=${encodeURIComponent(password)}`
|
|
})
|
|
.then(response => response.redirected ? window.location.href = response.url : null)
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
</script>
|
|
</body>
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.pageTitle{
|
|
display: grid;
|
|
place-items: center;
|
|
height: 12vh;
|
|
font-size: 3.5vh;
|
|
font-weight: bold;
|
|
margin-bottom: 2vh;
|
|
}
|
|
.inputLabel{
|
|
margin-left: 7.5%;
|
|
margin-bottom: 2vh;
|
|
font-size: 2.5vh;
|
|
}
|
|
.inputDiv{
|
|
width: 100%;
|
|
display:flex;
|
|
justify-content: center;
|
|
margin-bottom: 2vh;
|
|
}
|
|
.select-menu{
|
|
width: 90%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.select{
|
|
font-size: 1.8vh;
|
|
background-color: #f5f5f7;
|
|
padding: 1.3vh 1.3vh 1.3vh 2.2vh;
|
|
color: #a9a9aa;
|
|
font-weight: 500;
|
|
border-radius: 5vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.ssid.active{
|
|
color: black;
|
|
}
|
|
.options-list{
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: #f9f9f9;
|
|
border-radius: 1.5vh;
|
|
margin-top: 14px;
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
transform: .4s linear .2s;
|
|
height: 0;
|
|
}
|
|
.options-list::-webkit-scrollbar{
|
|
width: 0px;
|
|
}
|
|
.options-list.active{
|
|
height: 180px;
|
|
}
|
|
.option{
|
|
padding-left: 2vh;
|
|
margin-bottom: 1vh;
|
|
font-size: 1.7vh;
|
|
font-weight: 500;
|
|
transition: .3s ease-in-out;
|
|
}
|
|
.option:hover{
|
|
color: #00a8ff;
|
|
}
|
|
input[type=password]{
|
|
width: 85%;
|
|
margin-bottom: 2vh;
|
|
padding: 1.3vh 1.3vh 1.3vh 2.2vh;
|
|
font-size: 1.8vh;
|
|
background-color: #f5f5f7;
|
|
border: 0px;
|
|
border-radius:5vh;
|
|
}
|
|
input[type=checkbox]{
|
|
transform: scale(3);
|
|
margin-left: 8%;
|
|
}
|
|
input::placeholder{
|
|
color: #a9a9aa;
|
|
}
|
|
.pwShow{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 2.5vh;
|
|
}
|
|
.btnDiv{
|
|
width: 100%;
|
|
display:flex;
|
|
justify-content: center;
|
|
}
|
|
.btnSave{
|
|
font-size: 3vh;
|
|
color: white;
|
|
background-color: #3498ff;
|
|
border: 0px;
|
|
width: 90%;
|
|
border-radius:5vh;
|
|
padding: 1.5vh;;
|
|
}
|
|
.btnRefresh{
|
|
font-size: 3vh;
|
|
color: #389aff;
|
|
background-color: #cce6ff;
|
|
border: 0px;
|
|
width: 90%;
|
|
border-radius:5vh;
|
|
padding: 1.5vh;
|
|
}
|
|
.powerDiv{
|
|
margin-top: 25vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 2vh;
|
|
}
|
|
</style>
|
|
</html>
|