-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (222 loc) · 8.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700&display=swap");
</style>
<title>Diabetes Traveller</title>
</head>
<body>
<div>
<h1>Welcome to Diabetes Traveller!</h1>
<p>
This is a tool to generate a wallet/pocket translation card to print out
and take with you on all your adventures. Sometimes when your blood
sugar is acting up, you need to ask for help. Cards will be generated
with helpful phrases in the language you select, and will include a
phonetic pronunciation. When in doubt, you can always point!
</p>
<p>
<bold
>Spotted an error? Think there's a phrase we need that's not currently
available? Wish to contribute phrases in your language? AWESOME!
Please e-mail us
<a href="mailto:diabetestraveller@gmail.com"
>diabetestraveller@gmail.com</a
>
or considering submitting a
<a href="https://github.com/BergFulton/diabetes-traveller"
>pull request</a
>
or
<a href="https://github.com/BergFulton/diabetes-traveller/issues"
>opening an issue</a
>
on our GitHub page.
</bold>
</p>
</div>
<div class="dropdown-container">
<h2>Please select the language of the place you'll be travelling to</h2>
<select name="language-dropdown" id="language-list">
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="italian">Italian</option>
<option value="german">German</option>
<option value="russian">Russian</option>
<option value="chinese-mandarin">Chinese (Mandarin)</option>
<option value="chinese-cantonese">Chinese (Cantonese)</option>
<option value="japanese">Japanese</option>
<option value="portugese">Portugese</option>
<option value="finnish">Finnish</option>
<option value="swedish">Swedish</option>
<option value="dutch">Dutch</option>
</select>
</div>
<div class="phrases-container hide">
<h2>Phrases</h2>
<p>
We've pre-selected some useful phrases. To customize your translation
card with only the phrases you want, just check/uncheck the boxes below.
</p>
<h3>Phrases for the traveller with diabetes</h3>
<div>
<input type="checkbox" id="please-help" name="please-help" checked />
<label for="please-help">Please help me.</label>
</div>
<div>
<input type="checkbox" id="i-have" name="i-have" checked />
<label for="i-have">I have diabetes.</label>
</div>
<div>
<input type="checkbox" id="i-have-t1" name="i-have-t1" />
<label for="i-have-t1">I have Type 1 diabetes.</label>
</div>
<div>
<input type="checkbox" id="i-have-t2" name="i-have-t2" />
<label for="i-have-t2">I have Type 2 diabetes.</label>
</div>
<div>
<input type="checkbox" id="feel-well" name="feel-well" />
<label for="feel-well">I feel unwell.</label>
</div>
<div>
<input type="checkbox" id="sugar-low" name="sugar-low" />
<label for="sugar-low">My blood sugar is low.</label>
</div>
<div>
<input type="checkbox" id="sugar-high" name="sugar-high" />
<label for="sugar-high">My blood sugar is high.</label>
</div>
<div>
<input type="checkbox" id="need-sugar" name="need-sugar" />
<label for="need-sugar">I need sugar quickly.</label>
</div>
<div>
<input type="checkbox" id="need-insulin" name="need-insulin" />
<label for="need-insulin">I need insulin.</label>
</div>
<div>
<input
type="checkbox"
id="need-insulin-syringes"
name="need-insulin-syringes"
/>
<label for="need-insulin-syringes">I need syringes for insulin.</label>
</div>
<div>
<input type="checkbox" id="need-ambulance" name="need-ambulance" />
<label for="need-ambulance">I need an ambulance.</label>
</div>
<div>
<input type="checkbox" id="need-hospital" name="need-hospital" />
<label for="need-hospital">I need to go to hospital.</label>
</div>
<div>
<input type="checkbox" id="need-pharmacy" name="need-pharmacy" />
<label for="need-pharmacy"
>I need to go to the pharmacy. Where is the pharmacy?</label
>
</div>
<div>
<input type="checkbox" id="wear-pump" name="wear-pump" />
<label for="wear-pump">I use an insulin pump.</label>
</div>
<div>
<input type="checkbox" id="out-of-insulin" name="out-of-insulin" />
<label for="out-of-insulin">I do not have any insulin.</label>
</div>
<div>
<input
type="checkbox"
id="out-of-insulin-buy"
name="out-of-insulin-buy"
/>
<label for="out-of-insulin-buy">Where can I buy insulin?</label>
</div>
<div>
<input
type="checkbox"
id="out-of-insulin-cost"
name="out-of-insulin-cost"
/>
<label for="out-of-insulin-cost">What is the price of insulin?</label>
</div>
</div>
<div>
<h2>Include an Emergency Card?</h2>
<p>
Do you want to include an emergency card? It will include your name,
birth date, emergency contact person, and the number of the emergency
services contact in your country, where available (for example 911 in
the US, 999 in the UK). Please double check this number upon your
arrival, as many countries will have local services but no national
emergency contact number.
</p>
<div>
<input
type="checkbox"
id="emergency-card-yes"
name="emergency-card-yes"
/>
<label for="oemergency-card-yes">Yes, please!</label>
</div>
<div>
<input
type="checkbox"
id="emergency-card-no"
name="emergency-card-no"
/>
<label for="emergency-card-no">No, thank you.</label>
</div>
<div class="emergecy-card-data hide">
<div>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" />
</div>
<div>
<label for="surname">Surname/Last Name/Family Name</label>
<input type="text" id="surname" name="surname" />
</div>
<div>
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" />
</div>
<div>
My Prounouns Are:
<input type="checkbox" id="pronouns-she" name="pronouns-she" />
<label for="pronouns-she">She/Her/Hers</label>
<input type="checkbox" id="pronouns-he" name="pronouns-he" />
<label for="pronouns-he">He/Him/His</label>
<input type="checkbox" id="pronouns-they" name="pronouns-they" />
<label for="pronouns-they">They/Them/Theirs</label>
<input type="checkbox" id="pronouns-self" name="pronouns-self" />
<label for="pronouns-self"
><input type="text" id="pronous-self-declare"
/></label>
</div>
<div>
<label for="emergency-contact">Emergency Contact</label>
<input type="text" id="emergency-contact" name="emergency-contact" />
</div>
<div>
<label for="allergies">Allergies</label>
<input type="text" id="allergies" name="allergies" />
</div>
<div>
<label for="religion">Religion/Religious Observance</label>
<input type="text" id="religion" name="religion" />
</div>
<div>
<label for="other">Other important information (DNR, etc)</label>
<input type="text" id="other" name="other" />
</div>
</div>
</div>
<script src="scripts/scripts.js"></script>
</body>
</html>