98 lines
3.4 KiB
HTML
98 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-cn">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>ESP32-wifi配置页面</title>
|
||
|
|
<style>* {
|
||
|
|
color: #475347;
|
||
|
|
text-shadow: 2px 2px 8px #FFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #F3F3F3;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
text-align: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
background-color: #FFF;
|
||
|
|
}</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;">
|
||
|
|
<div style="text-align: center;position: absolute;top: 15px;left: 0;right: 0;">
|
||
|
|
<h1>ESP32 AP</h1>
|
||
|
|
<h2>wifi配置页面</h2>
|
||
|
|
</div>
|
||
|
|
<div id="content"
|
||
|
|
style="margin-block: 150px;border: none;border-radius: 8px;background-color: #93B874;padding: 10px;">
|
||
|
|
<div style="display: flex;justify-content: space-between;">
|
||
|
|
<h3>选择WIFI:</h3>
|
||
|
|
<button onclick="refresh()" style="height: 40px;margin-top: 10px">刷新
|
||
|
|
<svg style="width: 24px;height: 24px;" viewBox="0 0 1024 1024"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M928 416l-256-6.4 114.688-114.112A347.776 347.776 0 0 0 512 160a352 352 0 1 0 311.872 512H896a416 416 0 1 1-62.016-423.232L923.072 160z"
|
||
|
|
fill="#000"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<table style="width: 450px;max-width: 80vw;border: #475347 1px solid;">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>名称</th>
|
||
|
|
<th>信号(RSSI)</th>
|
||
|
|
<th>是否需要密码</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="tbody">
|
||
|
|
</tbody>
|
||
|
|
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const tbody = document.getElementById('tbody');
|
||
|
|
const content = document.getElementById('content');
|
||
|
|
const tableRow = (name, rssi, password_required) => `<tr><td>${name}</td><td>${rssi}</td><td>${password_required ? '是' : '否'}</td><td><button onclick="
|
||
|
|
{
|
||
|
|
if (${password_required}) {
|
||
|
|
const password = prompt('请输入密码');
|
||
|
|
if (password) {
|
||
|
|
fetch('/set?ssid=' + '${name}' + '&password=' + password).then(res => {
|
||
|
|
if (res.ok) {
|
||
|
|
return res.text();
|
||
|
|
}
|
||
|
|
throw new Error('网络请求失败');
|
||
|
|
}).then(async data => {
|
||
|
|
content.innerHTML = await data;
|
||
|
|
}).catch(error => {
|
||
|
|
console.error('网络请求失败:', error)
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
alert('禁止使用无密码连接！！！');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}">连接</button></td></tr>`;
|
||
|
|
const refresh = () => {
|
||
|
|
tbody.innerHTML = '<tr><td colspan="4">刷新中...</td></tr>';
|
||
|
|
const controller = new AbortController();// 不超时
|
||
|
|
fetch('/scan', {signal: controller.signal}).then(res => res.json()).then(data => {
|
||
|
|
tbody.innerHTML = '';
|
||
|
|
data.forEach(item => {
|
||
|
|
tbody.innerHTML += tableRow(item.ssid, item.rssi, item.password_required)
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
tbody.innerHTML = '<tr><td colspan="4">请求错误请刷新</td></tr>';
|
||
|
|
})
|
||
|
|
}
|
||
|
|
refresh();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|