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
|
<html>
<head>
<title>Setup AIRMX device</title>
<script defer src="main.mjs"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link href="app.css" rel="stylesheet">
</head>
<body>
<header class="page__header">
<svg xmlns="http://www.w3.org/2000/svg" width="158" height="28" fill="none">
<path fill="#fff" d="m134.916 20-2.395-4.258h-.085l-1.704-1.734v-.049L127.078 8h2.973l2.423 4.478h.076l1.732 1.498v.048L138.003 20h-3.087Zm-7.913 0 3.729-5.976v-.048l1.704-1.498h.085L134.935 8h2.992l-3.645 5.96v.048l-1.732 1.734h-.076L130.06 20h-3.057ZM113.998 20V8h1.745l3.218 4.844h.078L122.257 8h1.745v12h-2.506v-4.958l.039-2.23h-.087l-2.087 3.264h-.722l-2.087-3.265h-.087l.039 2.231V20h-2.506ZM103.058 15.653V13.73h2.346c.405 0 .765-.076 1.079-.228.321-.152.573-.366.756-.643.183-.277.275-.597.275-.96 0-.565-.21-1.007-.628-1.327-.412-.32-.939-.48-1.58-.48h-2.248V8h2.66c.831 0 1.583.141 2.257.423.68.283 1.22.692 1.619 1.23.399.537.599 1.194.599 1.97 0 .754-.21 1.435-.628 2.043-.412.608-1.004 1.091-1.776 1.45-.772.357-1.688.537-2.748.537h-1.983ZM100.998 20V8h2.708v12h-2.708Zm6.938 0-2.895-4.681 2.021-1.384L110.998 20h-3.062ZM92.001 20V8h2.993v12h-2.993Zm-3.003 0v-2.035h9V20h-9Zm0-9.965V8h9v2.035h-9ZM74.998 20l4.15-12h2.698l4.152 12h-2.784l-.985-3.216-.21-.887-1.483-5.088h-.077l-1.482 5.088-.21.887L77.78 20h-2.783Zm2.582-2.605v-1.962h5.835v1.962H77.58ZM56.498 20V8h1.905l4.242 6.334.733 1.197h.078l-.078-2.402V8h2.62v12h-1.916l-4.222-6.407-.733-1.246h-.059l.049 2.508V20h-2.62ZM44.998 20.002v-12h8.5v2.093h-5.654v2.808h4.731v2.036h-4.73v2.971h5.653v2.092h-8.5ZM35.152 15.859v-2.076h2.088a2.38 2.38 0 0 0 1.087-.236 1.792 1.792 0 0 0 1.001-1.637c0-.559-.2-1.001-.6-1.327-.395-.325-.925-.488-1.593-.488h-1.983V8.002h2.164c.954 0 1.78.158 2.48.473.698.314 1.239.76 1.62 1.335.388.575.582 1.25.582 2.027 0 .792-.194 1.492-.582 2.1-.388.603-.931 1.075-1.63 1.417-.693.336-1.497.505-2.412.505h-2.222Zm-2.154 4.143v-12h2.707v12h-2.707ZM24.988 20c-1.058 0-1.96-.236-2.708-.71-.742-.472-1.309-1.154-1.702-2.047-.387-.898-.58-1.981-.58-3.251 0-1.27.193-2.35.58-3.243.393-.892.96-1.572 1.702-2.04.741-.473 1.644-.709 2.708-.709 1.05 0 1.95.236 2.698.71.748.467 1.319 1.15 1.712 2.047.4.892.6 1.97.6 3.235 0 1.27-.197 2.353-.59 3.251-.394.893-.964 1.575-1.712 2.048-.748.473-1.65.709-2.708.709Zm0-2.08c.522 0 .96-.154 1.315-.462.355-.308.622-.754.803-1.338.187-.585.28-1.294.28-2.128-.006-.834-.103-1.54-.29-2.12-.187-.584-.46-1.027-.822-1.33-.355-.308-.783-.462-1.286-.462-.51 0-.941.156-1.296.47-.348.308-.616.754-.803 1.338-.187.58-.28 1.28-.28 2.104 0 .823.093 1.527.28 2.112.194.584.468 1.033.822 1.346.355.314.78.47 1.277.47Z"/>
</svg>
</header>
<main class="container">
<form id="form-unsupported" class="form">
<p class="form__text">
Oops! Your browser doesn't support the Web Bluetooth API. To set up your AIRMX Pro, please consider switching to Google Chrome 56+ or Microsoft Edge 79+.
</p>
</form>
<form id="form-welcome" class="form">
<header class="form__header">
<h1 class="form__title form__title--gradient">Setup AIRMX Pro</h1>
<p class="form__description">Connect your AIRMX Pro to the internet</p>
</header>
<p class="form__text">
As you may know, the AIRMX servers are no longer available. During setup, the device will
send a registration request to the manufacturer's API endpoint to verify its identity. You must set up a
mock API server to complete the process. Click here for instructions.
</p>
<footer class="form__footer">
<button type="submit" class="button">
GET STARTED
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fafafa" class="button__icon">
<path d="M11.131 8.75H2v-1.5h9.131l-4.2-4.2L8 2l6 6-6 6-1.069-1.05 4.2-4.2Z" />
</svg>
</button>
</footer>
</form>
<form id="form-wifi-credentials" class="form">
<header class="form__header">
<h1 class="form__title">Configure Wi-Fi Credentials</h1>
<p class="form__description">Step 1 of 3</p>
</header>
<p class="form__text">
First, connect the machine to the internet using the Wi-Fi credentials. Note that the device may only
support a 2.4 GHz network.
</p>
<input type="text" id="ssid" class="input" placeholder="SSID" />
<input type="password" id="password" class="input" placeholder="Password" />
<footer class="form__footer">
<button type="submit" class="button">
NEXT
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fafafa" class="button__icon">
<path d="M11.131 8.75H2v-1.5h9.131l-4.2-4.2L8 2l6 6-6 6-1.069-1.05 4.2-4.2Z" />
</svg>
</button>
</footer>
</form>
<form id="form-pairing-activation" class="form">
<header class="form__header">
<h1 class="form__title">Activate Paring Mode</h1>
<p class="form__description">Step 2 of 3</p>
</header>
<p class="form__text">
We're almost there! To activate pairing mode, press and hold the AI button
<span class="physical-button"><span class="physical-button__ai"></span></span>
and the fan speed increase button
<span class="physical-button"><span class="physical-button__fan"></span></span>
simultaneously for 3 seconds.
</p>
<p class="form__text">
Release all the buttons once the green Bluetooth icon
<span class="physical-button"><span class="physical-button__b-circle"></span></span>
starts flashing.
</p>
<footer class="form__footer">
<button type="submit" class="button">
I'M READY
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fafafa" class="button__icon">
<path d="M11.131 8.75H2v-1.5h9.131l-4.2-4.2L8 2l6 6-6 6-1.069-1.05 4.2-4.2Z" />
</svg>
</button>
</footer>
</form>
<form id="form-communication" class="form">
<header class="form__header">
<h1 class="form__title">Communicating with Device</h1>
<p class="form__description">Step 3 of 3</p>
</header>
<p class="form__text">
One more thing, let's choose the AIRMX Pro device from the Bluetooth scanning list.
</p>
</form>
<form id="form-result-success" class="form">
<header class="form__header">
<img src="assets/indicator-success.png" class="form__indicator" />
<h1 class="form__title">Congratulations! Your device has been successfully set up.</h1>
</header>
<p class="form__text">
Here is your device key. Please copy and save it in a safe place. You may need to integrate your device
with another platform to control or monitor it remotely.
</p>
<p class="form__text">
If you lose it, don't worry. You can reset and re-pair your device on this page at any time.
</p>
<div class="input-group">
<input id="device-key" class="input" type="text" value="rqpwp3sv9ximkmspery5nogc5yprhzjt" readonly />
<button class="button" type="button">Copy</button>
</div>
</form>
<form id="form-result-failure" class="form">
<header class="form__header">
<img src="assets/indicator-failure.png" class="form__indicator" />
<h1 class="form__title">Oops! Something went wrong.</h1>
</header>
<p class="form__text">
Time's up. The device didn't respond. Here are some tips: Please
confirm that the Wi-Fi credentials are correct and that the access
point is a 2.4 GHz network. Also, check to see if the mock server
is up and running.
</p>
<footer class="form__footer">
<button type="submit" class="button">
RETRY
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fafafa" class="button__icon">
<path d="M11.131 8.75H2v-1.5h9.131l-4.2-4.2L8 2l6 6-6 6-1.069-1.05 4.2-4.2Z" />
</svg>
</button>
</footer>
</form>
</main>
</body>
</html>
|
