You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>esp-iot</title>
<!-- PWA support -->
<link rel="manifest" href="/manifest.json"/>
<meta name="theme-color" content="#2F3BA2"/>
<meta name="description" content="short your url"/>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
<link rel="stylesheet" type="text/css" href="/sym/dark.css"/>
<script>
const wsurl = 'ws://192.168.1.101:8081'
const socket = new WebSocket(wsurl)
socket.onopen = () => {
socket.send('new session')
}
socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`)
}
socket.onclose = error => show_error('session timed out (refresh)')
socket.onmessage = (e) => {
console.log(e.data)
let msg = e.data.split(";", 2)
if (msg[0] === 'error') show_error(msg[1])
else if (msg[0] === 'led1') {
document.getElementById('led1_title').innerText = `LED 1 (currently ${msg[1]}):`
}
}
function copy_url() {
document.getElementById('surl-input').select()
document.execCommand("copy")
}
function lurl_submit() {
socket.send('long_url;'+document.getElementById('longurl-input').value)
}
function show_error(msg) {
let error_style = document.getElementById('error-box').style
document.getElementById('error-message').innerText = msg
error_style.display = "block"
error_style.animation = "slide-from-left alternate 0.2s"
setTimeout(to => {error_style.animation = ""}, 200)
}
</script>
</head>
<body>
<div class="title">ESP-IoT</div>
<div class="title2" id="led1_title">LED 1:</div>
<div class="btn-green"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('led1;on')">
<div class="btn-text">on</div>
</div>
<div class="btn-red"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('led1;off')">
<div class="btn-text">off</div>
</div>
<div id="error-box" class="error">
<div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
<img class="icon" src="./sym/ic_close_white_24px.svg">
</div>
<div id="error-message" class="btn-text">
</div>
</div>
</body>
</html>