See espterm.github.io

cfg_network.html 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
  7. <title>Network Settings :: ESPTerm</title>
  8. <link href="/css/app.8b43b1d-en.css" rel="stylesheet">
  9. <script src="/js/app.8b43b1d-en.js"></script>
  10. <script>
  11. var _root = location.host;
  12. var _demo = 1;
  13. </script>
  14. </head>
  15. <body class="cfg">
  16. <div id="outer">
  17. <nav id="menu">
  18. <div id="brand" tabindex=0>ESPTerm<sup> DEMO</sup></div>
  19. <a href="term.html" class="icn-back">Back to Terminal</a>
  20. <a href="cfg_term.html" class="icn-terminal ">Terminal Settings</a><a href="cfg_wifi.html" class="icn-wifi ">WiFi Settings</a><a href="cfg_network.html" class="icn-network selected">Network Settings</a><a href="cfg_system.html" class="icn-configure ">System Settings</a><a href="help.html" class="icn-help ">Quick Reference</a><a href="about.html" class="icn-about ">About ESPTerm</a></nav>
  21. <div id="content">
  22. <img src="/img/loader.gif" alt="Loading…" id="loader">
  23. <h1>Network Settings</h1>
  24. <div class="Box errors hidden">
  25. <span class="lead">Validation errors for:</span>&nbsp;<span class="list"></span>
  26. </div>
  27. <div class="Box message hidden"></div>
  28. <div class="Box errmessage hidden"></div>
  29. <!-- STA -->
  30. <form class="Box str mobcol" action="network_set.html" method="GET" id="form-netsta">
  31. <h2 tabindex=0>DHCP Client (Station)</h2>
  32. <div class="Row explain">
  33. Switch off Dynamic IP to configure the static IP address. </div>
  34. <div class="Row checkbox x-static-toggle" >
  35. <label>Use dynamic IP</label><!--
  36. --><span class="box" tabindex=0 role=checkbox></span>
  37. <input type="hidden" id="sta_dhcp_enable" name="sta_dhcp_enable" value="1">
  38. </div>
  39. <div class="Row x-static">
  40. <label for="sta_addr_ip">ESPTerm static IP</label>
  41. <input type="text" name="sta_addr_ip" id="sta_addr_ip" value="192.168.0.33" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  42. </div>
  43. <div class="Row x-static">
  44. <label for="sta_addr_mask">Subnet mask</label>
  45. <input type="text" name="sta_addr_mask" id="sta_addr_mask" value="255.255.255.0" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  46. </div>
  47. <div class="Row x-static">
  48. <label for="sta_addr_gw">Gateway IP</label>
  49. <input type="text" name="sta_addr_gw" id="sta_addr_gw" value="192.168.0.1" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  50. </div>
  51. <div class="Row buttons">
  52. <a class="button icn-ok" href="#" onclick="qs('#form-netsta').submit()">Apply!</a>
  53. </div>
  54. </form>
  55. <!-- AP -->
  56. <form class="Box str mobcol" action="network_set.html" method="GET" id="form-netap">
  57. <h2 tabindex=0>DHCP Server (AP)</h2>
  58. <div class="Row explain">
  59. Those settings affect the built-in DHCP server in AP mode. </div>
  60. <div class="Row">
  61. <label for="ap_addr_mask">Subnet mask</label>
  62. <input type="text" name="ap_addr_mask" id="ap_addr_mask" value="255.255.255.0" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  63. </div>
  64. <div class="Row">
  65. <label for="ap_addr_ip">Own IP address</label>
  66. <input type="text" name="ap_addr_ip" id="ap_addr_ip" value="192.168.4.1" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  67. </div>
  68. <div class="Row">
  69. <label for="ap_dhcp_start">Pool start IP</label>
  70. <input type="text" name="ap_dhcp_start" id="ap_dhcp_start" value="192.168.4.100" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  71. </div>
  72. <div class="Row">
  73. <label for="ap_dhcp_end">Pool end IP</label>
  74. <input type="text" name="ap_dhcp_end" id="ap_dhcp_end" value="192.168.4.200" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" required>
  75. </div>
  76. <div class="Row">
  77. <label for="ap_dhcp_time">Lease time<span class="mq-phone">&nbsp;(min)</span></label>
  78. <input type="number" step=1 min=1 max=2880 name="ap_dhcp_time" id="ap_dhcp_time" value="120" required>
  79. <span class="mq-no-phone">&nbsp;min</span>
  80. </div>
  81. <div class="Row buttons">
  82. <a class="button icn-ok" href="#" onclick="qs('#form-netap').submit()">Apply!</a>
  83. </div>
  84. </form>
  85. <!-- MACs -->
  86. <div class="Box mobcol">
  87. <h2>MAC addresses</h2>
  88. <div class="Row">
  89. <label>Station MAC</label><input type="text" readonly value="5c:cf:7f:02:74:51">
  90. </div>
  91. <div class="Row">
  92. <label>AP MAC</label><input type="text" readonly value="5e:cf:7f:02:74:51">
  93. </div>
  94. </div>
  95. <script>
  96. function updateStaticDisp() {
  97. var sttc = !parseInt($('#sta_dhcp_enable').val());
  98. $('.x-static').toggleClass('hidden', !sttc);
  99. }
  100. $('.x-static-toggle').on('click', function() {
  101. setTimeout(function() {
  102. updateStaticDisp();
  103. }, 0)
  104. });
  105. updateStaticDisp();
  106. </script>
  107. <div class="botpad"></div>
  108. <div class="NotifyMsg hidden" id="notif"></div>
  109. </div>
  110. </div>
  111. </body>
  112. </html>