-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (122 loc) · 6.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medical Symptom Analyzer</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="page-title">Medical Symptom Analyzer</h1>
<form id="symptomForm">
<div class="form-section">
<label for="age" class="form-label">Age:</label>
<input
type="number"
id="age"
class="input-field"
required
min="0"
max="120"
placeholder="Enter your age"
>
<div id="ageError" class="error-message">Please enter a valid age between 0 and 120.</div>
</div>
<div class="form-section">
<label for="gender" class="form-label">Gender:</label>
<select id="gender" class="input-field" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<div id="genderError" class="error-message">Please select a gender.</div>
</div>
<div class="form-section">
<label>Select Your Symptoms:</label>
<div id="symptomsSelection">
<!-- General Symptoms -->
<div class="symptom-category">
<div class="category-title">General Symptoms</div>
<div class="symptoms-container" id="generalSymptoms">
<div class="symptom-button" data-symptom="Fever">Fever</div>
<div class="symptom-button" data-symptom="Fatigue">Fatigue</div>
<div class="symptom-button" data-symptom="Weakness">Weakness</div>
<div class="symptom-button" data-symptom="Chills">Chills</div>
<div class="symptom-button" data-symptom="Night Sweats">Night Sweats</div>
</div>
</div>
<!-- Respiratory Symptoms -->
<div class="symptom-category">
<div class="category-title">Respiratory Symptoms</div>
<div class="symptoms-container" id="respiratorySymptoms">
<div class="symptom-button" data-symptom="Cough">Cough</div>
<div class="symptom-button" data-symptom="Shortness of breath">Shortness of breath</div>
<div class="symptom-button" data-symptom="Sore throat">Sore throat</div>
<div class="symptom-button" data-symptom="Wheezing">Wheezing</div>
<div class="symptom-button" data-symptom="Congestion">Congestion</div>
</div>
</div>
<!-- Digestive Symptoms -->
<div class="symptom-category">
<div class="category-title">Digestive Symptoms</div>
<div class="symptoms-container" id="digestiveSymptoms">
<div class="symptom-button" data-symptom="Nausea">Nausea</div>
<div class="symptom-button" data-symptom="Vomiting">Vomiting</div>
<div class="symptom-button" data-symptom="Diarrhea">Diarrhea</div>
<div class="symptom-button" data-symptom="Abdominal Pain">Abdominal Pain</div>
<div class="symptom-button" data-symptom="Constipation">Constipation</div>
</div>
</div>
<!-- Pain Symptoms -->
<div class="symptom-category">
<div class="category-title">Pain Symptoms</div>
<div class="symptoms-container" id="painSymptoms">
<div class="symptom-button" data-symptom="Headache">Headache</div>
<div class="symptom-button" data-symptom="Body aches">Body aches</div>
<div class="symptom-button" data-symptom="Chest pain">Chest pain</div>
<div class="symptom-button" data-symptom="Joint Pain">Joint Pain</div>
<div class="symptom-button" data-symptom="Muscle Cramps">Muscle Cramps</div>
</div>
</div>
</div>
</div>
<div class="form-section">
<label>Medical History:</label>
<div class="symptoms-container" id="medicalHistoryButtons">
<div class="medical-history-button" data-history="Diabetes">Diabetes</div>
<div class="medical-history-button" data-history="Hypertension">Hypertension</div>
<div class="medical-history-button" data-history="Heart Disease">Heart Disease</div>
<div class="medical-history-button" data-history="Asthma">Asthma</div>
<div class="medical-history-button" data-history="None">None</div>
</div>
</div>
<div class="form-section">
<label for="additionalInfo">Additional Information (Optional):</label>
<textarea
id="additionalInfo"
class="input-field"
rows="4"
placeholder="Provide any additional details about your condition or symptoms..."
></textarea>
</div>
<button type="submit" class="analyze-button">Analyze Symptoms</button>
</form>
<div id="loading">
Analyzing symptoms... Please wait.
</div>
<div id="results">
<h2>Analysis Results</h2>
<div id="resultContent"></div>
</div>
<div class="disclaimer">
<strong>Important Disclaimer:</strong> This is an AI-generated analysis and should not replace professional medical advice.
Always consult with a qualified healthcare professional for accurate diagnosis and treatment. In case of emergency,
seek immediate medical attention.
</div>
</div>
<script src="script.js"></script>
</body>
</html>