Skip to content

Commit c08068e

Browse files
NxNikiNxNiki
committed
build home page and add patient
1 parent dbad770 commit c08068e

File tree

5 files changed

+243
-0
lines changed

5 files changed

+243
-0
lines changed

‎frontend/add_patient.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Add Patient</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
<body>
10+
<h2>Add Patient Information</h2>
11+
12+
<div class="container">
13+
<div class="box">
14+
<label for="patient-name">Patient Name:</label>
15+
<input type="text" id="patient-name" name="patient-name">
16+
</div>
17+
<div class="box">
18+
<label for="patient-id">Patient ID:</label>
19+
<input type="text" id="patient-id" name="patient-id">
20+
</div>
21+
</div>
22+
23+
<div>
24+
<label for="patient-sex">Sex:</label>
25+
<select id="patient-sex" name="patient-sex">
26+
<option value="male">Male</option>
27+
<option value="female">Female</option>
28+
<option value="other">Other</option>
29+
</select>
30+
</div>
31+
<div>
32+
<label for="patient-birthdate">Birth Date:</label>
33+
<input type="date" id="patient-birthdate" name="patient-birthdate">
34+
</div>
35+
36+
<h3>Experiments</h3>
37+
<div id="experiments">
38+
<div class="experiment">
39+
<label for="experiment-name-1">Experiment Name:</label>
40+
<select id="experiment-name-1" name="experiment-name-1">
41+
<option value="exp1">Experiment 1</option>
42+
<option value="exp2">Experiment 2</option>
43+
<option value="exp3">Experiment 3</option>
44+
</select>
45+
<button class="remove-experiment">Remove</button>
46+
</div>
47+
</div>
48+
<button id="add-experiment">Add Experiment</button>
49+
50+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
51+
<script src="js/add_patient.js"></script>
52+
</body>
53+
</html>

‎frontend/css/styles.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* General styles */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f4f4f4;
5+
margin: 0;
6+
padding: 20px;
7+
}
8+
9+
h1, h2, h3 {
10+
color: #333;
11+
margin-bottom: 20px;
12+
}
13+
14+
/* Form elements */
15+
label {
16+
display: inline-block;
17+
margin-bottom: 10px;
18+
font-weight: bold;
19+
}
20+
21+
input[type="text"], input[type="date"], select {
22+
width: 100%;
23+
padding: 8px;
24+
margin-bottom: 20px;
25+
border: 1px solid #ccc;
26+
border-radius: 4px;
27+
box-sizing: border-box;
28+
}
29+
30+
button {
31+
background-color: #007BFF;
32+
color: white;
33+
padding: 10px 15px;
34+
border: none;
35+
border-radius: 4px;
36+
cursor: pointer;
37+
font-size: 16px;
38+
}
39+
40+
button:hover {
41+
background-color: #0056b3;
42+
}
43+
44+
/* Experiment section */
45+
#experiments {
46+
margin-bottom: 20px;
47+
}
48+
49+
.experiment {
50+
background-color: #e9ecef;
51+
padding: 10px;
52+
margin-bottom: 10px;
53+
border-radius: 4px;
54+
}
55+
56+
.experiment label {
57+
margin-bottom: 5px;
58+
font-weight: normal;
59+
}
60+
61+
.experiment select {
62+
width: auto;
63+
}
64+
65+
.remove-experiment {
66+
background-color: #dc3545;
67+
margin-left: 10px;
68+
}
69+
70+
.remove-experiment:hover {
71+
background-color: #c82333;
72+
}
73+
74+
/* Button styles */
75+
#add-experiment, #add-patient {
76+
display: block;
77+
width: auto;
78+
margin-top: 20px;
79+
}
80+
81+
#add-patient {
82+
background-color: #28a745;
83+
}
84+
85+
#add-patient:hover {
86+
background-color: #218838;
87+
}
88+
89+
/* Layout styles */
90+
div {
91+
margin-bottom: 20px;
92+
}
93+
94+
/* Mobile responsiveness */
95+
@media (max-width: 600px) {
96+
body {
97+
padding: 10px;
98+
}
99+
100+
button {
101+
width: 100%;
102+
}
103+
104+
input[type="text"], input[type="date"], select {
105+
width: 100%;
106+
}
107+
}
108+
109+
.container {
110+
display: flex; /* Use flexbox to align items horizontally */
111+
gap: 20px; /* Space between the divs */
112+
}
113+
114+
.box {
115+
flex: 1; /* Each div takes up equal space */
116+
padding: 20px;
117+
background-color: #007BFF;
118+
color: white;
119+
border-radius: 5px;
120+
text-align: center;
121+
}
122+
123+
.box:nth-child(2) {
124+
background-color: #28a745; /* Different background for the second div */
125+
}

‎frontend/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Patient Data Manager</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
<body>
10+
<!-- Your content goes here -->
11+
<h1>Welcome to Your Project</h1>
12+
13+
<!-- User input for name and path -->
14+
<div>
15+
<label for="name">Name:</label>
16+
<input type="text" id="name" name="name">
17+
</div>
18+
19+
<div>
20+
<label for="path">Path to Save Data:</label>
21+
<input type="text" id="path" name="path">
22+
</div>
23+
24+
<!-- Button to add a new patient -->
25+
<button id="add-patient">Add Patient</button>
26+
27+
<div id="data-display"></div>
28+
29+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
30+
<script src="js/main.js"></script>
31+
</body>
32+
</html>

‎frontend/js/add_patient.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
$(document).ready(function() {
2+
let experimentCount = 1;
3+
4+
// Function to add a new experiment field
5+
$('#add-experiment').on('click', function() {
6+
experimentCount++;
7+
const experimentHTML = `
8+
<div class="experiment">
9+
<label for="experiment-name-${experimentCount}">Experiment Name:</label>
10+
<select id="experiment-name-${experimentCount}" name="experiment-name-${experimentCount}">
11+
<option value="exp1">Experiment 1</option>
12+
<option value="exp2">Experiment 2</option>
13+
<option value="exp3">Experiment 3</option>
14+
</select>
15+
<button class="remove-experiment">Remove</button>
16+
</div>
17+
`;
18+
$('#experiments').append(experimentHTML);
19+
});
20+
21+
// Function to remove an experiment field
22+
$('#experiments').on('click', '.remove-experiment', function() {
23+
$(this).parent('.experiment').remove();
24+
});
25+
});

‎frontend/js/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$(document).ready(function() {
2+
$('#add-patient').on('click', function() {
3+
// Open a new window for adding patient information
4+
// window.open('add_patient.html', 'Add Patient', 'width=600,height=400');
5+
// Redirect to the add_patient.html page instead of opening a new window
6+
window.location.href = 'add_patient.html';
7+
});
8+
});

0 commit comments

Comments
 (0)