BrushlessPower.github.io/index.html at main · BrushlessPower/BrushlessPower.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<title>ESP OTA BLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>
<body class="w3-theme-l5" onload="loadPaired()">

<!-- Navbar -->


<!-- Navbar on small screens -->

<!-- Page Container -->
<div class="w3-content" style="max-width:1400px;margin-top:50px;margin-bottom:100px">
  <!-- The Grid -->
  <div class="w3-row">
    <!-- Left Column -->
    <div class="w3-col m6 w3-round">
      <!-- Profile -->
      <div class="w3-round w3-white w3-margin">
        <div class="w3-container">
         <h4>Paired Devices</h4>
         <ul class="w3-ul w3-hoverable w3-border w3-round" id="deviceList">
		 </ul>
		 <button type="button" id="scanButton" class="w3-button w3-round w3-margin w3-text-white w3-blue">Connect</button>
		 <button type="button" id="disconnectButton" class="w3-button w3-round w3-margin w3-text-white w3-red w3-hide">Disconnect</button>
        </div>
      </div>
      <br>
      <!-- Accordion -->
      <div class="w3-round w3-white w3-margin">
		<div class="w3-container w3-padding">
		<h4>Upload</h4>
		<input class="w3-input w3-border w3-round w3-margin-bottom" type="file" id="otaFile" accept=".bin">
		<div class="w3-light-grey w3-round">
			<div class="w3-container w3-round w3-blue" id="progressBar" style="width:0%">%</div>
		</div>
		<button type="button" id="uploadButton" class="w3-button w3-round w3-margin w3-text-white w3-blue w3-hide">Upload</button>

        </div>
      </div>

    <!-- End Left Column -->
    </div>
    <div class="w3-col m6 w3-round">
      <!-- Profile -->

	  <div class="w3-container w3-margin w3-display-container w3-round w3-border w3-theme-border wl" id="outputCard">
        <p><strong>Info</strong></p>
        <p id="outputText">Connect a BLE device</p>
      </div>
	  <br>


      <!-- Alert Box -->
      <div class="w3-container w3-margin w3-display-container w3-round w3-theme-l4 w3-border w3-theme-border wl">
		<div class="w3-display-topright">
			<span onclick="copyLogs()" class="w3-button w3-blue">
				<i class="fa fa-copy"></i>
			</span>
			<span onclick="clearLogs()" class="w3-button w3-red">
				<i class="fa fa-remove"></i>
			</span>
		</div>
        <p><strong>Notifications</strong></p>
        <p id="notifyLogs"></p>
      </div>

    <!-- End Left Column -->
    </div>

  <!-- End Grid -->
  </div>

<!-- End Page Container -->
</div>
<br>


<script src="ota.js"></script>
<script src="main.js"></script>

</body>
</html>