index.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WDKL NET BRIDGE</title>
  6. </head>
  7. <style>
  8. fieldset{
  9. margin-top: 30px;
  10. border-radius: 15px;
  11. border: 1px solid #ccc;
  12. }
  13. label{
  14. display: inline-block;
  15. width: 100px;
  16. text-align: right;
  17. margin-right: 30px;
  18. }
  19. input{
  20. margin-top: 10px;
  21. }
  22. input[type=submit] {
  23. margin-left: 10%;
  24. width: 200px;
  25. background-color: #4CAF50;
  26. color: white;
  27. padding: 14px 20px;
  28. margin: 8px 0;
  29. border: none;
  30. border-radius: 4px;
  31. cursor: pointer;
  32. }
  33. input[type=submit]:hover {
  34. background-color: #45a049;
  35. }
  36. </style>
  37. <body>
  38. <div>
  39. <h1>WDKL NET BRIDGE</h1>
  40. <p>mac : %s</p>
  41. </div>
  42. <form action="/setting" method="POST" onsubmit="return validate();">
  43. <fieldset>
  44. <legend>DEVICE</legend>
  45. <label>DHCP?</label>
  46. YES<input onclick="ipSetting(false);" type="radio" name="dhcp" value="1" style="margin-right: 1rem;" checked>
  47. NO<input onclick="ipSetting(true);" type="radio" name="dhcp" value="0">
  48. <br>
  49. <div id="ip_panel" style="display: none;">
  50. <label>IP</label>
  51. <input type="text" name="ip" id="ip" value="%s">
  52. <br>
  53. <label>NETMASK</label>
  54. <input type="text" name="netmask" id="netmask" value="%s">
  55. <br>
  56. <label>GATEWAY</label>
  57. <input type="text" name="gateway" id="gateway" value="%s">
  58. <br>
  59. <label>DNS1</label>
  60. <input type="text" name="dns1" id="dns1" value="%s">
  61. <br>
  62. <label>DNS2</label>
  63. <input type="text" name="dns2" id="dns2" value="%s">
  64. </div>
  65. </fieldset>
  66. <fieldset>
  67. <legend>SERVER</legend>
  68. <label>SERVER IP</label>
  69. <input type="text" name="server_ip" id="server_ip" value="%s">
  70. </fieldset>
  71. <fieldset>
  72. <legend>WIFI</legend>
  73. <label>WIFI NAME</label>
  74. <input type="text" name="wifi_name" id="wifi_name" value="%s">
  75. <label>WIFI PW</label>
  76. <input type="text" name="wifi_pw" id="wifi_pw" value="%s">
  77. </fieldset>
  78. <fieldset>
  79. <legend>WIFI DHCP</legend>
  80. <label>WIFI DHCP?</label>
  81. YES<input onclick="wifiIpSetting(false);" type="radio" name="wifi_dhcp" value="1" style="margin-right: 1rem;" checked>
  82. NO<input onclick="wifiIpSetting(true);" type="radio" name="wifi_dhcp" value="0">
  83. <br>
  84. <div id="wifi_ip_panel" style="display: none;">
  85. <label>IP</label>
  86. <input type="text" name="wifi_ip" id="wifi_ip" value="%s">
  87. <br>
  88. <label>NETMASK</label>
  89. <input type="text" name="wifi_netmask" id="wifi_netmask" value="%s">
  90. <br>
  91. <label>GATEWAY</label>
  92. <input type="text" name="wifi_gateway" id="wifi_gateway" value="%s">
  93. <br>
  94. <label>DNS1</label>
  95. <input type="text" name="wifi_dns1" id="wifi_dns1" value="%s">
  96. <br>
  97. <label>DNS2</label>
  98. <input type="text" name="wifi_dns2" id="wifi_dns2" value="%s">
  99. </div>
  100. </fieldset>
  101. <input type="submit" value="submit">
  102. </form>
  103. <script>
  104. function ipSetting(show){
  105. console.log("xxx" + show);
  106. document.getElementById("ip_panel").style.display = show?"block":"none";
  107. }
  108. function wifiIpSetting(show){
  109. console.log("xxx" + show);
  110. document.getElementById("wifi_ip_panel").style.display = show?"block":"none";
  111. }
  112. function validate() {
  113. console.log(document.getElementById("ip_panel").style.display);
  114. var regexIP = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/;
  115. var regexNetmask = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;
  116. var ip = document.getElementById("ip").value;
  117. var netmask = document.getElementById("netmask").value;
  118. var gateway = document.getElementById("gateway").value;
  119. var dns1 = document.getElementById("dns1").value;
  120. var dns2 = document.getElementById("dns2").value;
  121. var server_ip = document.getElementById("server_ip").value;
  122. var wifi_name = document.getElementById("wifi_name").value;
  123. var wifi_pw = document.getElementById("wifi_pw").value;
  124. var wifi_ip = document.getElementById("wifi_ip").value;
  125. var wifi_netmask = document.getElementById("wifi_netmask").value;
  126. var wifi_gateway = document.getElementById("wifi_gateway").value;
  127. var wifi_dns1 = document.getElementById("wifi_dns1").value;
  128. var wifi_dns2 = document.getElementById("wifi_dns2").value;
  129. if (server_ip == ""){
  130. alert("server_ip must input");
  131. document.getElementById("server_ip").focus();
  132. return false;
  133. }
  134. if (!regexIP.test(server_ip)){
  135. alert("server_ip wrong input");
  136. document.getElementById("server_ip").focus();
  137. return false;
  138. }
  139. if (document.getElementById("ip_panel").style.display != "none") {
  140. if (ip == ""){
  141. alert("ip must input");
  142. document.getElementById("ip").focus();
  143. return false;
  144. } else if (netmask == ""){
  145. alert("netmask must input");
  146. document.getElementById("netmask").focus();
  147. return false;
  148. } else if (gateway == ""){
  149. alert("gateway must input");
  150. document.getElementById("gateway").focus();
  151. return false;
  152. }
  153. if (!regexIP.test(ip)){
  154. alert("ip wrong input");
  155. document.getElementById("ip").focus();
  156. return false;
  157. } else if (!regexNetmask.test(netmask)){
  158. alert("netmask wrong input");
  159. document.getElementById("netmask").focus();
  160. return false;
  161. } else if (!regexIP.test(gateway)){
  162. alert("gateway wrong input");
  163. document.getElementById("gateway").focus();
  164. return false;
  165. } else if (dns1!="" && !regexIP.test(dns1)){
  166. alert("dns1 wrong input");
  167. document.getElementById("dns1").focus();
  168. return false;
  169. } else if (dns2!="" && !regexIP.test(dns2)){
  170. alert("dns2 wrong input");
  171. document.getElementById("dns2").focus();
  172. return false;
  173. }
  174. }
  175. if (document.getElementById("wifi_ip_panel").style.display != "none") {
  176. if (wifi_ip == ""){
  177. alert("wifi ip must input");
  178. document.getElementById("wifi_ip").focus();
  179. return false;
  180. } else if (wifi_netmask == ""){
  181. alert("wifi netmask must input");
  182. document.getElementById("wifi_netmask").focus();
  183. return false;
  184. } else if (wifi_gateway == ""){
  185. alert("wifi gateway must input");
  186. document.getElementById("wifi_gateway").focus();
  187. return false;
  188. }
  189. if (!regexIP.test(wifi_ip)){
  190. alert("wifi ip wrong input");
  191. document.getElementById("wifi_ip").focus();
  192. return false;
  193. } else if (!regexNetmask.test(wifi_netmask)){
  194. alert("wifi netmask wrong input");
  195. document.getElementById("wifi_netmask").focus();
  196. return false;
  197. } else if (!regexIP.test(wifi_gateway)){
  198. alert("wifi gateway wrong input");
  199. document.getElementById("wifi_gateway").focus();
  200. return false;
  201. } else if (wifi_dns1!="" && !regexIP.test(wifi_dns1)){
  202. alert("wifi dns1 wrong input");
  203. document.getElementById("wifi_dns1").focus();
  204. return false;
  205. } else if (wifi_dns2!="" && !regexIP.test(wifi_dns2)){
  206. alert("wifi dns2 wrong input");
  207. document.getElementById("wifi_dns2").focus();
  208. return false;
  209. }
  210. }
  211. return true;
  212. }
  213. </script>
  214. </body>
  215. </html>