-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
376 lines (362 loc) · 18.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Aid Web</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="bg-dark">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="./index.html">First Aid Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#t">First Aid Topics</a>
</li>
<!--TODO: Call 911 feature-->
<li class="nav-item mx-5">
<a class="nav-link btn btn-danger mx-auto" href="tel:911">If you have an emergency case call 911</a>
</li>
<form id="search-form" class="d-flex" style="position: absolute; right: 0;">
<input class="form-control mr-sm-2"id="search-input" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 mx-4" type="submit" >Search</button>
<div class="modal fade" id="search" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-dark text-white text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Search</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="search-body overflow-auto">
No results found.
</div>
</div>
</div>
</div>
</form>
</ul>
</div>
</nav>
</div>
</header>
<!-- Main Content Section -->
<main class="container-fluid bg p-4">
<div class="container text-white">
<div class="row">
<div class="col-md-8 my-auto">
<h1>Welcome to First Aid Website</h1>
<p>Our website is designed to help you deal with emergency situations until the ambulance arrives. We provide comprehensive first aid information for all types of injuries and illnesses, along with multimedia content to help you learn and engage with the material. We also aim to reduce the risk to the injured person as much as possible.</p>
</div>
<div class="col-md-4">
<!-- Slider Section -->
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/BLS-card.svg" class="d-block w-100 h" alt="First Aid Slider 1">
<div class="carousel-caption">
<h3>Learn First Aid Techniques</h3>
<p>Get educated about first aid techniques and be prepared to help others.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/2016-02-17-wilderness-first-aid-basics.svg" class="d-block w-100 h" alt="First Aid Slider 2">
<div class="carousel-caption">
<h3>Be Prepared</h3>
<p>Don't wait for an emergency to happen. Be prepared and learn first aid.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/ACLS-card.svg" class="d-block w-100 h" alt="First Aid Slider 3">
<div class="carousel-caption">
<h3>Save a Life</h3>
<p>Your knowledge of first aid could make a difference and save someone's life.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</main>
<div id="t" class="container-fluid text-center text-white bg-black p-3">
<h1>First Aid Techniques & Tutorials</h2>
<br>
<div class="container">
<div class="row d-flex justify-content-center " >
<div class="col-md-4" data-bs-toggle="modal" data-bs-target="#cpr">
<div class="bg-cpr">
<h2 class="tech">CPR Tutorial</h2>
</div>
<br>
</div>
<div class="modal fade" id="cpr" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-cpr-c text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">CPR Tutorial</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
CPR (cardiopulmonary resuscitation) is a lifesaving technique that can help restore breathing and circulation in an emergency situation. Here's how to perform CPR:
</h4>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1ecEATe3Al0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br>
<h5>
Step 1: Check for responsiveness
</h5>
<p>
Before beginning CPR, check to see if the person is responsive. Gently tap their shoulder and ask if they're okay. If they don't respond, shout for help and begin CPR.
</p>
<h5>
Step 2: Call for emergency services
</h5>
<p>
While starting CPR, ask someone to call for emergency medical services (EMS) or call yourself if no one is available to help.
</p>
<h5>
Step 3: Open the airway
</h5>
<p>
Tilt the person's head back with one hand, and lift their chin with the other. This opens the airway.
</p>
<h5>
Step 4: Check for breathing
</h5>
<p>
Look for chest movement and listen for breathing. If the person isn't breathing, begin CPR immediately.
</p>
<h5>
Step 5: Perform chest compressions
</h5>
<p>
Place the heel of your hand on the center of the person's chest, with your other hand on top. Press down firmly and quickly, pushing the chest down about 2 inches. Perform compressions at a rate of 100-120 compressions per minute.
</p>
<h5>
Step 6: Rescue breaths
</h5>
<p>
After 30 chest compressions, give 2 rescue breaths. Tilt the head back again and lift the chin. Pinch the nose shut and give two slow breaths.
</p>
<h5>
Step 7: Repeat chest compressions and rescue breaths
</h5>
<p>
Continue with 30 chest compressions and 2 rescue breaths until EMS arrives or the person starts breathing on their own.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4" data-bs-toggle="modal" data-bs-target="#choking">
<div class="bg-choking">
<h2 class="tech">Choking Tutorial</h2>
</div>
<br>
</div>
<div class="modal fade" id="choking" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-choking-c text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Choking Tutorial</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Choking can be a life-threatening emergency. Here's what to do if someone is choking:
</h4>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GymXjJJ7Ugo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br>
<h5>
Step 1: Ask if they're choking
</h5>
<p>
Ask the person if they're choking. If they can't speak, cough, or breathe, assume they are choking.
</p>
<h5>
Step 2: Encourage coughing
</h5>
<p>
Encourage the person to cough to try and dislodge the object.
</p>
<h5>
Step 3: Perform abdominal thrusts
</h5>
<p>
Stand behind the person and wrap your arms around their waist. Make a fist with one hand and place it above their navel. Grasp your fist with your other hand and pull sharply inwards and upwards. Repeat until the object is dislodged or the person becomes unconscious.
</p>
<h5>
Step 4: Perform CPR if necessary
</h5>
<p>
If the person becomes unconscious, start CPR immediately.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-wound" data-bs-toggle="modal" data-bs-target="#wound">
<h2 class="tech">Wound Care Tutorial</h2>
</div>
<br>
</div>
<div class="modal fade" id="wound" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-wound-c text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Wound Care Tutorial</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Wound care is an important first aid skill that can help prevent infection and promote healing. Here's what to do if someone has a wound:
</h4>
<br>
<br>
<h5>
Step 1: Stop the bleeding
</h5>
<p>
Apply direct pressure to the wound with a clean cloth or bandage until the bleeding stops. Elevate the wound if possible.
</p>
<h5>
Step 2: Clean the wound
</h5>
<p>
Rinse the wound with clean water and remove any debris or dirt. If the wound is deep or contaminated, seek medical attention.
</p>
<h5>
Step 3: Apply an antibiotic ointment and cover the wound
</h5>
<p>
Apply a thin layer of antibiotic ointment and cover the wound with a sterile bandage or gauze.
</p>
<h5>
Step 4: Check for signs of infection
</h5>
<p>
Check the wound daily for signs of infection, such as redness, swelling, warmth, or pus. Seek medical attention if necessary.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-kit" data-bs-toggle="modal" data-bs-target="#kit">
<h2 class="tech">First Aid Kit Tutorial</h2>
</div>
<br>
</div>
<div class="modal fade" id="kit" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-kit-c text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">First Aid Kit Tutorial</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>First Aid Kit Tutorial</h4>
<p>A well-stocked first aid kit can help you respond quickly to injuries and emergencies. Here's what to include:</p>
<ol>
<li>Adhesive bandages in various sizes</li>
<li>Gauze pads and rolls</li>
<li>Adhesive tape</li>
<li>Antiseptic wipes or spray</li>
<li>Scissors</li>
<li>Tweezers</li>
<li>Disposable gloves</li>
<li>Instant cold packs</li>
<li>Thermometer</li>
<li>Flashlight with extra batteries</li>
<li>First aid manual or guide</li>
</ol>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-training" data-bs-toggle="modal" data-bs-target="#training">
<h2 class="tech">First Aid Training Tutorial</h2>
</div>
<br>
</div>
<div class="modal fade" id="training" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-training-c text-center">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">First Aid Training Tutorial</h1>
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>
Becoming trained in first aid can help you respond to emergencies with confidence and effectiveness. Here's how to become trained in first aid:
</h4>
<br>
<h5>
Step 1: Find a course
</h5>
<p>
Look for a local organization that offers first aid training courses such as the Jordan Red Crescent.
</p>
<h5>
Step 2: Choose a course level
</h5>
<p>
Select a course level appropriate for your needs. Basic courses cover CPR and basic first aid, while advanced courses cover more specialized topics such as wilderness first aid.
</p>
<h5>
Step 3: Attend the course
</h5>
<p>
Attend the course and participate fully in the training activities.
</p>
<h5>
Step 4: Get certified
</h5>
<p>
Upon completion of the course, receive a certification that indicates your training level.
</p>
<h5>
Step 5: Practice and refresh regularly
</h5>
<p>
Practice your first aid skills regularly and refresh your knowledge with continuing education courses. This will help you maintain your skills and stay prepared for emergencies.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer-->
<footer class="bg-dark text-light py-3 text-center">
2023 First Aid Website | All rights reserved.
</footer>
<script src="./libs/jQuery/jquery-3.6.0.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/search.js"></script>
</body>
</html>