-
Notifications
You must be signed in to change notification settings - Fork 0
/
tracker.html
364 lines (350 loc) · 13.1 KB
/
tracker.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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
color: #FFFFF0;
font-family: Comfortaa;
background-color: rgb(21, 50, 101);
text-align: center;
}
#previous {
background-color: #005EA0; /* Light Blue */
border: none;
color: white;
color: #FFFFF0;
font-family: "Comfortaa", cursive;
background-color: rgb(21, 50, 101);
text-align: center;
}
#nav{
font-family: Comfortaa;
height: 75px;
background-color: #153265;/*#A9A9A9;/*rgb(255, 255, 240); /*rgb(236, 235, 228);/*rgb(255, 255, 240);*/
padding-top: 20px;
position: fixed;
padding-left: 20px;
z-index: 10;
width: 100%;
}
/*#nav img{
float:left;
height: 50px;
}*/
#nav h1{
float: left;
color: #FFFFF0; /*rgb(21, 50, 101); /*rgb(120, 133, 133); /*rgb(236, 235, 228);*/
}
#nav li{
margin-top: 25px;
float: right;
margin-right: 30px;
border-left: solid #FFFFF0 2px;
padding-left: 30px;
}
#nav li a{
color: #FFFFF0;;
text-decoration: none;
}
#nav li a:hover{
color: #FFFFF0;;
}
#nav ul{
list-style: none;
color: rgb(0, 94, 160);
display: block;
}
#about{
padding-right: 50px;
}
#previous {
background-color: #005EA0; /* Light Blue */
color: #FFFFF0;
border: solid #FFFFF0 1px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Comfortaa;
}
#next {
background-color: #153265; /* Blue */
border: none;
border: solid #FFFFF0 1px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Comfortaa;
margin-bottom: 50px;
}
#submit {
background-color: #4A6A51; /* Green */
border: none;
border: solid #FFFFF0 1px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Comfortaa;
}
#centerbody{
height: 200px;
width: 500px;
padding: 13% 5%;
background-color: #266097;
margin: 0;
position: absolute;
top: 50%;
width: 75%;
padding: 13% 5%;
background-color: rgb(21, 50, 101);
margin-top: 100px;
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#centerbody h1{
font-size: 100px;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
font-size: 30px;
font-weight: 20px;
}
.active-slide{
opacity: 1;
z-index: 2;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
.answers {
text-align: left;
display: inline-block;
font-size: 20px;
margin-top: 20px;
}
.answers label{
display: block;
margin-bottom: 10px;
}
#results{
margin-top: 50px;
margin-bottom: 20px;
}
#previous{
margin-top: 20px;
}
#next{
margin-top: 30px;
}
.dropdownbutton {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
font-family: Comfortaa;
}
.dropdownbutton:hover, .dropbtn:focus {
background-color: #2980B9;
}
.mood_dropdown .feelings_dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-width: 300px;
margin: auto;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}
.resolution {
display: none;
padding: 10px 20px;
border: 2px #FFFFF0 solid;
background-color: #153265;
margin-bottom: 50px;
}
/*footer{
margin-top: 100px;
height: 30px;
width: 100%;
background-color: rgb(21, 50, 101);
padding-top: 10px;
padding-bottom: 5px;
bottom: 0;
margin-bottom: 0;
clear: both;
color: rgb(255, 255, 240);
}
footer p{
text-align: center;
color: rgb(255, 255, 240);
}
footer a{
text-decoration: none;
}*/
</style>
</head>
<body>
<div id="nav">
<a href = "index.html"> <h1>Mental Health Quiz</h1> </a>
<ul>
<li id="about"><a href="about.html">ABOUT</a></li>
<li id="thispage"><a href="resources.html">RESOURCES</a></li>
<li><a href="quiz.html">TAKE THE QUIZ</a></li>
</ul>
</div>
<div id="centerbody">
<h1>Mental Health Tracker</h1>
<div class="mood_dropdown">
<button onclick="showMoodDrop()" class="dropdownbutton">How do you feel about yourself?</button>
<div id="mood" class="dropdown-content">
<a onclick="showResults('rested')">Rested</a>
<a onclick="showResults('stressed')">Stressed</a>
<a onclick="showResults('lonely')">Lonely</a>
<a onclick="showResults('content')">Content</a>
<a onclick="showResults('suicidal')">Suicidal</a>
<a onclick="showResults('energetic')">Energetic</a>
<a onclick="showResults('inspired')">Inspired</a>
<a onclick="showResults('tranquil')">Tranquil</a>
<a onclick="showResults('worried')">Worried</a>
<a onclick="showResults('hurt')">Hurt</a>
<a onclick="showResults('insane')">Insane</a>
<a onclick="showResults('fatigued')">Fatigued</a>
</div>
</div>
<br>
<br>
<br>
<div class="feelings_dropdown">
<button onclick="showFeelingsDrop()" class="dropdownbutton">How do you feel towards others?</button>
<div id="getAlong" class="dropdown-content">
<a onclick="showResults('grateful')">Grateful</a>
<a onclick="showResults('close')">Close</a>
<a onclick="showResults('distant')">Distant</a>
<a onclick="showResults('envious')">Envious</a>
<a onclick="showResults('resentful')">Resentful</a>
<a onclick="showResults('reclusive')">Reclusive</a>
<a onclick="showResults('proud')">Proud</a>
<a onclick="showResults('loving')">Loving</a>
<a onclick="showResults('peaceful')">Peaceful</a>
<a onclick="showResults('worried')">Worried</a>
<a onclick="showResults('hearty')">Hearty</a>
<a onclick="showResults('welcome')">Welcome</a>
<a onclick="showResults('annoyed')">Annoyed</a>
</div>
</div>
<br>
<div class="resolution" id="rested">
rested - Sounds like you have a good night's sleep. Now that you're well rested, have some good food and do what you need to do to take on the day.
</div>
<div class="resolution" id="stressed">
stressed - I'm sorry you feel that way. It can be hard when you have a lot of work to do or a lot of pressure on your shoulders. Take a break, rest, and do something you enjoy, because your mental health is more important than any other work. If necessary, talk with a professional or loved one as well.
</div>
<div class="resolution" id="lonely">
lonely - Especially during this pandemic, times can be tough and you can feel very isolated. Talk over a voice or face chat or text someone you know. If that is not possible, do something you enjoy and call a national helpline, which can be found in our resources section.
</div>
<div class="resolution" id="content">
content - Great! To keep feeling content, do things you enjoy and make sure you sleep and eat well.
</div>
<div class="resolution" id="suicidal">
suicidal - I'm sorry you feel that way. First, take 10 deep breaths and clear your mind for a minute by doing something you enjoy or by going outside. Then, talk to a loved one, a healthcare professional, or call a national helpline, all of whom can assist you.
</div>
<div class="resolution" id="energetic">
energetic - Great! Now, use that energy productively to exercise, complete work, or do something else you love.
</div>
<div class="resolution" id="inspired">
inspired - Wow! That's a great feeling. Put that inspiration to use and do something creative, something you love, or talk to someone else about this inspiration.
</div>
<div class="resolution" id="tranquil">
tranquil - Great! Feeling peaceful is always a great feeling. Using that peace, do something relaxing or complete some work that you would like to do.
</div>
<div class="resolution" id="worried">
worried - I'm sorry you feel that way,that must be tough. If you feel worried, try going outside, meditating, or doing something you love to clear your mind. Then, talk to a loved one or professional if you still feel that way. Most importantly, take a break from thinking about the thing that makes you worried.
</div>
<div class="resolution" id="hurt">
hurt - Oh, being hurt is never a good feeling. I'm sorry that you feel like that. Take a break and do something you love, meditate, or go outside, and most importantly, talk to a loved one or professional about your feelings.
</div>
<div class="resolution" id="insane">
insane - I'm sorry you feel that way. Just take a few minutes and meditate, go outside, or do something relaxing. Then, once you have calmed down a bit, talk to a loved one or professional about your feelings.
</div>
<div class="resolution" id="fatigued">
fatigued - Oh, I'm sorry you feel that way. If you are fatigued, try taking a nap, eating a good meal, or doing something relaxing. Often times it is better to take a break and complete something at a later time when you are not fatigued.
</div>
<div class="resolution" id="grateful">
grateful - It's great that you feel that way! Talk to your loved ones and do something nice for them today. This can even be as small as just calling them and saying a thank you.
</div>
<div class="resolution" id="close">
close - That’s great! Talk to your loved ones about how you feel. I’m sure they’ll love to hear it!
</div>
<div class="resolution" id="distant">
distant - Oh, I’m sorry you feel that way. Talk to your loved ones or do something relaxing to take you mind off of this. Remember, communication is key here.
</div>
<div class="resolution" id="envious">
envious - Oh, I’m sorry you feel that way. If you feel envy, talk to your loved ones about this and why you feel that way. Communication always makes you feel better!
</div>
<div class="resolution" id="resentful">
resentful - I’m sorry you feel that way. Sometimes, communication is what’s necessary to clear up any resent. And, if you don’t feel comfortable doing that, try doing something relaxing to calm yourself down.
</div>
<div class="resolution" id="reclusive">
reclusive - I’m sorry you feel that way. Get in touch with your loved ones, because they would love to hear from you!
</div>
<div class="resolution" id="proud">
proud - That’s great! Using that pride, do something you enjoy, some work you have to finish, or just take a break from everything and go outside for a minute.
</div>
<div class="resolution" id="loving">
loving - That’s great! Tell your loved how you feel, I’m sure they’re love to hear it!
</div>
<div class="resolution" id="peaceful">
peaceful - That’s great! Using that peace, do something relaxing, go outside, or do some work that you’ve been trying to finish up.
</div>
<div class="resolution" id="worried">
worried - I’m sorry you feel that way. Try taking a walk, doing something you enjoy, or just talking to a loved one or professional.
</div>
<div class="resolution" id="hearty">
hearty - That’s great! Talk to your loved ones or do something you enjoy.
</div>
<div class="resolution" id="welcome">
welcome - That’s great! Tell your loved ones about how you feel and try to do something nice for them in return!
</div>
<div class="resolution" id="annoyed">
annoyed - I’m sorry you feel that way. Try taking a walk, meditating, or doing something you enjoy to calm down a little. Then, communicate with those who make you feel annoyed, with a loved one, or with a professional so that you no longer feel annoyed.
</div>
</div>
<script src="tracker.js"></script>
</body>