-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhead-result.ejs
258 lines (228 loc) · 8.05 KB
/
head-result.ejs
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Result</title>
<style>
/* Your existing styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.navbar {
background-color: #d4f7b0;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-evenly;
padding: 20px 0px;
font-size: xx-large;
z-index: 3;
}
nav a {
text-decoration: none;
font-size: 30px;
color: black;
}
nav a:hover {
color: rgb(128, 109, 146);
}
.quicksand {
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.container {
max-width: 600px;
margin: 80px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
p {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
background: #f9f9f9;
margin: 10px 0;
padding: 15px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
ul li strong {
color: #333;
}
button.retake-button,
button.download-button {
display: block;
width: 600px;
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
margin: 20px auto 0;
font-size: 16px;
}
button.retake-button:hover,
button.download-button:hover {
background-color: #45a049;
}
/* Risk level text colors */
.risk-low {
font-weight: 700;
color: green;
}
.risk-moderate {
font-weight: 700;
color: orange;
}
.risk-high {
font-weight: 700;
color: red;
}
.image-container img {
width: 600px;
}
@media (max-width: 600px) {
.container {
padding: 15px;
margin: 20px;
}
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
ul li {
font-size: 14px;
}
button.retake-button,
button.download-button {
width: 100%;
font-size: 14px;
}
}
</style>
</head>
<body>
<nav class="navbar quicksand">
<span style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Talaash Symptom Checker</span>
<a href="/about">About us</a>
</nav>
<div class="container quicksand">
<div class="image-container">
<img src="/images/report.png">
</div>
<!-- <h1>Form Submission Result</h1> -->
<hr>
<p>Thank you for your responses!</p>
<p>Your submitted details:</p>
<ul>
<li><strong>Name:</strong>
<strong>
<%= formData.name || "Not provided" %>
</strong>
</li>
<li><strong>Age:</strong>
<strong>
<%= formData.age || "Not provided" %>
</strong>
</li>
<li><strong>Country:</strong>
<strong>
<%= formData.country || "Not provided" %>
</strong>
</li>
<li><strong>Symptom Area:</strong>
<strong>
<%= formData["symptom-area"] || "Not provided" %>
</strong>
</li>
<li><strong>Symptoms:</strong>
<% if (Array.isArray(formData.symptoms)) { %>
<strong>
<%= formData.symptoms.length ? formData.symptoms.join(", ") : " None provided" %>
</strong>
<% } else { %>
<strong>
<%= formData.symptoms || "None provided" %>
</strong>
<% } %>
</li>
<!-- Display the answers to the 20 questions -->
<% const questions=[ "Do you frequently experience headaches?"
, "Are your headaches typically localized to one area of your head?"
, "Do you experience any visual disturbances (e.g., blurred vision) during your headaches?"
, "Do you have a history of migraine headaches?"
, "Are your headaches accompanied by nausea or vomiting?"
, "Do you experience light or sound sensitivity during your headaches?"
, "Have you noticed any changes in your headache pattern over time?"
, "Do you experience dizziness or vertigo along with your headaches?"
, "Do you often feel lightheaded or unsteady when standing up?"
, "Have you ever experienced a sudden onset of severe dizziness?"
, "Do you feel like the room is spinning when you are dizzy?"
, "Do you have a history of balance problems or coordination issues?"
, "Do you experience headaches that get worse with physical activity?"
, "Are your headaches triggered by certain foods or drinks?"
, "Do you experience a feeling of pressure or tightness in your head?"
, "Do you often feel dizzy when you are in a crowded or enclosed space?"
, "Have you had any recent head injuries or trauma?"
, "Do you experience headaches that wake you up from sleep?"
, "Do you have any history of high blood pressure or cardiovascular issues?"
, "Do you have a history of neurological disorders?" ];%>
<% for (let i=0; i < 20; i++) { %>
<li><strong>Question <%= i + 1 %>:</strong>
<strong>
<%= questions[i] %> - <%= formData[`question${i + 1}`] || "Not answered" %>
</strong>
</li>
<% } %>
</ul>
<hr>
<!-- Display the risk levels for each condition -->
<h2>Risk Levels for Head Conditions:</h2>
<ul>
<% for (let condition in results) { %>
<li><strong>
<%= condition %>:
</strong>
<span class="<%=
results[condition] === 'High' ? 'risk-high' :
results[condition] === 'Moderate' ? 'risk-moderate' :
'risk-low'
%>">
<%= results[condition] %>
</span>
</li>
<% } %>
</ul>
<form action="/symptoms/2" method="get">
<button type="submit" class="retake-button">Retake Test</button>
</form>
<form action="/head-download-pdf" method="get">
<button type="submit" class="download-button">Download PDF</button>
</form>
</div>
</body>
</html>