<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="function.js"></script>
<title>ESP-NOW Switch</title>
</head>
<body onload="load();">
<form class="box">
<h1>ESP-NOW Switch </h1>
<div class="wrapper">
<p class="text">Firmware:</p>
<p class="text" id="version"></p>
<input id="firmware" value="{{firmware}}" hidden />
</div>
<div class="wrapper">
<p class="text">Device name:</p>
<input id="deviceName" value="{{deviceName}}" placeholder="Name" autocomplete="off" label
title="ESP-NOW device name (up to 150 characters)" />
</div>
<div class="wrapper">
<p class="text">ESP-NOW network name:</p>
<input id="espnowNetName" value="{{espnowNetName}}" placeholder="Name" autocomplete="off" label
title="ESP-NOW network name (1 to 20 characters)" />
</div>
<div class="wrapper">
<p class="text-select">Work mode:</p>
<input id="workMode" value="{{workMode}}" hidden />
<p><select id="workModeSelect">
<option value="0">NORMAL</option>
<option value="1">REVERSE</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Relay GPIO:</p>
<input id="relayPin" value="{{relayPin}}" hidden />
<input id="relayPinType" value="{{relayPinType}}" hidden />
<p><select id="relayPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
<p><select id="relayPinTypeSelect">
<option value="1">HIGH</option>
<option value="0">LOW</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Led GPIO:</p>
<input id="ledPin" value="{{ledPin}}" hidden />
<input id="ledPinType" value="{{ledPinType}}" hidden />
<p><select id="ledPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
<p><select id="ledPinTypeSelect">
<option value="1">HIGH</option>
<option value="0">LOW</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Button GPIO:</p>
<input id="buttonPin" value="{{buttonPin}}" hidden />
<input id="buttonPinType" value="{{buttonPinType}}" hidden />
<p><select id="buttonPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
<p><select id="buttonPinTypeSelect">
<option value="1">RISING</option>
<option value="0">FALLING</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Ext button GPIO:</p>
<input id="extButtonPin" value="{{extButtonPin}}" hidden />
<input id="extButtonPinType" value="{{extButtonPinType}}" hidden />
<p><select id="extButtonPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
<p><select id="extButtonPinTypeSelect">
<option value="1">RISING</option>
<option value="0">FALLING</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Ext sensor GPIO:</p>
<input id="sensorPin" value="{{sensorPin}}" hidden />
<input id="sensorType" value="{{sensorType}}" hidden />
<p><select id="sensorPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
<p><select id="sensorTypeSelect">
<option value="0">NONE</option>
<option value="1">DS18B20</option>
<option value="2">DHT11</option>
<option value="3">DHT22</option>
</select></p>
</div>
<div class="wrapper">
<input class="btn" type="submit" value="Save" onclick="saveSetting(this);">
<input class="btn" type="submit" value="Restart" onclick="restart(this);">
</div>
</form>
</body>
</html>