extras/test.html - master - nicodim4/WiFiManager

extras/test.html
182 строки6 KB
Andy Piper
Fix "Acccess" typo (#1366)
23 фев 2022, 22:08
23 фев 2022, 22:088279c5b
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Config ESP</title>
    <script>

    function c(l,e) {
    	console.log(l);
    	// preventDefault();
        document.getElementById('s').value = l.innerText || l.textContent;
        // document.location.href = document.location +"#wmform";
        p = l.nextElementSibling.classList.contains("l");
        document.getElementById('p').disabled = !p;
        if(p)document.getElementById('p').focus();
        return false;
    }

    </script>

<style>
.c,
body {
    text-align: center
}

div,
input {
    padding: 5px;
    font-size: 1em
}

input {
    width: 95%
}

body {
    font-family: verdana
}

button {
    border: 0;
    border-radius: .3rem;
    background-color: #1fa3ec;
    color: #fff;
    line-height: 2.4rem;
    font-size: 1.2rem;
    width: 100%
}

a {
    color: #000;
    font-weight: 700;
    text-decoration: none
}

a:hover {
    color: #1fa3ec;
    text-decoration: underline
}

.q {
    height: 16px;
    margin: 0;
    padding: 0 5px;
    text-align: right;
    min-width: 38px
}

.q.q-0:after {
    background-position-x: 0
}

.q.q-1:after {
    background-position-x: -16px
}

.q.q-2:after {
    background-position-x: -32px
}

.q.q-3:after {
    background-position-x: -48px
}

.q.q-4:after {
    background-position-x: -64px
}

.q.l:before {
    background-position-x: -80px;
    padding-right: 5px
}

.ql .q {
    float: left
}

.qr .q {
    float: right
}

.qinv .q {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.q:after,
.q:before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 16px 0;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .q:before,
    .q:after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
        background-size: 95px 16px;
    }
}

input:disabled {
    opacity: 0.5;
}

</style>

</head>

<body>
 	<!-- classes, left/right invert -->
    <div class="qr" style='text-align:left;display:inline-block;min-width:260px;'>
        <div><a href='#p' onclick='c(this)'>Access Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 03</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 04</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 05</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 06</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 07</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 08</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 09</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 10</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 11</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 12</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 13</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
        <div><a href='#p' onclick='c(this)'>Access Point 14</a><div role='img' aria-label='88%' title='88%' class='q q-0 l'></div></div>
        <br/>
        <form id="wmform" method='get' action='wifisave'>
            <input id='s' name='s' length=32 placeholder='SSID'>
            <br/>
            <input id='p' name='p' length=64 type='password' placeholder='password'>
            <br/>
            <br/>
            <input id='server' name='server' length=4 placeholder='mqtt server' value=''>
            <br/>
            <input id='port' name='port' length=5 placeholder='mqtt port' value='8080'>
            <br/>
            <input id='blynk' name='blynk' length=3 placeholder='blynk token' value='YOUR_BLYNK_TOKEN'>
            <br/>
            <br/>
            <input id='ip' name='ip' length=15 placeholder='Static IP' value='10.0.1.56'>
            <br/>
            <input id='gw' name='gw' length=15 placeholder='Static Gateway' value='10.0.1.1'>
            <br/>
            <input id='sn' name='sn' length=15 placeholder='Subnet' value='255.255.255.0'>
            <br/>
            <br/>
            <button type='submit'>save</button>
        </form>
        <br/>
        <div class="c"><a href="/wifi">Scan</a></div>
    </div>
</body>

</html>