ShadowTEM/Heart_attack
0
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Heart Attack Detection</title>
7 <!-- Bootstrap CSS -->
8 <link
9 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
10 rel="stylesheet"
11 />
12 <style>
13 body {
14 background-color: #f8f9fa;
15 }
16 .container {
17 margin-top: 30px;
18 padding: 20px;
19 background: white;
20 border-radius: 8px;
21 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
22 }
23 .form-label {
24 font-weight: bold;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="container">
30 <h2 class="text-center">Heart Attack Risk Prediction</h2>
31 <p class="text-center text-muted">
32 Fill out the form below to check your risk level
33 </p>
34 <form action="/predict" method="POST">
35 <!-- Form Fields -->
36 <div class="row g-3">
37 <div class="col-md-6">
38 <label for="age" class="form-label">Age</label>
39 <input
40 type="number"
41 class="form-control"
42 id="age"
43 name="Age"
44 required
45 />
46 </div>
47 <div class="col-md-6">
48 <label for="gender" class="form-label">Gender</label>
49 <select class="form-select" id="gender" name="Gender" required>
50 <option value="Male">Male</option>
51 <option value="Female">Female</option>
52 </select>
53 </div>
54 <div class="col-md-6">
55 <label for="region" class="form-label">Region</label>
56 <select class="form-select" id="Region" name="Region" required>
57 <option value="Urban">Urban</option>
58 <option value="Rural">Rural</option>
59 <option value="Suburban">Suburban</option>
60 </select>
61 </div>
62 <div class="col-md-6">
63 <label for="blood_pressure" class="form-label">Blood Pressure</label>
64 <input
65 type="number"
66 step="0.1"
67 class="form-control"
68 id="blood_pressure"
69 name="Blood_Pressure"
70 required
71 />
72 </div>
73 <div class="col-md-6">
74 <label for="cholesterol" class="form-label">Cholesterol</label>
75 <input
76 type="number"
77 step="0.1"
78 class="form-control"
79 id="cholesterol"
80 name="Cholesterol"
81 required
82 />
83 </div>
84 <div class="col-md-6">
85 <label for="bmi" class="form-label">BMI</label>
86 <input
87 type="number"
88 step="0.1"
89 class="form-control"
90 id="bmi"
91 name="BMI"
92 required
93 />
94 </div>
95 <div class="col-md-6">
96 <label for="heart_rate" class="form-label">Heart Rate</label>
97 <input
98 type="number"
99 class="form-control"
100 id="heart_rate"
101 name="Heart_Rate"
102 required
103 />
104 </div>
105 <div class="col-md-6">
106 <label for="exercise_level" class="form-label">Exercise Level</label>
107 <select
108 class="form-select"
109 id="exercise_level"
110 name="Exercise_Level"
111 required
112 >
113 <option value="Low">Low</option>
114 <option value="Moderate">Moderate</option>
115 <option value="High">High</option>
116 </select>
117 </div>
118 <div class="col-md-6">
119 <label for="smoking" class="form-label">Smoking</label>
120 <select class="form-select" id="smoking" name="Smoking" required>
121 <option value="True">True</option>
122 <option value="False">False</option>
123 </select>
124 </div>
125 <div class="col-md-6">
126 <label for="diabetes" class="form-label">Diabetes</label>
127 <select class="form-select" id="diabetes" name="Diabetes" required>
128 <option value="True">True</option>
129 <option value="False">False</option>
130 </select>
131 </div>
132 <div class="col-md-6">
133 <label for="family_history" class="form-label">Family History</label>
134 <select
135 class="form-select"
136 id="family_history"
137 name="Family_History"
138 required
139 >
140 <option value="True">True</option>
141 <option value="False">False</option>
142 </select>
143 </div>
144 <div class="col-md-6">
145 <label for="stress_level" class="form-label">Stress Level</label>
146 <input
147 type="number"
148 step="1"
149 min="1"
150 max="10"
151 class="form-control"
152 id="stress_level"
153 name="Stress_Level"
154 required
155 />
156 </div>
157 <div class="col-md-6">
158 <label for="angina" class="form-label">Angina</label>
159 <select class="form-select" id="angina" name="Angina" required>
160 <option value="True">True</option>
161 <option value="False">False</option>
162 </select>
163 </div>
164 <div class="col-md-6">
165 <label for="heart_disease_history" class="form-label">Heart Disease History</label>
166 <select
167 class="form-select"
168 id="heart_disease_history"
169 name="Heart_Disease_History"
170 required
171 >
172 <option value="True">True</option>
173 <option value="False">False</option>
174 </select>
175 </div>
176 <div class="col-md-6">
177 <label for="diet" class="form-label">Diet</label>
178 <select class="form-select" id="diet" name="Diet" required>
179 <option value="Healthy">Healthy</option>
180 <option value="Mixed">Mixed</option>
181 <option value="Unhealthy">Unhealthy</option>
182 </select>
183 </div>
184 <div class="col-md-6">
185 <label for="sleep_hours" class="form-label">Sleep Hours</label>
186 <input
187 type="number"
188 step="0.1"
189 class="form-control"
190 id="sleep_hours"
191 name="Sleep_Hours"
192 required
193 />
194 </div>
195 <div class="col-md-6">
196 <label for="occupation" class="form-label">Occupation</label>
197 <select
198 class="form-select"
199 id="occupation"
200 name="Occupation"
201 required
202 >
203 <option value="Employed">Employed</option>
204 <option value="Student">Student</option>
205 <option value="Unemployed">Unemployed</option>
206 <option value="Retired">Retired</option>
207 </select>
208 </div>
209 <div class="col-md-6">
210 <label for="income_level" class="form-label">Income Level</label>
211 <select
212 class="form-select"
213 id="income_level"
214 name="Income_Level"
215 required
216 >
217 <option value="Middle">Middle</option>
218 <option value="Low">Low</option>
219 <option value="High">High</option>
220 </select>
221 </div>
222 <div class="col-md-6">
223 <label for="physical_activity" class="form-label">Physical Activity</label>
224 <select
225 class="form-select"
226 id="physical_activity"
227 name="Physical_Activity"
228 required
229 >
230 <option value="Low">Low</option>
231 <option value="Moderate">Moderate</option>
232 <option value="High">High</option>
233 </select>
234 </div>
235 <div class="col-md-6">
236 <label for="education_level" class="form-label">Education Level</label>
237 <select
238 class="form-select"
239 id="education_level"
240 name="Education_Level"
241 required
242 >
243 <option value="Secondary">Secondary</option>
244 <option value="Primary">Primary</option>
245 <option value="Higher">Higher</option>
246 </select>
247 </div>
248 <div class="col-md-6">
249 <label for="marital_status" class="form-label">Marital Status</label>
250 <select
251 class="form-select"
252 id="marital_status"
253 name="Marital_Status"
254 required
255 >
256 <option value="Divorced">Divorced</option>
257 <option value="Single">Single</option>
258 <option value="Married">Married</option>
259 <option value="Widowed">Widowed</option>
260 </select>
261 </div>
262 <div class="col-md-6">
263 <label for="medication" class="form-label">Medication</label>
264 <select
265 class="form-select"
266 id="medication"
267 name="Medication"
268 required
269 >
270 <option value="True">True</option>
271 <option value="False">False</option>
272 </select>
273 </div>
274 <div class="col-md-6">
275 <label for="health_awareness" class="form-label">Health Awareness</label>
276 <input
277 type="number"
278 step="0.1"
279 min="1"
280 max="5"
281 class="form-control"
282 id="health_awareness"
283 name="Health_Awareness"
284 required
285 />
286 </div>
287 <div class="col-md-6">
288 <label for="daily_water_intake" class="form-label">Daily Water Intake (liters)</label>
289 <input
290 type="number"
291 step="0.1"
292 min="1"
293 max="5"
294 class="form-control"
295 id="daily_water_intake"
296 name="Daily_Water_Intake"
297 required
298 />
299 </div>
300 <div class="col-md-6">
301 <label for="mental_health" class="form-label">Mental Health</label>
302 <input
303 type="number"
304 step="0.1"
305 min="1"
306 max="10"
307 class="form-control"
308 id="mental_health"
309 name="Mental_Health"
310 required
311 />
312 </div>
313 <div class="col-md-6">
314 <label for="obesity" class="form-label">Obesity</label>
315 <select class="form-select" id="obesity" name="Obesity" required>
316 <option value="True">True</option>
317 <option value="False">False</option>
318 </select>
319 </div>
320 <div class="col-12 text-center mt-4">
321 <button type="submit" class="btn btn-primary">Predict Risk</button>
322 </div>
323 </div>
324 </form>
325 </div>
326
327 <!-- Bootstrap JS -->
328 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
329 </body>
330</html>
331