singhjagpreet's picture
updated index.html
a4f4118
raw
history blame
5.71 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Exam Performance Predictor</title>
<style>
body {
background: url('https://ed.stanford.edu/sites/default/files/news_images/biologygettyimages-535847793.jpg') center/cover no-repeat; /* Replace 'your-background-image.jpg' with the actual path to your image */
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.login {
background-color: rgb(207, 192, 235); /* Set your desired background color */
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(158, 121, 121, 0.1);
}
/* Add any other CSS styles as needed */
</style>
</head>
<body>
<div class="login">
<form action="{{ url_for('predict_datapoint')}}" method="post">
<h1>
<legend>Student Exam Performance Prediction</legend>
</h1>
<div class="mb-3">
<label class="form-label">Gender</label>
<select class="form-control" name="gender" placeholder="Enter you Gender" required>
<option class="placeholder" selected disabled value="">Select your Gender</option>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Race or Ethnicity</label>
<select class="form-control" name="ethnicity" placeholder="Enter you ethnicity" required>
<option class="placeholder" selected disabled value="">Select Ethnicity</option>
<option value="group A">
Group A
</option>
<option value="group B">
Group B
</option>
<option value="group C">
Group C
</option>
<option value="group D">
Group D
</option>
<option value="group E">
Group E
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Parental Level of Education</label>
<select class="form-control" name="parental_level_of_education"
placeholder="Enter you Parent Education" required>
<option class="placeholder" selected disabled value="">Select Parent Education</option>
<option value="associate's degree">
associate's degree
</option>
<option value="bachelor's degree">
bachelor's degree
</option>
<option value="high school">
high school
</option>
<option value="master's degree">
master's degree
</option>
<option value="some college">
some college
</option>
<option value="some high school">
some high school
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Lunch Type</label>
<select class="form-control" name="lunch" placeholder="Enter you Lunch" required>
<option class="placeholder" selected disabled value="">Select Lunch Type</option>
<option value="free/reduced">
free/reduced
</option>
<option value="standard">
standard
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Test preparation Course</label>
<select class="form-control" name="test_preparation_course" placeholder="Enter you Course"
required>
<option class="placeholder" selected disabled value="">Select Test_course</option>
<option value="none">
None
</option>
<option value="completed">
Completed
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Writing Score out of 100</label>
<input class="form-control" type="number" name="reading_score"
placeholder="Enter your Writing Score score" min='0' max='100' />
</div>
<div class="mb-3">
<label class="form-label">Reading Score out of 100</label>
<input class="form-control" type="number" name="writing_score"
placeholder="Enter your Reading Score" min='0' max='100' />
</div>
<div class="mb-3">
<input class="btn btn-primary" type="submit" value="Predict your Maths Score" required />
</div>
</form>
<h2>
The Predicted Score: {{results}}
</h2>
</div>
</body>
</html>