Home Explore Help
Sign In
IHOLL
/
squeezelite-esp32
mirror of https://github.com/sle118/squeezelite-esp32
2
0
Fork 0
Files Issues 0 Wiki
Tree: 7fcb201b06
Branches Tags
squeezelite-esp...
/
components
/
wifi-manager
/
webapp
/
src
/
index.ejs

index.ejs 20 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473 
  1. <!DOCTYPE html>
    2. 

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

  3. 

  4. <head>
    5. 

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

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

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

  8. 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    9. 

  9. 	<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">	
    10. 

  10. 	<title></title>
    11. 

  11. 

  12. </head>
    13. 

  13. 

  14. <body class="d-flex flex-column">
    15. 

  15. 	<header class="navbar navbar-expand-sm navbar-dark  bg-primary sticky-top border-bottom border-dark" id="mainnav">
    16. 

  16. 		<a class="navbar-brand" id="navtitle" href="#"></a>
    17. 

  17. 		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
    18. 

  18. 			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    19. 

  19. 			<span class="navbar-toggler-icon"></span>
    20. 

  20. 		</button>
    21. 

  21. 		<div class="collapse navbar-collapse" id="navbarSupportedContent">
    22. 

  22. 			<ul class="nav navbar-nav mr-auto" role="tablist">
    23. 

  23. 				<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
    24. 

  24. 				<li class="nav-item omsg"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
    25. 

  25. 							class="badge badge-pill badge-success" id="msgcnt"></span></a></li>
    26. 

  26. 				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
    27. 

  27. 				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
    28. 

  28. 				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
    29. 

  29. 				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
    30. 

  30. 				<div class="dropdown-divider"></div>
    31. 

  31. 				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
    32. 

  32. 				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
    33. 

  33. 				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
    34. 

  34. 			</ul>
    35. 

  35. 

  36. 		</div>
    37. 

  37. 		<div class="info navbar-right" style="display: inline-flex;">
    38. 

  38. 			<span class="recovery_element material-icons "  style="color:orange; display: none" >system_update_alt</span>
    39. 

  39. 			<span id="battery" class="material-icons" style="fill:white; display: none">battery_full</span>
    40. 

  40. 			<span id="o_jack" class="material-icons" style="fill:white; display: none">headphones</span>
    41. 

  41. 			<span id="s_airplay" class="material-icons"  style="fill:white; display: none">airplay</span>
    42. 

  42. 			<em id="s_cspot" class="fab fa-spotify" style="fill:white; display: inline"></em>
    43. 

  43. 			<span data-bs-toggle="tooltip" id="o_type" data-bs-placement="top" title="">
    44. 

  44. 				<span id="o_bt" class="material-icons" style="fill:white; display: none" >bluetooth</span>
    45. 

  45. 				<span id="o_spdif" class="material-icons" style="fill:white; display: none" >graphic_eq</span>
    46. 

  46. 				<span id="o_i2s" class="material-icons" style="fill:white; display: none" >speaker</span>
    47. 

  47. 			</span>
    48. 

  48. 			<span id="ethernet" class="material-icons if_eth" style="fill:white; display: none" >cable</span>
    49. 

  49. 			<span id="wifiStsIcon" class="material-icons if_wifi" style="fill:white; display: none">signal_wifi_statusbar_4_bar</span>
    50. 

  50. 

  51. 		</div>
    52. 

  52. 	</header>
    53. 

  53. 	<main role="main" class="flex-grow mt-1 mb-12" style="margin-bottom: 7rem;" id="content">
    54. 

  54. 		<!-- Button trigger modal -->
    55. 

  55.   
    56. 

  56.   <!-- Modal -->
    57. 

  57.   
    58. 

  58.   <div class="modal" id="otadiv" aria-hidden="true">
    59. 

  59. 	<div class="modal-dialog" >
    60. 

  60. 	  <div class="modal-content">
    61. 

  61. 		<div class="modal-header">
    62. 

  62. 		  <h5 class="modal-title" id="fwProgressLabel">Upgrade Progress</h5>
    63. 

  63. 		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    64. 

  64. 		</div>
    65. 

  65. 		<div class="modal-body">
    66. 

  66. 			<span id="flash-status"></span>
    67. 

  67. 			<div class="progress" id="progress">
    68. 

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

  69. 					0%
    70. 

  70. 				</div>
    71. 

  71. 			</div>
    72. 

  72. 		</div>
    73. 

  73. 		<div class="modal-footer">
    74. 

  74. 		  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    75. 

  75. 		</div>
    76. 

  76. 	  </div>
    77. 

  77. 	</div>
    78. 

  78.   </div>
    79. 

  79. 		
    80. 

  80. 		<div id="myTabContent" class="tab-content">
    81. 

  81. 

  82. 			<div class="tab-pane fade" id="tab-cfg-hw">			</div>
    83. 

  83. 			<div class="tab-pane fade" id="tab-cfg-syst"></div>
    84. 

  84. 			<div class="tab-pane fade" id="tab-cfg-gen"></div>
    85. 

  85. 			<div class="tab-pane fade" id="tab-cfg-fw">
    86. 

  86. 				
    87. 

  87. 				<div class="card text-white  mb-3">
    88. 

  88. 					<div class="card-header">Software Updates</div>
    89. 

  89. 					<div class="card-body">
    90. 

  90. 						<table class="table table-hover table-striped table-dark">
    91. 

  91. 							<thead>
    92. 

  92. 								<tr>
    93. 

  93. 									<th class="border-bottom-0 pb-0" scope="col">Version</th>
    94. 

  94. 									<th class="border-bottom-0 pb-0" scope="col">Date/Time</th>
    95. 

  95. 									<th class="border-bottom-0 pb-0" scope="col">Platform</th>
    96. 

  96. 									<th class="border-bottom-0 pb-0" scope="col">Branch</th>
    97. 

  97. 									<th class="border-bottom-0 pb-0" scope="col">Bit Depth</th>
    98. 

  98. 								</tr>
    99. 

  99. 								<tr>
    100. 

  100. 									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm upSrch"
    101. 

  101. 											id="svrs" type="text" placeholder="search releases"></th>
    102. 

  102. 									<th class="border-top-0 pt-0" scope="col"></th>
    103. 

  103. 									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm  upSrch"
    104. 

  104. 											id="splf" type="text" placeholder="search platform"></th>
    105. 

  105. 									<th class="border-top-0 pt-0" scope="col"><select class="form-control-sm  upSrch"
    106. 

  106. 											id="fwbranch">
    107. 

  107. 											<option selected="">Choose FW branch</option>
    108. 

  108. 										</select>
    109. 

  109. 									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm upSrch"
    110. 

  110. 											id="bits" type="text" placeholder="search bit depth"></th>
    111. 

  111. 									</th>
    112. 

  112. 								</tr>
    113. 

  113. 							</thead>
    114. 

  114. 							<tbody id="rTable"></tbody>
    115. 

  115. 						</table>
    116. 

  116. 

  117. 						<div class="form-group row">
    118. 

  118. 							<div class="col-auto">
    119. 

  119. 								<button type="button" id="chkUpdates" class="btn btn-info btn-sm">Check for
    120. 

  120. 									updates</button>
    121. 

  121. 							</div>
    122. 

  122. 							<label class="col-auto col-form-label" for="fw-url-input">Firmware URL</label>
    123. 

  123. 							<div class="col">
    124. 

  124. 								<input type="text" class="form-control"
    125. 

  125. 									placeholder="select entry from list or enter known url" id="fw-url-input">
    126. 

  126. 							</div>
    127. 

  127. 							<div class="col-auto">
    128. 

  128. 								<button type="button" id='start-flash' data-bs-toggle="modal" data-bs-target="#uCnfrm"
    129. 

  129. 									class="btn btn-warning btn-sm flact" style="display: none;">Flash Firmware</button>
    130. 

  130. 							</div>
    131. 

  131. 							
    132. 

  132. 							<div class="col-auto">
    133. 

  133. 								<button id="btn_reboot_recovery" class="btn-warning ota_element" type="submit" >Recovery</button>
    134. 

  134. 							</div>
    135. 

  135. 						</div>
    136. 

  136. 

  137. 					</div>
    138. 

  138. 				</div>
    139. 

  139. 				<div class="modal" id="uCnfrm">
    140. 

  140. 					<div class="modal-dialog modal-dialog-centered" role="document">
    141. 

  141. 						<div class="modal-content">
    142. 

  142. 							<div class="modal-header">
    143. 

  143. 								<h5 class="modal-title">Firmware Flash</h5>
    144. 

  144. 								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    145. 

  145. 							</div>
    146. 

  146. 							<div class="modal-body">
    147. 

  147. 								<p>Flash URL <span id="selectedFWURL" class="text-break"></span> to device?</p>
    148. 

  148. 							</div>
    149. 

  149. 							<div class="modal-footer  ">
    150. 

  150. 								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
    151. 

  151. 								<button id="btn_flash" type="button" class="btn btn-warning" data-bs-dismiss="modal" >Ok</button>
    152. 

  152. 							</div>
    153. 

  153. 						</div>
    154. 

  154. 					</div>
    155. 

  155. 				</div>
    156. 

  156. 				<div class="card text-white mb-3" >
    157. 

  157. 					<div class="card-header">Local Firmware Upload</div>
    158. 

  158. 					<div class="card-body">
    159. 

  159. 							<div id="uploaddiv" class="form-group row ">
    160. 

  160. 									<label for="flashfilename" class="col-auto col-form-label">Local File</label>
    161. 

  161. 									<div class="col">
    162. 

  162. 										<input type="file" class="form-control-file" id="flashfilename" aria-describedby="fileHelp">
    163. 

  163. 								</div>
    164. 

  164. 								<div class="col-auto">
    165. 

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

  166. 										<button type="button" class="btn btn-danger flact" id="fwUpload">Upload!</button>
    167. 

  167. 									</div>
    168. 

  168. 								</div>
    169. 

  169. 							</div>
    170. 

  170. 					</div>
    171. 

  171. 				</div>
    172. 

  172. 			</div>
    173. 

  173. 		
    174. 

  174. 

  175. 

  176. 

  177. 		<div class="tab-pane fade" id="tab-nvs">
    178. 

  178. 			<table class="table table-hover">
    179. 

  179. 				<thead>
    180. 

  180. 					<tr>
    181. 

  181. 						<th scope="col">Key</th>
    182. 

  182. 						<th scope="col">Value</th>
    183. 

  183. 					</tr>
    184. 

  184. 				</thead>
    185. 

  185. 				<tbody id="nvsTable">
    186. 

  186. 				</tbody>
    187. 

  187. 			</table>
    188. 

  188. 			<div class="buttons">
    189. 

  189. 				<button button id="btn_reboot"  class="btn btn-primary" style="float:right" type="submit"  >Reboot</button>
    190. 

  190. 				
    191. 

  191. 				<input id="save-nvs" type="button" class="btn btn-success" value="Commit">
    192. 

  192. 				<input id="save-as-nvs" type="button" class="btn btn-success" value="Download config">
    193. 

  193. 				<input id="load-nvs" type="button" class="btn btn-success" value="Load File">
    194. 

  194. 				<input aria-describedby="fileHelp" id="nvsfilename" type="file" style="display:none">
    195. 

  195. 			</div>
    196. 

  196. 		</div>
    197. 

  197. 

  198. 		<div class="tab-pane fade" id="tab-cfg-audio">
    199. 

  199. 			<div class="card text-white  mb-3">
    200. 

  200. 				<div class="card-header">Usage Templates</div>
    201. 

  201. 				<div class="card-body">
    202. 

  202. 					<fieldset>
    203. 

  203. 						<fieldset class="form-group" id="output-tmpl">
    204. 

  204. 							<legend>Output</legend>
    205. 

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

  206. 								<label class="form-check-label">
    207. 

  207. 									<input type="radio" class="form-check-input" name="output-tmpl" id="i2s">
    208. 

  208. 									I2S Dac
    209. 

  209. 								</label>
    210. 

  210. 							</div>
    211. 

  211. 							<div class="form-check">
    212. 

  212. 								<label class="form-check-label">
    213. 

  213. 									<input type="radio" class="form-check-input" name="output-tmpl" id="spdif">
    214. 

  214. 									SPDIF
    215. 

  215. 								</label>
    216. 

  216. 							</div>
    217. 

  217. 							<div class="form-check">
    218. 

  218. 								<label class="form-check-label">
    219. 

  219. 									<input type="radio" class="form-check-input" name="output-tmpl" id="bt">
    220. 

  220. 									Bluetooth
    221. 

  221. 								</label>
    222. 

  222. 							</div>
    223. 

  223. 						</fieldset>
    224. 

  224. 						<div class="form-group"><label for="player">Player Name</label><input type="text"
    225. 

  225. 								class="form-control " placeholder="Squeezelite" id="player"></div>
    226. 

  226. 						<div class="form-group"><label for="optional">Optional setting (e.g. for LMS IP
    227. 

  227. 								address)</label><input type="text" class="form-control" id="optional"></div>
    228. 

  228. 						<div class="form-group">
    229. 

  229. 							<div class="form-check">
    230. 

  230. 								<label class="form-check-label">
    231. 

  231. 									<input class="form-check-input" type="checkbox" id="disable-squeezelite" value=""
    232. 

  232. 										checked="">
    233. 

  233. 									Disable Squeezelite
    234. 

  234. 								</label>
    235. 

  235. 							</div>
    236. 

  236. 						</div>
    237. 

  237. 						<div style="margin-top: 16px;">
    238. 

  238. 						<div class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"  id="toast_cfg-audio-tmpl">
    239. 

  239. 							<div class="toast-header"><strong class="mr-auto">Result</strong>
    240. 

  240. 								<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
    241. 

  241. 							<div class="toast-body" id="msg_cfg-audio-tmpl"></div>
    242. 

  242. 						</div>
    243. 

  243. 						</div>
    244. 

  244. 						<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl">Save</button>
    245. 

  245. 						<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl">Apply</button>
    246. 

  246. 					</fieldset>
    247. 

  247. 				</div>
    248. 

  248. 			</div>
    249. 

  249. 		</div>
    250. 

  250. 		<div class="tab-pane fade active show" id="tab-wifi">
    251. 

  251. 			<div class="card text-white  mb-3">
    252. 

  252. 				<div class="card-header">WiFi Status</div>
    253. 

  253. 				
    254. 

  254. 				<div class="card-body if_eth" style="display: none">
    255. 

  255. 					<h2>Connected to Ethernet</h2>
    256. 

  256. 					<p>WiFi is inactive while connected to a wired network.
    257. 

  257. 				</div>
    258. 

  258. 				<div class="card-body if_wifi" style="display: none" >
    259. 

  259. 					<table class="table table-hover">
    260. 

  260. 						<thead>
    261. 

  261. 							<tr>
    262. 

  262. 								<th scope="col">Joined</th>
    263. 

  263. 								<th scope="col">Name</th>
    264. 

  264. 								<th scope="col">Signal</th>
    265. 

  265. 								<th scope="col">Security</th>
    266. 

  266. 							</tr>
    267. 

  267. 						</thead>
    268. 

  268. 						<tbody id="wifiTable"></tbody>
    269. 

  269. 					</table>
    270. 

  270. 					<button type="button" id="updateAP" class="btn btn-info btn-sm">Scan</button>
    271. 

  271. 

  272. 				</div>
    273. 

  273. 				<div class="modal" id="WiFiDisconnectConfirm">
    274. 

  274. 					<div class="modal-dialog modal-dialog-centered" role="document">
    275. 

  275. 						<div class="modal-content">
    276. 

  276. 							<div class="modal-header">
    277. 

  277. 								<h5 class="modal-title">Disconnect</h5>
    278. 

  278. 								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    279. 

  279. 							</div>
    280. 

  280. 							<div class="modal-body">
    281. 

  281. 								<p>Disconnect from network? After disconnecting, the system won't be accessible from
    282. 

  282. 									the current address and will expose itself as access point name <span
    283. 

  283. 										id="apName"></span> with password <span id="apPass"></span> </p>
    284. 

  284. 							</div>
    285. 

  285. 							<div class="modal-footer connecting-success connecting-status">
    286. 

  286. 								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
    287. 

  287. 								<button id="btn_disconnect" type="button" class="btn btn-warning" data-bs-dismiss="modal">Ok</button>
    288. 

  288. 							</div>
    289. 

  289. 						</div>
    290. 

  290. 					</div>
    291. 

  291. 				</div>
    292. 

  292. 				<div class="modal" id="WifiConnectDialog" aria-hidden="true">
    293. 

  293. 					<div class="modal-dialog ">
    294. 

  294. 						<div class="modal-content">
    295. 

  295. 							<div class="modal-header">
    296. 

  296. 								<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi</h5>
    297. 

  297. 								<h5 class="modal-title connecting-status connecting-success">Status</h5>
    298. 

  298. 								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    299. 

  299. 							</div>
    300. 

  300. 							<div class="modal-body">
    301. 

  301. 								<fieldset class="connecting-init connecting-fail">
    302. 

  302. 									<div class="form-group"><label for="manual_ssid">Wifi Name</label><input type="text"
    303. 

  303. 											class="form-control" placeholder="Enter Name" id="manual_ssid"></div>
    304. 

  304. 									<div class="form-group"><label for="manual_pwd">Password</label><input
    305. 

  305. 											type="password" class="form-control" placeholder="Enter Name"
    306. 

  306. 											id="manual_pwd"></div>
    307. 

  307. 								</fieldset>
    308. 

  308. 								<div id="connect-wait" class="connecting">
    309. 

  309. 									<div>Connecting to <span id="ssid-wait"></span> </div>
    310. 

  310. 									<div>
    311. 

  311. 										You may lose wifi access while the esp32 recalibrates
    312. 

  312. 										its radio. Please
    313. 

  313. 										wait until your device automatically reconnects. This can take up to
    314. 

  314. 										30s.
    315. 

  315. 									</div>
    316. 

  316. 								</div>
    317. 

  317. 								<div id="connect-success" class="connecting-success connecting-status">
    318. 

  318. 									<div> Connected to Access Point : <span id="connectedToSSID"></span></div>
    319. 

  319. 									<div> Device IP address : <span id="ipAddress"></span></div>
    320. 

  320. 									<div>Subnet Mask:<span id="netmask"></span></div>
    321. 

  321. 									<div>Default Gateway:<span id="gateway"></span></div>
    322. 

  322. 								</div>
    323. 

  323. 								<div id="connect-fail" class="connecting-fail">
    324. 

  324. 									<h3 class="text-error">Connection failed</h3>
    325. 

  325. 									<p>Please double-check wifi password if any and make sure the access point has
    326. 

  326. 										good signal.</p>
    327. 

  327. 								</div>
    328. 

  328. 							</div>
    329. 

  329. 							<div class="modal-footer ">
    330. 

  330. 								<button type="button"
    331. 

  331. 									class="btn btn-secondary connecting-init connecting-fail connecting"
    332. 

  332. 									data-bs-dismiss="modal">Close</button>
    333. 

  333. 								<button type="button" id="btnJoin"
    334. 

  334. 									class="btn btn-primary connecting-init connecting-fail">Join</button>
    335. 

  335. 								<button type="button" class="connecting btn btn-primary" disabled>
    336. 

  336. 									<span class="spinner-border spinner-border-sm" role="status"
    337. 

  337. 										aria-hidden="true"></span>
    338. 

  338. 									<span class="sr-only">Connecting...</span></button>
    339. 

  339. 							</div>
    340. 

  340. 

  341. 							<div class="modal-footer connecting-success connecting-status justify-content-between" style=""><button type="button"
    342. 

  342. 									class="btn btn-primary" data-bs-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
    343. 

  343. 									data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#WiFiDisconnectConfirm">Disconnect</button> 
    344. 

  344. 							</div>
    345. 

  345. 						</div>
    346. 

  346. 					</div>
    347. 

  347. 				</div>
    348. 

  348. 

  349. 			</div>
    350. 

  350. 		</div>
    351. 

  351. 		<div class="tab-pane fade " id="tab-commands">
    352. 

  352. 			<fieldset id="commands-list"></fieldset>
    353. 

  353. 		</div>
    354. 

  354. 		<!-- Status -->
    355. 

  355. 		<div class="tab-pane fade " id="tab-syslog">
    356. 

  356. 			<div class="card border-primary mb-3">
    357. 

  357. 				<div class="card-header">Logs</div>
    358. 

  358. 				<div class="card-body">
    359. 

  359. 					<table class="table table-hover">
    360. 

  360. 						<thead>
    361. 

  361. 							<tr>
    362. 

  362. 								<th scope="col">Timestamp</th>
    363. 

  363. 								<th scope="col">Message</th>
    364. 

  364. 							</tr>
    365. 

  365. 						</thead>
    366. 

  366. 						<tbody id="syslogTable">
    367. 

  367. 						</tbody>
    368. 

  368. 					</table>
    369. 

  369. 					<div class="buttons">
    370. 

  370. 						<input id="clear-syslog" type="button" class="btn btn-danger btn-sm" value="Clear" />
    371. 

  371. 					</div>
    372. 

  372. 				</div>
    373. 

  373. 			</div>
    374. 

  374. 			<div class="card border-primary mb-3" id="pins" style="display: none;">
    375. 

  375. 				<div class="card-header">Pin Assignments</div>
    376. 

  376. 				<div class="card-body">
    377. 

  377. 					<table class="table table-hover">
    378. 

  378. 						<thead>
    379. 

  379. 							<tr>
    380. 

  380. 								<th scope="col">Device</th>
    381. 

  381. 								<th scope="col">Pin Name</th>
    382. 

  382. 								<th scope="col">GPIO Number</th>
    383. 

  383. 								<th scope="col">Type</th>
    384. 

  384. 							</tr>
    385. 

  385. 						</thead>
    386. 

  386. 						<tbody id="gpiotable"></tbody>
    387. 

  387. 					</table>
    388. 

  388. 				</div>
    389. 

  389. 			</div>
    390. 

  390. 			<div class="card border-primary mb-3" style="visibility: collapse;" id="tasks_sect">
    391. 

  391. 				<div class="card-header">Tasks</div>
    392. 

  392. 				<div class="card-body">
    393. 

  393. 					<table class="table table-hover">
    394. 

  394. 						<!-- console.log(msg_time.toLocaleString() + '\tname' + '\tcpu' + '\tstate' + '\tminstk' + '\tbprio' + '\tcprio' + '\tnum'); -->
    395. 

  395. 						<thead>
    396. 

  396. 							<tr>
    397. 

  397. 								<th scope="col">#</th>
    398. 

  398. 								<th scope="col">Task Name</th>
    399. 

  399. 								<th scope="col">CPU</th>
    400. 

  400. 								<th scope="col">State</th>
    401. 

  401. 								<th scope="col">Min Stack</th>
    402. 

  402. 								<th scope="col">Base Priority</th>
    403. 

  403. 								<th scope="col">Cur Priority</th>
    404. 

  404. 							</tr>
    405. 

  405. 						</thead>
    406. 

  406. 						<tbody id="tasks"></tbody>
    407. 

  407. 					</table>
    408. 

  408. 				</div>
    409. 

  409. 			</div>
    410. 

  410. 		</div>
    411. 

  411. 		<!-- syslog -->
    412. 

  412. 		<div class="tab-pane fade " id="tab-credits">
    413. 

  413. 			<div class="card text-white  mb-3">
    414. 

  414. 				<div class="card-header">Credits</div>
    415. 

  415. 				<div class="card-body">
    416. 

  416. 					<p><strong><a
    417. 

  417. 								href="https://github.com/sle118/squeezelite-esp32">squeezelite-esp32</a><br></strong>&copy;
    418. 

  418. 						2020, philippe44, sle118, daduke<br /><a href="https://opensource.org/licenses/MIT">This
    419. 

  419. 							software is released under the MIT License.</a></p>
    420. 

  420. 					<p>
    421. 

  421. 						This app would not be possible without the following libraries:
    422. 

  422. 					</p>
    423. 

  423. 					<ul>
    424. 

  424. 						<li>squeezelite, &copy; 2012-2019, Adrian Smith and Ralph Irving. Licensed under the GPL
    425. 

  425. 							License.</li>
    426. 

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

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

  428. 						<li>jQuery, The jQuery Foundation. Licensed under the MIT License.</li>
    429. 

  429. 						<li>cJSON, &copy; 2009-2017, Dave Gamble and cJSON contributors. Licensed under the MIT
    430. 

  430. 							License.
    431. 

  431. 						</li>
    432. 

  432. 						<li>esp32-rotary-encoder, &copy; 2011-2019, David Antliff and Ben Buxton. Licensed under the
    433. 

  433. 							GPL
    434. 

  434. 							License.</li>
    435. 

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

  436. 						<li>CSpot, &copy; 2020 feelfreelinux & alufers. Licensed under the GPL License</li>
    437. 

  437. 					</ul>
    438. 

  438. 				</div>
    439. 

  439. 			</div>
    440. 

  440. 			<div class="card text-white  mb-3">
    441. 

  441. 				<div class="card-header">Extras/Overrides</div>
    442. 

  442. 				<div class="card-body">
    443. 

  443. 					<fieldset>
    444. 

  444. 						<div class="form-check">
    445. 

  445. 							<label class="form-check-label"><input type="checkbox" id="show-nvs"
    446. 

  446. 									class="form-check-input " value="">Show NVS Editor</label>
    447. 

  447. 						</div>
    448. 

  448. 					</fieldset>
    449. 

  449. 					<fieldset>
    450. 

  450. 						<div class="form-check">
    451. 

  451. 							<label class="form-check-label"><input type="checkbox" id="show-commands"
    452. 

  452. 									class="form-check-input " value="">Show Advanced Commands</label>
    453. 

  453. 						</div>
    454. 

  454. 					</fieldset>
    455. 

  455. 				</div>
    456. 

  456. 			</div>
    457. 

  457. 		</div>
    458. 

  458. 		<!-- credits -->
    459. 

  459. 		</div>
    460. 

  460. 	</div>
    461. 

  461. 	</main>
    462. 

  462. 	<footer>
    463. 

  463. 		<div class="fixed-bottom d-flex justify-content-between  border-top border-dark p-3 bg-primary">
    464. 

  464. 			<span class="text-center" id="foot-fw"></span><button class="btn-warning ota_element " id="reboot_nav"
    465. 

  465. 				type="submit" style="display: none;">Reboot</button>
    466. 

  466. 			<button class="btn-warning recovery_element" id="reboot_ota_nav" type="submit" 
    467. 

  467. 				style="display: none;">Exit Recovery</button><span class="text-center" id="foot-if"></span>
    468. 

  468. 		</div>
    469. 

  469. 

  470. 	</footer>
    471. 

  471. </body>
    472. 

  472. 

  473. </html>
    474.