-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
199 lines (161 loc) · 8.96 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<html>
<head>
<title>Nunam Wifi Setup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<img src="nlogo.png">
<h1>Nunam WiFi Configuration</h1>
<div id="multi-step-form-container">
<!-- Form Steps / Progress Bar -->
<ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
<!-- Step 1 -->
<li class="form-stepper-active text-center form-stepper-list" step="1">
<a class="mx-2">
<span class="form-stepper-circle">
<span>1</span>
</span>
<div class="label">Connect</div>
</a>
</li>
<!-- Step 2 -->
<li class="form-stepper-unfinished text-center form-stepper-list" step="2">
<a class="mx-2">
<span class="form-stepper-circle text-muted">
<span>2</span>
</span>
<div class="label text-muted">Scan Wifi</div>
</a>
</li>
<!-- Step 3 -->
<li class="form-stepper-unfinished text-center form-stepper-list" step="3">
<a class="mx-2">
<span class="form-stepper-circle text-muted">
<span>3</span>
</span>
<div class="label text-muted">Sent</div>
</a>
</li>
</ul>
<!-- Step Wise Form Content -->
<form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST">
<!-- Step 1 Content -->
<section id="step-1" class="form-step">
<!-- Step 1 input fields -->
<div id="permissions_text">
<h2 class="font-normal">Permissions:</h2>
<div class="mt-3">
Note: Allow "Nearby Devices" permissions.
</div>
</div>
<div id="connection-msg" style="display: none; font-size: 20px; font-weight: 500;"></div>
<div class="mt-3">
<button id="form_connect" class="button" type="button" style="font-size: 15px;">Connect to Nunam
Device</button>
<button id="first_next_btn" class="button btn-navigate-form-step mt-3" type="button"
step_number="2" style="display: none;">Next</button>
</div>
<div id="output" class="output" style="border:1px">
<pre id="log"></pre>
</div>
</section>
<!-- Step 2 Content, default hidden on page load. -->
<section id="step-2" class="form-step d-none">
<h2 class="font-normal"> Wifi Network Settings</h2>
</br>
<h3 id="config_complete" style="display: none;" class="font-normal">Wifi Configuration Completed
</h3>
<!-- Step 2 input fields -->
<div id="scan_wifi_disable">
<button id="form_wifi_scan" class="button mt-3" type="button" style="font-size: 15px;">Scan for
Wifi Networks</button>
</br>
<h6 id="scan_try_again" style="color: red; display: none;">Try Again!!!</h6>
<div id="loader_show" class="loader" style="display: none;"></div>
<div id="after_scan_wifi" style="display: none;">
<p>Select Network:
<select id="ssid" size="1" placeholder="WiFi SSID"
style="min-width: 200px; font-size: 16px;" disabled></select>
</p>
<p id="password_p">Password:
<input id="password" size="17" placeholder="Password" style="font-size: 16px;" disabled>
</p>
<button id="form_wifi_config" class="button btn-navigate-form-step" type="button"
step_number="3" style="font-size: 15px;">Connect to Network</button>
</div>
</div>
<div class="mt-3">
<!-- <button class="button btn-navigate-form-step" type="button" step_number="1">Prev</button> -->
<button id="scan_wifi_next_btn" class="button btn-navigate-form-step" type="button"
step_number="3" style="display: none;">Next</button>
</div>
<div id="output" class="output" style="border:1px">
<pre id="log"></pre>
</div>
</section>
<!-- Step 3 Content, default hidden on page load. -->
<section id="step-3" class="form-step d-none">
<h2 class="font-normal">Credentials sent to Nunam Device:
</br>
</br>
<div id="wifi_connection-msg" style="display: none; font-size: 18px; font-weight: 500;"></div>
<div id="wifi_pass" style="display: none; font-size: 18px; font-weight: 500;"></div>
<i class="fa fa-check-circle" style="font-size:30px;color:green"></i>
</h2>
<div class="mt-3" style="display: flex; justify-content: center; align-items: center;">
<h6 class="text-muted">Would you like to Configure again?</h6>
<button class="button btn-navigate-form-step submit-btn" type="button" onclick="refreshPage()"
step_number="1">Configure Again</button>
</div>
</section>
</form>
</div>
<button id="help_btn" class="button" type="button" style="font-size: 20px;"> <i class="fa fa-question-circle"
style="font-size:20px;color:white"></i>
Help</button>
<div id="help_window">
<span class="close_button" onclick="closeHelp()">×</span>
<h2>Follow these steps to connect Nunam device to Wi-Fi.</h2>
<h1 style="color: red;">Step-1</h1>
<p>Click on "Connect to Nunam Device" button.</p>
<img src="./instruction_img/1.jpg" alt="Step 1">
<p>A pop-up window will appear; If your browser doesn't allow "Nearby devices" permission, click on the "Update Permissions" button.</p>
<img src="./instruction_img/2.jpg" alt="Step 2">
<p> Click on "Allow"</p>
<img src="./instruction_img/3.jpg" alt="Step 2">
<p>A pop-up window will appear; select the Nunam Device and click on the "Pair" button.</p>
<img src="./instruction_img/4.jpg" alt="Step 2">
<p>Confirm the connection with the message "Connected With Nunam Device: <Device Name>". Click on the "Next" button.</p>
<img src="./instruction_img/5.jpg" alt="Step 3">
<h1 style="color: red;">Step-2</h1>
<P>Click on "Scan for WiFi Networks" button. </P>
<img src="./instruction_img/6.jpg" alt="Step 4">
<p>Select your Wi-Fi, enter the password, and click on the "Connect to Network" button.</p>
<img src="./instruction_img/7.jpg" alt="Step 5">
<h1 style="color: red;">Step-3</h1>
<p>Your credentials will be sent to the Nunam Device. To reconfigure Wi-Fi settings, click on the "Configure Again" button.</p>
<img src="./instruction_img/8.jpg" alt="Step 7">
</div>
</div>
<!-- No Need to delete -->
<form id="form_connect">
</form>
<form id="form_wifi_scan" style="display: none">
<input id="wifi_scan_btn" type="submit" value="Scan for Networks" disabled>
</form>
<form id="form_wifi_config" style="display: none">
<p>Network: <select id="ssid" size=1 placeholder="WiFi SSID" style="min-width: 150px;" disabled></select></p>
<p id="password_p">Password: <input id="password" type="password" size=17 placeholder="Password" disabled></p>
<p><input id="submit_credentials_btn" type="submit" value="Connect to Network" disabled></p>
</form>
<!-- <div id="output" class="output" style="border:1px">
<pre id="log"></pre>
</div> -->
<!-- ------------------------ -->
<script src="script.js"></script>
</body>
</html>