-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (115 loc) · 4.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!-- import Bootstrap icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
/>
<!-- import html2canvas website -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" defer></script>
<!-- import the webpage's stylesheet -->
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css"/>
<!-- FONT -->
<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=Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<!-- this is the start of content -->
<body>
<h1> <p style="background-color:red">HURRICANE CHECKLIST</p> </h1>
</body>
<div class="container">
<i class="bi bi-caret-left-fill left" onclick="goBack()"></i>
<i class="bi bi-caret-right-fill right" onclick="goForward()"></i>
<section class="full-screen" id="slide-1">
<button onclick="openChecklist()">
Open Checklist
</button>
<p>
Have you ever wondered how to prepare for a hurricane? Here's a list of things you can do to be prepared for a hurricane!
</p>
<h2>
<center> <a href="default.asp">
</a></center> </h2>
<h3>Have you prepared for the worst? Here's a helpful checklist to keep you prepared.</h3>
<a href="default.asp">
</a>
<body>
<section class="full-screen hidden" id="slide-2">
<button onclick="openChecklist()">
Open Checklist
</button>
<p>Make a plan
<ul style=“list-style-type:square”>
<li>Gather emergency supplies</li>
<li>Know the difference between a hurricane “watch” and “warning”</li>
<li>Get your car ready </li>
<li>Get your family and pets ready </li>
<li>Get your home ready </li>
</ul></p>
</section>
<section class="full-screen hidden" id="slide-3">
<button onclick="openChecklist()">
Open Checklist
</button>
<p>As we live in a state of natural disaster, it is crucial to have you, your family and your home prepared for hurricane season. By starting early, you will have a head start stocking up essential items for your home. It is better to over prepare than leaving it for the last minute. Make your preparation easier by downloading this checklist in order to keep yourself safe during the storm!</p>
</section>
<section class="full-screen hidden" id="slide-4">
<button onclick="openChecklist()">
Open Checklist
</button>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/_iv5mTnM7ww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</section>
<section id="checklist" class="noheight">
<h3>
What you need!
</h3>
<div>
<input type="checkbox" name="check1">
<label for="check1">Water</label>
</div>
<div>
<input type="checkbox" name="check2">
<label for="check2">Food</label>
</div>
<div>
<input type="checkbox" name="check3">
<label for="check3">Flashlight and extra batteries</label>
</div>
<div>
<input type="checkbox" name="check4">
<label for="check4">First aid kit</label>
</div>
<div>
<input type="checkbox" name="check5">
<label for="check5">Whistle</label>
</div>
<div>
<input type="checkbox" name="check6">
<label for="check6">Dust Mask</label>
</div>
<div>
<input type="checkbox" name="check7">
<label for="check7">Plastic sheeting and duct tape for sheltering in place</label>
</div>
<div>
<input type="checkbox" name="check8">
<label for="check8">Flood and Homeowner's Insurance Policies</label>
</div>
<div>
<input type="checkbox" name="check8">
<label for="check8">Pictures of property before hurricane</label>
</div>
<button class="download-button" onclick="downloadPNG()">
Download a PNG of your Checklist
</button>
</section>
</body> </div>
</body>
</html>