-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproducts.html
406 lines (378 loc) · 23.3 KB
/
products.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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="We are medikom. Please visit our page to learn more about our mission and our products.">
<title>Our Products | medikom</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.png"/>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- navbar -->
<header class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/"><img src="images/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="history.html">Our History</a>
</li>
<li class="nav-item">
<a class="nav-link disabled active" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</header>
<!-- section header -->
<section class="headerContainer">
<div class="container d-flex align-items-center" style="height: 20vh;">
<div class="row">
<h1>
Our Products
</h1>
</div>
</div>
</section>
<section class="divider"></section>
<!-- product grid -->
<section>
<div class="container">
<div class="row">
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal1" aria-hidden="true">
<img src="images/webcam.jpg" alt="webcam">
<p>Webcams</p>
</a>
</div>
</div>
<div class="itemContainer align-items-center col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal2" aria-hidden="true">
<img src="images/phone.jpg" alt="desktop phone">
<p>Telephones</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal3" aria-hidden="true">
<img src="images/remoteglucose.jpg" alt="glucose monitor">
<p>REMOTE Glucose Monitor</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal4" aria-hidden="true">
<img src="images/remotebloodpressure.jpg" alt="blood pressure monitor">
<p>REMOTE Blood Pressure Monitor</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal5" aria-hidden="true">
<img src="images/alert.jpg" alt="fall sensor">
<p>REMOTE Fall Sensor</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal6" aria-hidden="true">
<img src="images/tablet.jpg" alt="doctor holding tablet">
<p>Medical Tablet</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal7" aria-hidden="true">
<img src="images/application.jpg" alt="phone with medical application">
<p>Medical Application</p>
</a>
</div>
</div>
<div class="itemContainer col-lg-3 col-md-6 col-sm-12">
<div>
<a data-bs-toggle="modal" data-bs-target="#modal8" aria-hidden="true">
<img src="images/kiosk.jpg" alt="telemedicine kiosk">
<p>Telemedicine Kiosk</p>
</a>
</div>
</div>
</div>
</div>
<!-- page modals -->
<div>
<!-- webcam modal -->
<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Webcams</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/webcam.jpg" alt="webcam">
</div>
<div class="col-12 col-md-6">
<h2>Webcams</h2>
<p>Our webcams are designed for the medical professional: easy to set-up, with clear video and audio. These will work with any existing computer system in your office. Use these at your front desk or to help bridge the virtual gap. Contact us for production and cost information.
</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- telephone modal -->
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Telephones</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/phone.jpg" alt="desktop phone">
</div>
<div class="col-12 col-md-6">
<h2>Telephones</h2>
<p>Our office telephones work on both landlines and VoIP and can be designed to match the needs for your organization. Please contact us for more information.</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- glucose monitor modal -->
<div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">REMOTE Glucose Monitor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/remoteglucose.jpg" alt="glucose monitor">
</div>
<div class="col-12 col-md-6">
<h2>REMOTE Glucose Monitor</h2>
<p>Keep check on your home-bound patients with our remote series of products. Our glucose monitor allows patients with diabetes or blood sugar issues to send in daily tests so you can keep their health in check. Our in-house application can also tie to these devices to their personal device so they can see updated information about their health. Contact us if you have any questions or for availability. </p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- blood pressure monitor modal -->
<div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">REMOTE Blood Pressure Monitor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/remotebloodpressure.jpg" alt="blood pressure monitor">
</div>
<div class="col-12 col-md-6">
<h2>REMOTE Blood Pressure Monitor</h2>
<p>Keep check on your home-bound patients with our remote series of products. This blood pressure monitor allows your patients to have an accurate history of their blood pressure and pulse data, and will inform them and you if a reading detects danger to them. Contact for information!</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fall sensor modal -->
<div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">REMOTE Fall Sensor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/alert.jpg" alt="fall sensor">
</div>
<div class="col-12 col-md-6">
<h2>REMOTE Fall Sensor</h2>
<p>Keep check on your home-bound patients with our remote series of products. This fall sensor keeps elderly patients safe from slips and falls in their home. These devices will contact close family or emergency services to send them help as soon as they need it. Contact us for information!</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tablet modal -->
<div class="modal fade" id="modal6" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Medical Tablet</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/tablet.jpg" alt="doctor holding tablet">
</div>
<div class="col-12 col-md-6">
<h2>Medical Tablet</h2>
<p>Our tablets are designed to work for medical professionals, giving them access to patient records at a tap. These can also be set up to allow communication between doctors and nurses, or allow remote appointments for patients stuck at home. Please contact us for more information!</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- application modal -->
<div class="modal fade" id="modal7" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Medical Application</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/application.jpg" alt="phone with medical application">
</div>
<div class="col-12 col-md-6">
<h2>Medical Application</h2>
<p>Reach out and connect with your patients through our remote medical application! Our in-house team of programmers and designers can build this for your needs for your organization. Please reach out to us so we can give you more information and pricing for your project. </p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- kiosk modal -->
<div class="modal fade" id="modal8" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-centered . object-modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Telemedicine Kiosk</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-6 modal-object-img-div">
<img class="modalImg" src="images/kiosk.jpg" alt="telemedicine kiosk">
</div>
<div class="col-12 col-md-6">
<h2>Telemedicine Kiosk</h2>
<p>Reach out to patients in remote areas with our special-built telemedicine kiosks. These kiosks include a camera, a microphone, and any sensors to record their health. These are specially built for your purposes. Contact for information about what we can include for you!</p>
<a href="contact.html"><button class="btn btn-primary btn-object-modal">Contact Us Here!</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="divider"></section>
<!-- footer -->
<footer class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
00000, 123 Example Rd<br>
New York<br>
New York<br>
(415) 555-0132<br>
</div>
<section class="divider d-sm-none"></section>
<div class="col-md-3 col-sm-6">
<a class="footerNav" href="/">Home</a><br>
<a class="footerNav" href="history.html">Our History</a><br>
<a class="footerNav" href="products.html">Products</a><br>
<a class="footerNav" href="news.html">News</a><br>
<a class="footerNav" href="contact.html">Contact</a>
</div>
<section class="divider d-md-none"></section>
<div class="col-md-6 col-sm-12">
<p class="newsletterHeader">Newsletter</p>
<p>Sign up for our newsletter for the latest updates on our products!</p>
<form onsubmit="return false" id="footer-form">
<input type="text" class="form-control" placeholder="Email" id="footer-email">
<button class="btn btn-primary margin-top-1" onclick="showConfirmationEmail()">Submit</button>
</form>
<p id="footerEmailSuccess" class="margin-top-1">You have been successfully registered!</p>
<p id="footerEmailFailure" class="margin-top-1">Please enter a valid email address.</p>
</div>
</div>
<section class="divider"></section>
<div class="row">
<div>
© 2021 | TSA Team #### | <a class="footerNav" href="works.html"><u>Works Cited</u></a>
<br class="d-md-none">
<a class="socialLinks" href="https://facebook.com" target=_blank rel="noreferrer"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="socialLinks" href="https://twitter.com" target=_blank rel="noreferrer"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a class="socialLinks" href="https://instagram.com" target=_blank rel="noreferrer"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a class="socialLinks" href="https://linkedin.com" target=_blank rel="noreferrer"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a class="socialLinks" href="contact.html" rel="noreferrer"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>