131 lines
26 KiB
HTML
131 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>AWTRIX Light</title>
|
|
<meta content="width=device-width, initial-scale=1" name=viewport />
|
|
<style>.inputfile{height:10px;opacity:0;overflow:hidden;position:absolute;width:10px;z-index:-1}.loader,.loader:after,.loader:before{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s ease-in-out infinite;animation:load7 1.8s ease-in-out infinite;border-radius:50%;height:2em;width:2em}.loader{-webkit-animation-delay:-.16s;animation-delay:-.16s;color:#333;font-size:10px;margin-left:auto;margin-right:auto;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);z-index:999}.loader:after,.loader:before{content:"";position:absolute;top:0}.loader:before{-webkit-animation-delay:-.32s;animation-delay:-.32s;left:-4.5em}.loader:after{left:4.5em}@-webkit-keyframes load7{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes load7{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}tr:hover{filter:brightness(85%)}.d-modal{background-color:hsla(0,0%,100%,.95);border:1px solid #3333336e;border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,.24);flex-direction:column;left:50%;max-height:40vh;max-width:90%;text-align:left;top:40%;transform:translate(-50%,-50%);width:25em;z-index:999}.d-modal,.d-modal-close{display:flex;position:absolute}.d-modal-close{align-items:center;color:#111827;cursor:pointer;height:4.5em;justify-content:center;right:0;top:0;width:4.5em}.d-modal-title{color:#111827;padding:1.5em 2em;position:relative;width:calc(100% - 4.5em)}.d-modal-content{border-top:1px solid #e0e0e0;overflow:auto;padding:2em}.topnav{background-color:#333;border-radius:5px;float:right;height:28px,;overflow:hidden;width:fit-content}.topnav a{color:#f2f2f2;display:block;float:left;font-size:16px;padding:5px 10px;text-align:center;text-decoration:none}.topnav a:hover{background-color:#ddd;color:#000}.topnav a.active{background-color:#56c080;color:#fff}.topnav .icon{display:none}*{box-sizing:border-box}.logo{width:100%}.lbl-wifi{padding:0;text-align:right}html{font-family:sans-serif}details,header,main,summary{display:block}.table{border-collapse:collapse;border-spacing:0;margin:auto;width:90%}a{background-color:transparent}a:active,a:hover{outline:0}b{font-weight:700}h1{font-size:38px}h2{font-size:24px}hr{padding:0}.input-label{background-color:#fff;border:1px solid #dcdce5;border-radius:6px;bottom:-7px;color:#015293;display:inline-block;font-size:13.5px;font-weight:500;left:8px;line-height:17px;margin-bottom:0;padding-left:6px;padding-right:7px;position:relative;z-index:2}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 30px #fff!important}input[type=checkbox]{box-sizing:border-box;padding:0}input[type=number],input[type=password],input[type=text],select{border:1px solid #ccc;border-radius:6px;box-shadow:0 1px 2px 0 rgba(220,220,230,.5);font-size:16px;height:40px;padding-left:20px;padding-top:10px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}input::placeholder{color:#5e5e5e}input:hover{border-color:rgba(0,0,0,.8);box-shadow:0 1px 4px 0 rgba(220,220,229,.9)}input:focus,select:focus{border-color:#3898ec;outline:0}.ctn:after,.ctn:before{content:" ";display:table;grid-column-end:2;grid-column-start:1;grid-row-end:2;grid-row-start:1}.ctn,.ctn:after{clear:both}.ctn{align-content:space-around;align-items:center;background-color:hsla(0,0%,100%,.8);border:1px solid #3333336e;border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,.24);display:block;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:10px auto;max-width:940px;padding:10px 40px}footer{font-size:12px;margin:40px;text-align:center}#about{color:#d3d3d3}.body{background-clip:border-box;background-color:#edf0f3;border-radius:10px;padding-left:20px;padding-right:20px}.title{align-items:center;display:flex;flex:1;justify-content:center}.heading-2{font-weight:400;text-align:center}.form,.heading-2{padding-left:20px;padding-right:20px}.form{position:static}.btn,button{background-color:#3898ec;border:0;border-radius:5px;color:#fff;cursor:pointer;display:inline-flex;justify-content:center;min-width:40%;padding:10px 15px}.btn:hover,button:hover{filter:brightness(85%)}.btn-bar{grid-column-gap:30px;grid-row-gap:20px;align-content:space-around;align-items:stretch;display:flex;flex-wrap:wrap;justify-content:right;margin-top:20px;padding:20px}.tf-wrapper{align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;margin-bottom:12px;position:relative;width:100%}.show-hide{background-color:#fff;display:flex;font-size:13.5px;max-width:100%}.show-hide-wrap{bottom:auto;cursor:pointer;left:auto;position:absolute;right:2%;top:40%;z-index:4}.svg{display:flex;margin-right:10px;width:20px}.svg-e{margin-top:5px}.heading{margin-left:10px;margin-right:10px}.hide,.show-hide.w--current{display:none}.toggle{cursor:pointer;display:inline-block;left:0;margin:0 0 12px;padding:5px;width:100%}.toggle-switch{background:#ccc;border-radius:16px;display:inline-block;height:32px;position:relative;transition:background .25s;vertical-align:middle;width:58px}.toggle-switch:after,.toggle-switch:before{content:""}.toggle-switch:before{background:linear-gradient(180deg,#fff 0,#eee);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.25);display:block;height:24px;left:4px;position:absolute;top:4px;transition:left .25s;width:24px}.toggle:hover .toggle-switch:before{background:linear-gradient(180deg,#fff 0,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.5)}.t-check:checked+.toggle-switch{background:#56c080}.t-check:checked+.toggle-switch:before{left:30px}.t-check{position:absolute;visibility:hidden}.toggle-label{margin-left:5px;position:relative;top:2px}@media screen and (max-width:991px){.ctn{grid-column-gap:10px;grid-row-gap:10px;max-width:728px;max-width:95%;object-fit:contain;overflow:visible;position:relative}.ctn,.wifi-connect{padding-left:20px;padding-right:20px}}@media screen and (max-width:767px){.wifi-connect{padding-left:10px;padding-right:10px}}@media screen and (max-width:608px){.btn-bar{flex-direction:column;margin-top:20px}.topnav{margin-bottom:5px;width:-webkit-fill-available}.topnav a{padding:5px 20px}.topnav a:not(.active){display:none}.topnav a.icon{display:block;float:right}.topnav a:hover{background-color:hsla(0,0%,87%,0);color:#5a5a5a}.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{display:block;float:none;text-align:left}.hide-tiny{display:none}}@media screen and (max-width:479px){h1{font-size:30px}.body{padding-left:2px;padding-right:2px}.heading-2{margin-top:10px}.form,.heading-2{padding-left:0;padding-right:0}.ctn{max-width:100%;padding:0 10px}}</style>
|
|
</head>
|
|
|
|
<body class=body>
|
|
<main id=main-box>
|
|
<header class="ctn header">
|
|
<div class=title>
|
|
<label for="logo-file" class="svg-button">
|
|
<div id=svg-logo title='Click to upload your logo file'></div>
|
|
</label>
|
|
<h1 id=name-logo class=heading>AWTRIX Light</h1>
|
|
<h1 id=version class=heading></h1>
|
|
</div>
|
|
<div class=topnav id=top-nav>
|
|
<span id="nav-link">
|
|
<a id=set-wifi class="a-link active" data-box="wifi-box">WiFi Setup</a>
|
|
</span>
|
|
<a id=about target=_blank rel=noopener href=./edit>Files</a>
|
|
<a id=about target=_blank rel=noopener href=./update>Update</a>
|
|
<a class="a-link icon" id=hum-btn>
|
|
<div class=svg style=margin:-2px>
|
|
<svg id=svg-menu fill=currentColor viewBox="0 0 20 18"></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<div id=wifi-box class="ctn opt-box">
|
|
<h2 class=heading-2>Connect to WiFi</h2>
|
|
<div id=wifi-table class=hide>
|
|
<table class=table>
|
|
<tbody id=wifi-list></tbody>
|
|
</table>
|
|
<br>
|
|
</div>
|
|
<div class=wifi-connect>
|
|
<form class=form>
|
|
<div class=tf-wrapper>
|
|
<label for=ssid class=input-label>SSID</label>
|
|
<input type=text placeholder="Enter your WiFI SSID name" id="ssid" />
|
|
</div>
|
|
<div class=tf-wrapper>
|
|
<label for=password class=input-label>Password</label>
|
|
<div class=show-hide-wrap id=show-hide-password>
|
|
<a class="show-hide w--current" id=show-pass>
|
|
<div class=svg><svg class=svg-e id=svg-eye viewBox="0 0 24 24"></svg></div>
|
|
</a>
|
|
<a class="show-hide" id=hide-pass>
|
|
<div class=svg><svg class=svg-e id=svg-no-eye viewBox="0 0 24 24"></svg></div>
|
|
</a>
|
|
</div>
|
|
<input type=password placeholder="Enter your WiFi password" id=password
|
|
autocomplete=current-password data-ms-member="password" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="btn-bar ">
|
|
<label class="toggle lbl-wifi">
|
|
<hr>
|
|
<span class=toggle-label>Store WiFi credentials</span>
|
|
<input id=persistent type=checkbox class="t-check" checked>
|
|
<div class=toggle-switch></div>
|
|
</label>
|
|
<a id=scan-wifi class="btn">
|
|
<div class=svg><svg id=svg-scan fill=currentColor viewBox="0 0 24 24"></svg></div>
|
|
<span>Scan WiFi networks</span>
|
|
</a>
|
|
<a id=connect-wifi class="btn">
|
|
<div class=svg><svg id=svg-connect fill=currentColor viewBox="0 0 24 24"></svg></div>
|
|
<span>Connect to <span id=ssid-name>SSID</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id=btn-box class="btn-bar hide">
|
|
<label class="toggle">
|
|
<hr>
|
|
</label>
|
|
<a id=restart class="btn">
|
|
<div class=svg><svg id=svg-restart fill=currentColor viewBox="0 0 24 24"></svg></div>
|
|
<span>Restart ESP</span>
|
|
</a>
|
|
<a id=save-params class="btn">
|
|
<div class=svg><svg id=svg-save fill=currentColor viewBox="0 0 24 24"></svg></div>
|
|
<span>Save configuration</span>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
<div class="loader hide" id=loader>Loading...</div>
|
|
<details id=modal-message>
|
|
<summary></summary>
|
|
<div class=d-modal>
|
|
<a onclick=closeModalMessage()>
|
|
<div class=d-modal-close>
|
|
<svg id=close-modal width=14 height=14 viewBox="0 0 14 14" fill=none></svg>
|
|
</div>
|
|
</a>
|
|
<div class=d-modal-title>
|
|
<h2 id=message-title></h2>
|
|
</div>
|
|
<div class=d-modal-content>
|
|
<p id=message-body></p>
|
|
</div>
|
|
<div class=btn-bar>
|
|
<a id=ok-modal class="btn hide" onclick=closeModalMessage(true)><span>OK</span></a>
|
|
<a id=close-modal class="btn" onclick=closeModalMessage(false)><span>Close</span></a>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<script>svgLogo='<svg width=64px height=64px viewBox="0 0 28 28"><path d="M12.926 19.324a7.6 7.6 0 0 0-2.983-6.754 7.44 7.44 0 0 0-3.828-1.554.697.697 0 0 1-.606-.731.674.674 0 0 1 .743-.617 8.97 8.97 0 0 1 8 9.805 7.828 7.828 0 0 1-.298 1.542l1.989.56a11.039 11.039 0 0 0 1.714-.651 12.159 12.159 0 0 0 .217-2.343A12.57 12.57 0 0 0 7.212 6.171a5.53 5.53 0 0 0-2 0 4.354 4.354 0 0 0-2.16 1.337 4.274 4.274 0 0 0 1.909 6.856 9.896 9.896 0 0 0 1.074.195 4.011 4.011 0 0 1 3.337 3.954 3.965 3.965 0 0 1-.64 2.16l1.371.88a10.182 10.182 0 0 0 2.057.342 7.52 7.52 0 0 0 .754-2.628m.16 4.73A13.073 13.073 0 0 1 .001 10.983 12.982 12.982 0 0 1 3.83 1.737l.743.697a12.067 12.067 0 0 0 0 17.141 12.067 12.067 0 0 0 17.141 0l.697.697a12.97 12.97 0 0 1-9.336 3.726M24 10.993A10.993 10.993 0 0 0 12.949 0l-1.143.057-.252.732a18.912 18.912 0 0 1 11.588 11.576l.731-.263c0-.366.069-.732.069-1.143m-1.269 5.165A17.53 17.53 0 0 0 7.818 1.27a11.119 11.119 0 0 0-2.457 1.77v1.635A13.919 13.919 0 0 1 19.268 18.57h1.634a11.713 11.713 0 0 0 1.771-2.446M7.92 17.884a1.691 1.691 0 1 1-1.69-1.691 1.691 1.691 0 0 1 1.69 1.691" /></svg>';const svgMenu='<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>',svgLock='<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>',svgUnlock='<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m80 224c-8.832031 0-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>',svgScan='<path d="M12 12C9.97 12 8.1 12.67 6.6 13.8L4.8 11.4C6.81 9.89 9.3 9 12 9S17.19 9.89 19.2 11.4L18.74 12C18.66 12 18.58 12 18.5 12C17.43 12 16.42 12.26 15.53 12.72C14.45 12.26 13.26 12 12 12M21 9L22.8 6.6C19.79 4.34 16.05 3 12 3S4.21 4.34 1.2 6.6L3 9C5.5 7.12 8.62 6 12 6S18.5 7.12 21 9M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L12.34 20.54C12.13 19.9 12 19.22 12 18.5C12 17.24 12.36 16.08 13 15.08C12.66 15.03 12.33 15 12 15M18 14.5C15.79 14.5 14 16.29 14 18.5S15.79 22.5 18 22.5C19.68 22.5 21.12 21.47 21.71 20H20C19.54 20.61 18.82 21 18 21C16.62 21 15.5 19.88 15.5 18.5S16.62 16 18 16C18.69 16 19.32 16.28 19.77 16.73L18 18.5H22V14.5L20.83 15.67C20.11 14.95 19.11 14.5 18 14.5Z" />',svgConnect='<path d="M12 6C8.62 6 5.5 7.12 3 9L1.2 6.6C4.21 4.34 7.95 3 12 3S19.79 4.34 22.8 6.6L21 9C18.5 7.12 15.38 6 12 6M16.84 13.41C17.18 13.27 17.55 13.17 17.92 13.1L19.2 11.4C17.19 9.89 14.7 9 12 9S6.81 9.89 4.8 11.4L6.6 13.8C8.1 12.67 9.97 12 12 12C13.78 12 15.44 12.5 16.84 13.41M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L13.04 19.61C13 19.41 13 19.21 13 19C13 17.66 13.44 16.43 14.19 15.43C13.5 15.16 12.77 15 12 15M23 19L20 16V18H16V20H20V22L23 19Z" />',svgSave='<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />',svgRestart='<path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" />',svgEye='<path d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z" />',svgNoEye='<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>',svgCloseModal='<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />';var options={},$=function(e){return document.getElementById(e)};function showHidePassword(){var e=$("password");openModalMessage("Restart!","<br>ESP restarted. Please wait a little and then reload this page.<br>"),"password"===e.type?(e.type="text",$("show-pass").classList.remove("w--current"),$("hide-pass").classList.add("w--current")):(e.type="password",$("show-pass").classList.add("w--current"),$("hide-pass").classList.remove("w--current"))}function getWiFiList(){$("loader").classList.remove("hide");var e=new URL(`http://${window.location.hostname}/scan`);fetch(e).then((e=>e.json())).then((e=>{listWifiNetworks(e),$("loader").classList.add("hide")}))}function selectWifi(e){try{$("select-"+e.target.parentNode.id).checked=!0}catch(t){$(e.target.id).checked=!0}$("ssid").value=this.cells[1].innerHTML,$("ssid-name").innerHTML=this.cells[1].innerHTML,$("password").focus()}function listWifiNetworks(e){const t=document.querySelector("#wifi-list");t.innerHTML="",e.forEach(((e,s)=>{var a=document.createElement("tr"),n="wifi-"+s;a.id=n,a.addEventListener("click",selectWifi),a.innerHTML=`<td><input type="radio" name="select" id="select-${n}"></td>`,a.innerHTML+=`<td id="ssid-${n}">${e.ssid}</td>`,a.innerHTML+='<td class="hide-tiny">'+e.strength+" dBm</td>",e.security?a.innerHTML+="<td>"+svgLock+"</td>":a.innerHTML+="<td>"+svgUnlock+"</td>",t.appendChild(a)})),$("wifi-table").classList.remove("hide")}function getParameters(){$("loader").classList.remove("hide");var e=new URL(`http://${window.location.hostname}/config.json`);fetch(e).then((e=>e.json())).then((e=>{Object.keys(e).forEach((function(t){t.startsWith("logo-name")&&($("name-logo").innerHTML=e[t],delete e[t]),t.startsWith("logo-svg")&&($("svg-logo").innerHTML=e[t],delete e[t]),$("loader").classList.add("hide")})),listParameters(options=e),options["logo-file-hidden"]&&(svgLogo="",$("svg-logo").innerHTML='<img class=logo src="'+options["logo-file-hidden"]+'"/>',$("svg-logo").setAttribute("title",""),$("logo-file").setAttribute("type","number"))}))}function createNewBox(e,t){var s=document.createElement("div");s.setAttribute("id","option-box"+e),s.classList.add("ctn","opt-box","hide");var a=document.createElement("h2");a.classList.add("heading-2"),a.innerHTML=t,s.appendChild(a);var n=document.createElement("form");n.classList.add("form"),s.appendChild(n),$("main-box").appendChild(s);var i=document.createElement("a");return i.setAttribute("id","set-opt"+e),i.setAttribute("data-box","option-box"+e),i.classList.add("a-link"),i.innerHTML=t,i.addEventListener("click",switchPage),$("nav-link").appendChild(i),n}function listParameters(e){var t,s;Object.keys(e)[0].startsWith("param-box")||(e={"param-box1":"Options",...e},options=e),Object.entries(e).forEach((([e,a],n)=>{if(e.startsWith("name-logo"))$("name-logo").innerHTML=a;else if(!e.startsWith("logo-file"))if(e.startsWith("param-box"))s=createNewBox(n,a);else{if(e.startsWith("raw-css")){var i=document.createElement("style");return i.innerHTML=a.trim(),void document.body.appendChild(i)}if(e.startsWith("raw-javascript")){var o=document.createElement("script");return o.innerHTML=a.trim(),void document.body.appendChild(o)}if(e.startsWith("raw-html"))html=a.trim(),(t=document.createElement("div")).setAttribute("id","row"+n),t.style.width="100%",t.innerHTML=html,s.appendChild(t);else{let n=a,i=document.createElement("label");if((t=document.createElement("input")).setAttribute("id",e),t.setAttribute("type","text"),"boolean"==typeof n){t.setAttribute("type","checkbox"),t.classList.add("t-check","opt-input"),t.checked=n,i.classList.add("input-label","toggle");let a=document.createElement("div");a.classList.add("toggle-switch");let o=document.createElement("span");o.classList.add("toggle-label"),o.textContent=e,i.appendChild(t),i.appendChild(a),i.appendChild(o),s.appendChild(i),addInputListener(t)}else{if(t.value=n,t.classList.add("opt-input"),i.setAttribute("label-for",e),i.classList.add("input-label"),i.textContent=e,"number"==typeof n&&t.setAttribute("type","number"),"object"==typeof n)if(n.values)(t=document.createElement("select")).setAttribute("id",e),n.values.forEach((e=>{var s=document.createElement("option");s.textContent=e,s.value=e,t.appendChild(s)})),t.value=n.selected,s.appendChild(t);else{var d=Math.round(n.value*(1/n.step))/(1/n.step);t.setAttribute("type","number"),t.setAttribute("step",n.step),t.setAttribute("min",n.min),t.setAttribute("max",n.max),t.value=Number(d).toFixed(3)}addInputListener(t);var r=document.createElement("div");r.classList.add("tf-wrapper"),r.appendChild(i),r.appendChild(t),s.appendChild(r)}}e.endsWith("-hidden")&&t.classList.add("hide")}}))}function addInputListener(e){"number"!==e.type?"text"!==e.type?"checkbox"!==e.type?"select-one"!==e.type||e.addEventListener("change",(e=>{options[e.target.id].selected=e.target.value})):e.addEventListener("change",(()=>{options[e.id]=e.checked})):e.addEventListener("change",(()=>{options[e.id]=e.value})):e.addEventListener("change",(()=>{if(e.getAttribute("step")){var t={};t.value=Math.round(e.value*(1/e.step))/(1/e.step),t.step=e.getAttribute("step"),t.min=e.getAttribute("min"),t.max=e.getAttribute("max"),options[e.id]=t}else options[e.id]=parseInt(e.value)}))}function saveParameters(){var e=new Blob([JSON.stringify(options,null,2)],{type:"application/json"}),t=new FormData;t.append("data",e,"/config.json"),fetch("/edit",{method:"POST",body:t}).then((e=>e.text())).then((e=>{openModalMessage("Save options","Settings saved successfully on flash memory!<br><br>")})),fetch("/save").then((e=>e.text())).then((e=>{})).catch((e=>{}))}function doConnection(){var e=new FormData;e.append("ssid",$("ssid").value),e.append("password",$("password").value),e.append("persistent",$("persistent").checked);var t={method:"POST",body:e,redirect:"follow"};$("loader").classList.remove("hide"),fetch("/connect",t).then((function(e){return httpCode=e.status,e.text()})).then((function(e){200===httpCode?openModalMessage("Connected","AWTRTIX will restart now <br> Your new IP is "+e):openModalMessage("Error!","<br>Error on connection: <b>"+e+"</b><br><br>"),$("loader").classList.add("hide")}))}function switchPage(e){if($("top-nav").classList.remove("responsive"),document.querySelectorAll("a").forEach((e=>{e.classList.remove("active")})),e.target.classList.add("active"),document.querySelectorAll(".opt-box").forEach((e=>{e.classList.add("hide")})),$(e.target.getAttribute("data-box")).classList.remove("hide"),"set-wifi"!=e.target.id){var t=document.createDocumentFragment();t.appendChild($("btn-box")),$(e.target.getAttribute("data-box")).appendChild(t),$("btn-box").classList.remove("hide")}else $("btn-box").classList.add("hide")}function showMenu(){$("top-nav").classList.add("responsive")}var closeCallback=function(){};function openModalMessage(e,t,s){$("message-title").innerHTML=e,$("message-body").innerHTML=t,$("modal-message").open=!0,$("main-box").style.filter="blur(3px)",void 0!==s?(closeCallback=s,$("ok-modal").classList.remove("hide")):$("ok-modal").classList.add("hide")}function closeModalMessage(e){$("modal-message").open=!1,$("main-box").style.filter="",void 0!==closeCallback&&e&&closeCallback()}function restartESP(){var e=new URL(`http://${window.location.hostname}/restart`);fetch(e).then((e=>e.text())).then((e=>{closeModalMessage(),openModalMessage("Restart!","<br>ESP restarted. Please wait a little and then reload this page.<br>")}))}function uploadLogo(){var e=$("logo-file").files[0],t=new FileReader;t.onload=async()=>{const t=new FormData;t.append("image",e);try{await fetch("/edit",{method:"POST",body:t});options={...options,"logo-file-hidden":e.name},saveParameters()}catch(e){console.error(e)}},t.readAsDataURL(e)}$("svg-menu").innerHTML=svgMenu,$("svg-eye").innerHTML=svgEye,$("svg-no-eye").innerHTML=svgNoEye,$("svg-scan").innerHTML=svgScan,$("svg-connect").innerHTML=svgConnect,$("svg-save").innerHTML=svgSave,$("svg-restart").innerHTML=svgRestart,$("close-modal").innerHTML=svgCloseModal,$("svg-logo").innerHTML=svgLogo,$("svg-logo").setAttribute("title","Click to upload your logo file"),$("hum-btn").addEventListener("click",showMenu),$("scan-wifi").addEventListener("click",getWiFiList),$("connect-wifi").addEventListener("click",doConnection),$("save-params").addEventListener("click",saveParameters),$("show-hide-password").addEventListener("click",showHidePassword),$("set-wifi").addEventListener("click",switchPage),$("about").addEventListener("click",switchPage),$("restart").addEventListener("click",restartESP),window.addEventListener("load",getParameters),$("connect-wifi").disabled=!0,$("password").addEventListener("input",(e=>{0===$("password").value.length?$("connect-wifi").disabled=!0:$("connect-wifi").disabled=!1}));</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const versionElement = document.getElementById('version');
|
|
fetch('/version')
|
|
.then(response => response.text())
|
|
.then(version => {
|
|
versionElement.textContent = version;
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Abrufen der Version:', error);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |