Hugging Face's logo

Spaces:
SURESHBEEKHANI
/
StudentExamPerformancePrediction
Sleeping

App Files Community
SURESHBEEKHANI commited on
Commit
b27831c
·
verified ·
1 Parent(s): 72475ed

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/home.html +177 -0
  2. templates/index.html +1 -0
templates/home.html ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Student Exam Performance Indicator</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background: linear-gradient(135deg, #71b7e6, #9b59b6);
11
+ font-family: 'Roboto', sans-serif;
12
+ min-height: 100vh;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ }
17
+
18
+ .login {
19
+ background-color: white;
20
+ padding: 40px;
21
+ border-radius: 15px;
22
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
23
+ max-width: 600px;
24
+ width: 100%;
25
+
26
+ }
27
+
28
+ h1 {
29
+ text-align: center;
30
+ margin-bottom: 20px;
31
+ font-size: 2rem;
32
+ color: #333;
33
+ }
34
+
35
+ .form-label {
36
+ font-weight: 500;
37
+ color: #333;
38
+ }
39
+
40
+ .form-control {
41
+ border: 2px solid #e3e3e3;
42
+ border-radius: 10px;
43
+ padding: 10px;
44
+ transition: border-color 0.3s ease;
45
+ }
46
+
47
+ .form-control:focus {
48
+ border-color: #9b59b6;
49
+ box-shadow: 0 0 10px rgba(155, 89, 182, 0.2);
50
+ }
51
+
52
+ .btn-primary {
53
+ background-color: #9b59b6;
54
+ border-color: #9b59b6;
55
+ width: 100%;
56
+ padding: 10px;
57
+ font-size: 1rem;
58
+ border-radius: 10px;
59
+ transition: background-color 0.3s ease;
60
+ }
61
+
62
+ .btn-primary:hover {
63
+ background-color: #8e44ad;
64
+ }
65
+
66
+ h2 {
67
+ text-align: center;
68
+ margin-top: 30px;
69
+ color: #333;
70
+ font-size: 1.5rem;
71
+ }
72
+
73
+ /* Media Query for Mobile */
74
+ @media (max-width: 768px) {
75
+ .login {
76
+ padding: 20px;
77
+ }
78
+
79
+ h1 {
80
+ font-size: 1.5rem;
81
+ }
82
+ }
83
+ </style>
84
+ </head>
85
+ <body>
86
+ <div class="login">
87
+ <h1>Student Exam Performance Indicator</h1>
88
+
89
+ <form action="{{ url_for('predict_datapoint') }}" method="post">
90
+ <h1>
91
+ <legend>Student Exam Performance Prediction</legend>
92
+ </h1>
93
+
94
+ <!-- Gender -->
95
+ <div class="mb-3">
96
+ <label class="form-label">Gender</label>
97
+ <select class="form-control" name="gender" required>
98
+ <option class="placeholder" selected disabled value="">Select your Gender</option>
99
+ <option value="male">Male</option>
100
+ <option value="female">Female</option>
101
+ </select>
102
+ </div>
103
+
104
+ <!-- Race or Ethnicity -->
105
+ <div class="mb-3">
106
+ <label class="form-label">Race or Ethnicity</label>
107
+ <select class="form-control" name="ethnicity" required>
108
+ <option class="placeholder" selected disabled value="">Select Ethnicity</option>
109
+ <option value="group A">Group A</option>
110
+ <option value="group B">Group B</option>
111
+ <option value="group C">Group C</option>
112
+ <option value="group D">Group D</option>
113
+ <option value="group E">Group E</option>
114
+ </select>
115
+ </div>
116
+
117
+ <!-- Parental Level of Education -->
118
+ <div class="mb-3">
119
+ <label class="form-label">Parental Level of Education</label>
120
+ <select class="form-control" name="parental_level_of_education" required>
121
+ <option class="placeholder" selected disabled value="">Select Parent Education</option>
122
+ <option value="associate's degree">Associate's degree</option>
123
+ <option value="bachelor's degree">Bachelor's degree</option>
124
+ <option value="high school">High school</option>
125
+ <option value="master's degree">Master's degree</option>
126
+ <option value="some college">Some college</option>
127
+ <option value="some high school">Some high school</option>
128
+ </select>
129
+ </div>
130
+
131
+ <!-- Lunch Type -->
132
+ <div class="mb-3">
133
+ <label class="form-label">Lunch Type</label>
134
+ <select class="form-control" name="lunch" required>
135
+ <option class="placeholder" selected disabled value="">Select Lunch Type</option>
136
+ <option value="free/reduced">Free/Reduced</option>
137
+ <option value="standard">Standard</option>
138
+ </select>
139
+ </div>
140
+
141
+ <!-- Test Preparation Course -->
142
+ <div class="mb-3">
143
+ <label class="form-label">Test Preparation Course</label>
144
+ <select class="form-control" name="test_preparation_course" required>
145
+ <option class="placeholder" selected disabled value="">Select Test Course</option>
146
+ <option value="none">None</option>
147
+ <option value="completed">Completed</option>
148
+ </select>
149
+ </div>
150
+
151
+ <!-- Writing Score -->
152
+ <div class="mb-3">
153
+ <label class="form-label">Writing Score (out of 100)</label>
154
+ <input class="form-control" type="number" name="writing_score" placeholder="Enter your Writing score" min="0" max="100" required />
155
+ </div>
156
+
157
+ <!-- Reading Score -->
158
+ <div class="mb-3">
159
+ <label class="form-label">Reading Score (out of 100)</label>
160
+ <input class="form-control" type="number" name="reading_score" placeholder="Enter your Reading score" min="0" max="100" required />
161
+ </div>
162
+
163
+ <!-- Submit Button -->
164
+ <div class="mb-3">
165
+ <input class="btn btn-primary" type="submit" value="Predict your Math Score" />
166
+ </div>
167
+ </form>
168
+
169
+ <!-- Display prediction result -->
170
+ <h2>
171
+ The prediction is: {{ results }}
172
+ </h2>
173
+ </div>
174
+
175
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
176
+ </body>
177
+ </html>
templates/index.html ADDED
@@ -0,0 +1 @@
 
 
1
+ <h1>Welcome to the home page</h1>