IHOLL
/
squeezelite-esp32
mirror of https://github.com/sle118/squeezelite-esp32


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
							<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>SqueezeESP32</title>

</head>

<body class="d-flex flex-column">
	<div style="display:none">
		<% if (htmlWebpackPlugin.files.sprites) { %>
			<% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
				<%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
					<% } %>
						<% } %>
	</div>
	<header class="navbar navbar-expand-sm navbar-dark  bg-primary sticky-top border-bottom border-dark" id="mainnav">
		<a class="navbar-brand" id="navtitle" href="#">SqueezeESP32</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="nav navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-wifi">WiFi</a></li>
				<li class="nav-item omsg"><a class="nav-link" data-toggle="tab" href="#tab-syslog">Status<span
							class="badge badge-pill badge-success" id="msgcnt"></span></a></li>
				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-audio">Audio</a></li>
				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-syst">System</a></li>
				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-hw">Hardware</a></li>
				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-cfg-fw">Updates</a></li>
				<div class="dropdown-divider"></div>
				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-nvs">NVS Editor</a></li>
				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-commands">Advanced</a></li>
				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-credits">Credits</a></li>
			</ul>

		</div>
		<div class="info navbar-right" style="display: inline-flex;">
			<svg class="recovery_element " style="fill:orange; width:1.5rem; height: 1.5rem;">
				<use xlink:href="#device-recover-fill"></use>
			</svg>

			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
				<use id="battery" xlink:href="#battery-fill"></use>
			</svg>
			<svg id="o_jack" style="fill:white; width:1.5rem; height: 1.5rem;">
				<use xlink:href="#headphone-fill"></use>
			</svg>
			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
				<use id="o_bt" xlink:href="#bluetooth-fill"></use>
			</svg>
			<span data-toggle="tooltip" id="o_type" data-placement="top" title=""><svg
					xmlns="http://www.w3.org/2000/svg" id="output" width="24" height="24" viewBox="0 0 24 24">
					<g id="o_i2s" display="none">
						<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" />
					</g>
					<g id="o_spdif" display="none">
						<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" />
						<path style="fill:#272B30;"
							d="M17 2L17 3L17 4L17 5L17 6L18 6L19 6L20 6L20 5L21 5L21 4L21 3L20 3L20 2L19 2L17 2z" />
						<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" />
						<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" />
					</g>
				</svg></span>
			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
				<use id="wifiStsIcon" xlink:href="#signal-wifi-fill"></use>
			</svg>


		</div>
	</header>
	<main role="main" class="flex-grow mt-1 mb-12" style="margin-bottom: 7rem;" id="content">
		<!-- Button trigger modal -->
  
  <!-- Modal -->
  <div class="modal fade" id="otadiv" tabindex="-1" role="dialog" aria-labelledby="fwProgressLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="fwProgressLabel">Upgrade Progress</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			<span id="flash-status"></span>
			<div class="progress" id="progress">
				<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%">
					0%
				</div>
			</div>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		</div>
	  </div>
	</div>
  </div>
		
		<div id="myTabContent" class="tab-content">

			<div class="tab-pane fade" id="tab-cfg-hw"></div>
			<div class="tab-pane fade" id="tab-cfg-syst"></div>
			<div class="tab-pane fade" id="tab-cfg-gen"></div>
			<div class="tab-pane fade" id="tab-cfg-fw">
				
				<div class="card text-white  mb-3">
					<div class="card-header">Software Updates</div>
					<div class="card-body">
						<table class="table table-hover table-striped table-dark">
							<thead>
								<tr>
									<th class="border-bottom-0 pb-0" scope="col">Version</th>
									<th class="border-bottom-0 pb-0" scope="col">Date/Time</th>
									<th class="border-bottom-0 pb-0" scope="col">Platform</th>
									<th class="border-bottom-0 pb-0" scope="col">Branch</th>
									<th class="border-bottom-0 pb-0" scope="col">Bit Depth</th>
								</tr>
								<tr>
									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm upSrch"
											id="svrs" type="text" placeholder="search releases"></th>
									<th class="border-top-0 pt-0" scope="col"></th>
									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm  upSrch"
											id="splf" type="text" placeholder="search platform"></th>
									<th class="border-top-0 pt-0" scope="col"><select class="form-control-sm  upSrch"
											id="fwbranch">
											<option selected="">Choose FW branch</option>
										</select>
									<th class="border-top-0 pt-0" scope="col"><input class="form-control-sm upSrch"
											id="bits" type="text" placeholder="search bit depth"></th>
									</th>
								</tr>
							</thead>
							<tbody id="rTable"></tbody>
						</table>

						<div class="form-group row">
							<div class="col-auto">
								<button type="button" id="chkUpdates" class="btn btn-info btn-sm">Check for
									updates</button>
							</div>
							<label class="col-auto col-form-label" for="fw-url-input">Firmware URL</label>
							<div class="col">
								<input type="text" class="form-control"
									placeholder="select entry from list or enter known url" id="fw-url-input">
							</div>
							<div class="col-auto">
								<button type="button" id='start-flash' data-toggle="modal" data-target="#uCnfrm"
									class="btn btn-warning btn-sm" style="display: none;">Flash Firmware</button>
							</div>
							
							<div class="col-auto">
								<button class="btn-warning ota_element" type="submit" onclick="handleReboot('recovery');" >Recovery</button>
							</div>
						</div>

					</div>
				</div>
				<div class="modal" id="uCnfrm">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">Firmware Flash</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<p>Flash URL <span id="selectedFWURL" class="text-break"></span> to device?</p>
							</div>
							<div class="modal-footer  ">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="button" class="btn btn-warning" data-dismiss="modal"
									onclick="hFlash();">Ok</button>
							</div>
						</div>
					</div>
				</div>
				<div class="card text-white mb-3" >
					<div class="card-header">Local Firmware Upload</div>
					<div class="card-body">
							<div id="uploaddiv" class="form-group row">
									<label for="flashfilename" class="col-auto col-form-label">Local File</label>
									<div class="col">
										<input type="file" class="form-control-file" id="flashfilename" aria-describedby="fileHelp">
								</div>
								<div class="col-auto">
									<div class="buttons">
										<button type="button" class="btn btn-danger" id="fwUpload">Upload!</button>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		

		<div class="tab-pane fade" id="tab-nvs">
			<table class="table table-hover">
				<thead>
					<tr>
						<th scope="col">Key</th>
						<th scope="col">Value</th>
					</tr>
				</thead>
				<tbody id="nvsTable">
				</tbody>
			</table>
			<div class="buttons">
				<button button id="reboot-button"  class="btn btn-primary" style="float:right" type="submit" onclick="handleReboot('reboot');" >Reboot</button>
				
				<input id="save-nvs" type="button" class="btn btn-success" value="Commit">
				<input id="save-as-nvs" type="button" class="btn btn-success" value="Download config">
				<input id="load-nvs" type="button" class="btn btn-success" value="Load File">
				<input aria-describedby="fileHelp" onchange="onChooseFile(event, onFileLoad.bind(this))"
					id="nvsfilename" type="file" style="display:none">
			</div>
		</div>

		<div class="tab-pane fade" id="tab-cfg-audio">
			<div class="card text-white  mb-3">
				<div class="card-header">Usage Templates</div>
				<div class="card-body">
					<fieldset>
						<fieldset class="form-group" id="output-tmpl">
							<legend>Output</legend>
							<div class="form-check">
								<label class="form-check-label">
									<input type="radio" class="form-check-input" name="output-tmpl" id="i2s">
									I2S Dac
								</label>
							</div>
							<div class="form-check">
								<label class="form-check-label">
									<input type="radio" class="form-check-input" name="output-tmpl" id="spdif">
									SPDIF
								</label>
							</div>
							<div class="form-check">
								<label class="form-check-label">
									<input type="radio" class="form-check-input" name="output-tmpl" id="bt">
									Bluetooth
								</label>
							</div>
						</fieldset>
						<div class="form-group"><label for="player">Player Name</label><input type="text"
								class="form-control " placeholder="Squeezelite" id="player"></div>
						<div class="form-group"><label for="optional">Optional setting (e.g. for LMS IP
								address)</label><input type="text" class="form-control" id="optional"></div>
						<div class="form-group">
							<div class="form-check">
								<label class="form-check-label">
									<input class="form-check-input" type="checkbox" id="disable-squeezelite" value=""
										checked="">
									Disable Squeezelite
								</label>
							</div>
						</div>
						<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"
							style="display: none;" id="toast_cfg-audio-tmpl">
							<div class="toast-header"><strong class="mr-auto">Result</strong><button type="button"
									class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"
									onclick="hideSurrounding(this)"><span aria-hidden="true">×</span></button></div>
							<div class="toast-body" id="msg_cfg-audio-tmpl"></div>
						</div>
						<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl"
							onclick="saveAutoexec1(false)">Save</button>
						<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl"
							onclick="saveAutoexec1(true)">Apply</button>
					</fieldset>
				</div>
			</div>
		</div>
		<div class="tab-pane fade active show" id="tab-wifi">
			<div class="card text-white  mb-3">
				<div class="card-header">WiFi Status</div>
				<div class="card-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th scope="col">Joined</th>
								<th scope="col">Name</th>
								<th scope="col">Signal</th>
								<th scope="col">Security</th>
							</tr>
						</thead>
						<tbody id="wifiTable"></tbody>
					</table>
					<button type="button" id="updateAP" class="btn btn-info btn-sm">Scan</button>

				</div>
				<div class="modal" id="WiFiDisconnectConfirm">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">Disconnect</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<p>Disconnect from network? After disconnecting, the system won't be accessible from
									the current address and will expose itself as access point name <span
										id="apName"></span> with password <span id="apPass"></span> </p>
							</div>
							<div class="modal-footer connecting-success connecting-status">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="button" class="btn btn-warning" data-dismiss="modal"
									onclick="handleDisconnect();">Ok</button>
							</div>
						</div>
					</div>
				</div>
				<div class="modal" id="WifiConnectDialog">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi
								</h5>
								<h5 class="modal-title connecting-status connecting-success">Status</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<fieldset class="connecting-init connecting-fail">
									<div class="form-group"><label for="manual_ssid">Wifi Name</label><input type="text"
											class="form-control" placeholder="Enter Name" id="manual_ssid"></div>
									<div class="form-group"><label for="manual_pwd">Password</label><input
											type="password" class="form-control" placeholder="Enter Name"
											id="manual_pwd"></div>
								</fieldset>
								<div id="connect-wait" class="connecting">
									<div>Connecting to <span id="ssid-wait"></span> </div>
									<div>
										You may lose wifi access while the esp32 recalibrates
										its radio. Please
										wait until your device automatically reconnects. This can take up to
										30s.
									</div>
								</div>
								<div id="connect-success" class="connecting-success connecting-status">
									<div> Connected to Access Point : <span id="connectedToSSID"></span></div>
									<div> Device IP address : <span id="ipAddress"></span></div>
									<div>Subnet Mask:<span id="netmask"></span></div>
									<div>Default Gateway:<span id="gateway"></span></div>
								</div>
								<div id="connect-fail" class="connecting-fail">
									<h3 class="text-error">Connection failed</h3>
									<p>Please double-check wifi password if any and make sure the access point has
										good signal.</p>
								</div>
							</div>
							<div class="modal-footer ">
								<button type="button"
									class="btn btn-secondary connecting-init connecting-fail connecting"
									data-dismiss="modal">Close</button>
								<button type="button" id="btnJoin"
									class="btn btn-primary connecting-init connecting-fail"
									onclick="handleConnect();">Join</button>
								<button type="button" class="connecting btn btn-primary" disabled>
									<span class="spinner-border spinner-border-sm" role="status"
										aria-hidden="true"></span>
									<span class="sr-only">Connecting...</span></button>
							</div>

							<div class="modal-footer connecting-success connecting-status justify-content-between" style=""><button type="button"
									class="btn btn-primary" data-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
									data-toggle="modal" data-dismiss="modal" data-target="#WiFiDisconnectConfirm">Disconnect</button> 
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="tab-pane fade " id="tab-commands">
			<fieldset id="commands-list"></fieldset>
		</div>
		<!-- Status -->
		<div class="tab-pane fade " id="tab-syslog">
			<div class="card border-primary mb-3">
				<div class="card-header">Logs</div>
				<div class="card-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th scope="col">Timestamp</th>
								<th scope="col">Message</th>
							</tr>
						</thead>
						<tbody id="syslogTable">
						</tbody>
					</table>
					<div class="buttons">
						<input id="clear-syslog" type="button" class="btn btn-danger btn-sm" value="Clear" />
					</div>
				</div>
			</div>
			<div class="card border-primary mb-3" id="pins" style="display: none;">
				<div class="card-header">Pin Assignments</div>
				<div class="card-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th scope="col">Device</th>
								<th scope="col">Pin Name</th>
								<th scope="col">GPIO Number</th>
								<th scope="col">Type</th>
							</tr>
						</thead>
						<tbody id="gpiotable"></tbody>
					</table>
				</div>
			</div>
			<div class="card border-primary mb-3" style="visibility: collapse;" id="tasks_sect">
				<div class="card-header">Tasks</div>
				<div class="card-body">
					<table class="table table-hover">
						<!-- console.log(msg_time.toLocaleString() + '\tname' + '\tcpu' + '\tstate' + '\tminstk' + '\tbprio' + '\tcprio' + '\tnum'); -->
						<thead>
							<tr>
								<th scope="col">#</th>
								<th scope="col">Task Name</th>
								<th scope="col">CPU</th>
								<th scope="col">State</th>
								<th scope="col">Min Stack</th>
								<th scope="col">Base Priority</th>
								<th scope="col">Cur Priority</th>
							</tr>
						</thead>
						<tbody id="tasks"></tbody>
					</table>
				</div>
			</div>
		</div>
		<!-- syslog -->
		<div class="tab-pane fade " id="tab-credits">
			<div class="card text-white  mb-3">
				<div class="card-header">Credits</div>
				<div class="card-body">
					<p><strong><a
								href="https://github.com/sle118/squeezelite-esp32">squeezelite-esp32</a><br></strong>&copy;
						2020, philippe44, sle118, daduke<br /><a href="https://opensource.org/licenses/MIT">This
							software is released under the MIT License.</a></p>
					<p>
						This app would not be possible without the following libraries:
					</p>
					<ul>
						<li>squeezelite, &copy; 2012-2019, Adrian Smith and Ralph Irving. Licensed under the GPL
							License.</li>
						<li>esp32-wifi-manager, &copy; 2017-2019, Tony Pottier. Licensed under the MIT License.</li>
						<li>SpinKit, &copy; 2015, Tobias Ahlin. Licensed under the MIT License.</li>
						<li>jQuery, The jQuery Foundation. Licensed under the MIT License.</li>
						<li>cJSON, &copy; 2009-2017, Dave Gamble and cJSON contributors. Licensed under the MIT
							License.
						</li>
						<li>esp32-rotary-encoder, &copy; 2011-2019, David Antliff and Ben Buxton. Licensed under the
							GPL
							License.</li>
						<li>tarablessd1306, &copy; 2017-2018, Tara Keeling. Licensed under the MIT license.</li>
					</ul>
				</div>
			</div>
			<div class="card text-white  mb-3">
				<div class="card-header">Extras/Overrides</div>
				<div class="card-body">
					<fieldset>
						<div class="form-check">
							<label class="form-check-label"><input type="checkbox" id="show-nvs"
									class="form-check-input " value="">Show NVS Editor</label>
						</div>
					</fieldset>
					<fieldset>
						<div class="form-check">
							<label class="form-check-label"><input type="checkbox" id="show-commands"
									class="form-check-input " value="">Show Advanced Commands</label>
						</div>
					</fieldset>
				</div>
			</div>
		</div>
		<!-- credits -->
		</div>
	</div>
	</main>
	<footer>
		<div class="fixed-bottom d-flex justify-content-between  border-top border-dark p-3 bg-primary">
			<span class="text-center" id="foot-fw"></span><button class="btn-warning ota_element " id="reboot_nav"
				type="submit" onclick="handleReboot('reboot');" style="display: none;">Reboot</button>
			<button class="btn-warning recovery_element" id="reboot_ota_nav" type="submit" onclick="handleReboot('reboot_ota');"
				style="display: none;">Exit Recovery</button><span class="text-center" id="foot-wifi"></span>
		</div>

	</footer>
</body>

</html>