137 lines
3.1 KiB
HTML
137 lines
3.1 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">
|
||
|
|
<input id="wifiName" type="text" placeholder="请选择WiFi">
|
||
|
|
</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="btnDiv" style="margin-top: 2vh;">
|
||
|
|
<button class="btnRefresh">刷新</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="powerDiv">
|
||
|
|
<span style="margin-right: 2%">Powered by</span>
|
||
|
|
<span style="color: #3498ff;">Takway.ai</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function submitForm() {
|
||
|
|
const ssid = document.getElementById('wifiName').value;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
input[type=text]{
|
||
|
|
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=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>
|