triflix's picture
Update templates/index.html
40c0576 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Score Predictor</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 py-10">
<div class="max-w-4xl mx-auto bg-white p-8 rounded-2xl shadow-lg">
<h1 class="text-4xl font-bold text-center mb-8">Final Exam Score Predictor</h1>
<form action="/predict" method="post" class="grid grid-cols-1 md:grid-cols-2 gap-6">
{% for field, dtype in [
('Age','number'),
('Gender','select'),
('HoursOfStudyPerDay','number'),
('SchoolAttendanceRate','number'),
('TuitionAccess','select'),
('AveragePreviousScores','number'),
('HoursOfSleep','number'),
('BreakfastDaily','select'),
('ScreenTimeHours','number'),
('PhysicalActivityHours','number'),
('PlaysSport','select'),
('MentalHealthScore','number'),
('ParentalEducationLevel','select'),
('HouseholdIncomeLevel','select'),
('StudyEnvironmentRating','number'),
('FriendSupportScore','number'),
('ParticipatesInClubs','select'),
('PartTimeWork','select')
] %}
<div>
<label class="block text-sm font-medium text-gray-700">{{ field.replace('_',' ') }}</label>
{% if dtype == 'select' %}
<select name="{{ field }}" class="mt-1 block w-full p-2 border rounded" required>
{% if field in ['Gender'] %}
<option>Male</option>
<option>Female</option>
{% elif field in ['TuitionAccess','BreakfastDaily','PlaysSport','ParticipatesInClubs','PartTimeWork'] %}
<option>Yes</option>
<option>No</option>
{% elif field == 'ParentalEducationLevel' %}
<option>High school</option>
<option>Graduate</option>
<option>Postgrad</option>
{% elif field == 'HouseholdIncomeLevel' %}
<option>Low</option>
<option>Medium</option>
<option>High</option>
{% endif %}
</select>
{% else %}
<input type="{{ dtype }}" name="{{ field }}" step="any" value="{{ values.get(field, '') }}" class="mt-1 block w-full p-2 border rounded" required>
{% endif %}
</div>
{% endfor %}
<div class="md:col-span-2">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-xl">Predict Score</button>
</div>
</form>
{% if predicted is not none %}
<div class="mt-8 text-center text-2xl">
<span class="font-bold text-blue-700">Predicted Score: {{ predicted }}</span>
</div>
{% endif %}
</div>
</body>
</html>