Home Explore Help
Register Sign In
IHOLL
/
squeezelite-esp32
mirror of https://github.com/sle118/squeezelite-esp32
2
0
Fork 0
Files Issues 0 Wiki
Branch: master
Branches Tags
squeezelite-esp...
/
components
/
wifi-manager
/
index.html

index.html 25 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8"/>
    5. 

  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    6. 

  6.         <meta name="apple-mobile-web-app-capable" content="yes" />
    7. 

  7.         <link rel="stylesheet" href="/bootstrap.css">
    8. 

  8.         <link rel="stylesheet" href="res/test/bootstrap.min.css"> <!-- TODO delete -->
    9. 

  9.         <link rel="stylesheet" href="/style.css">
    10. 

  10.         <script src="/jquery.js"></script>
    11. 

  11.         <script src="/popper.js"></script>
    12. 

  12.         <script src="/bootstrap.js"></script>
    13. 

  13. 

  14.         <script src="res/test/jquery.min.js"></script> <!-- TODO delete -->
    15. 

  15.         <script src="res/test/popper.min.js"></script> <!-- TODO delete -->
    16. 

  16.         <script src="res/test/bootstrap.min.js"></script> <!-- TODO delete -->
    17. 

  17. 

  18.         <script src="/code.js"></script>
    19. 

  19. 

  20. 

  21.         <title>esp32-wifi-manager</title>
    22. 

  22.     </head>
    23. 

  23. 

  24.     <body>
    25. 

  25.         <div id="info">
    26. 

  26.             <svg xmlns="http://www.w3.org/2000/svg" id="jack" width="24" height="24" viewBox="0 0 24 24">
    27. 

  27.                 <g id="o_jack" display="none">
    28. 

  28.                 <path d="m 16.074253,15.636738 v -1.05413 h 5.893274 c 1.16249,0 2.108261,-0.855111 2.108261,-1.906183 0,-1.051073 -0.945771,-1.906236 -2.108261,-1.906236 H 16.074253 V 9.7160604 c 0,-0.5812492 -0.472879,-1.0541321 -1.054131,-1.0541321 H 6.7847349 c -1.256731,0 -2.301908,0.9212057 -2.496867,2.1237027 h -0.451896 c -0.540407,0 -1.001317,0.349129 -1.173459,0.835611 H 0.47312787 c -0.23285,0 -0.42164599,0.188794 -0.42164599,0.421651 v 1.251779 c 0,0.232857 0.18879599,0.421652 0.42164599,0.421652 H 2.6550809 c 0.165919,0.497866 0.632365,0.857588 1.180831,0.857588 h 0.45312 c 0.19781,1.199177 1.241345,2.116956 2.495659,2.116956 h 8.2353861 c 0.581297,0 1.054176,-0.472883 1.054176,-1.05413 z m 5.060935,-4.023245 v 2.125811 h -0.844935 v -2.125811 z m 2.097293,1.062932 c 0,0.582933 -0.561524,1.057661 -1.253986,1.062668 v -2.125337 c 0.692462,0.0049 1.253986,0.47963 1.253986,1.062669 z m -3.785535,-1.062932 v 2.125811 h -3.372693 v -2.125811 z m -18.55215712,0.851 H 2.5901939 v 0.408475 H 0.89478888 Z m 2.94118302,1.266114 c -0.221897,0 -0.40247,-0.185737 -0.40247,-0.414062 v -1.273547 c 0,-0.228271 0.180573,-0.41401 0.40247,-0.41401 h 0.418855 v 2.101671 h -0.418855 z m 2.948763,2.116956 c -0.929997,0 -1.6866,-0.756601 -1.6866,-1.686608 v -0.0087 -2.944976 -0.01545 c 0,-0.930006 0.756603,-1.6866072 1.6866,-1.6866072 h 8.2353871 c 0.114313,0 0.210838,0.096554 0.210838,0.2108266 v 5.9206786 c 0,0.114268 -0.09656,0.210824 -0.210838,0.210824 z" />
    29. 

  29.                 </g>
    30. 

  30.             </svg>
    31. 

  31.             
    32. 

  32.             <svg xmlns="http://www.w3.org/2000/svg" id="output" width="24" height="24" viewBox="0 0 24 24">
    33. 

  33.                 <g id="o_i2s" display="none">
    34. 

  34.                 <path d="M2 7L2 8L2 9L2 10L2 11L2 12L2 13L2 14L2 15L2 16L2 17L3 17L3 16L3 15L3 14L3 13L3 12L3 11L3 10L3 9L3 8L2 7M6 7L6 8L6 9L7 9L7 8L8 8L9 8L10 8L10 9L11 9L11 10L11 11L10 11L10 12L9 12L9 13L8 13L8 14L7 14L7 15L6 15L6 16L6 17L7 17L8 17L9 17L10 17L11 17L12 17L12 16L11 16L10 16L9 16L8 16L8 15L9 15L9 14L10 14L10 13L11 13L11 12L12 12L12 11L12 10L12 9L12 8L11 8L11 7L10 7L9 7L8 7L6 7M16 7L16 8L15 8L15 9L15 10L15 11L16 11L16 12L17 12L18 12L18 13L19 13L20 13L21 13L21 14L21 15L20 15L20 16L19 16L18 16L17 16L16 16L16 15L15 15L15 16L15 17L16 17L17 17L18 17L19 17L20 17L21 17L21 16L22 16L22 15L22 14L22 13L21 13L21 12L20 12L20 11L19 11L18 11L17 11L16 11L16 10L16 9L17 9L17 8L18 8L19 8L20 8L21 8L21 9L22 9L22 8L22 7L21 7L20 7L19 7L18 7L16 7z"/>
    35. 

  35.                 </g>
    36. 

  36.                 <g id="o_bt" display="none">
    37. 

  37.                 <path d="M3 7L3 8L3 9L3 10L3 11L3 12L3 13L3 14L3 15L3 16L3 17L4 17L5 17L6 17L7 17L8 17L9 17L9 16L10 16L10 15L10 14L10 13L10 12L9 12L9 11L10 11L10 10L10 9L10 8L9 8L9 7L8 7L7 7L6 7L5 7L3 7M12 7L12 8L13 8L14 8L15 8L16 8L16 9L16 10L16 11L16 12L16 13L16 14L16 15L16 16L16 17L17 17L17 16L17 15L17 14L17 13L17 12L17 11L17 10L17 9L17 8L18 8L19 8L20 8L21 8L21 7L20 7L19 7L18 7L17 7L16 7L15 7L14 7L12 7z"/>
    38. 

  38.                 <path style="fill:#272B30;" d="M4 8L4 9L4 10L4 11L5 11L6 11L7 11L8 11L8 10L9 10L9 9L9 8L8 8L7 8L6 8L4 8M4 12L4 13L4 14L4 15L4 16L5 16L6 16L7 16L8 16L8 15L9 15L9 14L9 13L8 13L8 12L7 12L6 12L4 12z"/>
    39. 

  39.                 </g>
    40. 

  40.                 <g id="o_spdif" display="none">
    41. 

  41.                 <path d="M3 1L3 2L2 2L2 3L2 4L2 5L3 5L3 6L4 6L5 6L5 7L6 7L7 7L8 7L8 8L8 9L7 9L7 10L6 10L5 10L4 10L3 10L3 9L2 9L2 10L2 11L3 11L4 11L5 11L6 11L7 11L8 11L8 10L9 10L9 9L9 8L9 7L8 7L8 6L7 6L7 5L6 5L5 5L4 5L3 5L3 4L3 3L4 3L4 2L5 2L6 2L7 2L8 2L8 3L9 3L9 2L9 1L8 1L7 1L6 1L5 1L3 1M13 1L13 2L13 3L13 4L12 4L12 5L12 6L12 7L12 8L11 8L11 9L11 10L11 11L10 11L10 12L10 13L11 13L11 12L11 11L12 11L12 10L12 9L12 8L13 8L13 7L13 6L13 5L14 5L14 4L14 3L14 2L15 2L15 1L13 1M16 1L16 2L16 3L16 4L16 5L16 6L16 7L16 8L16 9L16 10L16 11L17 11L17 10L17 9L17 8L17 7L18 7L19 7L20 7L21 7L21 6L22 6L22 5L22 4L22 3L22 2L21 2L21 1L20 1L19 1L18 1L16 1z"/>
    42. 

  42.                 <path style="fill:#272B30;" d="M17 2L17 3L17 4L17 5L17 6L18 6L19 6L20 6L20 5L21 5L21 4L21 3L20 3L20 2L19 2L17 2z"/>
    43. 

  43.                 <path d="M2 13L2 14L2 15L2 16L2 17L2 18L2 19L2 20L2 21L2 22L2 23L3 23L4 23L5 23L6 23L7 23L8 23L8 22L9 22L9 21L10 21L10 20L10 19L10 18L10 17L10 16L10 15L9 15L9 14L8 14L7 14L7 13L6 13L5 13L4 13L2 13M13 13L13 14L13 15L13 16L13 17L13 18L13 19L13 20L13 21L13 22L13 23L14 23L14 22L14 21L14 20L14 19L14 18L14 17L14 16L14 15L14 14L13 13M17 13L17 14L17 15L17 16L17 17L17 18L17 19L17 20L17 21L17 22L17 23L18 23L18 22L18 21L18 20L18 19L18 18L19 18L20 18L21 18L22 18L22 17L21 17L20 17L19 17L18 17L18 16L18 15L18 14L19 14L20 14L21 14L22 14L22 13L21 13L20 13L19 13L17 13z"/>
    44. 

  44.                 <path style="fill:#272B30;" d="M3 14L3 15L3 16L3 17L3 18L3 19L3 20L3 21L3 22L4 22L5 22L6 22L7 22L7 21L8 21L8 20L9 20L9 19L9 18L9 17L9 16L8 16L8 15L7 15L7 14L6 14L5 14L3 14z"/>
    45. 

  45.                 </g>
    46. 

  46.             </svg>
    47. 

  47. 

  48.             <svg xmlns="http://www.w3.org/2000/svg" id="battery" width="24" height="24" viewBox="0 0 24 24">
    49. 

  49.                 <g id="bat0" display="none">
    50. 

  50.                 <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6z"/>
    51. 

  51.                 </g>
    52. 

  52.                 <g id="bat1" display="none">
    53. 

  53.                 <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6z"/>
    54. 

  54.                 </g>
    55. 

  55.                 <g id="bat2" display="none">
    56. 

  56.                 <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
    57. 

  57.                 </g>
    58. 

  58.                 <g id="bat3" display="none">
    59. 

  59.                 <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
    60. 

  60.                 </g>
    61. 

  61.                 <g id="bat4" display="none">
    62. 

  62.                 <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
    63. 

  63.                 </g>
    64. 

  64.             </svg>
    65. 

  65.         </div>
    66. 

  66.         <ul id="navbar" class="nav nav-tabs">
    67. 

  67.             <li class="nav-item">
    68. 

  68.                 <a class="nav-link active" data-toggle="tab" href="#tab-wifi">WiFi</a>
    69. 

  69.             </li>
    70. 

  70.             <li class="nav-item">
    71. 

  71.                 <a class="nav-link" data-toggle="tab" href="#tab-audio">Audio + LMS</a>
    72. 

  72.             </li>
    73. 

  73.             <li class="nav-item">
    74. 

  74.                 <a class="nav-link" data-toggle="tab" href="#tab-firmware">Firmware</a>
    75. 

  75.             </li>
    76. 

  76.             <li class="nav-item">
    77. 

  77.                 <a class="nav-link" data-toggle="tab" href="#tab-gpio">GPIO</a>
    78. 

  78.             </li>
    79. 

  79.             <li class="nav-item">
    80. 

  80.                 <a class="nav-link" data-toggle="tab" href="#tab-nvs">NVS editor</a>
    81. 

  81.             </li>
    82. 

  82.             <li class="nav-item">
    83. 

  83.                 <a class="nav-link" data-toggle="tab" href="#tab-credits">Credits</a>
    84. 

  84.             </li>
    85. 

  85.         </ul>
    86. 

  86.         <div id="message"></div>
    87. 

  87. 

  88.         <div id="content">
    89. 

  89.             <div id="myTabContent" class="tab-content">
    90. 

  90.                 <div class="tab-pane fade active show" id="tab-wifi">
    91. 

  91.                     <div id="wifi">
    92. 

  92.                         <div id="wifi-status">
    93. 

  93.                             <h2>Connected to:</h2>
    94. 

  94.                             <section id="connected-to">
    95. 

  95.                                 <div class="ape"><div class="w0"><div class="pw"><span></span></div></div></div>
    96. 

  96.                             </section>
    97. 

  97.                         </div>
    98. 

  98.                         <h2>Manual connect</h2>
    99. 

  99.                         <section id="manual_add">
    100. 

  100.                             <div class="ape">ADD (HIDDEN) SSID</div>
    101. 

  101.                         </section>
    102. 

  102.                         <h2>or choose a network...
    103. 

  103.                         <button type="button" id="updateAP" class="btn btn-info btn-sm">Update</button>
    104. 

  104.                         </h2>
    105. 

  105.                         <section id="wifi-list">
    106. 

  106.                         </section>
    107. 

  107.                     </div>
    108. 

  108. 

  109.                     <div id="connect_manual">
    110. 

  110.                         <header>
    111. 

  111.                             <h1>Enter Details</h1>
    112. 

  112.                         </header>
    113. 

  113.                         <h2>DHCP host name</h2>
    114. 

  114.                         <section id="wifi-list">
    115. 

  115.                             <input id="dhcp-name2" type="text" placeholder="" value="squeezeamp">
    116. 

  116.                         </section>
    117. 

  117.                         <h2>Manual Connection</h2>
    118. 

  118.                         <section>
    119. 

  119.                             <input id="manual_ssid" type="text" placeholder="SSID" value="">
    120. 

  120.                             <input id="manual_pwd" type="password" placeholder="Password" value="">
    121. 

  121.                         </section>
    122. 

  122.                         <div class="buttons">
    123. 

  123.                             <input id="manual_join" type="button" class="btn btn-success" value="Join" data-connect="manual" />
    124. 

  124.                             <input id="manual_cancel" type="button" class="btn btn-danger" value="Cancel"/>
    125. 

  125.                         </div>
    126. 

  126.                     </div>
    127. 

  127. 

  128.                     <div id="connect">
    129. 

  129.                         <header>
    130. 

  130.                             <h1>Connect to network</h1>
    131. 

  131.                         </header>
    132. 

  132.                         <h2>DHCP host name</h2>
    133. 

  133.                         <section id="wifi-list">
    134. 

  134.                             <input id="dhcp-name1" type="text" placeholder="" value="squeezeamp">
    135. 

  135.                         </section>
    136. 

  136.                         <h2>Password for <span id="ssid-pwd"></span></h2>
    137. 

  137.                         <section>
    138. 

  138.                             <input id="pwd" type="password" placeholder="Password" value="">
    139. 

  139.                         </section>
    140. 

  140.                         <div class="buttons">
    141. 

  141.                             <input id="join" type="button" class="btn btn-success" value="Join" />
    142. 

  142.                             <input id="cancel" type="button" class="btn btn-danger" value="Cancel"/>
    143. 

  143.                         </div>
    144. 

  144.                     </div>
    145. 

  145. 

  146.                     <div id="connect-wait">
    147. 

  147.                         <header>
    148. 

  148.                             <h1>Please wait...</h1>
    149. 

  149.                         </header>
    150. 

  150.                         <h2>Connecting to <span id="ssid-wait"></span></h2>
    151. 

  151.                         <section>
    152. 

  152.                             <div id="loading">
    153. 

  153.                                 <div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>
    154. 

  154.                                 <p class="tctr">You may lose wifi access while the esp32 recalibrates its radio. Please wait until your device automatically reconnects. This can take up to 30s.</p>
    155. 

  155.                             </div>
    156. 

  156.                             <div id="connect-success">
    157. 

  157.                                 <h3 class="gr">Success!</h3>
    158. 

  158.                             </div>
    159. 

  159.                             <div id="connect-fail">
    160. 

  160.                                 <h3 class="rd">Connection failed</h3>
    161. 

  161.                                 <p class="tctr">Please double-check wifi password if any and make sure the access point has good signal.</p>
    162. 

  162.                             </div>
    163. 

  163.                         </section>
    164. 

  164.                         <div class="buttons">
    165. 

  165.                             <input id="ok-connect" type="button" value="OK" class="btn btn-success" />
    166. 

  166.                         </div>
    167. 

  167.                     </div>
    168. 

  168. 

  169.                     <div id="connect-details">
    170. 

  170.                         <div id="connect-details-wrap">
    171. 

  171.                             <header>
    172. 

  172.                                 <h1></h1>
    173. 

  173.                             </header>
    174. 

  174.                             <h2></h2>
    175. 

  175.                             <section>
    176. 

  176.                                 <div class="buttons">
    177. 

  177.                                     <input id="disconnect" type="button" value="Disconnect" class="btn btn-danger"/>
    178. 

  178.                                 </div>
    179. 

  179.                             </section>
    180. 

  180.                             <h2>IP Address</h2>
    181. 

  181.                             <section>
    182. 

  182.                                 <div class="ape brdb">IP Address:<div id="ip" class="fr"></div></div>
    183. 

  183.                                 <div class="ape brdb">Subnet Mask:<div id="netmask" class="fr"></div></div>
    184. 

  184.                                 <div class="ape">Default Gateway:<div id="gw" class="fr"></div></div>
    185. 

  185.                             </section>
    186. 

  186.                             <div class="buttons">
    187. 

  187.                                 <input id="ok-details" type="button" value="Back" class="btn btn-success" />
    188. 

  188.                             </div>
    189. 

  189.                         </div>					
    190. 

  190.                         <div id="diag-disconnect" class="diag-box">
    191. 

  191.                             <div class="diag-box-win">
    192. 

  192.                                 <p>Are you sure you would like to disconnect from this wifi?</p>
    193. 

  193.                                 <div class="buttons">
    194. 

  194.                                     <input id="no-disconnect" type="button" value="No" class="btn btn-success" />
    195. 

  195.                                     <input id="yes-disconnect" type="button" value="Yes" class="btn btn-danger" />
    196. 

  196.                                 </div>
    197. 

  197.                             </div>
    198. 

  198.                         </div>
    199. 

  199.                     </div>
    200. 

  200.                 </div>
    201. 

  201. 

  202.                 <div class="tab-pane fade" id="tab-audio">
    203. 

  203.                     <div id="audioout">
    204. 

  204.                         <h1>Audio output</h1>
    205. 

  205.                         <div class="form-group">
    206. 

  206.                             <div class="custom-control custom-radio">
    207. 

  207.                                 <input type="radio" id="i2s" name="audio" class="custom-control-input" checked='checked' />
    208. 

  208.                                 <label for="i2s" class="custom-control-label">I2S</label>
    209. 

  209.                             </div>
    210. 

  210.                             <div class="custom-control custom-radio">
    211. 

  211.                                 <input type="radio" id="spdif" name="audio" class="custom-control-input" />
    212. 

  212.                                 <label for="spdif" class="custom-control-label">SPDIF</label>
    213. 

  213.                             </div>
    214. 

  214.                             <div class="custom-control custom-radio">
    215. 

  215.                                 <input type="radio" id="bt" name="audio" class="custom-control-input" />
    216. 

  216.                                 <label for="bt" class="custom-control-label">Bluetooth</label>
    217. 

  217.                             </div>
    218. 

  218.                         </div>
    219. 

  219.                     </div>
    220. 

  220.                     <div id="btsinkdiv">
    221. 

  221.                         <input id="btsink" type="text" value="BT sink name" />
    222. 

  222.                     </div>
    223. 

  223.                     <div>
    224. 

  224.                         <h1>Player name</h1>
    225. 

  225.                         <input id="player" type="text" value="squeezelite" />
    226. 

  226.                     </div>
    227. 

  227.                     <div>
    228. 

  228.                         <h1>Optional setting (e.g. for LMS IP address)</h1>
    229. 

  229.                         <input id="optional" type="text" value="" placeholder="-s 192.168.0.1" />
    230. 

  230.                     </div>
    231. 

  231. 

  232.                     <div class="buttons">
    233. 

  233.                         <input id="generate-command" type="button" class="btn btn-success" value="Generate" />
    234. 

  234.                     </div>
    235. 

  235. 

  236.                     <h1>Squeezelite command to run</h1>
    237. 

  237.                     <section id="command-list">
    238. 

  238.                         <textarea id="autoexec1" maxlength="120">squeezelite -o I2S -b 500:2000 -d all=info -C 30 -W</textarea>
    239. 

  239.                     </section>
    240. 

  240.                     <div class="buttons">
    241. 

  241.                         <input id="save-autoexec1" type="button" class="btn btn-success" value="Save" />
    242. 

  242.                     </div>
    243. 

  243. 

  244.                     <h1>Start Squeezelite (toggle to activate changes)</h1>
    245. 

  245.                     <div class="custom-control custom-switch">
    246. 

  246.                           <input type="checkbox" class="custom-control-input" id="autoexec-cb" checked="checked">
    247. 

  247.                           <label class="custom-control-label" for="autoexec-cb"></label>
    248. 

  248.                     </div>
    249. 

  249.                     <br />
    250. 

  250.                 </div>
    251. 

  251. 

  252.                 <div class="tab-pane fade" id="tab-gpio">
    253. 

  253.                     <table class="table table-hover">
    254. 

  254.                         <thead>
    255. 

  255.                             <tr>
    256. 

  256.                                 <th scope="col">Signal</th>
    257. 

  257.                                 <th scope="col">I2S pin</th>
    258. 

  258.                                 <th scope="col">SPDIF pin</th>
    259. 

  259.                             </tr>
    260. 

  260.                         </thead>
    261. 

  261.                         <tbody id="gpioTable">
    262. 

  262.                             <tr>
    263. 

  263.                                 <td>Bit clock</td>
    264. 

  264.                                 <td>
    265. 

  265.                                     <input type="text" class="form-control gpio" id="gpio-i2s-bc" maxlength="2" size="2">
    266. 

  266.                                 </td>
    267. 

  267.                                 <td>
    268. 

  268.                                     <input type="text" class="form-control gpio" id="gpio-spdif-bc" maxlength="2" size="2">
    269. 

  269.                                 </td>
    270. 

  270.                             </tr>
    271. 

  271.                             <tr>
    272. 

  272.                                 <td>Word select</td>
    273. 

  273.                                 <td>
    274. 

  274.                                     <input type="text" class="form-control gpio" id="gpio-i2s-ws" maxlength="2" size="2">
    275. 

  275.                                 </td>
    276. 

  276.                                 <td>
    277. 

  277.                                     <input type="text" class="form-control gpio" id="gpio-spdif-ws" maxlength="2" size="2">
    278. 

  278.                                 </td>
    279. 

  279.                             </tr>
    280. 

  280.                             <tr>
    281. 

  281.                                 <td>Data</td>
    282. 

  282.                                 <td>
    283. 

  283.                                     <input type="text" class="form-control gpio" id="gpio-i2s-data" maxlength="2" size="2">
    284. 

  284.                                 </td>
    285. 

  285.                                 <td>
    286. 

  286.                                     <input type="text" class="form-control gpio" id="gpio-spdif-data" maxlength="2" size="2">
    287. 

  287.                                 </td>
    288. 

  288.                             </tr>
    289. 

  289.                         </tbody>
    290. 

  290.                     </table>
    291. 

  291.                     <div class="buttons">
    292. 

  292.                         <input id="save-gpio" type="button" class="btn btn-success" value="Save" />
    293. 

  293.                     </div>
    294. 

  294.                 </div>
    295. 

  295. 

  296.                 <div class="tab-pane fade" id="tab-nvs">
    297. 

  297.                     <table class="table table-hover">
    298. 

  298.                         <thead>
    299. 

  299.                             <tr>
    300. 

  300.                                 <th scope="col">Key</th>
    301. 

  301.                                 <th scope="col">Value</th>
    302. 

  302.                             </tr>
    303. 

  303.                         </thead>
    304. 

  304.                         <tbody id="nvsTable">
    305. 

  305.                         </tbody>
    306. 

  306.                     </table>
    307. 

  307.                     <div class="buttons">
    308. 

  308. 						<div id="boot-div">
    309. 

  309.                         	<form id="reboot-form" action="/reboot.json" method="post" target="dummyframe">
    310. 

  310.                             	<button id="reboot-button" type="submit" class="btn btn-primary">Reboot</button>
    311. 

  311.                         	</form>
    312. 

  312.                     	</div>                    
    313. 

  313.                         <input id="save-nvs" type="button" class="btn btn-success" value="Save" />
    314. 

  314.                     </div>
    315. 

  315.                 </div>
    316. 

  316. 

  317.                 <div class="tab-pane fade" id="tab-firmware">
    318. 

  318.                     <div id="boot-div">
    319. 

  319.                         <form id="boot-form" action="/recovery.json" method="post" target="dummyframe">
    320. 

  320.                             <button id="boot-button" type="submit" class="btn btn-primary">Recovery</button>
    321. 

  321.                         </form>
    322. 

  322.                     </div>
    323. 

  323.                     <h1>Check for firmware upgrade</h1>
    324. 

  324.                     <div class="buttons">
    325. 

  325.                         <input type="button" id="fwcheck" class="btn btn-info" value="Check for updates" />
    326. 

  326.                     </div>
    327. 

  327.                     <div id="searchfw" class="form-group">
    328. 

  328.                         <input class="form-control form-control-sm" id="searchinput" type="text" placeholder="search releases" id="inputSmall">
    329. 

  329.                     </div>
    330. 

  330.                     <table class="table table-hover">
    331. 

  331.                         <thead>
    332. 

  332.                             <tr>
    333. 

  333.                                 <th scope="col">Firmware version</th>
    334. 

  334.                                 <th scope="col">Release date</th>
    335. 

  335.                                 <th scope="col">HW platform</th>
    336. 

  336.                                 <th scope="col">IDF version</th>
    337. 

  337.                                 <th scope="col">Branch</th>
    338. 

  338.                                 <th scope="col">Flash this FW</th>
    339. 

  339.                             </tr>
    340. 

  340.                         </thead>
    341. 

  341.                         <tbody id="releaseTable">
    342. 

  342.                         </tbody>
    343. 

  343.                     </table>
    344. 

  344.                     <h2>Firmware URL:</h2>
    345. 

  345.                     <textarea id="fwurl" maxlength="350"></textarea>
    346. 

  346.                    <!-- 
    347. 

  347.                     <br />OR<br />
    348. 

  348.                     <div class="input-group mb-3" id="upload">
    349. 

  349.                         <div class="custom-file">
    350. 

  350.                             <input type="file" class="custom-file-input" id="inputGroupFile01">
    351. 

  351.                             <label class="custom-file-label" for="inputGroupFile01"></label>
    352. 

  352.                         </div>
    353. 

  353.                         <div class="input-group-append">
    354. 

  354.                             <span class="input-group-text" id="fwUpload">Upload</span>
    355. 

  355.                         </div>
    356. 

  356.                     </div>
    357. 

  357.                    -->
    358. 

  358.                     <div class="buttons">
    359. 

  359.                     	<input type="button" id="flash" class="btn btn-danger" value="Flash!" /><span id="flash-status"></span>
    360. 

  360.                     </div>
    361. 

  361.                     <div id="otadiv">
    362. 

  362.                         <div class="progress" id="progress">
    363. 

  363.                             <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%">
    364. 

  364.                                 0%
    365. 

  365.                             </div>
    366. 

  366.                         </div>
    367. 

  367.                     </div>
    368. 

  368.                 </div>
    369. 

  369. 

  370.                 <div class="tab-pane fade" id="tab-credits">
    371. 

  371.                     <div class="jumbotron">
    372. 

  372.                         <p><strong><a href="https://github.com/sle118/squeezelite-esp32">squeezelite-esp32</a></strong>, &copy; 2019, philippe44, sle118, daduke<br />Licensed under the GPL</p>
    373. 

  373.                          <p>
    374. 

  374.                             This app would not be possible without the following libraries:
    375. 

  375.                         </p>
    376. 

  376.                         <ul>
    377. 

  377.                             <li>squeezelite, &copy;  2012-2019, Adrian Smith and Ralph Irving. Licensed under the GPL License.</li>
    378. 

  378.                             <li>esp32-wifi-manager, &copy;  2017-2019, Tony Pottier. Licensed under the MIT License.</li>
    379. 

  379.                             <li>SpinKit, &copy;  2015, Tobias Ahlin. Licensed under the MIT License.</li>
    380. 

  380.                             <li>jQuery, The jQuery Foundation. Licensed under the MIT License.</li>
    381. 

  381.                             <li>cJSON, &copy; 2009-2017, Dave Gamble and cJSON contributors. Licensed under the MIT License.</li>
    382. 

  382. 							<li>esp32-rotary-encoder, &copy; 2011-2019, David Antliff and Ben Buxton. Licensed under the GPL License.</li>
    383. 

  383. 							<li>tarablessd1306, &copy; 2017-2018, Tara Keeling. Licensed under the MIT license.</li>
    384. 

  384.                         </ul>
    385. 

  385.                     </div>
    386. 

  386. 	                <h2>Show NVS Editor</h2>
    387. 

  387. 	                <div class="custom-control custom-switch">
    388. 

  388. 	                      <input type="checkbox" class="custom-control-input" id="show-nvs" checked="checked">
    389. 

  389. 	                      <label class="custom-control-label" for="show-nvs"></label>
    390. 

  390. 	                </div>
    391. 

  391.                 </div>
    392. 

  392.             </div>
    393. 

  393.             <footer class="footer"><span id="foot-fw"></span><span id="foot-wifi"></span></footer>
    394. 

  394.             <iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
    395. 

  395.         </div>
    396. 

  396.     </body>
    397. 

  397. </html>
    398.